/* Readable controls and deliberate spacing at narrow viewports. */
.brand{display:inline-flex;align-items:center;gap:12px}.brand-mark{display:block;width:48px;height:58px;object-fit:contain;flex:none}.brand-type{display:block}footer .brand-mark{width:40px;height:48px}
.portrait img{object-fit:cover;object-position:right center}
.work-panel{min-width:0}
.blue-section{background:#ddf7fb;color:#123b58}.blue-section:before{border-color:#24516e26}.blue-section .eyebrow,.principles li>span{color:#24516e;font-weight:700}.principles li{border-top-color:#24516e40}.principles p{color:#234a63;font-size:15px;font-weight:500;line-height:1.9}.blue-section .brand-wave{opacity:.5}
.scene-tabs button{font-size:14px}.scene-reading p{font-size:14px}.scene-reading>button{font-size:12px}.progress-label{font-size:12px}.experience-bottom a{font-size:14px}.experience-copy p:not(.eyebrow){font-size:16px}.work-buttons button{font-size:14px}.creative-choices button{font-size:15px}.scene-index,.scene-reading>span{font-size:12px}
@media(max-width:800px){.experience-copy p:not(.eyebrow){font-size:15px}.scene-tabs{gap:12px}.scene-tabs button{font-size:12px}.scene-reading p{font-size:12px}.scene-reading>button{font-size:11px}.progress-label{font-size:11px}.experience-bottom a{font-size:12px}.experience-stage{left:-12%;width:124%}.work-buttons button{font-size:13px}.creative-choices button{font-size:14px}}
@media(max-width:520px){.experience-copy h1{font-size:36px}.experience-copy p:not(.eyebrow){font-size:14px}.scene-tabs button{font-size:12px}.scene-reading{gap:7px}.scene-reading>span{font-size:10px}.scene-reading p{font-size:11px}.scene-reading>button{font-size:10px}.progress-label{font-size:10px}.creative-choices button{font-size:13px}.work-buttons button{font-size:12px}.experience-stage{left:-12%;width:124%}.experience-bottom a{font-size:11px}}
@media(max-width:520px){.header .brand{gap:8px;font-size:16px}.header .brand-mark{width:30px;height:40px}.header .brand span{font-size:8px;letter-spacing:.08em}}
/* Layout changes with available space; text stays readable at mobile sizes. */
main,.wrap,.portfolio-detail,.principles>div,.flow-list li,.contact-aside{min-width:0}
.portfolio-art,.portfolio-art canvas{touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.portfolio-art.portfolio-dragging{cursor:grabbing}
.portfolio-art:focus-visible{outline:3px solid #114e94;outline-offset:4px}
.portfolio-art.portfolio-ready .art-caption{display:none}
.creative-reel-controls{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);width:max-content;max-width:calc(100% - 24px);z-index:4;pointer-events:none}
.creative-reel-note{margin:0!important;text-align:center;color:#224b70;font-size:12px!important;line-height:1.6;background:#fffffff2;border-radius:30px;padding:8px 10px;pointer-events:none}
@media(min-width:801px){.creative-reel-note{font-size:13px!important}.creative-reel-note:before{content:'DRAG / ';font-size:10px;letter-spacing:.08em}}
@media(max-width:800px){.portfolio-section .creative-choices{display:flex;overflow-x:auto;overscroll-behavior-inline:contain;margin-top:22px;scrollbar-width:none}.portfolio-section .creative-choices::-webkit-scrollbar{display:none}.portfolio-section .creative-choices button{flex:0 0 auto;min-height:48px;padding:12px 16px;white-space:nowrap}.portfolio-section .creative-choices button span{display:inline;margin-right:7px}.portfolio-stage{gap:22px!important}}
@media(max-width:1000px){.header nav{gap:20px}.header-inner{gap:16px}.header .brand{font-size:20px}.header .brand-mark{width:38px;height:46px}.page-hero.has-page-art{gap:32px}.flow-list{gap:24px}}
@media(max-width:800px){
  .section{padding-block:64px}.page-hero.has-page-art{grid-template-columns:1fr;padding-block:44px;gap:30px}
  .profile-preview{grid-template-columns:1fr;gap:32px}.profile-preview .portrait{width:min(65%,320px);margin:auto}
  .flow-list{grid-template-columns:1fr;gap:24px}.portfolio-stage{grid-template-columns:1fr;gap:28px}
  .portfolio-art{aspect-ratio:1.4}.portfolio-detail{max-width:620px}.portfolio-heading{gap:24px}
  .experience{display:flex;flex-direction:column;height:auto;min-height:0;padding:30px 20px 20px}
  .experience-copy{position:relative;top:auto;left:auto;width:100%;max-width:520px;order:0}
  .experience-copy h1{white-space:normal;font-size:clamp(30px,5.6vw,43px)}
  .experience-stage{position:relative;inset:auto;order:1;flex:none;width:calc(100% + 40px);height:clamp(220px,64vw,460px);margin:4px -20px 0}
  .scene-controls{position:relative;inset:auto;order:2;width:100%;padding:16px;margin-top:8px}
  .experience-bottom{position:relative;inset:auto;order:3;margin-top:18px;gap:12px;flex-wrap:wrap}
  .scene-tabs{gap:8px;justify-content:space-between}.scene-tabs button{min-height:44px;font-size:12px;white-space:normal;text-align:left}
  .scene-reading{flex-wrap:wrap;gap:8px}.scene-reading p{font-size:13px}.scene-reading>button{font-size:12px;min-height:40px}
  .menu-toggle{min-height:44px}.art-steps button,.story-tabs button{min-height:68px}
  .story-tools button{min-height:36px;padding-block:6px;font-size:12px}
}
@media(max-width:600px){
  .wrap{width:calc(100% - 32px)}.header-inner{padding:12px 16px}.header .brand{font-size:17px;gap:8px}.header .brand-mark{width:30px;height:40px}
  h2{font-size:clamp(25px,6.7vw,32px)}h3{font-size:21px}.page-hero.has-page-art h1{font-size:clamp(28px,7.8vw,36px)}
  .page-lead{font-size:15px;line-height:2}.eyebrow{font-size:11px;letter-spacing:.1em}
  .introduction p,.work-panel p,.detail-items p,.measure,.profile-preview p,.check-list li,.activity p,.contact-aside p{font-size:15px;line-height:1.95}
  .work-panel{padding:24px 18px}.work-buttons{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:24px}
  .work-buttons button{padding:10px 6px;font-size:13px;min-height:48px;line-height:1.6}
  .work-panel h3{font-size:clamp(21px,5.5vw,26px);line-height:1.65}.before-after{grid-template-columns:1fr;gap:20px}.before-after p{font-size:14px}
  .fine{font-size:13px!important}.experience{padding-inline:16px}.experience-copy p:not(.eyebrow){font-size:15px}
  .experience-stage{width:calc(100% + 32px);margin-inline:-16px}.scene-controls{padding:14px}
  .scene-tabs button{font-size:12px}.scene-reading>span{font-size:11px}.progress-label{font-size:12px;gap:10px}
  .experience-bottom{inset-inline:auto}.experience-bottom a{font-size:12px}.experience-bottom>span{font-size:9px}
  .portfolio-heading h1,.portfolio-heading h2{font-size:clamp(31px,8.5vw,40px)}.portfolio-heading>p{font-size:15px}
  .portfolio-detail>p:not(.creative-tagline):not(.eyebrow){font-size:15px}.portfolio-detail .eyebrow{font-size:12px}
  .creative-choices{grid-template-columns:1fr 1fr}.creative-choices button{font-size:14px;padding:15px 10px;min-height:76px}
  .service-row-illustrated{grid-template-columns:26px 1fr 80px;gap:10px}.service-story-thumb{width:80px}.service-row-illustrated>p{font-size:15px}.service-row-illustrated .row-link{grid-column:2/-1;grid-row:auto;font-size:14px}
  .story-heading strong{font-size:17px}.story-tabs button,.contact-aside .story-tabs button{font-size:12px}.story-description,.contact-aside .story-description{font-size:14px;min-height:0}
  .story-process{grid-template-columns:repeat(3,1fr);row-gap:10px}.story-process li{font-size:12px}.story-process li:nth-child(3):after{display:none}
  .person-art{height:auto;aspect-ratio:1.15;min-height:290px}.person-signature{left:12px;right:12px;bottom:12px;grid-template-columns:1fr;padding:10px 12px}
  .person-signature strong{font-size:24px}.person-signature span{font-size:11px}.person-signature small{font-size:11px}
  .legal-index{grid-template-columns:1fr}.legal-index a{font-size:14px;padding-block:12px}.legal p{font-size:15px;overflow-wrap:anywhere}.legal h2{font-size:22px}
  .company-info>div{grid-template-columns:1fr;gap:8px}.company-info dt{font-size:14px}.company-info dd{font-size:15px;overflow-wrap:anywhere}
  .consultation-form{padding:26px 18px}.consultation-form input,.consultation-form textarea,.consultation-form select{font-size:16px;padding:12px;min-height:48px}
  .consultation-form label{font-size:15px}.form-actions{display:grid;grid-template-columns:1fr}.form-actions .button{width:100%;font-size:15px;min-height:52px}
  .secondary-actions{grid-template-columns:1fr 1fr;gap:8px}.secondary-actions button{font-size:13px;min-height:44px}
  .footer-top .brand{font-size:18px}.footer-links{gap:12px 20px}.footer-links a{font-size:14px;min-height:40px;display:inline-flex;align-items:center}
}
@media(max-width:360px){.header .brand{font-size:15px}.header-inner{gap:8px}.menu-toggle{padding-inline:8px}.experience-copy h1{font-size:29px}.scene-tabs button{font-size:11px}.person-signature strong{font-size:22px}}

@media(max-width:800px){.service-row-illustrated>.number{grid-column:1;grid-row:1}.service-row-illustrated>div{grid-column:2;grid-row:1;min-width:0}.service-row-illustrated>.row-link{grid-column:2/-1;grid-row:3}.service-row-illustrated>p{grid-row:2}}

@media(max-width:800px){.contact-section .consultation-form{grid-row:1}.contact-section .contact-aside{grid-row:2}}
@media(max-width:600px){h2,h3{text-wrap:balance}.introduction h2 br{display:none}.page-art.contact-art{display:none}.support-map{height:auto;display:grid;gap:12px}.support-map .map-card{position:relative;inset:auto;width:100%;padding:16px 20px}.support-map .map-center{display:none}.page-art .art-title{font-size:21px}.page-art .art-small{font-size:16px}.page-art .art-node text{font-size:23px}.page-art .pipeline-node text{font-size:24px}.art-overline{font-size:10px}.art-description{font-size:14px}.art-steps button{font-size:13px}.art-motion-toggle{position:static;display:block;margin:12px 0 0 auto;font-size:12px;min-height:40px}.contact-art-status{font-size:14px}}
.blog-update-badge{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;margin-left:7px;padding:1px 6px;border:1px solid #b9cce4;border-radius:999px;background:#edf4ff;color:#114e94;font-size:10px;font-weight:700;letter-spacing:.04em;line-height:1.6;white-space:nowrap}
.blog-update-badge[hidden],.blog-update-dot[hidden]{display:none!important}
.menu-toggle{position:relative}.blog-update-dot{position:absolute;right:3px;top:3px;width:6px;height:6px;border-radius:50%;background:#114e94}