/* Desktop content stays in its existing layout. Mobile only changes its presentation. */
.mobile-disclosure,.mobile-disclosure-panel{display:contents}
.mobile-dock,.mobile-fold-toggle,.mobile-rail-controls,.mobile-service-meta{display:none}

@media(max-width:760px){
  :root{--gutter:24px}
  html{scroll-padding-top:24px;scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  body{font-size:16px}
  .site-header,.site-header.on-image{position:relative;height:78px;padding:0 var(--gutter);color:var(--ink);background:var(--paper);border-bottom:1px solid var(--line);gap:20px}
  .site-header>.contact-link{display:none}
  .wordmark{font-size:44px;letter-spacing:-2px}
  .menu-toggle{display:flex;align-items:center;justify-content:flex-end;gap:11px;width:auto;min-width:75px;min-height:44px;padding:8px 0}
  .menu-toggle span{height:auto;background:none;margin:0}
  .menu-label{font-size:14px}
  .menu-lines{display:flex!important;flex-direction:column;gap:6px;width:22px}
  .menu-lines i{display:block;width:22px;height:1px;background:currentColor;transition:transform .2s}
  .mobile-menu{padding:27px var(--gutter) calc(28px + env(safe-area-inset-bottom));overscroll-behavior:contain}
  .mobile-menu .menu-head{padding-bottom:27px;border-bottom:1px solid #ffffff35}
  .mobile-menu .wordmark{font-size:44px}
  .menu-close{font-size:14px;padding:8px 0 8px 15px;min-height:44px}
  .mobile-menu nav{margin:34px 0 38px;gap:0;counter-reset:menu-item}
  .mobile-menu nav a{counter-increment:menu-item;font:clamp(38px,10.6vw,54px)/1.3 var(--serif);padding:14px 0;border-bottom:1px solid #ffffff24;display:flex;align-items:center;gap:23px}
  .mobile-menu nav a:before{content:'0' counter(menu-item);font:12px/1 var(--sans);color:#b9c6ae;letter-spacing:1px}
  .mobile-menu nav a[aria-current]{color:var(--lime)}
  .mobile-menu>p{font-size:14px;line-height:1.7;color:#d0d7c9}

  /* A framed photographic cover, with its invitation placed on paper. */
  .hero{height:auto;min-height:0;max-height:none;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:48px clamp(360px,58svh,550px) auto auto;color:var(--ink);overflow:hidden;isolation:isolate}
  .hero-topline{position:static;grid-area:1/1;display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);font-size:12px;letter-spacing:1px;gap:15px}
  .hero-topline span:last-child{display:block;text-align:right}
  .hero-image{position:relative;inset:auto;grid-area:2/1;width:100%;height:100%;z-index:0;object-position:57% 54%;animation:none}
  .hero-shade{position:relative;inset:auto;grid-area:2/1;z-index:1;background:linear-gradient(180deg,#14220d00 32%,#14220d18 55%,#14220d80 100%);pointer-events:none}
  .hero-copy{display:contents;position:static}
  .hero-copy h1{grid-area:2/1;align-self:end;z-index:2;color:#fff;font-size:clamp(62px,17.8vw,92px);line-height:.98;letter-spacing:-.025em;padding:0 var(--gutter) 31px;animation:mobile-title-in .65s ease-out both}
  .hero-intro{grid-area:3/1;display:flex;align-items:center;justify-content:space-between;gap:22px;margin:0;padding:25px var(--gutter);animation:none}
  .hero-intro p{font-size:13px;line-height:1.6;max-width:180px;flex:1}
  .hero-intro .light-link{font-size:12px;border:1px solid var(--ink);border-radius:40px;padding:12px 16px;flex-shrink:0;white-space:nowrap;min-height:44px}
  .hero-intro .light-link:hover{background:var(--ink);color:var(--paper)}
  .hero-bottom{position:static;grid-area:4/1;margin:0 var(--gutter);padding:16px 0 18px;border-top:1px solid var(--line);font-size:12px;letter-spacing:.75px}
  .hero-bottom>span:first-child{display:none}
  .hero-bottom>span:last-child{font-size:12px}
  .scroll-link{font-size:12px;gap:10px;min-height:24px}
  .scroll-track{height:19px;background:#29342830}
  .scroll-track:after{background:var(--ink);height:8px;animation-duration:3s}
  .hero h1 em{padding-right:0}

  .section-pad{padding:58px var(--gutter)}
  .eyebrow{font-size:12px;letter-spacing:1.4px}
  .display{font-size:clamp(43px,11.8vw,64px);line-height:1.06}
  .intro{padding-top:64px;padding-bottom:66px}
  .section-label{margin-bottom:28px}
  .intro-bottom{margin-top:27px}
  .intro-bottom p,.studio-prose p,.story-body,.value-row p{font-size:16px;line-height:1.7}
  .intro-bottom .text-link{margin-top:26px;font-size:14px;min-height:33px}
  .selected-work{padding-top:0;padding-bottom:55px;overflow:hidden}
  .section-heading{margin-bottom:28px}
  .section-heading .eyebrow{margin-bottom:14px}
  .section-heading .text-link{margin-top:18px;font-size:14px}
  .selected-work .section-heading .display{font-size:clamp(43px,11.8vw,60px)}
  .project-grid[data-project-rail]{display:grid;grid-auto-flow:column;grid-auto-columns:calc(100% - 30px);grid-template-columns:none;gap:16px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 0 2px;margin-right:calc(-1 * var(--gutter));padding-right:var(--gutter);align-items:start}
  .project-grid[data-project-rail]::-webkit-scrollbar{display:none}
  [data-project-rail] .project-card{margin:0;padding:0;scroll-snap-align:start;min-width:0}
  [data-project-rail] .project-image,[data-project-rail] .project-card-small .project-image{aspect-ratio:4/5}
  .project-meta{margin-top:17px;gap:8px}
  .project-meta h3{font-size:30px}
  .project-meta>span{font-size:12px;letter-spacing:.8px}
  .project-aside{font:26px/1.2 var(--serif);margin-top:24px;max-width:260px}
  .mobile-rail-controls{display:flex;align-items:center;justify-content:space-between;margin-top:25px;padding-top:15px;border-top:1px solid var(--line)}
  .rail-position{font-size:12px;letter-spacing:1px;font-variant-numeric:tabular-nums}
  .mobile-rail-controls>div{display:flex;gap:25px}
  .mobile-rail-controls button{border:0;background:none;padding:9px 0;font-size:13px;min-height:40px}
  .mobile-rail-controls button:disabled{color:#8a9183}
  .compact-contact{padding:30px var(--gutter);gap:22px}
  .compact-contact p{font-size:34px}
  .compact-contact .pill-button{min-height:46px;padding:12px 23px}

  .page-heading{padding-top:43px;padding-bottom:40px}
  .page-heading>.eyebrow{margin-bottom:28px}
  .page-heading h1{font-size:clamp(52px,14.5vw,80px);line-height:.99}
  .page-heading-row>p{margin-top:24px;font-size:15px;line-height:1.7;max-width:420px}
  .work-list{padding-top:0;padding-bottom:52px}
  .work-toolbar{position:sticky;top:0;z-index:4;background:var(--paper);margin:0 calc(-1 * var(--gutter)) 28px;padding:13px var(--gutter) 14px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .project-filters{display:flex;gap:17px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;min-width:0}
  .project-filters button{font-size:13px;white-space:nowrap;min-height:35px;padding:6px 0}
  .project-filters button span{display:none}
  #project-count{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .work-grid{gap:38px}
  .work-grid .project-image,.work-grid .project-card:nth-child(3) .project-image,.work-grid.is-filtered .project-card .project-image{aspect-ratio:5/4}
  .work-grid .project-card:nth-child(3) .project-meta,.work-grid.is-filtered .project-card .project-meta{display:flex;align-items:baseline;flex-direction:column;gap:8px;margin-top:17px}
  .work-grid .project-card:nth-child(3) .project-meta span{margin-top:0}
  .project-meta h2,.work-grid .project-card:nth-child(3) h2,.work-grid.is-filtered .project-card .project-meta h2{font-size:34px}
  .project-card-foot{margin-top:16px;padding-top:12px;font-size:12px}
  .work-note{margin-top:35px;font-size:12px}

  .project-heading{padding-top:27px;padding-bottom:25px}
  .breadcrumb{margin-bottom:31px}
  .breadcrumb .text-link{font-size:13px}
  .breadcrumb>span{font-size:12px}
  .project-heading h1{font-size:clamp(49px,13.2vw,75px);line-height:1.04}
  .project-heading-meta{display:flex;gap:7px 16px;margin-top:19px;font-size:12px}
  .project-heading-meta span:last-child{flex-basis:100%;font-size:12px;color:var(--muted)}
  .detail-cover{height:103vw;max-height:520px}
  .image-zoom>span{font-size:12px;bottom:20px;right:20px;padding:10px 15px}
  .project-story{padding-top:44px;padding-bottom:40px}
  .project-story .section-label{margin-bottom:27px}
  .project-story .display{font-size:clamp(43px,11.5vw,64px)}
  .story-lead{font-size:17px;line-height:1.65;margin-top:25px}
  .project-facts{margin-top:27px;padding:22px 0;gap:20px 26px}
  .project-facts dt{font-size:12px}
  .project-facts dd{font-size:14px;line-height:1.5}
  .project-details{margin-top:26px;padding-top:22px;gap:18px}
  .project-details p{font-size:14px;line-height:1.6}
  .project-photo-section{padding-top:0;padding-bottom:42px}
  .secondary-photo{height:86vw;max-height:440px}
  .photo-caption{font-size:12px;line-height:1.6;margin-top:14px}
  .next-project{padding-top:40px;padding-bottom:45px}
  .next-project>a{margin-top:24px}
  .next-project .display{font-size:44px;margin-bottom:20px}
  .lightbox{padding:20px 18px calc(24px + env(safe-area-inset-bottom))}
  .lightbox-toolbar{font-size:12px;letter-spacing:.9px}
  .lightbox figure{margin-top:25px;height:calc(100% - 90px)}
  .lightbox figcaption{font-size:13px;line-height:1.6}

  /* The same text is available in compact, labelled disclosures. */
  .mobile-disclosure{display:block;margin-top:28px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .mobile-fold-toggle{display:grid;grid-template-columns:minmax(0,1fr) 25px;gap:5px 20px;width:100%;text-align:left;border:0;background:none;padding:20px 0;align-items:center;min-height:76px}
  .mobile-fold-title{font:29px/1.2 var(--serif);grid-column:1}
  .mobile-fold-meta{font-size:12px;color:var(--muted);grid-column:1;line-height:1.5}
  .mobile-fold-symbol{grid-column:2;grid-row:1/3;position:relative;width:22px;height:22px}
  .mobile-fold-symbol:before,.mobile-fold-symbol:after{content:'';position:absolute;top:10px;left:2px;width:18px;height:1px;background:currentColor}
  .mobile-fold-symbol:after{transform:rotate(90deg);transition:transform .2s ease}
  [aria-expanded=true] .mobile-fold-symbol:after{transform:rotate(0)}
  .mobile-disclosure-panel{display:block;padding:0 0 25px}
  .mobile-ready .mobile-desktop-heading{display:none!important}
  .mobile-disclosure-panel .story-body{margin-top:0}
  .project-story .mobile-disclosure{margin-top:0;border-top:0}
  .mobile-disclosure-panel .project-details{margin-top:25px}
  .studio-visual{padding:0 var(--gutter)}
  .studio-visual-photo{height:auto;aspect-ratio:5/4}
  .studio-visual-caption{display:block;font-size:12px;line-height:1.5}
  .studio-visual-caption>span:last-child{display:block;margin-top:7px;font-size:12px;letter-spacing:1px}
  .studio-prose{margin-top:0;columns:1}
  .studio-prose p:last-child{margin-bottom:0}
  .studio-values{padding-top:42px;padding-bottom:35px}
  .studio-values>.eyebrow{margin-bottom:25px}
  .value-row{grid-template-columns:25px 1fr;gap:16px;padding:25px 0}
  .value-row h3{font-size:34px}
  .value-row>span{padding-top:8px}
  .value-row p{font-size:15px;line-height:1.65}

  .approach-image{height:290px}
  .image-pullquote{display:block;top:50%;bottom:auto;transform:translateY(-50%);font-size:clamp(30px,8.8vw,38px);line-height:1.12;padding:25px}
  .services{padding-top:43px;padding-bottom:42px}
  .services .section-heading{margin-bottom:25px}
  .services .section-heading>p{font-size:15px;line-height:1.6;margin-top:17px}
  .service-item{padding:0}
  .service-item summary{grid-template-columns:22px minmax(0,1fr) 22px;gap:6px 11px;padding:23px 0;min-height:102px}
  .service-item h2{font-size:31px;grid-column:2;line-height:1.1}
  .service-number{grid-column:1;grid-row:1;align-self:center;font-size:12px}
  .service-toggle{grid-column:3;grid-row:1/3}
  .mobile-service-meta{display:flex;gap:12px;flex-wrap:wrap;grid-column:2;grid-row:2;font-size:12px;color:var(--muted)}
  .mobile-service-meta>span:before{content:'·';padding-right:12px}
  .service-content{margin:0 0 25px 33px;display:block}
  .service-content h3{font-size:26px;margin-bottom:20px}
  .mobile-ready .service-terms{display:none}
  .service-content p{font-size:15px;line-height:1.7}
  .service-content ul{font-size:13px;line-height:1.6;margin-top:20px}
  .scope-note{font-size:12px;line-height:1.7;margin-top:23px}
  .process{padding-top:45px;padding-bottom:46px}
  .process .section-heading .display{font-size:45px}
  .process .section-heading>p{font-size:14px;line-height:1.7;margin-top:23px}
  .process-grid{margin-top:32px}
  .process-grid article{padding:0;border-top:0}
  .process-grid article+article{margin-top:0}
  .process-grid .mobile-disclosure{margin-top:0;border-color:#ffffff35;border-bottom:0}
  .process-grid article:last-child .mobile-disclosure{border-bottom:1px solid #ffffff35}
  .process-grid .mobile-fold-title{font-size:29px}
  .process-grid .mobile-fold-meta{color:var(--lime);font-size:12px;letter-spacing:.6px}
  .process-grid p{font-size:15px;line-height:1.7;max-width:none}
  .process-grid .mobile-disclosure-panel{padding-bottom:24px}

  .contact-page{padding-top:42px;padding-bottom:55px;gap:35px}
  .contact-intro>.eyebrow{margin-bottom:29px}
  .contact-intro .display{font-size:clamp(43px,14.4vw,72px)}
  .contact-intro>p{font-size:16px;line-height:1.7;margin-top:24px}
  .contact-intro .mobile-disclosure{margin-top:26px}
  .contact-intro .mobile-fold-title{font-size:26px}
  .contact-picture{display:block;width:100%;height:230px;margin-top:0}
  .contact-location{display:flex;align-items:start;gap:20px;margin-top:20px}
  .contact-location>span{font-size:12px;line-height:1.7;letter-spacing:.75px}
  .contact-location p{font-size:23px;margin:0;line-height:1.25}
  .contact-area{font-size:14px!important;margin-top:22px!important;line-height:1.7}
  .form-wrap{border-top:0;padding-top:0}
  #enquiry-form>h2{font-size:32px}
  .form-intro{font-size:12px;margin:10px 0 26px}
  .form-row{grid-template-columns:1fr;gap:0}
  .form-field{margin-bottom:23px}
  .form-field label,.service-choice legend{font-size:14px;margin-bottom:8px}
  input:not([type=radio]),textarea{font-size:16px;padding:13px 0;line-height:1.55;scroll-margin-block:100px}
  input::placeholder,textarea::placeholder{font-size:14px;line-height:1.65}
  .choice-options{display:grid;grid-template-columns:1fr 1fr;gap:9px}
  .choice-options label{min-width:0}
  .choice-options span{font-size:13px;line-height:1.4;min-height:47px;padding:13px 8px;text-align:center;border-radius:5px}
  .service-choice{margin:5px 0 25px}
  .service-choice legend{margin-bottom:14px}
  .form-field select{font-size:16px;min-height:49px}
  textarea{min-height:125px}
  .form-submit{margin-top:26px}
  .form-submit .pill-button{width:100%;min-height:52px;font-size:14px}
  .form-submit .demo-note{text-align:center;line-height:1.6}
  .form-success .display{font-size:64px;line-height:1.04;margin-top:29px}
  .form-success>p{font-size:15px}
  .reset-form{width:100%;min-height:48px}

  .contact-cta{padding-top:48px;padding-bottom:50px}
  .cta-row{margin-top:26px}
  .cta-row .display{font-size:clamp(67px,17.5vw,95px);line-height:.98}
  .cta-aside{margin-top:28px}
  .cta-aside p{font-size:14px;line-height:1.65;margin-bottom:24px}
  .cta-aside .pill-button{min-height:47px;padding:13px 25px;font-size:14px}
  .site-footer{padding-top:37px;padding-bottom:calc(106px + env(safe-area-inset-bottom))}
  .footer-top{grid-template-columns:1fr 1fr;gap:25px}
  .footer-top>p:first-child{font-size:27px;line-height:1.1}
  .footer-nav{grid-template-columns:1fr;justify-self:end;font-size:14px;gap:0}
  .footer-nav a{min-height:35px;padding:5px 0}
  .footer-location{display:block;grid-column:1/-1;justify-self:start;font-size:13px;line-height:1.65}
  .footer-wordmark{font-size:26.5vw;margin-top:39px;margin-bottom:30px}
  .footer-bottom{font-size:12px;gap:15px;line-height:1.6;padding-top:19px}
  .footer-bottom>span:nth-child(2){font-size:12px}
  .back-top{font-size:12px;min-height:35px}

  /* Keep the four core destinations available throughout mobile browsing. */
  .mobile-dock{display:grid;grid-template-columns:.85fr 1.15fr .9fr 1.2fr;align-items:center;position:fixed;z-index:20;left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom));min-height:62px;padding:7px;gap:1px;border:1px solid #d2d5c9c9;border-radius:20px;background:#f3f2ebf2;box-shadow:0 5px 30px #1620151c;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);animation:mobile-dock-in .2s ease-out}
  .mobile-dock a{display:flex;align-items:center;justify-content:center;min-height:46px;font-size:12px;position:relative;border-radius:13px;color:#59634f}
  .mobile-dock a[aria-current]{color:var(--ink);font-weight:500}
  .mobile-dock a[aria-current]:not(.mobile-dock-cta):after{content:'';position:absolute;bottom:6px;left:35%;right:35%;height:1px;background:var(--ink)}
  .mobile-dock .mobile-dock-cta{color:var(--paper);background:var(--forest);font-size:12px}
  .mobile-dock .mobile-dock-cta[aria-current]{background:#43513b}
  .menu-open .mobile-dock{visibility:hidden;pointer-events:none}

  .js-reveal .reveal,.js-reveal .reveal:not(.revealed){opacity:1;transform:none;transition:none}
  @keyframes mobile-title-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @keyframes mobile-dock-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
}
@media(max-width:359px){
  :root{--gutter:20px}
  .hero-topline{font-size:12px;letter-spacing:.55px}
  .hero-copy h1{font-size:61px}
  .hero-intro{gap:13px;padding-top:21px;padding-bottom:21px}
  .hero-intro p{font-size:12px}
  .hero-intro .light-link{font-size:12px;padding:11px 12px}
  .hero-bottom>span:last-child{font-size:12px}
  .scroll-link{font-size:12px}
  .mobile-dock{left:10px;right:10px;padding:6px;min-height:59px;border-radius:18px}
  .mobile-dock a,.mobile-dock .mobile-dock-cta{font-size:12px}
  .service-item h2{font-size:28px}
  .contact-location{display:block}
  .contact-location p{margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.mobile-dock,.hero-copy h1{animation:none!important}.mobile-fold-symbol:after{transition:none!important}}

@media(max-width:760px){
  .work-grid .project-note .project-image{aspect-ratio:5/4}
  .work-grid .project-note .project-meta{margin-top:17px}
  .work-grid .project-note .project-meta h2{font-size:34px}
  .work-grid .project-note .project-meta>span{margin-top:9px}
  .project-note .note-brief{font-size:15px;line-height:1.7;margin-top:20px}
  .design-note{margin-top:19px}
  .design-note summary{font-size:14px;min-height:48px;padding-bottom:15px}
  .design-note-content{font-size:15px;padding-bottom:23px}
  .project-enquiry{margin-top:29px;padding-top:22px;display:block}
  .project-enquiry .text-link{margin-top:15px}
}