@font-face{font-family:Geist;src:url('/fonts/geist-latin-ext.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0100-02FF,U+0300-036F,U+1E00-1EFF,U+2000-206F,U+20A0-20CF}
@font-face{font-family:Geist;src:url('/fonts/geist-latin.woff2') format('woff2');font-weight:300 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BC,U+2000-206F,U+20AC,U+2122,U+2190-2199}
:root{--paper:#f8f8f3;--ink:#24332b;--muted:#626b61;--line:#d9ddd2;--green:#254f39;--soft:#edf0e5;--white:#fff;--error:#a12626;font-family:Geist,Arial,sans-serif;color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0;font-size:16px;line-height:1.6}button,input,textarea,select{font:inherit}button,a,summary,input,textarea,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-underline-offset:4px}button,summary{cursor:pointer}button{color:inherit}img{display:block;max-width:100%;height:auto}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3,h4{line-height:1.15;font-weight:500;letter-spacing:-.035em}h1{font-size:clamp(40px,4.7vw,68px)}h2{font-size:clamp(32px,3.4vw,46px);margin-bottom:20px}h3{font-size:25px}h4{font-size:18px}p{margin-bottom:20px}ul{padding-left:20px}li+li{margin-top:10px}button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:3px solid #6f883b;outline-offset:4px}[hidden]{display:none!important}.shell{width:min(1760px,94vw);margin-inline:auto}.section{padding-block:88px;scroll-margin-top:100px}.eyebrow{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:20px}.small{font-size:13px;line-height:1.6}.muted{color:var(--muted)}.sr-only,.trap{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.skip{position:fixed;left:20px;top:-80px;z-index:100;background:var(--white);padding:12px}.skip:focus{top:10px}.button{display:inline-flex;gap:20px;align-items:center;justify-content:center;min-height:48px;padding:12px 22px;border:1px solid var(--green);background:var(--green);color:white;font-weight:500;font-size:14px;text-decoration:none;border-radius:5px;line-height:1.4}.button:hover{background:#183f29}.button:disabled{opacity:.65;cursor:wait}.text-link,.text-button{font-size:14px;font-weight:500;display:inline-flex;align-items:center;gap:12px;min-height:44px}.text-button{padding:8px 0;background:none;border:0;text-decoration:underline;text-underline-offset:4px}.site-header{position:sticky;top:0;z-index:20;background:var(--paper);border-bottom:1px solid var(--line)}.header-inner{display:flex;align-items:center;gap:32px;min-height:84px}.wordmark{display:inline-flex;align-items:center;gap:10px;font-weight:600;text-decoration:none;white-space:nowrap}.wordmark img{width:32px;height:32px}.desktop-nav{display:flex;gap:28px;margin-left:auto}.desktop-nav a{font-size:14px;text-decoration:none;padding-block:12px}.header-actions{display:flex;gap:24px;align-items:center}.languages{display:flex;gap:3px}.languages a{font-size:12px;display:grid;place-items:center;min-width:36px;min-height:44px;text-decoration:none;color:var(--muted)}.languages a[aria-current]{color:var(--ink);font-weight:700;text-decoration:underline}.mobile-menu{display:none;position:relative}.mobile-menu summary{padding:10px;min-height:44px}.mobile-menu nav{position:absolute;right:0;top:52px;width:210px;padding:12px 20px;background:var(--paper);border:1px solid var(--line);box-shadow:0 12px 24px #24332b12}.mobile-menu nav a{display:block;padding:10px 0;text-decoration:none}.hero{display:grid;grid-template-columns:1.1fr 1fr;gap:64px;align-items:center;padding-block:82px 90px}.hero h1{margin-bottom:26px;line-height:1.06}.hero h1 em{font-style:normal;color:#638050}.hero-lede{max-width:490px;font-size:17px;color:var(--muted)}.hero-actions{display:flex;align-items:center;gap:24px;margin-block:28px 22px}.hero-project{background:#e9ecdf;padding:36px 26px 22px;text-decoration:none;border-radius:6px;transform:rotate(1deg)}.hero-project-image{border:1px solid #d1d6c6;overflow:hidden;border-radius:3px}.hero-project-caption{display:flex;justify-content:space-between;align-items:center;font-size:12px;margin-top:24px}.hero-project-caption strong{display:block;font-size:17px;font-weight:500;margin-top:3px}.hero-project-caption>span:last-child{font-size:26px}.section-heading{max-width:760px;margin-bottom:32px}.section-heading>p:last-child{color:var(--muted)}#services{border-top:1px solid var(--line)}.service-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:32px}.service-nav a{display:flex;justify-content:space-between;gap:12px;padding:20px;border:1px solid var(--line);text-decoration:none;font-weight:500;border-radius:4px}.service-nav a:hover{background:var(--soft)}.service-nav a[aria-current]{background:var(--green);border-color:var(--green);color:white}.family-top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:24px}.family-title{font-size:22px;margin-bottom:8px}.family-top p{margin:0;color:var(--muted);font-size:14px;max-width:640px}.family-tools{display:flex;align-items:center;gap:20px;flex-shrink:0}.package-family{scroll-margin-top:105px;margin-bottom:48px}.package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:start}.package{border:1px solid var(--line);border-radius:5px;background:white;min-width:0}.package-overview{padding:28px 26px 16px}.package-overview h3{font-size:25px;min-height:58px}.package-overview>.eyebrow{font-size:10px;color:var(--muted)}.package-overview>p:not(.eyebrow){font-size:14px}.package-time{font-weight:600;margin-bottom:5px}.package-action{padding:22px 26px}.package-action .button{width:100%;padding-inline:10px}.package-detail{border-block:1px solid var(--line)}summary{list-style:none}summary::-webkit-details-marker{display:none}.package-detail>summary{display:flex;justify-content:space-between;padding:16px 26px;font-size:14px;font-weight:500}.package-detail[open]>summary>span{transform:rotate(45deg)}.package-detail-body{padding:12px 26px 26px;font-size:14px}.package-practical{margin-top:24px}.package-practical details{border-top:1px solid var(--line)}.package-practical summary{padding:14px 0;font-weight:500}.package-practical summary:after{content:'+';float:right;margin-left:8px}.package-practical details[open] summary:after{content:'−'}.package-practical p{margin-top:8px}.packages-enhanced .package-family[data-view=detail] .package-grid{grid-template-columns:1fr}.packages-enhanced .package-family[data-view=detail] .package{display:grid;grid-template-columns:1fr 1.7fr}.packages-enhanced .package-family[data-view=detail] .package-overview{padding:32px}.packages-enhanced .package-family[data-view=detail] .package-detail{grid-column:2;grid-row:1 / 3;border-block:0;border-left:1px solid var(--line)}.packages-enhanced .package-family[data-view=detail] .package-action{align-self:end}.packages-enhanced .package-family[data-view=detail] .package-overview h3{min-height:0}.comparison{margin-top:24px}.comparison-summary{padding-block:16px;font-weight:500;text-decoration:underline}.packages-enhanced .comparison-summary{display:none}.table-scroll{overflow:auto;border:1px solid var(--line);border-radius:4px}table{border-collapse:collapse;width:100%;table-layout:fixed;background:white;font-size:13px;line-height:1.55}th,td{text-align:left;vertical-align:top;padding:18px;border-bottom:1px solid var(--line);border-right:1px solid var(--line);overflow-wrap:anywhere}thead th{font-size:18px;font-weight:500;padding-block:26px}th:first-child{width:16%;font-weight:500;background:#f1f2eb}thead th:first-child{font-size:13px}tr:last-child>*{border-bottom:0}tr>*:last-child{border-right:0}[data-col].is-current{background:#eef3e8}.current-package{display:block;font-size:11px;letter-spacing:0;font-weight:400;color:var(--green);margin-top:8px}.comparison .button{font-size:13px;padding:10px;gap:8px}.comparison .text-button{display:block}.comparison>p{margin-top:16px}.mobile-pair{display:none}.enhanced-only{display:none}.packages-enhanced .enhanced-only{display:inline-flex}.packages-enhanced .mobile-pair{display:none}.split-heading{max-width:none;display:flex;justify-content:space-between;align-items:end;gap:40px}.split-heading>p{max-width:360px}.work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}.work-item{text-decoration:none;min-width:0}.work-image{border:1px solid var(--line);padding:12px;background:#e9ecdf;overflow:hidden;border-radius:4px}.work-image img{transition:transform .25s}.work-item:hover .work-image img{transform:scale(1.025)}.work-label{display:flex;justify-content:space-between;gap:8px;margin-top:24px}.work-label .eyebrow{font-size:10px;margin-bottom:10px}.work-label h3{font-size:22px;margin-bottom:12px}.work-label>span{font-size:22px}.work-item>p{font-size:14px;color:var(--muted)}.about-section{display:grid;grid-template-columns:1fr 1fr;gap:100px;border-top:1px solid var(--line)}.about-intro{font-size:18px}.process{list-style:none;padding:0;margin:0}.process li{display:flex;gap:24px;padding:20px 0;border-bottom:1px solid var(--line);margin:0}.process li>span{font-size:12px;color:var(--muted)}.process h3{font-size:19px;margin-bottom:10px}.process p{font-size:14px;color:var(--muted);margin-bottom:0}.contact-section{background:var(--soft);padding-block:80px;scroll-margin-top:84px}.contact-layout{display:grid;grid-template-columns:1fr 1.1fr;gap:100px}.contact-heading h2{font-size:clamp(36px,4vw,54px)}.contact-heading>p{max-width:360px}.contact-email{font-size:clamp(17px,2vw,23px);display:inline-block;margin-bottom:24px;overflow-wrap:anywhere}.contact-heading .small{color:var(--muted)}.form-pair{display:grid;grid-template-columns:1fr 1fr;gap:20px}.field{margin-bottom:20px;min-width:0}.field label{display:block;font-size:13px;font-weight:500;margin-bottom:8px}input,textarea,select{width:100%;border:1px solid #aeb8a6;border-radius:4px;padding:12px;background:#fff;color:var(--ink);min-height:48px}textarea{resize:vertical;display:block}input[aria-invalid=true],textarea[aria-invalid=true]{border-color:var(--error)}.field-error{color:var(--error);font-size:13px;margin:4px 0 0}.field-error:empty{display:none}.optional-details{margin-bottom:24px}.optional-details summary{display:flex;justify-content:space-between;gap:12px;padding-block:12px;border-bottom:1px solid #ccd4c2;font-size:14px;margin-bottom:16px}.optional-details summary:before{content:'+'}.optional-details[open] summary:before{content:'−'}.optional-details summary .small{margin-left:auto;color:var(--muted)}.form-privacy{color:var(--muted);margin-top:16px;max-width:440px}.alt-contact{margin-top:28px;padding-top:24px;border-top:1px solid var(--line)}.alt-contact__k{margin:0 0 8px;font-size:15px;font-weight:600}.alt-contact>p:not(.small){max-width:360px;margin-bottom:12px}.alt-contact .contact-email{margin-bottom:8px}.selected-context{font-size:14px;padding:12px 16px;border-left:3px solid var(--green);background:#e1e8d7}#form-status{font-size:14px;margin-top:12px}.site-footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:32px;font-size:13px}.site-footer>div{display:flex;gap:24px}.case-head{padding-top:56px}.case-head>.eyebrow{margin-top:40px}.case-head h1{margin-bottom:20px}.lede{font-size:20px;color:var(--muted);max-width:700px}.case-lead{margin-top:40px;border:1px solid var(--line);width:100%;border-radius:5px}.case-story{display:grid;grid-template-columns:1fr 1fr;gap:100px}.case-story li{font-size:16px}.case-story ul{margin-bottom:28px}.case-gallery{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}.case-gallery figure{margin:0}.case-gallery img{border:1px solid var(--line);border-radius:4px}.case-gallery .phone-shot{grid-column:1 / -1;max-width:340px;margin-inline:auto}.case-gallery figcaption{font-size:13px;color:var(--muted);margin-top:12px}.case-cta{border-bottom:1px solid var(--line)}.prose-page,.note-page,.error-page{max-width:800px;padding-block:70px 100px}.prose-page h1,.note-page h1{font-size:48px}.prose-page section{margin-top:40px}.prose-page h2{font-size:25px}.note-page p{margin-top:24px}.error-page{width:min(720px,calc(100% - 40px));margin:auto}.error-page .contact-form{margin-top:28px}.error-page h1{font-size:38px}
@media(min-width:901px){.package-grid:has(>.package:only-child){grid-template-columns:1fr}.package-grid:has(>.package:only-child) .package{max-width:760px;margin-inline:auto}.package-grid:has(>.package:only-child) .package-overview h3{min-height:0}}
@media(max-width:1100px){.shell{width:calc(100% - 48px)}.header-inner{gap:20px}.desktop-nav{gap:16px}.header-actions{gap:12px}.hero{gap:32px}.family-top{display:block}.family-tools{margin-top:12px}.package-overview,.package-action{padding-inline:20px}.about-section,.contact-layout,.case-story{gap:48px}.service-nav a{font-size:14px;padding:16px}}
@media(max-width:800px){.desktop-nav,.header-contact{display:none}.mobile-menu{display:block}.header-actions{margin-left:auto}.header-inner{min-height:72px}.hero{padding-block:52px 64px;gap:28px;grid-template-columns:1fr 1fr}.hero h1{font-size:40px}.hero-project{padding:20px 16px}.hero-actions{align-items:flex-start;flex-direction:column;gap:8px}.hero-lede{font-size:16px}.section{padding-block:60px}.package-grid{grid-template-columns:1fr}.package-overview h3{min-height:0}.package{display:grid;grid-template-columns:1fr auto}.package-overview{grid-column:1 / -1}.package-detail{grid-column:1 / -1}.package-action{grid-column:1 / -1}.package-action .button{width:auto}.packages-enhanced .package-family[data-view=detail] .package{display:block}.packages-enhanced .package-family[data-view=detail] .package-detail{border:0;border-block:1px solid var(--line)}.packages-enhanced .package-family[data-view=detail] .package-overview{padding:24px}.work-grid{gap:16px}.work-label h3{font-size:19px}.work-image{padding:6px}.about-section{gap:36px}.contact-layout{gap:36px}.form-pair{grid-template-columns:1fr;gap:0}.contact-email{font-size:18px}.site-footer{flex-wrap:wrap}.case-story{gap:36px}.contact-section{scroll-margin-top:72px}}
@media(max-width:600px){.shell{width:calc(100% - 36px)}.header-inner{gap:8px;min-height:68px}.wordmark{font-size:14px;gap:6px}.wordmark img{width:26px;height:26px}.header-actions{gap:4px}.languages a{min-width:30px}.mobile-menu summary{font-size:13px;padding:10px 4px}.hero{grid-template-columns:1fr;padding-block:42px 54px;gap:32px}.hero h1{font-size:clamp(37px,9.5vw,54px)}.hero-lede{max-width:440px}.hero-actions{flex-direction:row;align-items:center;gap:20px;margin-block:22px 18px}.hero .eyebrow{font-size:10px}.hero-project{transform:none;padding:22px 18px 16px}.hero-project-caption{margin-top:16px}.hero-copy>.small{font-size:11px}.section{padding-block:48px;scroll-margin-top:84px}.section-heading h2{font-size:32px}.section-heading>p{font-size:15px}.service-nav{grid-template-columns:1fr;gap:6px;margin-bottom:24px}.service-nav a{padding:13px 16px;min-height:48px}.family-title{font-size:21px}.family-top p{font-size:13px}.family-tools{justify-content:space-between;gap:12px}.family-tools>*{font-size:13px}.package-family{margin-bottom:16px}.package-overview{padding:24px 22px 10px}.package-overview h3{font-size:26px}.package-overview>p:not(.eyebrow){font-size:15px}.package-detail>summary,.package-action{padding-inline:22px}.package-action .button{width:100%}.package-detail-body{padding-inline:22px}.packages-enhanced .mobile-pair{display:flex;flex-direction:column;gap:6px;font-size:13px;margin-bottom:14px}.mobile-pair select{max-width:100%}table{font-size:12px;min-width:540px}.packages-enhanced table{min-width:0}th,td{padding:12px 9px}th:first-child{width:25%;font-size:11px}thead th{font-size:15px;padding-block:18px}.comparison .button{font-size:12px;padding:9px 7px;min-height:44px}.comparison .button span{display:none}.current-package{font-size:10px}.split-heading{display:block}.split-heading>p{max-width:none}.work-grid{grid-template-columns:1fr;gap:30px}.work-image{padding:14px}.work-label{margin-top:18px}.work-label h3{font-size:24px}.work-item>p{font-size:15px;margin-bottom:0}.about-section,.contact-layout,.case-story{grid-template-columns:1fr;gap:32px}.about-intro{font-size:17px}.contact-section{padding-block:48px;scroll-margin-top:68px}.contact-heading h2{font-size:40px}.contact-heading>p{max-width:none}.contact-heading .small{margin-bottom:0}.contact-email{font-size:21px;margin-bottom:18px}.contact-layout{gap:28px}.form-pair{grid-template-columns:1fr 1fr;gap:14px}.contact-form>.button{width:100%}.optional-details summary{font-size:13px;gap:8px}.site-footer{align-items:flex-start;flex-direction:column;gap:16px;padding-block:28px}.site-footer>div{width:100%;justify-content:space-between}.case-head{padding-top:32px}.case-head h1{font-size:40px}.case-head>.eyebrow{margin-top:32px}.lede{font-size:18px}.case-lead{margin-top:28px}.case-gallery{grid-template-columns:1fr;gap:26px}.case-gallery .phone-shot{max-width:280px}.prose-page,.note-page{padding-block:48px 64px}.prose-page h1,.note-page h1{font-size:38px}.prose-page section{margin-top:32px}.prose-page h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}}
.error-page .contact-form>label{display:block;font-size:14px;font-weight:500;margin:20px 0 8px}.error-page .contact-form>.button{margin-top:24px}.error-page h1{margin-top:32px}
.case-showcase{padding-block:0 48px}.case-carousel{position:relative}.case-carousel__stage{position:relative}.case-carousel__track{position:relative;display:flex;gap:20px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;--peek:clamp(16px,6vw,64px);padding-inline:var(--peek);scroll-padding-inline:var(--peek)}.case-carousel__track::-webkit-scrollbar{display:none}.case-carousel__slide{flex:0 0 100%;scroll-snap-align:center;min-width:0}.case-carousel__open{display:block;width:100%;padding:0;border:0;background:none;text-align:left;cursor:pointer}.case-carousel__open figure{margin:0}.case-carousel__open img{width:100%;display:block;border:1px solid var(--line);border-radius:8px;aspect-ratio:16/10;object-fit:cover;object-position:top;box-shadow:0 18px 32px -24px rgba(36,51,43,.4);transition:transform .18s ease,box-shadow .18s ease}.case-carousel__open:hover img{transform:translateY(-2px);box-shadow:0 22px 36px -20px rgba(36,51,43,.5)}.case-carousel__open:active img{transform:translateY(0)}.case-carousel__open figcaption{font-size:13px;color:var(--muted);margin-top:12px}.case-carousel__toolbar{position:absolute;inset:0;pointer-events:none}.case-carousel__prev,.case-carousel__next{position:absolute;top:50%;transform:translateY(-50%);pointer-events:auto;display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.35);border-radius:50%;background:rgba(36,51,43,.55);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(36,51,43,.28);transition:background .15s ease,transform .15s ease}.case-carousel__prev{left:16px}.case-carousel__next{right:16px}.case-carousel__prev:hover,.case-carousel__next:hover{background:rgba(36,51,43,.82)}.case-carousel__prev:active,.case-carousel__next:active{transform:translateY(-50%) scale(.92)}.case-carousel__prev svg,.case-carousel__next svg{width:20px;height:20px}.case-carousel__status{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);margin:0;padding:6px 14px;border-radius:999px;background:rgba(36,51,43,.55);color:#fff;font-size:12px;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);pointer-events:none}.case-carousel__dots{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}.case-carousel__dot{position:relative;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border:0;background:none;border-radius:50%}.case-carousel__dot::before{content:'';position:absolute;top:50%;left:50%;width:8px;height:8px;transform:translate(-50%,-50%);border-radius:50%;background:var(--line);transition:background .15s ease,transform .15s ease}.case-carousel__dot:hover::before{background:#b7bfae}.case-carousel__dot[aria-current=true]::before{background:var(--ink);transform:translate(-50%,-50%) scale(1.35)}.case-gallery__phone{margin-top:32px;max-width:340px;margin-inline:auto}.case-gallery__phone figcaption{font-size:13px;color:var(--muted);margin-top:12px}.case-lightbox{border:0;padding:0;max-width:none;max-height:none;width:100%;height:100%;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(6px)}.case-lightbox::backdrop{background:#24332bcc}.case-lightbox__nav,.case-lightbox__close{display:grid;place-items:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(36,51,43,.55);color:#fff;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 6px 16px rgba(0,0,0,.25);transition:background .15s ease}.case-lightbox__nav:hover,.case-lightbox__close:hover{background:rgba(36,51,43,.82)}.case-lightbox__nav svg,.case-lightbox__close svg{width:20px;height:20px}.case-lightbox__close{position:fixed;top:16px;right:16px;z-index:2}.case-lightbox__stage{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:min(85vh,900px);padding:64px 16px 24px;width:min(1760px,calc(100% - 32px));margin-inline:auto}.case-lightbox__slides{position:relative;display:grid;place-items:center;min-height:0}.case-lightbox__slide{margin:0;max-height:min(75vh,820px);display:grid;gap:12px;justify-items:center}.case-lightbox__slide:not([hidden]){grid-area:1/1}.case-lightbox__slide img{max-width:100%;max-height:min(70vh,780px);width:auto;height:auto;border:1px solid var(--line);border-radius:8px;object-fit:contain}.case-lightbox__slide figcaption{font-size:14px;color:var(--muted);text-align:center;max-width:640px}.case-lightbox__counter{text-align:center;font-size:13px;color:var(--muted);margin:0 0 24px}.case-gallery-enhanced .enhanced-only{display:inline-flex}.case-gallery-enhanced .case-carousel__dots.enhanced-only{display:flex}@media(max-width:600px){.case-lightbox__stage{grid-template-columns:1fr;padding-top:56px}.case-lightbox__nav{position:fixed;bottom:24px;z-index:2}.case-lightbox__prev{left:16px}.case-lightbox__next{right:16px}.case-gallery__phone{max-width:280px}}

/* ===== Sky shell =====================================================
   The approved hero design carried across the site: monogram header with
   pill navigation, the drawn sky behind the homepage hero only, and the
   marker highlight. Content below the hero keeps the paper background so
   package tables, the form and case-study prose stay readable. */
:root{--hdr-h:104px}

/* Header ----------------------------------------------------------- */
.header-inner{gap:24px;min-height:var(--hdr-h)}
.brand{display:flex;align-items:center;gap:20px;text-decoration:none;color:inherit;margin-right:auto}
.brand__mark{width:76px;height:76px;display:block}
.brand__lines{display:grid;gap:4px}
.brand__name{font-size:20px;font-weight:600;letter-spacing:-.02em}
.brand__role{font-size:14px;color:var(--muted)}

.nav{display:flex;align-items:center;gap:10px}
.pill{display:inline-flex;align-items:center;min-height:36px;padding:0 18px;border:1px solid rgba(36,51,43,.3);border-radius:999px;background:rgba(255,255,255,.4);backdrop-filter:blur(3px);font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .18s,border-color .18s}
.pill:hover{background:rgba(255,255,255,.72);border-color:rgba(36,51,43,.5)}
.pill--rule{text-decoration:underline;text-underline-offset:3px}
.pill--cta{padding:0 22px;background:linear-gradient(180deg,#dbeeff,#cbe4fb);border-color:rgba(36,51,43,.2)}
.pill--cta:hover{background:linear-gradient(180deg,#eaf5ff,#bcdcf8)}
.header-actions{gap:14px}

/* Transparent over the sky, solid once the hero is behind you. Inner
   pages have no sky, so they get the solid treatment from the start. */
.has-sky .site-header{background:transparent;border-bottom-color:transparent;transition:background .2s,border-color .2s}
.has-sky .site-header.is-solid{background:var(--paper);border-bottom-color:var(--line)}

/* The sky ---------------------------------------------------------- */
.hero-sky{position:relative;display:flex;flex-direction:column;min-height:clamp(540px,74vh,800px);padding-bottom:40px}
.hero-sky.hero-sky--flow{isolation:isolate;overflow:visible}
.hero-sky.hero-sky--short{overflow:hidden}
/* Pulled up by the header's height so the sky runs behind it. */
.hero-sky .sky{position:absolute;inset:calc(-1 * var(--hdr-h)) 0 0;z-index:0;overflow:hidden;background:radial-gradient(90% 70% at 20% 2%,rgba(255,255,255,.5),transparent 60%),linear-gradient(168deg,#8ea3c1,#9cb0ca 26%,#afc2d7 52%,#c7d8e7 76%,#dae6ef)}
.hero-sky .hero-inner,
.hero-sky .ask{position:relative;z-index:1}
.sky__mass{position:absolute;inset:-6%;filter:blur(7px);background:radial-gradient(52% 42% at 82% 66%,rgba(255,255,255,.97),transparent 68%),radial-gradient(44% 36% at 97% 40%,rgba(255,255,255,.88),transparent 70%),radial-gradient(62% 40% at 47% 96%,rgba(255,255,255,.95),transparent 68%),radial-gradient(34% 26% at 20% 86%,rgba(255,255,255,.72),transparent 70%),radial-gradient(30% 22% at 66% 88%,rgba(255,255,255,.8),transparent 72%)}
.sky__grain{position:absolute;inset:0;width:100%;height:100%;opacity:.62}

/* The claim -------------------------------------------------------- */
.hero-inner{flex:1;display:flex;align-items:flex-start;justify-content:space-between;gap:48px;padding-top:76px}
.claim{margin:0;font-weight:400;letter-spacing:-.035em;line-height:1}
.claim span{display:block}
.claim__1{font-size:clamp(50px,7.2vw,90px);font-weight:700;line-height:.94}
.claim__2,.claim__3{font-size:clamp(26px,3.6vw,45px);line-height:1.16;letter-spacing:-.03em}
.claim__2{margin-top:.22em}
.claim__3{font-weight:700}
.claim__3 mark{background:#fdf03f;color:inherit;padding:.04em .1em .08em;margin-left:-.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}

.offer{margin:6px 0 0;padding:0;list-style:none;text-align:right;font-size:clamp(17px,2.1vw,26px);line-height:1.73;letter-spacing:-.012em;white-space:nowrap}
.offer li+li{margin-top:0}

/* The question. A link wearing a search bar: the arrow, not a clear
   button, because it goes to the contact form. */
.ask{align-self:center;display:flex;align-items:center;gap:14px;width:min(592px,calc(100% - 48px));padding:12px 16px 12px 19px;border:1px solid #2b3440;border-radius:14px;background:#fff;color:var(--ink);text-decoration:none}
.ask:hover{background:#fbfbf7}
.ask__glass{width:22px;height:22px;flex:none}
.ask__q{flex:1;font-size:18px;letter-spacing:-.011em}
.ask__sel{background:#accef7;border-left:1px solid #1a1a1a;padding:2px 1px 3px 3px;margin-left:4px}
.ask__go{flex:none;font-size:17px;color:var(--muted)}

@media(max-width:1100px){.nav{gap:7px}.pill{padding:0 14px;font-size:13px}.brand__mark{width:64px;height:64px}:root{--hdr-h:92px}}
@media(max-width:800px){
  :root{--hdr-h:76px}
  .nav{display:none}
  .brand__mark{width:56px;height:56px}
  .brand__name{font-size:17px}
  .brand__role{font-size:12px}
  .hero-sky{min-height:0;padding-bottom:32px}
  .hero-inner{flex-direction:column;align-items:stretch;gap:30px;padding-top:44px}
  .offer{text-align:left;white-space:normal}
  .ask__q{font-size:16px}
}
@media(max-width:600px){
  :root{--hdr-h:68px}
  .brand{gap:12px}
  .brand__mark{width:44px;height:44px}
  .ask{gap:10px;padding:11px 13px}
  .ask__q{font-size:15px}
  .ask__sel{margin-left:3px}
}

/* ===== Navigation, plain ============================================= */
.nav{gap:26px}
.navlink{font-size:15px;color:var(--ink);text-decoration:none;white-space:nowrap;padding-block:6px;border-bottom:1px solid transparent;transition:border-color .18s,opacity .18s}
.navlink:hover{border-bottom-color:currentColor}

/* ===== Shared page opening =========================================== */
.hero-sky--short{padding-bottom:12px}
.hero-inner--stack{flex-direction:column;align-items:flex-start;gap:14px;padding-top:0}
.hero-note{margin:0;max-width:54ch;font-size:clamp(16px,1.8vw,20px);line-height:1.5;color:var(--ink)}

/* ===== Contact: compact “how it works” =============================== */
.steps-compact{border:1px solid var(--line);border-radius:8px;background:var(--white);padding:18px 20px;margin:24px 0;max-width:min(100%,440px)}
.steps-compact__k{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.steps-compact__list{list-style:none;margin:0;padding:0}
.steps-compact__item{display:grid;grid-template-columns:2.25rem minmax(0,1fr);gap:10px 12px;padding:11px 0;border-top:1px solid var(--line)}
.steps-compact__item:first-child{border-top:0;padding-top:0}
.steps-compact__num{font-size:12px;font-weight:600;color:var(--line);letter-spacing:-.02em}
.steps-compact__title{margin:0 0 3px;font-size:14px;font-weight:600;line-height:1.25}
.steps-compact__body{margin:0;font-size:13px;line-height:1.45;color:var(--muted)}

/* ===== References ==================================================== */
/* Two columns, not three, so each box is bigger than the homepage grid.
   Projects and written references deliberately do not share a layout. */
.refs{display:grid;gap:clamp(20px,2.4vw,30px)}
@media(min-width:900px){.refs{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ref{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;text-decoration:none;color:inherit}
.ref--project{background:var(--white);overflow:hidden;transition:border-color .18s}
.ref--project:hover{border-color:var(--ink)}
.ref__shot{padding:14px;background:#e9ecdf}
.ref__shot img{display:block;width:100%;height:auto;border:1px solid #d1d6c6;border-radius:4px}
.ref__meta{padding:24px 26px 28px}
.ref__name{margin:6px 0 10px;font-size:26px;letter-spacing:-.028em}
.ref__sum{margin:0 0 16px;font-size:15px;color:var(--muted)}
.ref__go{font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:4px}

.ref--letter{justify-content:center;padding:34px 32px;background:var(--soft);margin:0}
.ref__quote{margin:14px 0 20px;padding:0;border:0;font-size:clamp(19px,2.1vw,24px);line-height:1.42;letter-spacing:-.022em}
.ref__author{font-size:15px;font-weight:600}
.ref__author span{display:block;margin-top:3px;font-size:14px;font-weight:400;color:var(--muted)}
/* An empty slot, shown as empty. Fill it in or delete it before publishing. */
.ref.is-pending{min-height:240px;background:transparent;border-style:dashed;border-color:var(--line-2,#c2c9b8)}
.ref__pending{margin:12px 0 0;max-width:34ch;font-size:15px;color:var(--muted)}

/* ===== About ========================================================= */
.fact-grid{display:grid;gap:clamp(20px,2.4vw,30px);margin-top:24px}
@media(min-width:820px){.fact-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fact{padding-top:18px;border-top:2px solid var(--ink)}
.fact h2{margin:0 0 10px;font-size:21px;letter-spacing:-.022em}
.fact p{margin:0;font-size:15px;color:var(--muted)}
.about-does,.about-spec{padding-block:64px}
.spec-list{margin:24px 0 0;border-top:1px solid var(--line)}
.spec-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:baseline;padding-block:18px;border-bottom:1px solid var(--line)}
.spec-row dt{font-size:13px;font-weight:600;color:var(--muted)}
.spec-row dd{margin:0;font-size:17px}
.about-cta{margin-top:32px;min-height:48px;font-size:15px}

@media(max-width:800px){
  .ref__meta{padding:20px 22px 24px}
  .ref--letter{padding:26px 24px}
  .spec-row{grid-template-columns:1fr;gap:6px;padding-block:16px}
}

/* ===== Fixes after a layout review ==================================== */
:root{
  --line-2:rgba(36,51,43,.28);
  /* Anchors land below the sticky header instead of underneath it. */
  scroll-padding-top:var(--hdr-h);
}

/* The stack variant is a column, so the row rule's space-between was
   throwing the headline and its paragraph to opposite ends of the box. */
.hero-inner--stack{justify-content:flex-start;padding-block:28px 16px}

/* One line in the bar, as drawn; it may wrap once the screen is narrow. */
.ask__q{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@media(max-width:800px){
  .hero-inner--stack{padding-block:22px 14px;gap:12px}
  .ask__q{white-space:normal;overflow:visible}
}

/* Anchor offset, once. scroll-padding on the scroller and scroll-margin on
   the target are additive, so keeping both sent every in-page link roughly
   200px past where it should stop. scroll-padding-top above now owns this. */
.section,.contact-section,.package-family{scroll-margin-top:0}

/* Six links, a language switcher and a button share one row; give the type
   somewhere to go before the header wraps or overflows. */
@media(max-width:1180px){.nav{gap:18px}.navlink{font-size:14px}}
@media(max-width:1000px){.nav{gap:13px}.navlink{font-size:13px}.brand__name{font-size:17px}.brand__role{font-size:12px}.header-actions{gap:10px}}

/* A snapping page needs its opening to be a screen too, or the first step
   lands half a viewport down with dead space above it. */
.hero-sky--flow{min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h))}

/* Cards size to their own content. Stretching a written reference to match
   the height of a card with a screenshot in it left a vast empty box. */
.refs{align-items:start}
.ref--letter{min-height:0}
.ref.is-pending{min-height:200px}

@media(max-width:800px){.hero-sky--flow{min-height:0}}

/* The header button is hidden on small screens (the menu carries Contact),
   but .pill{display:inline-flex} is declared after that rule and was winning
   on equal specificity, forcing the header wider than the viewport. */
@media(max-width:800px){.header-contact.pill{display:none}}

/* Nothing should scroll sideways. clip, not hidden, so it never turns the
   body into a scroll container. */
body{overflow-x:hidden;overflow-x:clip}

/* The unmediated .header-inner gap above was overriding the small-screen
   gaps, and the role line under the name is too wide for a phone. Together
   they pushed the header past the viewport on every page. */
@media(max-width:800px){.header-inner{gap:12px}.brand{gap:12px;min-width:0}}
@media(max-width:600px){
  .header-inner{gap:8px}
  .brand{gap:10px}
  .brand__role{display:none}
  .brand__name{font-size:15px}
}

/* ===== One palette =====================================================
   The landing page set the language: pale-blue pill actions on warm paper,
   ink text, the yellow marker. Everything below adopts it, replacing the
   original green-on-white button system. */
:root{
  --cta-1:#dbeeff; --cta-2:#cbe4fb;
  --cta-1h:#eaf5ff; --cta-2h:#bcdcf8;
  --edge:rgba(36,51,43,.2);
  --mat:#e6ecf2;     /* the surround behind screenshots */
  --soft:#eaeff4;    /* tinted sections */
  --tint:#e7eef7;    /* the current row, the selected package */
  --marker:#fdf03f;
  --select:#accef7;
}

/* Every button is the hero's CTA pill. */
.button{
  border-radius:999px;
  border:1px solid var(--edge);
  background:linear-gradient(180deg,var(--cta-1),var(--cta-2));
  color:var(--ink);
  font-size:15px;
  gap:12px;
}
.button:hover{background:linear-gradient(180deg,var(--cta-1h),var(--cta-2h))}
.button:disabled{opacity:.65}

/* Selected and current states, in the same blue rather than the old green. */
.service-nav a[aria-current]{background:linear-gradient(180deg,var(--cta-1),var(--cta-2));border-color:var(--edge);color:var(--ink)}
.current-package{color:var(--ink)}
.selected-context{border-left:3px solid var(--cta-2);background:var(--tint)}
.case-carousel__dot[aria-current=true]{background:var(--ink);border-color:var(--ink)}
[data-col].is-current{background:var(--tint)}
.work-image,.ref__shot{background:var(--mat)}
.ref__shot img{border-color:#d3dde6}

/* Focus stays obvious, and now belongs to the palette. */
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible,
textarea:focus-visible,select:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--ink);
  outline-offset:3px;
}

/* Text selection matches the highlight already sitting in the hero bar. */
::selection{background:var(--select);color:var(--ink)}
.claim__3 mark{background:var(--marker)}
.ask__sel{background:var(--select)}

/* ===== Compacting pass ===============================================
   Less air between blocks, shorter openings, and a few forced gaps
   removed, so each page carries more in a screen and reads faster. */

/* Section rhythm: 88px of padding top and bottom stacked into ~180px
   between neighbouring sections. */
.section{padding-block:60px}
.about-does,.about-spec{padding-block:40px}
.about-does{padding-bottom:8px}
.fact-grid{margin-top:18px}
.spec-list{margin-top:16px}
.about-cta{margin-top:24px}

/* Page openings: the sky is atmosphere, not a room. */
.hero-sky{min-height:clamp(480px,66vh,720px)}

/* Package headings were padded to a fixed 58px so three cards would align;
   the grid already equalises row heights, so it was pure dead space. */
.package-overview h3{min-height:0;margin-bottom:14px}
.package-overview{padding:24px 24px 14px}
.package-action{padding:18px 24px}
.section-heading{margin-bottom:26px}

/* Reference cards ---------------------------------------------------- */
.ref__meta{padding:20px 22px 24px}
.ref__name{margin:5px 0 8px;font-size:24px}
.ref__sum{margin-bottom:12px}
.ref--letter{padding:26px 26px}
.ref.is-pending{min-height:0}
.ref__quote{margin:10px 0 16px}

/* The last project runs the full width: it closes the row that three
   cards in two columns would otherwise leave half empty, and gives the
   page a second way of showing a project. */
@media(min-width:900px){
  .ref--wide{grid-column:1/-1;flex-direction:row;align-items:stretch}
  .ref--wide .ref__stage{flex:1 1 58%;min-width:0}
  .ref--wide .ref__meta{flex:1 1 42%;display:flex;flex-direction:column;justify-content:center;padding:28px 30px}
  .ref--wide .ref__name{font-size:28px}
}

/* The base .hero-sky height above is declared after both modifiers and was
   winning on equal specificity. Qualify them so the variants hold. */
/* Interior pages: height follows the headline, not a viewport slice. */
.hero-sky.hero-sky--short{min-height:0;padding-bottom:12px}
.hero-sky.hero-sky--short .hero-inner--stack{padding-block:28px 16px;gap:14px}
@media(max-width:800px){
  .hero-sky.hero-sky--short .hero-inner--stack{padding-block:22px 14px;gap:12px}
}
.hero-sky.hero-sky--flow{min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h))}
@media(max-width:800px){.hero-sky.hero-sky--flow{min-height:0}}

/* Homepage only: one screen on desktop, sky to the bottom edge. */
@media(min-width:801px){
  /* Flat fill at the viewport edge; the drawn clouds live in .sky on top. */
  html:has(body.has-sky .hero-sky--flow){background:linear-gradient(168deg,#8ea3c1 0%,#c7d8e7 45%,#dae6ef 100%)}
  html:has(body.has-sky .hero-sky--short:not(.hero-sky--flow)){background:var(--paper)}
  body.has-sky:has(.hero-sky--flow){min-height:100vh;min-height:100svh;background:transparent}
  body.has-sky .hero-sky.hero-sky--flow{min-height:calc(100vh - var(--hdr-h));min-height:calc(100svh - var(--hdr-h));padding-bottom:20px;justify-content:space-between}
  body.has-sky .hero-inner{padding-top:clamp(32px,7vh,76px)}
  body.has-sky .ask{margin-bottom:clamp(56px,10vh,104px)}
}

/* The landing headline is the biggest thing on the site; interior pages step
   down from it, which tightens each opening and restores the hierarchy. */
.hero-sky--short .claim__1{font-size:clamp(40px,5.4vw,70px)}
.hero-sky--short .claim__2,
.hero-sky--short .claim__3{font-size:clamp(24px,3vw,37px)}
.hero-sky--short .hero-note{font-size:clamp(15px,1.5vw,18px);max-width:58ch}

/* ===== Viewport switcher (references + project pages) ================ */
.view-switch{display:inline-flex;gap:2px;margin:0;padding:3px;border:1px solid rgba(255,255,255,.45);border-radius:999px;background:rgba(255,255,255,.92);box-shadow:0 8px 22px rgba(36,51,43,.18);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.view-switch__btn{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px 0 8px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13px;font-weight:500;line-height:1.2;box-shadow:none}
.view-switch__icon{display:block;width:16px;height:16px;flex:none}
.view-switch__btn:hover{color:var(--ink)}
.view-switch__btn[aria-pressed=true]{background:var(--ink);color:#fff}
.ref__stage{position:relative}
.ref__film{--pad:12px;position:relative;display:flex;align-items:stretch;gap:var(--pad);overflow-x:auto;overflow-y:hidden;padding:var(--pad);aspect-ratio:16/9;box-sizing:border-box;scroll-snap-type:x mandatory;scroll-padding-inline:var(--pad);background:#e9ecdf;scrollbar-width:none}
.ref__film::-webkit-scrollbar{display:none}
.ref__film::before,
.ref__film::after{content:none;flex:0;width:0;margin:0;padding:0}
.ref__prev,
.ref__next{display:none;position:absolute;top:50%;transform:translateY(-50%);z-index:3;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 12px 28px rgba(36,51,43,.32);cursor:pointer}
.film-enhanced .ref__prev,
.film-enhanced .ref__next{display:inline-flex}
.ref__prev{left:10px}
.ref__next{right:10px}
.ref__prev:hover,
.ref__next:hover{background:#18241e;box-shadow:0 14px 32px rgba(36,51,43,.4)}
.ref__prev:active,
.ref__next:active{transform:translateY(-50%) scale(.94)}
.ref__stage>.view-switch{position:absolute;top:8px;right:10px;left:auto;bottom:auto;transform:none;z-index:4;max-width:calc(100% - 20px)}
.case-showcase .case-carousel{width:min(100%,760px);margin-inline:auto}
.case-showcase .case-carousel__track{--peek:20px}
/* Cover the full stage so arrows stay mid-photo on tablet/mobile too
   (a fixed 16/9 toolbar left them stranded on tall portrait layouts). */
.case-carousel__toolbar{z-index:2;inset:0;left:0;right:0;top:0;bottom:0;aspect-ratio:auto;height:auto;pointer-events:none}
.case-carousel__prev,
.case-carousel__next{width:48px;height:48px;min-width:48px;min-height:48px;border:2px solid #fff;border-radius:50%;background:var(--ink);color:#fff;box-shadow:0 12px 28px rgba(36,51,43,.32);backdrop-filter:none;-webkit-backdrop-filter:none}
.case-gallery-enhanced .case-carousel__prev,
.case-gallery-enhanced .case-carousel__next{display:inline-flex;align-items:center;justify-content:center}
.case-carousel__prev{left:10px}
.case-carousel__next{right:10px}
.case-carousel__prev:hover,
.case-carousel__next:hover{background:#18241e;color:#fff;transform:translateY(-50%);box-shadow:0 14px 32px rgba(36,51,43,.4)}
.case-carousel__prev:active,
.case-carousel__next:active{transform:translateY(-50%) scale(.94)}
.case-nav__icon{display:block;width:22px;height:22px}
.case-carousel__status{top:14px;bottom:auto;background:rgba(255,255,255,.94);color:var(--ink);border:1px solid rgba(36,51,43,.1);box-shadow:0 6px 16px rgba(36,51,43,.12);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.case-carousel__toolbar .view-switch{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;pointer-events:auto;max-width:calc(100% - 120px)}
.case-lightbox__nav{background:var(--ink);color:#fff;border:2px solid #fff;box-shadow:0 12px 28px rgba(36,51,43,.32)}
.case-lightbox__nav:hover{background:#18241e;color:#fff}
.case-carousel__open img{width:100%;max-width:none;margin-inline:0;aspect-ratio:16/9;object-fit:cover;object-position:center top;background:#e9ecdf}
[data-device=tablet] .case-carousel__open img,
[data-device=mobile] .case-carousel__open img{width:auto;max-width:100%;height:auto;max-height:min(70vw,520px);margin-inline:auto;aspect-ratio:auto;object-fit:contain;object-position:center center}
[data-device=tablet] .case-carousel__open img{max-width:min(100%,320px)}
[data-device=mobile] .case-carousel__open img{max-width:min(100%,260px)}
[data-device=tablet] .case-carousel__open figure,
[data-device=mobile] .case-carousel__open figure{display:flex;justify-content:center;background:#e9ecdf;border-radius:8px;min-height:min(70vw,520px);align-items:center}
.ref__frame,
[data-device=tablet] .ref__frame,
[data-device=mobile] .ref__frame{flex:0 0 100%;scroll-snap-align:center;min-width:0;min-height:0;align-self:stretch;display:flex;align-items:center;justify-content:center;background:transparent;border-radius:4px}
.ref__frame img{display:block;width:100%;height:100%;max-width:none;max-height:none;aspect-ratio:auto;object-fit:cover;object-position:center top;background:#e4e7da;border:1px solid #d1d6c6;border-radius:4px}
/* Portrait shots — film padding-top creates a clear toolbar strip so the
   switcher never covers device content. Device is centred in the lower area. */
[data-device=tablet] .ref__film,
[data-device=mobile] .ref__film{padding-top:52px}

[data-device=tablet] .ref__frame img,
[data-device=mobile] .ref__frame img{width:auto;height:100%;max-width:100%;object-fit:contain;object-position:center center;border:0;background:transparent}

/* ── Desktop: no chassis ─────────────────────────────────────────────── */
.ref__device{display:contents}

/* ── Shared: real device frame PNG overlaid as ::after ───────────────── */
[data-device=tablet] .ref__device,
[data-device=mobile] .ref__device{
  display:block;
  position:relative;
  height:100%;
  width:auto;
  max-height:100%;
  box-sizing:border-box;
  background:none;
  /* drop shadow underneath the device */
  filter:drop-shadow(0 20px 40px rgba(0,0,0,.35)) drop-shadow(0 6px 14px rgba(0,0,0,.2));
}

/* The PNG frame sits on top — it has a transparent hole where the screen is */
[data-device=tablet] .ref__device::after,
[data-device=mobile] .ref__device::after{
  content:'';
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-size:100% 100%;
  pointer-events:none;
  z-index:1;
}

/* ─────────────────────────────────────────────────────────────────────
   iPad Air 10.9 M1 — Space Grey
   Frame: 2040×2760  Screen: x=200, y=200, w=1640, h=2360
   Screen as %: left=9.8% top=7.25% right=9.8% bottom=7.25%
   ───────────────────────────────────────────────────────────────────── */
[data-device=tablet] .ref__device{
  aspect-ratio:2040/2760;
  max-width:54%;
}
[data-device=tablet] .ref__device::after{
  background-image:url('/frames/ipad.png');
}
[data-device=tablet] .ref__device img{
  /* Sit in the screen hole (200,200 1640×2360 inside 2040×2760).
     Corner radius matches the hole so the photo follows the glass. */
  position:absolute;
  top:7.25%;left:9.8%;
  width:80.39%;height:85.51%;
  max-width:none;max-height:none;
  object-fit:cover;object-position:center top;
  border:0;background:#fff;
  border-radius:2.2% / 1.53%;
  z-index:0;
}

/* ─────────────────────────────────────────────────────────────────────
   iPhone 16 Pro — Black Titanium
   Frame: 1406×2822  Screen: x=102, y=100, w=1206, h=2622
   Screen as %: left=7.25% top=3.54% right=7.0% bottom=3.54%
   ───────────────────────────────────────────────────────────────────── */
[data-device=mobile] .ref__device{
  aspect-ratio:1406/2822;
  max-width:36%;
}
[data-device=mobile] .ref__device::after{
  background-image:url('/frames/iphone.png');
}
[data-device=mobile] .ref__device img{
  /* Sit in the screen hole (102,100 1206×2622 inside 1406×2822).
     15.75% / 7.25% is the hole's real corner radius, so the photo
     curves with the glass instead of a fixed pixel radius. */
  position:absolute;
  top:3.54%;left:7.25%;
  width:85.78%;height:92.91%;
  max-width:none;max-height:none;
  object-fit:cover;object-position:center top;
  border:0;background:#fff;
  border-radius:15.75% / 7.25%;
  z-index:0;
}
.ref--project{display:flex;flex-direction:column}
.ref__meta{display:block}

/* ===== References: project cards ===================================== */
.ref-cards{display:grid;gap:64px}
.ref-card{border-top:1px solid var(--line);padding-top:40px}
.ref-card:first-child{border-top:0;padding-top:0}
.ref-card__head{display:flex;justify-content:space-between;align-items:flex-start;gap:32px;margin-bottom:28px}
.ref-card__head>div{min-width:0}
.ref-card__head .eyebrow{margin-bottom:8px}
.ref-card__name{font-size:clamp(26px,3vw,34px);letter-spacing:-.025em;margin-bottom:4px}
.ref-card__type{color:var(--muted);font-size:15px}
.ref-card__tags{list-style:none;margin:0;padding:0;text-align:right;font-size:14px;color:var(--muted);flex:none}
.ref-card__tags li+li{margin-top:5px}
.ref-card__body{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:36px;align-items:start}
.ref-card__showcase.case-showcase{padding-block:0}
.ref-card__features{border:1px solid var(--edge);border-radius:8px;background:var(--tint);padding:24px 26px}
.ref-card__features-k{margin:0 0 14px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--muted)}
.ref-card__features ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:11px;font-size:14.5px}
.ref-card__features li{padding-left:18px;position:relative;line-height:1.4}
.ref-card__features li::before{content:'';position:absolute;left:0;top:.65em;width:8px;height:1px;background:var(--ink)}
.ref-card__features .text-link{font-size:14px}.ref-card__features p.small{margin:0 0 16px}

/* The pending written references keep their own small heading, separated
   from the case-study cards above. */
.refs-letters{padding-top:0}
.refs-letters>.eyebrow{margin-bottom:24px}

@media(max-width:900px){
  .ref-card__body{grid-template-columns:1fr}
  .ref-card__features{order:2}
}
@media(max-width:600px){
  .ref-card__head{flex-direction:column;gap:12px}
  .ref-card__tags{text-align:left}
  .ref-cards{gap:48px}
}

/* The tablet/mobile aspect ratios already exist (see the case-carousel img
   rules with [data-device=...]); add matching frames for the lightbox so a
   zoomed phone screenshot doesn't sit in a huge landscape box. */
[data-device=tablet] .case-lightbox__slide img{aspect-ratio:3/4;max-width:min(60vh,520px)}
[data-device=mobile] .case-lightbox__slide img{aspect-ratio:9/16;max-width:min(45vh,390px)}

@media(max-width:600px){
  .view-switch__btn{padding:0 10px;font-size:12px}
  .case-carousel__toolbar .view-switch{max-width:calc(100% - 108px);bottom:10px}
  .case-carousel__prev,
  .case-carousel__next{width:42px;height:42px;min-width:42px;min-height:42px}
  .case-carousel__prev{left:8px}
  .case-carousel__next{right:8px}
  .ref__prev,
  .ref__next{width:40px;height:40px;min-width:40px;min-height:40px}
  .ref__prev{left:8px}
  .ref__next{right:8px}
}

/* ===== Small screens ==================================================
   Stack the desktop columns, keep the opening sky a full screen, and
   park the device switcher under the picture so it never covers the
   shot or the arrows. */
@media(max-width:800px){
  .service-nav,
  .about-section,
  .contact-layout,
  .case-story,
  .case-gallery,
  .work-grid,
  .form-pair{grid-template-columns:1fr}
  .form-pair{gap:0}
  .case-gallery .phone-shot{max-width:280px}
  .mobile-menu nav{position:static;top:auto;right:auto;width:auto;max-height:none;padding:0;overflow:visible;background:transparent;border:0;box-shadow:none;z-index:auto}
  body.has-sky .hero-sky.hero-sky--flow{
    min-height:calc(100svh - var(--hdr-h));
    min-height:calc(100dvh - var(--hdr-h));
    padding-bottom:24px;
  }
  body.has-sky .ask{width:min(592px,calc(100% - 32px))}
  .ask__sel{white-space:nowrap}
}
@media(max-width:700px){
  .ref__stage>.view-switch{top:8px;right:8px}
  .ref__stage .view-switch__btn{padding:0;width:34px;min-height:34px;justify-content:center}
  .ref__stage .view-switch__btn span{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .case-carousel__stage{padding-bottom:96px}
  .case-carousel__toolbar .view-switch{
    top:auto;bottom:6px;left:50%;transform:translateX(-50%);
    max-width:calc(100% - 8px);
  }
  .case-carousel__status{top:auto;bottom:52px;background:transparent;color:var(--muted);border:0;box-shadow:none;padding:0}
  .case-carousel__prev,
  .case-carousel__next{top:calc((100% - 96px) / 2)}
  .case-carousel__dots{margin-top:16px}
  .case-carousel__track,
  .case-showcase .case-carousel__track{--peek:0px;padding-inline:0;scroll-padding-inline:0;gap:0}
  .ref__film{gap:0}
  .view-switch{max-width:100%}
  .view-switch__btn{min-height:36px;padding:0 12px}
}

/* ===== Full-screen menu ==============================================
   On a phone the navigation is the sky, not a dropdown. The same gradient,
   marker and pill as the rest of the site. */
.mobile-menu summary.mobile-menu__toggle{list-style:none;display:grid;place-items:center;width:44px;height:44px;min-height:44px;margin:0;padding:0;font-size:16px;border:1px solid rgba(36,51,43,.28);border-radius:999px;background:rgba(255,255,255,.55);color:var(--ink)}
.mobile-menu__toggle::-webkit-details-marker{display:none}
.mobile-menu__burger,.mobile-menu__burger::before,.mobile-menu__burger::after{display:block;width:16px;height:1.5px;background:currentColor;border-radius:1px}
.mobile-menu__burger{position:relative}
.mobile-menu__burger::before,.mobile-menu__burger::after{content:'';position:absolute;left:0}
.mobile-menu__burger::before{top:-6px}
.mobile-menu__burger::after{top:6px}
.mobile-menu[open] .mobile-menu__toggle{position:fixed;top:max(14px,env(safe-area-inset-top));right:max(16px,env(safe-area-inset-right));z-index:60;background:rgba(255,255,255,.82)}
.mobile-menu[open] .mobile-menu__burger{background:transparent}
.mobile-menu[open] .mobile-menu__burger::before{top:0;transform:rotate(45deg)}
.mobile-menu[open] .mobile-menu__burger::after{top:0;transform:rotate(-45deg)}
.mobile-menu__sheet{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;justify-content:space-between;gap:28px;padding:max(96px,calc(env(safe-area-inset-top) + 80px)) 28px max(28px,env(safe-area-inset-bottom));overflow:auto;color:var(--ink)}
.mobile-menu__sheet::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(52% 42% at 84% 72%,rgba(255,255,255,.96),transparent 68%),radial-gradient(40% 32% at 8% 92%,rgba(255,255,255,.72),transparent 70%),radial-gradient(90% 70% at 18% 0%,rgba(255,255,255,.5),transparent 60%),linear-gradient(168deg,#8ea3c1,#9cb0ca 26%,#afc2d7 52%,#c7d8e7 76%,#dae6ef)}
.mobile-menu__sheet>nav{display:flex;flex-direction:column;align-items:flex-start;gap:2px}
.mobile-menu__sheet>nav a{display:flex;align-items:baseline;gap:14px;padding:6px 0;font-size:clamp(34px,9.2vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.05;text-decoration:none}
.mobile-menu__foot .languages{flex-direction:row;gap:2px}
.mobile-menu__foot .languages a{font-size:13px;font-weight:700;letter-spacing:.08em;text-decoration:none;padding:0 8px}
.mobile-menu__i{flex:none;width:1.7rem;font-size:13px;font-weight:600;letter-spacing:.06em;color:#3c4a42}
.mobile-menu nav a[aria-current] span:last-child{background:var(--marker);padding:.02em .14em .06em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mobile-menu__foot{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.mobile-menu__mail{font-size:15px;text-underline-offset:4px}
.mobile-menu__foot .languages a{color:var(--ink)}
body:has(.mobile-menu[open]){overflow:hidden}
@media(prefers-reduced-motion:no-preference){
  .mobile-menu[open] .mobile-menu__sheet{animation:menu-in .28s ease}
  .mobile-menu[open] .mobile-menu__sheet>nav a{animation:menu-link .42s ease both}
  .mobile-menu[open] .mobile-menu__sheet>nav a:nth-child(2){animation-delay:.04s}
  .mobile-menu[open] .mobile-menu__sheet>nav a:nth-child(3){animation-delay:.08s}
  .mobile-menu[open] .mobile-menu__sheet>nav a:nth-child(4){animation-delay:.12s}
  .mobile-menu[open] .mobile-menu__sheet>nav a:nth-child(5){animation-delay:.16s}
}
@keyframes menu-in{from{opacity:0}to{opacity:1}}
@keyframes menu-link{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---- UX pass: clearer home hero, readable form -------------------------- */
.hero-sky--home{justify-content:flex-start}
.hero-inner--home{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0;padding-top:clamp(36px,8vh,96px)}
.hero-inner--home .claim__1{font-size:clamp(44px,6.4vw,84px)}
.hero-inner--home .claim__2,.hero-inner--home .claim__3{font-size:clamp(26px,3.4vw,44px)}
.hero-lead{max-width:52ch;margin:24px 0 0;font-size:clamp(17px,1.6vw,20px);line-height:1.5;color:var(--ink)}
.hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.button--lg{min-height:52px;padding:0 30px;font-size:17px}
.offer-cards{list-style:none;margin:clamp(36px,7vh,72px) 0 0;padding:0;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.offer-card{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;height:100%;padding:18px 20px;border:1px solid rgba(36,51,43,.22);border-radius:14px;background:rgba(255,255,255,.82);color:var(--ink);text-decoration:none;transition:background .15s,transform .15s}
.offer-card:hover,.offer-card:focus-visible{background:#fff;transform:translateY(-2px)}
.offer-card__t{font-size:19px;font-weight:600;letter-spacing:-.01em}
.offer-card__d{grid-column:1;font-size:15px;color:var(--muted)}
.offer-card__go{grid-row:1/3;grid-column:2;font-size:20px}
@media(max-width:800px){.offer-cards{grid-template-columns:1fr}.hero-actions .button{width:100%;justify-content:center}}

/* Form: labels and fields large enough to read and tap comfortably. */
.contact-form label{font-size:15px;font-weight:500}
.contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
.contact-form input,.contact-form select{min-height:48px}
.contact-form .button[type=submit]{min-height:52px;padding:0 32px;font-size:17px}
.contact-form .field-error{font-size:14px}
.optional-details summary{font-size:15px;min-height:44px;display:flex;align-items:center}
.package-card p,.package-card li{font-size:16px}
@media(max-width:600px){.contact-form .button[type=submit]{width:100%}}
.offer-cards li{margin:0;padding:0}.offer-cards{align-items:stretch}

/* On phones the form comes straight after the heading; "how it works" and the
   direct address follow it instead of pushing the form off-screen. */
/* Contact is one column: write first, then the short "how it works".
   The old two-column grid pushed the form off the right edge. */
.contact-layout{display:flex;flex-direction:column;gap:36px;max-width:640px}
.contact-form{margin-top:0}
.contact-heading h2{margin-bottom:8px}
.contact-heading>p:last-child{margin-bottom:0;max-width:42ch}
.contact-after{display:flex;flex-direction:column;gap:12px}
.contact-after .steps-compact{max-width:none;margin:0}
.selected-context{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 20px;border-radius:8px}
.selected-context[hidden]{display:none}
.selected-context__change{margin:0;padding:0 4px;min-height:44px;border:0;background:none;color:var(--ink);font-size:14px;font-weight:600;text-decoration:underline;text-underline-offset:3px;box-shadow:none}
.contact-section{scroll-margin-top:88px}

/* Package card: each idea gets its own break, instead of one continuous block. */
.package-overview .package-time{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.package-detail-body>div:first-child{padding-bottom:18px;margin-bottom:16px;border-bottom:1px solid var(--line)}
.package-detail-body h4{margin:0 0 12px}
.package-detail-body ul{margin:0 0 16px}
.package-detail-body .text-link{display:flex;width:fit-content;margin-top:4px}
.package-detail-body .text-link+.text-link{margin-top:10px}
.package-practical{display:flex;flex-direction:column;gap:10px;margin-top:0}
.package-practical details{border:1px solid var(--line);border-radius:10px;background:#f3f5ec;padding:0 14px}
.package-practical summary{padding:13px 0}
.package-practical details>ul,.package-practical details>p:last-child{margin-bottom:14px}
.package-action{border-top:1px solid var(--line)}

/* Compare sits beside the family title and has to be findable at a glance. */
.family-tools a[data-compare]{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:14px;font-weight:600;box-shadow:0 8px 18px rgba(36,51,43,.16)}
.family-tools a[data-compare]:hover{background:#18241e;color:#fff}
@media(max-width:800px){.contact-layout{gap:28px}.contact-heading>p{margin-block:12px 0}.contact-heading>h2{margin-block:8px 0}}