/* White navigation trial, across every page. */
.header{background:var(--cream);color:#171c18;border-bottom:1px solid #dadcd5}
.header nav a{color:#596258}.header nav a:hover,.header nav a[aria-current]{color:#172e22}
.header nav a:after{background:#397862}.header .contact-link{border-left-color:#d4d9cf}.header .menu-toggle{color:#172e22}
.header .header-logo{filter:invert(1) hue-rotate(180deg) brightness(1.14);mix-blend-mode:multiply}
.mobile-menu{background:var(--cream);color:#172e22}.mobile-menu a{border-bottom-color:#d4d9cf}
/* One consistent square, with finished fades and shorter photo holds. */
.film-flipbook{width:min(calc(66.667vw - var(--pad) - 38px),calc(100svh - var(--header) - 228px),740px);left:calc((66.667vw - min(calc(66.667vw - var(--pad) - 38px),calc(100svh - var(--header) - 228px),740px))/2);top:50%;transform:translateY(-50%)}
.flipbook-image{height:auto;max-height:none;aspect-ratio:1;overflow:hidden;background:#dcded2}
.flipbook-image img{object-fit:cover;aspect-ratio:1}
.flipbook-caption{min-height:38px;font-size:13px}.flipbook-ticks{display:none}.flipbook-manual{margin-top:8px}
/* Square portrait crop: keep both faces and the tops of their heads. */
.about-opening .about-photo{height:auto;aspect-ratio:1;width:100%;max-width:620px;background:#b0b1bb}
.about-opening .about-photo img{object-fit:cover;object-position:50% 0;display:block;width:100%;height:100%}
/* Websites opener: one finished design, with a quiet reference to the starting point. */
.web-intro{padding:66px var(--pad) 70px;background:#eceee5;color:#19372a;display:grid;grid-template-columns:.88fr 1.12fr;align-items:center;gap:clamp(35px,5vw,90px);overflow:hidden}
.web-intro-kicker{font:12px/1.6 monospace;letter-spacing:.07em;color:#5c6e5c;display:block;margin-bottom:28px}
.web-intro h1{font-size:clamp(44px,4.9vw,76px);font-weight:500;letter-spacing:-.065em;line-height:1.03}
.web-intro-copy>p{font-size:17px;line-height:1.65;color:#52614f;margin-top:26px}
.web-intro-cta{display:inline-flex;align-items:center;gap:28px;background:#254f3e;color:var(--cream);padding:17px 21px;min-height:54px;font-size:15px;margin-top:28px;border:1px solid #254f3e;transition:background .2s}
.web-intro-cta:hover{background:#163c2b}.web-intro-cta>span{font-size:21px}
.web-intro-preview{position:relative;min-width:0;padding:0 0 99px 28px}
.web-result{margin:0;background:var(--cream);border:1px solid #cad1c4;box-shadow:0 16px 42px #28402c12}
.web-result figcaption{display:flex;justify-content:space-between;align-items:center;gap:12px;background:#2d5140;color:var(--cream);font-size:12px;padding:13px 16px}
.web-result figcaption>span:first-child{font-weight:600;font-size:15px}.web-result-browser{display:flex;align-items:center;gap:4px;padding:10px 12px;background:var(--cream);border-bottom:1px solid #d8ddd2}
.web-result-browser>i{display:block;width:5px;height:5px;border-radius:50%;background:#b9c3b4}.web-result-browser>span{font:10px monospace;margin-left:10px;color:#74816f}
.web-result img{display:block;width:100%;height:auto;aspect-ratio:1212/712;object-fit:contain}
.web-start{position:absolute;width:39%;left:0;bottom:12px;margin:0;background:var(--cream);border:1px solid #c4cabc;box-shadow:0 8px 20px #28402c16;transform:rotate(-3deg)}
.web-start figcaption{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;font-size:13px;background:var(--cream);color:#5c6856}.web-start img{display:block;width:100%;height:auto}
.web-example-note{font-size:12px;color:#64725d;text-align:right;position:absolute;right:0;bottom:35px;margin:0}
/* Featured photographs stay together by mood, in reading order. */
.photo-collection{padding:12px 0 42px}.photo-collection h4{margin:0 0 22px;display:flex;align-items:center;gap:18px;font-size:19px;font-weight:500;letter-spacing:-.02em}.photo-collection h4>span{font:11px monospace;color:#7c8773}
.featured-collection-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:26px;align-items:start}
.featured-collection-grid>.photograph-card{grid-column:span 2;margin:0 0 14px}.featured-collection-grid>.photograph-card img{aspect-ratio:4/5;object-fit:contain;background:#eaeae1}
.featured-collection-grid.collection-size-5>.photograph-card:nth-child(n+4){grid-column:span 3}.featured-collection-grid.collection-size-5>.photograph-card:nth-child(n+4) img{aspect-ratio:3/2}
.featured-collection-grid.collection-size-2>.photograph-card{grid-column:span 3}
/* More photographs: four images per spread, instead of a very long gallery. */
.photo-book{background:var(--cream);border:1px solid #ccd0c3;box-shadow:0 13px 35px #2834240c;padding:22px 26px 0;position:relative}
.photo-book-top{display:flex;justify-content:space-between;gap:20px;font-size:13px;color:#66705d;padding-bottom:20px;border-bottom:1px solid #dde0d5}
.photo-book-spread{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 48px;position:relative;padding:24px 0;min-height:500px}
.photo-book-spread:before{content:'';position:absolute;inset:0 50% 0 auto;width:1px;background:linear-gradient(transparent,#d4d6c9,transparent);pointer-events:none}
.photo-book-spread>.photograph-card{margin:0;min-width:0;display:block}
.photo-book-spread>.photograph-card>button{background:transparent;height:clamp(160px,18vw,270px);display:flex;align-items:center;justify-content:center}
.photo-book-spread>.photograph-card img{width:100%;height:100%;object-fit:contain;background:transparent}
.photo-book-spread figcaption{font-size:13px;padding-top:9px}.photo-book-spread figcaption>span:last-child{font-size:15px}
.photo-book-controls{display:flex;justify-content:space-between;align-items:center;gap:15px;border-top:1px solid #d9ddcf;padding:14px 0}
.photo-book-controls button{display:flex;gap:14px;align-items:center;min-height:44px;padding:8px 0;background:none;border:0;font-size:16px;color:#294532}
.photo-book-controls button:disabled{opacity:.28;cursor:default}.photo-book-controls>span{font:12px/1.5 monospace;color:#64715e}
@media(max-width:1000px) and (min-width:761px){.web-intro{grid-template-columns:.9fr 1.1fr;gap:30px;padding-top:45px;padding-bottom:45px}.web-intro h1{font-size:45px}.web-intro-copy>p{font-size:15px}.web-intro-kicker{font-size:10px}.web-example-note{font-size:10px}.web-intro-preview{padding-left:10px;padding-bottom:80px}.web-start{width:42%}.web-result figcaption{padding:10px;font-size:10px}}
@media(max-width:760px){
 .film-flipbook{left:22px;right:auto;top:78px;transform:none;width:min(calc(100vw - 44px),calc(100svh - var(--header) - 300px));max-width:none}
 .flipbook-image{height:auto;max-height:none;aspect-ratio:1}.flipbook-top{font-size:10px!important;margin-bottom:10px}
 .flipbook-caption{font-size:12px;min-height:34px;margin-top:11px;padding-right:81px}.flipbook-caption>span:first-child{max-width:100%}.flipbook-caption>span:last-child{display:none}
 .flipbook-manual{position:absolute;bottom:16px;right:0;margin:0;gap:5px}.flipbook-manual button{width:32px;min-height:30px;font-size:17px}
 .photo-next-track{margin-top:10px}.film-panel .film-copy{top:auto;bottom:62px;left:22px;right:22px}.film-panel .film-copy .chapter-index{display:none}.film-panel .film-copy h2{font-size:clamp(29px,8vw,40px)}.film-panel .film-copy p{display:none}.film-panel .film-copy .text-link{margin-top:9px;min-height:36px;font-size:13px}
 .work-stage .website-panel .web-copy{left:22px;right:22px;top:74px;display:grid;grid-template-columns:1fr 1.1fr;column-gap:16px;align-items:end}
 .web-copy>.chapter-index,.web-copy>h2{grid-column:1/-1}.web-copy>.chapter-index{margin-bottom:12px;font-size:9px}.web-copy>h2{font-size:clamp(42px,11vw,67px)}
 .work-stage .website-panel .web-copy>p{grid-column:1;grid-row:3;max-width:none;font-size:13px;line-height:1.5;margin-top:17px}
 .work-stage .website-panel .web-copy>.chapter-cta{position:static;grid-column:2;grid-row:3;width:100%;max-width:none;min-height:56px;margin:0;padding:12px;font-size:12px;top:auto;left:auto;transform:translateY(calc((1 - var(--web-details-show,0))*12px))}
 .work-stage .website-panel .code-scene{top:295px;bottom:53px;right:5%;left:0}
 .about-opening .about-photo{height:auto;aspect-ratio:1;max-width:none}.about-opening{gap:30px}
 .web-intro{padding:31px 22px 39px;display:block}.web-intro-kicker{font-size:10px;letter-spacing:.06em;margin-bottom:20px}.web-intro h1{font-size:clamp(39px,10.5vw,68px);line-height:1.04}.web-intro .desktop-break{display:none}.web-intro-copy>p{font-size:15px;margin-top:21px;line-height:1.6}.web-intro-cta{margin-top:22px;font-size:14px;min-height:49px;padding:12px 17px}.web-intro-preview{margin-top:34px;padding:0 0 76px 10px}.web-start{width:42%;bottom:3px}.web-result figcaption{padding:10px 12px;font-size:10px}.web-result figcaption>span:first-child{font-size:13px}.web-result-browser{padding:7px 10px}.web-start figcaption{padding:8px 9px;font-size:11px}.web-example-note{font-size:11px;bottom:22px}.web-result-browser>span{font-size:8px}
 .photo-collection{padding-bottom:28px}.photo-collection h4{font-size:17px;gap:13px;margin-bottom:18px}.featured-collection-grid{gap:17px;grid-template-columns:repeat(2,minmax(0,1fr))}.featured-collection-grid>.photograph-card{grid-column:span 1;margin:0 0 8px}.featured-collection-grid.collection-size-5>.photograph-card:nth-child(n+4){grid-column:span 1}.featured-collection-grid.collection-size-5>.photograph-card:last-child{grid-column:1/-1}.featured-collection-grid.collection-size-5>.photograph-card:nth-child(n+4) img{aspect-ratio:4/5}.featured-collection-grid.collection-size-5>.photograph-card:last-child img{aspect-ratio:16/9}.featured-collection-grid.collection-size-2>.photograph-card{grid-column:span 1}.featured-collection-grid .photograph-card figcaption{font-size:13px;padding-top:7px}.featured-collection-grid .photograph-card figcaption>span:last-child{font-size:15px}
 .photo-book{padding:15px 14px 0}.photo-book-top{display:block;padding-bottom:13px;font-size:12px}.photo-book-top>span:last-child{display:block;margin-top:7px;font-size:11px;color:#7c8474}.photo-book-spread{gap:18px 25px;padding:17px 0;min-height:390px}.photo-book-spread>.photograph-card>button{height:150px}.photo-book-spread figcaption{font-size:12px;gap:5px}.photo-book-spread figcaption>span:last-child{font-size:13px}.photo-book-controls{gap:8px;padding:8px 0}.photo-book-controls button{font-size:17px;gap:8px}.photo-book-controls button>span{font-size:12px}.photo-book-controls>span{font-size:10px;white-space:nowrap}
}
@media(max-height:700px) and (max-width:760px){.film-flipbook{top:70px}.film-panel .film-copy{bottom:55px}.film-panel .film-copy h2{font-size:29px}.flipbook-caption{font-size:11px}.work-stage .website-panel .web-copy{top:63px}.web-copy>.chapter-index{margin-bottom:8px}.work-stage .website-panel .web-copy>p{font-size:11px;margin-top:12px}.work-stage .website-panel .code-scene{top:250px;bottom:45px}.web-copy>h2{font-size:40px}.work-stage .website-panel .web-copy>.chapter-cta{font-size:11px;min-height:49px;padding:9px}}
@media(max-width:360px){.photo-book-controls button>span{display:none}.photo-book-spread>.photograph-card>button{height:130px}.photo-book-spread{min-height:350px}.web-intro h1{font-size:36px}}
@media(max-height:550px) and (min-width:761px){.film-flipbook{top:64px;transform:none;width:calc(100svh - var(--header) - 116px);left:var(--pad)}.flipbook-caption,.flipbook-manual,.photo-next-track{display:none}.flipbook-top{font-size:9px;margin-bottom:7px}.film-copy{top:50%}.film-copy h2{font-size:34px}.chapter-copy .chapter-index{margin-bottom:10px}}
@media(prefers-reduced-motion:reduce){.film-flipbook{position:relative;top:auto;left:auto;right:auto;transform:none;width:min(100%,620px);margin:90px auto 30px}.film-panel{padding:0 22px 55px}.film-panel .film-copy{position:static;width:auto;transform:none;margin-top:30px}.film-panel .film-copy .chapter-index{display:none}.work-stage .website-panel .web-copy{display:block}.work-stage .website-panel .web-copy>.chapter-cta{max-width:300px;margin-top:20px}.work-stage .website-panel .code-scene{top:330px}.web-copy>p{max-width:none}.web-copy>.chapter-cta{opacity:1}}

.featured-collection-grid>.photograph-card>button,.featured-collection-grid>.photograph-card img{background:transparent}
.film-flipbook{width:min(calc(66.667% - var(--pad) - 38px),calc(100svh - var(--header) - 228px),740px);left:33.333%;transform:translate(-50%,-50%)}
@media(max-width:760px){.film-flipbook{width:min(calc(100% - 44px),calc(100svh - var(--header) - 300px));left:50%;right:auto;transform:translateX(-50%)}}
@media(max-height:550px) and (min-width:761px){.film-flipbook{width:calc(100svh - var(--header) - 116px);left:var(--pad);transform:none}}
@media(prefers-reduced-motion:reduce){.film-flipbook{width:min(100%,620px);left:auto;right:auto;transform:none}}
.dynamic-widget.booking-widget.calendar-demo{transform:translateY(calc(-50% + var(--preview-y))) scale(calc(var(--demo-scale,1)*var(--widget-fit,1)))}
@media(max-height:700px) and (max-width:760px){
 .work-stage .website-panel .code-scene{top:205px;bottom:45px}.web-copy>.chapter-index{font-size:8px}.work-stage .website-panel .web-copy{top:62px}
 .dynamic-widget.booking-widget.calendar-demo{padding:10px 12px}.calendar-heading{padding-bottom:6px}.calendar-heading>span{font-size:14px}.calendar-story{height:206px;margin-top:8px}.calendar-story-caption{display:none}.calendar-day{height:24px}.calendar-month{margin-bottom:6px}.calendar-legend{margin-top:7px;font-size:9px;gap:10px}
 .calendar-demo .demo-times h3{font-size:18px;margin:5px 0}.demo-times>p{font-size:11px;margin-bottom:7px}.time-slot{padding:5px;font-size:12px}.time-slot.selected{padding:4px}.time-slot small{font-size:9px;margin-top:2px}.demo-booking-summary{margin:8px 0;font-size:10px}.demo-book-button{font-size:11px;padding:9px}.demo-step{font-size:9px}
 .flipbook-caption{min-height:24px}.film-panel .film-copy h2{font-size:27px}
}
.code-scene .editor-top,.code-scene .editor-bottom{opacity:calc(1 - var(--preview-show,0));transition:opacity .2s}
@media(prefers-reduced-motion:reduce){.dynamic-widget.booking-widget.calendar-demo{transform:translateY(-50%) scale(var(--widget-fit,1))!important}}