@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600&family=Libre+Caslon+Display&display=swap');
:root{--ink:#252321;--ivory:#f7f3eb;--rust:#854634; --olive:#414d37}*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:25px}body{margin:0;background:var(--ivory);color:var(--ink);font-family:'DM Sans',sans-serif;font-size:16px;line-height:1.7}a{color:inherit;text-decoration:none}button{font:inherit}a:focus-visible,button:focus-visible{outline:3px solid #bb6c57;outline-offset:5px}img{display:block;max-width:100%;object-fit:cover}h1,h2{font-family:'Libre Caslon Display',Georgia,serif;font-weight:400;line-height:1.04;margin:0 0 28px;letter-spacing:-.025em}h1{font-size:clamp(42px,5.8vw,88px)}h2{font-size:clamp(46px,6vw,84px)}em{font-weight:400}p{max-width:550px}.eyebrow{font-size:13px;font-weight:500;letter-spacing:.18em;margin-bottom:25px}.preview-note{background:var(--rust);color:var(--ivory);padding:8px 20px;text-align:center;font-size:12px}header{display:flex;justify-content:space-between;align-items:center;padding:24px 5%;gap:25px;background:var(--ivory)}.wordmark{font-size:27px;letter-spacing:.18em;line-height:1.1}.wordmark span{display:block;font-size:10px;letter-spacing:.38em;margin-top:8px}nav{display:flex;gap:32px;font-size:14px}nav a:hover,.text-link:hover{border-bottom:1px solid currentColor}.hero{position:relative;background:var(--ink);color:var(--ivory);height:clamp(580px,70vw,820px)}.hero>img{width:100%;height:100%;object-position:center 55%}.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.69),rgba(0,0,0,.06) 85%),linear-gradient(0deg,rgba(0,0,0,.45),transparent 35%);pointer-events:none}.hero-copy{position:absolute;z-index:1;left:6%;bottom:145px;max-width:85%}.button{display:inline-block;padding:13px 26px;font-size:14px}.light{background:var(--ivory);color:var(--ink)}.slide-controls{position:absolute;z-index:1;bottom:30px;left:6%;right:6%;display:flex;gap:25px}.slide-controls button{background:rgba(37,35,33,.85);color:var(--ivory);border:0;border-top:1px solid rgba(247,243,235,.5);padding:12px 15px;cursor:pointer;font-size:14px}.slide-controls button[aria-pressed=true]{border-top:3px solid var(--ivory)}.slide-controls span{margin-left:15px}.intro{background:var(--ink);color:var(--ivory);display:grid;grid-template-columns:1.1fr 1fr;gap:12%;padding:110px 10%;align-items:center}.intro-images{position:relative;padding-right:12%;padding-bottom:70px}.arch{width:100%;height:520px;border-radius:200px 200px 0 0;object-position:30%}.inset{position:absolute;bottom:0;right:-15px;width:42%;height:250px;border:8px solid var(--ink);transform:rotate(6deg)}.intro-copy p{max-width:440px}.text-link{display:inline-block;border-bottom:1px solid currentColor;margin-top:15px;padding-bottom:4px}.portfolio{padding:90px 6%}.section-heading{text-align:center;margin-bottom:55px}.section-heading p{margin-left:auto;margin-right:auto}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:42px 24px}figure{margin:0}figure img{width:100%;height:360px;object-position:center}figure:nth-child(2) img,figure:nth-child(5) img{border-radius:160px 160px 0 0}figcaption{display:flex;gap:18px;align-items:center;padding-top:15px;font-size:18px}figcaption span{font-size:12px;letter-spacing:.08em;color:var(--rust)}.connection{background:var(--olive);color:var(--ivory);padding:80px 8%;display:grid;grid-template-columns:1fr 1fr;gap:8%;align-items:center}.connection img{height:450px;width:100%;border-radius:200px 200px 0 0;object-position:35%}.pending{font-size:14px;border-top:1px solid currentColor;padding-top:15px;max-width:400px}.client-section{text-align:center;padding:85px 20px}.client-section p{margin-left:auto;margin-right:auto}footer{background:var(--ink);color:var(--ivory);padding:35px 6%;display:flex;justify-content:space-between;align-items:center;gap:25px;font-size:12px;letter-spacing:.08em}footer img{width:150px;height:150px;object-fit:contain;background:var(--ivory)}footer span{letter-spacing:0}footer a{text-decoration:underline}@media(max-width:800px){header{flex-direction:column;padding:20px}nav{gap:18px;flex-wrap:wrap;justify-content:center}.hero{height:650px}.hero-copy{bottom:155px}.slide-controls{gap:8px;flex-wrap:wrap}.slide-controls button{padding:9px}.slide-controls span{margin-left:5px}.intro{padding:60px 7%;gap:40px;grid-template-columns:1fr}.intro-images{max-width:460px;margin:auto}.arch{height:420px}.photo-grid{grid-template-columns:repeat(2,1fr)}figure img{height:300px}.connection{grid-template-columns:1fr;padding:60px 7%;gap:35px}.connection img{height:380px}.portfolio{padding:60px 6%}footer{flex-wrap:wrap}.intro-copy h2{font-size:60px}}@media(max-width:480px){nav{font-size:13px;gap:12px}.hero{height:610px}.hero-copy{left:7%;bottom:165px}.hero>img{object-position:52%}.hero-copy .eyebrow{font-size:12px}.slide-controls{display:grid;grid-template-columns:1fr 1fr}.photo-grid{grid-template-columns:1fr}figure img{height:380px}figcaption{font-size:18px}.intro-images{padding-right:14%}.inset{right:0;height:210px}.connection img{height:320px}footer{justify-content:center;text-align:center}h2{font-size:52px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Reference-inspired first screen: photography, corner menu, centred brand strip. */
.hero{height:100svh;min-height:420px;display:flex;flex-direction:column;background:var(--ink)}
.hero:after{display:none}.hero-image{position:relative;flex:1;min-height:0;overflow:hidden}.hero-image>img{width:100%;height:100%;object-position:center 52%}.menu-toggle{position:absolute;top:0;left:5%;border:0;border-radius:0 0 28px 28px;background:var(--ink);color:var(--ivory);width:58px;min-height:76px;padding:10px 8px 16px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:Georgia,serif;font-style:italic;font-size:20px;line-height:1;cursor:pointer}.banner-nav{display:grid;grid-template-columns:1fr 120px 1fr;align-items:center;gap:24px;padding:0 6%;height:112px;flex-shrink:0;background:var(--ink);color:var(--ivory)}.banner-nav>div{display:flex;gap:36px;justify-content:center}.banner-nav a{font-size:14px}.banner-logo{align-self:center;position:relative;z-index:2}.banner-logo img{width:100px;height:100px;margin:auto;object-fit:contain;background:var(--ivory);border-radius:50%}.slide-controls{bottom:16px;left:auto;right:4%;display:flex;gap:3px}.slide-controls button{position:relative;background:transparent;border:0!important;padding:0;width:36px;height:36px;cursor:pointer}.slide-controls button:after{content:'';position:absolute;top:14px;left:14px;width:8px;height:8px;border-radius:50%;background:var(--ivory);box-shadow:0 0 0 1px var(--ink);opacity:.55}.slide-controls button[aria-pressed=true]:after{opacity:1;box-shadow:0 0 0 1px var(--ink),0 0 0 3px var(--ivory)}#site-menu{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;border:0;margin:0;background:var(--ink);color:var(--ivory);padding:80px 10%;}#site-menu::backdrop{background:var(--ink)}#site-menu nav{display:flex;flex-direction:column;align-items:flex-start;gap:15px}#site-menu nav a{font-family:Georgia,serif;font-size:clamp(28px,5vw,56px)}.menu-close{position:absolute;right:6%;top:25px;background:none;color:var(--ivory);border:1px solid var(--ivory);padding:10px 20px;cursor:pointer}@media(max-width:800px){.banner-nav{grid-template-columns:1fr 90px 1fr;gap:12px;padding:0 4%;height:112px}.banner-nav>div{gap:14px}.banner-logo img{width:85px;height:85px}.banner-nav a{font-size:13px}.hero{height:100svh;min-height:420px}.slide-controls{display:flex}.hero-image>img{object-position:52% center}}@media(max-width:480px){.banner-nav{grid-template-columns:1fr 75px 1fr;height:126px;gap:7px}.banner-nav>div{flex-direction:column;gap:8px;align-items:center}.banner-logo img{width:72px;height:72px}.banner-nav a{font-size:12px}.menu-toggle{left:6%;width:50px;min-height:68px}.slide-controls button{width:44px;height:44px}.slide-controls button:after{top:18px;left:18px}}
.hero-image>img{object-position:center 25%}
@media(max-width:800px){.hero-image>img{object-position:52% 25%}}
/* Anchor navigation with an ivory divider and a logo spanning sections. */
.banner-nav{height:86px;position:relative;border-bottom:8px solid var(--ivory);overflow:visible;z-index:3}
.banner-logo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:144px;height:144px}
.banner-logo img{width:144px;height:144px;border:6px solid var(--ivory);box-shadow:0 0 0 1px rgba(37,35,33,.12)}
.banner-nav>div:first-child{grid-column:1}.banner-nav>div:last-child{grid-column:3}
@media(max-width:800px){.banner-nav{height:86px;grid-template-columns:1fr 130px 1fr}.banner-logo,.banner-logo img{width:130px;height:130px}}
@media(max-width:480px){.banner-nav{height:100px;grid-template-columns:1fr 110px 1fr}.banner-logo,.banner-logo img{width:124px;height:124px}.intro{padding-top:75px}}
/* Olive introduction beneath a solid charcoal navigation strip. */
.banner-nav{border-bottom:0;background:var(--ink)}
.intro{background:var(--olive)}
.intro .inset{border-color:var(--olive)}
/* Slimmer navigation with more legible links. */
.banner-nav{height:66px}
.banner-nav a{font-size:16px}
@media(max-width:800px){.banner-nav{height:70px}.banner-nav a{font-size:15px}}
@media(max-width:480px){.banner-nav{height:88px}.banner-nav a{font-size:14px}.banner-nav>div{gap:6px}}
/* Ivory navigation trial against the olive introduction. */
.banner-nav{background:var(--ivory);color:var(--ink)}
.banner-nav>div{gap:24px}.banner-nav a{letter-spacing:.04em}
@media(max-width:800px){.banner-nav>div{gap:12px}.banner-nav a{font-size:14px}}
@media(max-width:600px){.banner-nav{grid-template-columns:1fr 105px 1fr;height:100px}.banner-nav>div{flex-direction:column;align-items:center;gap:3px}.banner-nav a{font-size:13px}.banner-logo,.banner-logo img{width:124px;height:124px}}
.about-hero-title{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:var(--ivory);background:linear-gradient(90deg,transparent,rgba(37,35,33,.32));padding:20px}.about-hero-title h1{font-size:clamp(52px,8vw,110px);text-shadow:0 2px 20px rgba(0,0,0,.45)}.about-page .hero-image>img{object-position:30% 40%}.about-intro h2{font-size:clamp(44px,5vw,68px)}.draft-copy{border-left:2px solid var(--ivory);padding-left:20px;font-style:italic}.about-process{padding:90px 10% 150px;background:var(--ink);color:var(--ivory);text-align:center}.about-process>p{margin-left:auto;margin-right:auto}.draft-label{font-size:14px}.about-process ol{list-style:none;padding:0;max-width:760px;margin:45px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:30px 55px;text-align:left}.about-process li{display:flex;gap:20px;border-top:1px solid rgba(247,243,235,.3);padding-top:20px}.about-process li>span{font:italic 36px Georgia,serif}.about-process h3{font-size:18px;font-weight:500;margin:0}.about-process li p{margin:8px 0 0}.about-feature{padding:0 6% 65px;text-align:center}.about-feature>img{width:min(680px,100%);height:460px;margin:-80px auto 30px;position:relative}.about-feature .eyebrow{margin:25px auto}.about-links{display:flex;gap:15px;justify-content:center;flex-wrap:wrap}.about-links .button,.about-faq>.button{background:var(--rust);color:var(--ivory)}.about-image-band{position:relative;min-height:430px;color:var(--ivory)}.about-image-band>img{width:100%;height:500px}.about-image-band>div{position:absolute;inset:0;padding:55px 10%;display:flex;align-items:center;justify-content:flex-end;background:linear-gradient(90deg,transparent,rgba(37,35,33,.75))}.about-faq{padding:80px 10%;text-align:center}.about-faq>.eyebrow{margin-left:auto;margin-right:auto}.about-faq>div{max-width:850px;margin:40px auto;text-align:left}.about-faq details{padding:20px 0;border-bottom:1px solid rgba(37,35,33,.3)}.about-faq summary{font-size:18px;cursor:pointer}.about-faq details p{max-width:750px}@media(max-width:600px){.about-process{padding:65px 7% 120px}.about-process ol{grid-template-columns:1fr;gap:25px}.about-feature>img{height:320px}.about-image-band>img{height:400px}.about-image-band>div{padding:30px 7%}.about-faq{padding:60px 7%}.about-hero-title h1{font-size:60px}}
/* Personal favourites: portrait and a compact editorial list. */
.about-favourites{background:var(--ink);color:var(--ivory);display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.5fr);gap:7%;padding:75px 10% 135px;align-items:center}
.favourites-photo img{width:100%;height:470px;object-fit:cover;border-radius:30px}
.favourites-content h2{font-size:clamp(38px,4.5vw,64px);margin-bottom:35px}
.favourites-list{display:grid;grid-template-columns:1fr 1fr;gap:28px 30px;margin:0}
.favourites-list>div{border-bottom:1px solid #bb6c57;padding-bottom:12px;min-width:0}
.favourites-list dt{font-size:12px;letter-spacing:.13em;margin-bottom:8px}
.favourites-list dd{font-size:18px;font-weight:500;margin:0}
@media(max-width:800px){.about-favourites{padding:65px 7% 125px;gap:6%;grid-template-columns:1fr 1.4fr}.favourites-photo img{height:440px}.favourites-list{gap:22px 18px}.favourites-list dd{font-size:16px}}
@media(max-width:600px){.about-favourites{grid-template-columns:1fr;gap:35px}.favourites-photo img{height:380px;max-width:330px;margin:auto}.favourites-list{gap:25px 20px}.favourites-list dt{font-size:11px}.favourites-content h2{font-size:48px}}
/* Homepage navigation: rectangular brand at left, links at right. */
.home-page .banner-nav{display:flex;justify-content:space-between;gap:32px;height:94px;padding:12px 5%;background:var(--ink);color:var(--ivory)}
.home-page .banner-logo{position:static;transform:none;width:230px;height:auto;flex:0 0 230px;align-self:center}
.home-page .banner-logo img{width:230px;height:auto;max-height:68px;object-fit:contain;background:var(--ivory);border:0;border-radius:0;box-shadow:none;padding:8px 12px}
.home-page .banner-nav .home-nav-links{display:flex;flex-direction:row;gap:24px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.home-page .banner-nav a{font-size:14px}
@media(max-width:1000px){.home-page .banner-nav{gap:20px}.home-page .banner-logo{width:195px;flex-basis:195px}.home-page .banner-logo img{width:195px}.home-page .banner-nav .home-nav-links{gap:10px 18px}.home-page .banner-nav a{font-size:13px}}
@media(max-width:600px){.home-page .banner-nav{height:116px;gap:16px;padding:12px 4%}.home-page .banner-logo{width:130px;flex-basis:130px}.home-page .banner-logo img{width:130px;padding:6px}.home-page .banner-nav .home-nav-links{display:grid;grid-template-columns:repeat(2,1fr);gap:5px 12px}.home-page .banner-nav a{font-size:12px}}
.home-page .banner-logo img{background:transparent;padding:0}
/* Homepage: larger navigation and alternating ivory/olive sections. */
.home-page .banner-nav a{font-size:16px}
.home-page .intro{background:var(--ivory);color:var(--ink)}
.home-page .intro .inset{border-color:var(--ivory)}
.home-page .portfolio{background:var(--olive);color:var(--ivory)}
.home-page .portfolio figcaption span{color:var(--ivory)}
@media(max-width:1000px){.home-page .banner-nav a{font-size:15px}}
@media(max-width:600px){.home-page .banner-nav a{font-size:14px}}
/* Torn ivory paper edge over the olive portfolio. */
.home-page .intro{position:relative;z-index:1}
.home-page .intro::after{content:'';position:absolute;left:0;right:0;bottom:-23px;height:25px;background:var(--ivory);clip-path:polygon(0 0,100% 0,100% 57%,98% 68%,96% 43%,94% 75%,92% 51%,90% 63%,88% 38%,86% 70%,84% 47%,82% 81%,80% 56%,78% 65%,76% 42%,74% 73%,72% 48%,70% 66%,68% 39%,66% 76%,64% 55%,62% 87%,60% 59%,58% 69%,56% 44%,54% 78%,52% 52%,50% 67%,48% 40%,46% 71%,44% 51%,42% 83%,40% 57%,38% 68%,36% 43%,34% 75%,32% 49%,30% 63%,28% 37%,26% 72%,24% 54%,22% 80%,20% 58%,18% 67%,16% 42%,14% 74%,12% 53%,10% 64%,8% 40%,6% 76%,4% 51%,2% 70%,0 55%);pointer-events:none}
/* Fine irregular tear with layered paper fibres, replacing the zigzag. */
.home-page .intro::after{bottom:-38px;height:50px;background:transparent url('assets/torn-paper-edge.svg?v=translucent-2') center top / 100% 100% no-repeat;clip-path:none}
/* Supplied photographic paper texture, softly blended into ivory. */
.home-page .intro::after{height:110px;bottom:-43px;background:transparent url('assets/real-torn-paper.png') center bottom / 100% 100% no-repeat;filter:sepia(.12) brightness(.99);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%)}
@media(max-width:600px){.home-page .intro::after{height:70px;bottom:-28px}}
/* Slightly thicker photographic torn edge. */
.home-page .intro::after{height:140px;bottom:-55px}
@media(max-width:600px){.home-page .intro::after{height:90px;bottom:-36px}}
/* Ivory experience and charcoal pricing with the matching paper tear. */
.home-page .about-process{position:relative;z-index:1;background:var(--ivory);color:var(--ink)}
.home-page .about-process li{border-top-color:rgba(37,35,33,.3)}
.home-page .about-process::after{content:'';position:absolute;left:0;right:0;bottom:-55px;height:140px;background:transparent url('assets/real-torn-paper.png') center bottom / 100% 100% no-repeat;filter:sepia(.12) brightness(.99);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);pointer-events:none}
.home-page #pricing{background:var(--ink);color:var(--ivory);padding-top:105px}
@media(max-width:600px){.home-page .about-process::after{height:90px;bottom:-36px}.home-page #pricing{padding-top:85px}}
/* Experience tear sits at its top, extending over the olive section. */
.home-page .about-process::after{top:-55px;bottom:auto;transform:rotate(180deg)}
@media(max-width:600px){.home-page .about-process::after{top:-36px;bottom:auto}}
/* Photograph replaces the Pricing block's charcoal background. */
.home-page #pricing{background:linear-gradient(rgba(27,25,23,.35),rgba(37,35,33,.58)),url('assets/optimized/merri-pricing-d531d0-2400.webp') center 58% / cover no-repeat;min-height:620px;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:90px 6%;color:var(--ivory)}
.home-page #pricing h2{max-width:900px;text-shadow:0 2px 16px rgba(0,0,0,.4)}
@media(max-width:600px){.home-page #pricing{min-height:540px;background-position:center,48% center;padding:75px 7%}}
/* Pricing photograph without a tinted overlay. */
.home-page #pricing{background-image:url('assets/optimized/merri-pricing-d531d0-2400.webp')}
/* Preserve the photo ratio and reveal the seated couple. */
.home-page #pricing{min-height:0;aspect-ratio:3 / 2;background-size:cover;background-position:center center;padding:70px 6%;justify-content:flex-start}
.home-page #pricing h2{font-size:clamp(42px,5.5vw,78px)}
@media(max-width:600px){.home-page #pricing{aspect-ratio:auto;min-height:660px;background-position:48% center;padding:55px 7%}.home-page #pricing h2{font-size:44px}}
/* Portrait arches retain their shape on wide screens. */
.intro-images .arch{width:100%;max-width:380px;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0}
.photo-grid figure:nth-child(2) img,.photo-grid figure:nth-child(5) img{width:100%;max-width:360px;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0;margin-inline:auto}
.connection>img{width:100%;max-width:400px;height:auto;aspect-ratio:3 / 4;object-fit:cover;border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0;justify-self:center}
/* All homepage portfolio photographs use the same portrait proportion. */
.home-page .photo-grid figure img{width:100%;max-width:360px;height:auto;aspect-ratio:3 / 4;object-fit:cover;margin-inline:auto}
.home-page .photo-grid figcaption{max-width:360px;margin-inline:auto}
/* Portfolio labels overlap the photographs over a lower shadow gradient. */
.home-page .photo-grid figure{position:relative;width:100%;max-width:360px;margin-inline:auto}
.home-page .photo-grid figure::after{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.22) 55%,transparent);pointer-events:none}
.home-page .photo-grid figcaption{position:absolute;z-index:1;left:0;right:0;bottom:0;margin:0;padding:20px 22px;color:var(--ivory);font-family:'Libre Caslon Display',Georgia,serif;font-size:clamp(28px,2.8vw,40px);line-height:1.05;gap:12px;align-items:baseline;text-shadow:0 1px 5px rgba(0,0,0,.35)}
.home-page .photo-grid figcaption span{font-family:'DM Sans',sans-serif;font-size:12px;flex-shrink:0}
@media(max-width:800px){.home-page .photo-grid figcaption{font-size:32px;padding:18px}}
/* Titles straddle the photograph and olive surface like a stamped caption. */
.home-page .photo-grid{row-gap:85px}
.home-page .photo-grid figcaption{bottom:0;transform:translateY(50%);padding:0 18px;font-size:clamp(32px,3.1vw,44px);line-height:1.05;text-shadow:0 1px 3px rgba(0,0,0,.55)}
.home-page .portfolio{padding-bottom:125px}
@media(max-width:800px){.home-page .photo-grid figcaption{font-size:34px;padding:0 14px}}
/* Larger, clean portfolio titles without numbering or shadows. */
.home-page .photo-grid figcaption{font-size:clamp(40px,4vw,56px);text-shadow:none}
@media(max-width:800px){.home-page .photo-grid figcaption{font-size:42px}}
/* Slightly raised and enlarged portfolio labels. */
.home-page .photo-grid figcaption{bottom:7px;font-size:clamp(44px,4.3vw,60px)}
@media(max-width:800px){.home-page .photo-grid figcaption{font-size:46px}}

/* Wide contact arch rests on the base of the olive section. */
.home-page .connection{grid-template-columns:.85fr 1.35fr;align-items:end;padding-bottom:0;gap:6%}
.home-page .connection>div{align-self:center;padding-bottom:80px}
.home-page .connection>img{max-width:none;aspect-ratio:5 / 4;border-radius:50% 50% 0 0 / 55% 55% 0 0;object-fit:cover;object-position:center;align-self:end}
.home-page .client-section{position:relative;z-index:1;background:var(--ivory)}
.home-page .client-section::before{content:'';position:absolute;left:0;right:0;top:-55px;height:140px;background:transparent url('assets/real-torn-paper.png') center bottom / 100% 100% no-repeat;filter:sepia(.12) brightness(.99);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);transform:rotate(180deg);pointer-events:none}
@media(max-width:800px){.home-page .connection{grid-template-columns:1fr}.home-page .connection>div{padding-bottom:0}.home-page .connection>img{width:100%;max-width:650px}}
@media(max-width:600px){.home-page .client-section::before{top:-36px;height:90px}}

/* The Pricing block shares the client-section class, but its paper belongs to the ivory block above. */
.home-page #pricing::before{content:none}
.home-page .about-process::after{top:auto;bottom:-55px;transform:none}
@media(max-width:600px){.home-page .about-process::after{top:auto;bottom:-36px}}

.home-page .about-process{z-index:2}

/* Crop the beach photograph from below, keeping the couple and sky. */
.home-page .connection>img{aspect-ratio:5 / 4;object-position:center top;object-fit:cover;clip-path:none}

/* Keep the tall arch while enlarging its photograph and favouring the upper crop. */
.home-page .connection>img{object-position:center 25%;}

.home-page .connection>.connection-photo{width:100%;aspect-ratio:5 / 4;align-self:end;padding:0;overflow:hidden;border-radius:50% 50% 0 0 / 55% 55% 0 0}
.home-page .connection-photo>img{width:100%;height:100%;max-width:none;border-radius:0;object-fit:cover;object-position:center top;transform:scale(1.13);transform-origin:center top}
@media(max-width:800px){.home-page .connection>.connection-photo{max-width:650px;justify-self:center}}

/* Shared secondary portfolio page layout, starting with Family. */
.portfolio-page-link{display:block}.portfolio-page-link:focus-visible{outline:3px solid var(--ivory);outline-offset:10px}
.service-page .service-hero{height:85svh;min-height:560px}.service-title{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;color:var(--ivory);background:linear-gradient(transparent,rgba(0,0,0,.2));text-align:center;padding:25px}.service-title h1{font-size:clamp(76px,12vw,180px);font-style:italic;text-shadow:0 2px 18px rgba(0,0,0,.3);margin:0}.service-title p{margin-bottom:12px}
.service-intro{display:grid;grid-template-columns:1fr 1fr;gap:12%;padding:100px 10% 110px;background:var(--ink);color:var(--ivory);align-items:center}.service-intro h2{font-size:clamp(48px,5vw,74px)}.service-collage{position:relative;padding:0 15% 60px 0;max-width:480px}.service-arch{width:100%;aspect-ratio:3 / 4;height:auto;border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0}.service-inset{position:absolute;bottom:0;right:0;width:47%;aspect-ratio:4 / 3;border:7px solid var(--ivory);transform:rotate(4deg)}.service-spark{position:absolute;left:-25px;bottom:90px;color:var(--ivory);font-size:64px}
.service-process{background:#1c1b19;color:var(--ivory);padding:75px 8% 135px;text-align:center}.service-process h2{font-family:'DM Sans',sans-serif;font-size:clamp(32px,4vw,52px);font-weight:500;text-transform:uppercase}.service-process>p{margin-inline:auto}.service-process ol{list-style:none;max-width:860px;margin:60px auto 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:35px 65px;text-align:left;position:relative}.service-process li{display:flex;gap:20px;border-top:1px solid #77766f;padding-top:20px}.service-process li>span{font:italic 40px 'Libre Caslon Display',Georgia,serif;color:#c6c9b5}.service-process h3{font-size:17px;margin:0;font-weight:500}.service-process li p{font-size:15px;margin:8px 0 0}
.service-feature{background:var(--ivory);text-align:center;padding:0 7% 80px}.service-feature>img{position:relative;width:min(460px,80%);height:auto;aspect-ratio:4 / 5;margin:-65px auto 28px;object-fit:cover;object-position:center 60%}.service-feature h2{font-size:36px;font-style:italic;margin-bottom:20px}.service-feature nav{justify-content:center;flex-wrap:wrap;gap:12px}.service-feature .button{background:var(--olive);color:var(--ivory);border-radius:30px;padding:8px 26px;font-size:12px;letter-spacing:.08em}
.service-statement{position:relative;color:var(--ivory);min-height:520px;display:grid;align-items:center;overflow:hidden}.service-statement>img{position:absolute;inset:0;width:100%;height:100%;object-position:center 55%}.service-statement>div{position:relative;padding:80px 9%;background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12));min-height:520px;display:flex;flex-direction:column;justify-content:center}.service-statement h2{font-size:clamp(50px,6vw,80px)}.service-statement p{margin-top:0}.service-statement::before,.service-statement::after{content:'';position:absolute;z-index:2;left:0;right:0;height:45px;background:var(--ivory);clip-path:polygon(0 0,100% 0,100% 75%,90% 60%,80% 80%,70% 62%,60% 78%,50% 60%,40% 80%,30% 65%,20% 78%,10% 60%,0 75%)}.service-statement::before{top:-20px}.service-statement::after{bottom:-20px;transform:rotate(180deg)}
.service-faq{padding:85px 10%;text-align:center;background:var(--ivory)}.service-faq>p{margin-inline:auto}.service-faq h2{font-size:clamp(44px,5vw,66px)}.service-questions{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;text-align:left;margin:45px auto;max-width:1000px}.service-questions details{border-bottom:1px solid #c9c4ba;padding:22px 0}.service-questions summary{cursor:pointer;font-size:17px}.service-questions p{font-size:15px}.service-faq>.button{background:var(--ink);color:var(--ivory);border-radius:28px}.service-cta{background:var(--ink);color:var(--ivory);display:flex;align-items:center;justify-content:center;gap:30px;padding:25px 7%;text-align:center}.service-cta p{letter-spacing:.08em;font-size:14px}.service-cta .button{background:var(--olive);color:var(--ivory);border-radius:25px}.service-filmstrip{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;background:var(--ink)}.service-filmstrip img{width:100%;height:240px;object-fit:cover}.service-page footer img{width:220px;height:auto;background:none}.service-page footer{font-size:12px}
@media(max-width:800px){.service-intro{grid-template-columns:1fr;padding:65px 7%;gap:40px}.service-collage{width:min(440px,90%);margin-inline:auto}.service-process{padding:65px 7% 110px}.service-process ol{gap:30px}.service-faq{padding:65px 7%}.service-questions{gap:0 30px}.service-page .service-hero{height:85svh;min-height:520px}}
@media(max-width:550px){.service-process ol,.service-questions{grid-template-columns:1fr}.service-cta{flex-direction:column;gap:8px}.service-filmstrip img{height:160px}.service-title h1{font-size:76px}.service-statement,.service-statement>div{min-height:430px}}
/* Alternating steps follow the reference's central process line. */
@media(min-width:801px){.service-process ol{display:block;max-width:760px}.service-process ol::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:#77766f}.service-process li{position:relative;width:50%;border:0;padding:0 40px 28px 0;margin:0;text-align:right;justify-content:flex-end}.service-process li:nth-child(odd){margin-left:50%;padding:0 0 28px 40px;text-align:left;justify-content:flex-start}.service-process li::before{content:'';position:absolute;top:20px;right:0;width:28px;border-top:1px solid #77766f}.service-process li:nth-child(odd)::before{left:0;right:auto}.service-process li>div{max-width:255px}.service-process li>span{font-size:34px}}
.service-inset{height:auto;object-fit:cover}

/* Ivory family introduction separates it from the charcoal navigation. */
.service-page .service-intro{background:var(--ivory);color:var(--ink)}
.service-page .service-spark{color:var(--olive)}

/* Ivory introduction tears down over the Family process section. */
.service-page .service-intro{position:relative;z-index:2}
.service-page .service-intro::after{content:'';position:absolute;left:0;right:0;bottom:-55px;height:140px;background:transparent url('assets/real-torn-paper.png') center bottom / 100% 100% no-repeat;filter:sepia(.12) brightness(.99);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);pointer-events:none}
.service-page .service-process{padding-top:100px}
@media(max-width:600px){.service-page .service-intro::after{height:90px;bottom:-36px}.service-page .service-process{padding-top:85px}}

/* Olive experience section on the Family page. */
.service-page .service-process{background:var(--olive)}
.service-page .service-process li>span{color:var(--ivory)}
.service-page .service-process li{border-top-color:rgba(247,243,235,.4)}
.service-page .service-process ol::before{background:rgba(247,243,235,.4)}
.service-page .service-process li::before{border-top-color:rgba(247,243,235,.4)}

/* Slightly more compact process timeline. */
@media(min-width:801px){.service-page .service-process li{padding-bottom:16px}.service-page .service-process li:nth-child(odd){padding-bottom:16px}.service-page .service-process li p{line-height:1.5;margin-top:6px}}
@media(max-width:800px){.service-page .service-process ol{row-gap:22px}}


/* Family links sit beside the Dan and Boys photograph. */
.service-page .service-feature-links{display:grid;grid-template-columns:1fr 1.2fr;gap:8%;align-items:center;padding:75px 10%;text-align:left}
.service-page .service-feature-links>img{grid-column:2;grid-row:1;width:100%;max-width:560px;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:center;margin:0;justify-self:end}
.service-page .family-links-copy{grid-column:1;grid-row:1}
.service-page .service-feature-links nav{justify-content:flex-start}
.service-page .service-feature-links h2{font-size:clamp(42px,4vw,60px)}
@media(max-width:650px){.service-page .service-feature-links{grid-template-columns:1fr;gap:30px;padding:55px 7%}.service-page .family-links-copy{grid-column:1;grid-row:1}.service-page .service-feature-links>img{grid-column:1;grid-row:2;max-width:none}}
.service-page .service-feature-links>img{max-width:400px;aspect-ratio:2 / 3;object-position:center}

/* Editorial scrapbook treatment for the Family next steps. */
.service-page .service-feature-links{padding:85px 10% 100px;gap:10%;background:radial-gradient(ellipse at 90% 55%,rgba(65,77,55,.09),transparent 55%),var(--ivory)}
.service-page .service-feature-links>img{width:100%;max-width:420px;aspect-ratio:2 / 3;border:12px solid #fffdf7;border-bottom-width:38px;transform:rotate(3deg);box-shadow:0 12px 24px rgba(37,35,33,.12)}
.service-page .service-feature-links h2{font-style:normal;font-size:clamp(48px,5.3vw,72px);margin-bottom:24px}
.service-page .family-links-copy>.eyebrow{color:var(--rust);font-size:12px}
.service-page .family-links-intro{max-width:370px;margin-bottom:35px}
.service-page .service-feature-links nav{display:flex;flex-direction:column;gap:0;max-width:400px;align-items:stretch}
.service-page .service-feature-links .button{display:flex;align-items:center;justify-content:space-between;gap:20px;border-radius:0;border-top:1px solid rgba(65,77,55,.35);background:transparent;color:var(--olive);padding:17px 0;font-size:17px;letter-spacing:0}
.service-page .service-feature-links .button:last-child{border-bottom:1px solid rgba(65,77,55,.35)}
.service-page .service-feature-links .button>span:last-child{font-size:26px;line-height:1}
.service-page .service-feature-links .button:hover{color:var(--rust);border-bottom-color:rgba(65,77,55,.35)}
@media(max-width:650px){.service-page .service-feature-links{padding:60px 8% 70px;gap:45px}.service-page .service-feature-links>img{width:88%;justify-self:center;max-width:400px}.service-page .service-feature-links h2{font-size:54px}}

/* Each photography page owns its pricing anchor and package content. */
.service-pricing{background:var(--olive);color:var(--ivory);padding:85px 10%;display:grid;grid-template-columns:1.2fr 1fr;gap:8%;align-items:center;scroll-margin-top:25px}
.service-pricing h2{font-size:clamp(46px,5vw,70px);margin-bottom:0}
.service-pricing-details{border-top:1px solid rgba(247,243,235,.4);padding-top:22px}
@media(max-width:650px){.service-pricing{grid-template-columns:1fr;gap:30px;padding:60px 7%}}
.service-page #pricing.service-pricing{background:var(--olive);aspect-ratio:auto;min-height:0;display:grid;grid-template-columns:1.2fr 1fr;padding:85px 10%;text-align:left}
.service-page #pricing.service-pricing h2{font-size:clamp(46px,5vw,70px);text-shadow:none}
@media(max-width:650px){.service-page #pricing.service-pricing{grid-template-columns:1fr;padding:60px 7%}}

/* The next-steps ivory sheet overlaps its neighbours with torn edges. */
.service-page .service-feature-links{position:relative;z-index:3}
.service-page .service-feature-links::before,.service-page .service-feature-links::after{content:'';position:absolute;left:0;right:0;height:140px;background:transparent url('assets/real-torn-paper.png') center bottom / 100% 100% no-repeat;filter:sepia(.12) brightness(.99);mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 45%);pointer-events:none}
.service-page .service-feature-links::before{top:-55px;transform:rotate(180deg)}
.service-page .service-feature-links::after{bottom:-55px}
.service-page .service-statement::before{display:none}
@media(max-width:600px){.service-page .service-feature-links::before,.service-page .service-feature-links::after{height:90px}.service-page .service-feature-links::before{top:-36px}.service-page .service-feature-links::after{bottom:-36px}}

/* Straight transition from the photograph banner into pricing. */
.service-page .service-statement::after{display:none}

/* Family packages: clear inclusions and two warm ivory cards. */
.service-page #pricing.service-pricing{display:block;padding:85px 10% 75px}
.pricing-introduction{text-align:center;max-width:800px;margin:0 auto 50px}.pricing-introduction p{max-width:700px;margin-inline:auto}.service-page #pricing .pricing-introduction h2{margin-bottom:28px}.pricing-inclusions{font-size:15px;color:#e2e5d9}
.family-package-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;max-width:1040px;margin:auto}.family-package{background:var(--ivory);color:var(--ink);padding:38px;display:flex;flex-direction:column;border-radius:3px}.family-package.full-gallery{background:#eee7db;border-top:5px solid #bb6c57;padding-top:33px}.family-package>.eyebrow{font-size:11px;color:var(--rust);margin:0 0 18px}.family-package h3{font:400 clamp(34px,3.5vw,48px) 'Libre Caslon Display',Georgia,serif;margin:0 0 20px}.package-price{font:400 64px 'Libre Caslon Display',Georgia,serif;line-height:1;margin:0 0 22px}.package-price span{display:inline-block;font:13px 'DM Sans',sans-serif;margin-left:12px;vertical-align:middle;letter-spacing:.04em}.package-description{font-size:15px;min-height:48px;margin:0}.family-package ul{list-style:none;padding:0;margin:22px 0 30px;flex:1}.family-package li{border-top:1px solid rgba(37,35,33,.18);padding:12px 0;font-size:15px;line-height:1.5}.family-package .button{display:flex;justify-content:space-between;align-items:center;gap:15px;background:var(--olive);color:var(--ivory);padding:15px 18px;font-size:11px;letter-spacing:.06em}.family-package .button span{font-size:23px;line-height:1}.family-package .button:hover{background:var(--ink)}
.pricing-footnotes{max-width:1040px;margin:32px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:28px;font-size:14px}.pricing-footnotes p{margin:0}.pricing-footnotes strong{font-weight:500;display:inline-block;margin-bottom:7px}.pricing-footnotes a{text-decoration:underline;text-underline-offset:4px}
@media(max-width:650px){.service-page #pricing.service-pricing{padding:60px 7%}.family-package-grid,.pricing-footnotes{grid-template-columns:1fr}.family-package{padding:30px}.family-package.full-gallery{padding-top:25px}.package-description{min-height:0}.pricing-introduction{margin-bottom:35px}.package-price{font-size:58px}}

/* Keep the upper part of the Moemoea family photograph in view. */
.service-statement>img[src="assets/optimized/Moemoea_Family-7eecd4-1600.webp"]{object-position:center 35%}

.service-statement .family-testimonial blockquote{max-width:850px;margin:0 0 24px;font-family:Georgia,serif;font-size:clamp(24px,2.6vw,38px);line-height:1.4}.service-statement .family-testimonial .eyebrow{margin:0}

.service-statement>img[src="assets/optimized/Kita_Boys-0ca635-1600.webp"]{object-position:center top}

/* Larger photographs in the Family introduction. */
.service-page .service-intro{grid-template-columns:1.15fr 1fr;gap:8%}
.service-page .service-collage{width:100%;max-width:560px;padding-right:12%}
.service-page .service-inset{width:55%}
@media(max-width:800px){.service-page .service-intro{grid-template-columns:1fr;gap:40px}.service-page .service-collage{width:100%;max-width:500px}}

.maternity-page .service-hero .hero-image>img{transform:scaleX(-1)}

.maternity-page .service-filmstrip img[src="assets/optimized/Logan_Tupou-8607e0-1600.webp"]{object-position:center 100%}

.home-page .photo-grid img[src="assets/optimized/sport-3a551c-1600.webp"]{object-position:45% center}

.culture-page .service-statement>div{background:none}

.sports-page .sports-package-grid,.events-page .events-package-grid{grid-template-columns:1fr;max-width:650px}

/* More room above the couple in the Events photo banner. */
.events-page .service-statement,.events-page .service-statement>div{min-height:640px}
.events-page .service-statement>img{object-position:center top}
@media(max-width:550px){.events-page .service-statement,.events-page .service-statement>div{min-height:500px}}

.newborn-page .service-arch[src="assets/optimized/Maia-Edited-2-6b4b98-1600.webp"]{object-position:40% center}

.contact-header{display:block;padding:0;background:var(--ink)}.contact-header .banner-nav{position:relative}.contact-layout{display:grid;grid-template-columns:1fr 1fr;gap:8%;padding:80px 8%;background:var(--ivory)}.contact-introduction h1{font-size:clamp(48px,5vw,76px)}.contact-introduction>img{width:100%;max-width:420px;aspect-ratio:4/3;margin-top:35px}.contact-form{background:var(--olive);color:var(--ivory);padding:35px;align-self:start}.contact-form label{display:block;margin:18px 0 6px;font-size:14px}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:12px;border:1px solid #b8bea9;border-radius:0;background:var(--ivory);color:var(--ink);font:inherit}.contact-form .button{margin-top:24px;border:0;background:var(--ivory);color:var(--ink);cursor:pointer;width:100%}.form-instructions,.contact-form-note{font-size:13px;line-height:1.5}.contact-form input:focus-visible,.contact-form select:focus-visible,.contact-form textarea:focus-visible{outline:3px solid #bb6c57;outline-offset:3px}@media(max-width:800px){.contact-layout{grid-template-columns:1fr;padding:50px 7%;gap:35px}.contact-form{padding:25px}.contact-header .banner-nav{height:auto;min-height:100px;flex-wrap:wrap}.contact-header .home-nav-links{flex-wrap:wrap}}

.events-page .events-package-grid{grid-template-columns:1fr;max-width:650px}

.home-page .home-pricing-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;width:min(720px,100%);margin:15px auto 0}.home-pricing-links a{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:17px 22px;border:1px solid rgba(247,243,235,.65);background:rgba(37,35,33,.38);color:var(--ivory);font-size:16px;letter-spacing:.08em;text-transform:uppercase;transition:background .2s}.home-pricing-links a:hover{background:rgba(37,35,33,.7);border:1px solid var(--ivory)}.home-pricing-links a span{font-size:22px}@media(max-width:600px){.home-page .home-pricing-links{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.home-pricing-links a{padding:14px;font-size:13px}}

/* Keep homepage pricing links below the couple’s faces. */
.home-page #pricing>.home-pricing-links{margin-top:auto;padding-top:65px}
.home-pricing-links a{border-radius:28px;padding:9px 22px;line-height:1.4}
@media(max-width:600px){.home-pricing-links a{padding:9px 15px}.home-page #pricing>.home-pricing-links{padding-top:100px}}

.home-page #connection .button{border-radius:28px}

/* Phone and tablet layouts: shared across the portfolio and contact pages. */
@media(max-width:800px){
  .banner-nav,.home-page .banner-nav{height:auto;min-height:112px;grid-template-columns:minmax(100px,.8fr) minmax(0,1.3fr);gap:12px;padding:14px 5%}
  .banner-nav .banner-logo{grid-column:1;grid-row:1;max-width:180px;width:100%}
  .banner-nav .banner-logo img{width:100%;height:auto;max-height:76px;object-fit:contain}
  .banner-nav .home-nav-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;align-items:center}
  .banner-nav .home-nav-links a{display:flex;align-items:center;justify-content:center;min-height:36px;font-size:12px}
  .service-title h1{font-size:clamp(44px,10.5vw,82px);overflow-wrap:normal}
  .service-title .eyebrow{font-size:11px}
  .service-page .service-process ol{grid-template-columns:1fr;max-width:520px;margin-top:35px}
  .service-page .service-questions{grid-template-columns:1fr;gap:0;margin-block:30px}
  .service-page .service-feature-links{grid-template-columns:1fr;gap:36px}
  .service-page .family-links-copy{grid-column:1;grid-row:1;min-width:0}
  .service-page .service-feature-links>img{grid-column:1;grid-row:2;width:85%;justify-self:center}
  .service-page .service-collage{min-width:0}
  .contact-header .banner-nav{min-height:112px}
  .contact-form input,.contact-form select,.contact-form textarea{font-size:16px}
}
@media(max-width:550px){
  h1,h2,p,blockquote{overflow-wrap:break-word}
  .hero,.service-page .service-hero{height:90svh;min-height:480px}
  .home-page .banner-nav{flex-shrink:0}
  .intro-copy h2{font-size:clamp(44px,13vw,60px)}
  .service-page .service-intro h2,.service-page .service-feature-links h2,.service-faq h2{font-size:clamp(40px,11vw,54px)}
  .service-page .service-intro{padding:55px 7% 65px}
  .service-page .service-collage{max-width:360px;padding-bottom:45px}
  .service-inset{border-width:5px}
  .photo-grid{grid-template-columns:1fr;gap:40px}
  .photo-grid>*,.family-package-grid>*,.contact-layout>*{min-width:0}
  .home-page .photo-grid figcaption{font-size:clamp(42px,13vw,62px)}
  .service-statement>div{padding:55px 7%}
  .service-statement h2{font-size:clamp(40px,11vw,54px)}
  .service-statement .family-testimonial blockquote{font-size:23px;line-height:1.45}
  .service-page #pricing.service-pricing{padding:55px 7%}
  .service-page #pricing.service-pricing h2{font-size:clamp(40px,11vw,54px)}
  .family-package{padding:25px}.family-package.full-gallery{padding-top:22px}
  .family-package h3{font-size:38px}.package-price{font-size:56px}
  .family-package .button,.service-cta .button,.service-faq>.button{min-height:44px}
  .service-filmstrip{gap:3px}.service-filmstrip img{height:130px}
  .home-page .home-pricing-links a{min-height:44px;font-size:12px;padding:8px 12px}
  .service-questions summary{padding-block:5px}
  .contact-layout{padding:40px 6%;gap:30px}.contact-introduction h1{font-size:46px}
  .contact-form{padding:24px 20px}.contact-form .button{min-height:48px}
  footer{flex-direction:column;gap:16px;text-align:center}footer p{margin:0}
  #site-menu{overflow-y:auto;padding:85px 8% 35px}#site-menu nav a{min-height:44px}
}

/* Matching portrait arches across all six homepage portfolio photographs. */
.home-page .photo-grid figure img{border-radius:50% 50% 0 0 / 37.5% 37.5% 0 0}

/* Mobile logo strip; navigation stays available through the Menu button. */
@media(max-width:800px){
  .home-page:not(.contact-page) .banner-nav{display:flex;justify-content:center;min-height:96px;padding:12px 5%;height:auto}
  .home-page:not(.contact-page) .banner-nav>div{display:none}
  .home-page:not(.contact-page) .banner-nav .banner-logo{width:180px;max-width:60%;margin:0 auto}
  .home-page:not(.contact-page) .banner-nav .banner-logo img{width:100%;height:auto;max-height:72px}
}

/* Larger mobile wordmark with charcoal backing overlapping the hero. */
@media(max-width:800px){
  .home-page:not(.contact-page) .banner-nav{min-height:96px;isolation:isolate;overflow:visible}
  .home-page:not(.contact-page) .banner-nav::before{content:'';position:absolute;inset:-24px 0 0;background:var(--ink);z-index:-1;pointer-events:none}
  .home-page:not(.contact-page) .banner-nav .banner-logo{width:230px;max-width:72%;transform:translateY(-14px)}
  .home-page:not(.contact-page) .banner-nav .banner-logo img{max-height:90px}
}
@media(max-width:800px){
  .home-page:not(.contact-page) .banner-nav .banner-logo{flex:0 0 230px;max-width:72%}
}

/* Tighter mobile spacing below the homepage logo strip. */
@media(max-width:800px){
  .home-page #story.intro{padding-top:40px;row-gap:20px}
  .home-page #story .intro-images{padding-bottom:50px}
  .home-page #story .intro-copy>.eyebrow{margin-top:0}
}

@media(max-width:800px){.home-page #story.intro{row-gap:0}.home-page #story .intro-images{padding-bottom:35px}}
@media(max-width:800px){
  .home-page #story .intro-copy>.eyebrow{margin-bottom:8px}
}

/* Compact two-column mobile portfolio with portrait arches. */
@media(max-width:550px){
  .home-page .photo-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:14px;row-gap:42px}
  .home-page .photo-grid figure{min-width:0;max-width:100%}
  .home-page .photo-grid figure img{width:100%;max-width:100%;height:auto;aspect-ratio:3 / 4}
  .home-page .photo-grid figcaption{font-size:clamp(25px,7vw,36px);padding:0 5px;bottom:5px;line-height:1.05}
  .home-page .portfolio{padding-left:6%;padding-right:6%;padding-bottom:75px}
}

/* Less empty space after the homepage's final process step. */
.home-page .about-process{padding-bottom:85px}
@media(max-width:600px){.home-page .about-process{padding-bottom:65px}}

/* Desktop contact invitation: photo fills the right half edge to edge. */
@media(min-width:801px){
  .home-page #connection{grid-template-columns:1fr 1fr;gap:0;padding:0;align-items:stretch}
  .home-page #connection>div:not(.connection-photo){padding:80px 12%;align-self:center;min-width:0}
  .home-page #connection>.connection-photo{aspect-ratio:auto;border-radius:0;align-self:stretch;position:relative;min-height:620px;max-width:none}
  .home-page #connection .connection-photo>img{position:absolute;inset:0;width:100%;height:100%;transform:none;object-fit:cover;object-position:center}
}

/* Breathing room around the enquiry button and a shorter Clients section. */
.home-page #connection .button{margin-top:20px}
.home-page #clients{padding-bottom:55px}

/* Mobile contact photo: wide frame with softly rounded upper corners. */
@media(max-width:800px){
  .home-page #connection>.connection-photo{width:100%;max-width:600px;aspect-ratio:4 / 3;border-radius:36px 36px 0 0;align-self:auto;justify-self:center;padding:0;overflow:hidden}
  .home-page #connection .connection-photo>img{width:100%;height:100%;border-radius:0;transform:none;object-fit:cover;object-position:center}
}

/* Centre the contact invitation button with balanced vertical spacing. */
.home-page #connection .button{display:table;width:fit-content;max-width:100%;margin:28px auto;text-align:center}
.home-page #connection>div:not(.connection-photo)>p:last-of-type{margin-bottom:0}

/* Alternate mobile contact photo treatment: a soft landscape oval. */
@media(max-width:800px){
  .home-page #connection>.connection-photo{width:100%;max-width:540px;aspect-ratio:5 / 4;border-radius:50%;margin-bottom:30px}
}

/* Mobile contact photo spans the screen beneath the invitation. */
@media(max-width:800px){
  .home-page #connection{padding-left:0;padding-right:0;row-gap:0}
  .home-page #connection>div:not(.connection-photo){padding-left:7%;padding-right:7%;padding-bottom:20px}
  .home-page #connection>.connection-photo{width:100%;max-width:none;aspect-ratio:4 / 3;border-radius:0;margin:0;justify-self:stretch}
  .home-page #connection .connection-photo>img{border-radius:0;object-fit:cover;transform:none}
}

/* Mobile homepage ends at the full-width contact photograph. */
@media(max-width:800px){
  body.home-page:not(.service-page):not(.about-page) #clients,
  body.home-page:not(.service-page):not(.about-page)>footer{display:none}
}
@media(max-width:800px){
  body.home-page:not(.service-page):not(.about-page)>footer{display:flex}
}

.mobile-photo-cta{display:none!important}
@media(max-width:800px){
  .home-page #connection>div:not(.connection-photo) .button{display:none}
  .home-page #connection>.connection-photo{position:relative}
  .home-page #connection .mobile-photo-cta{display:table!important;position:absolute;z-index:2;bottom:20px;left:50%;transform:translateX(-50%);margin:0;width:max-content;max-width:90%;font-size:12px;padding:12px 20px}
}
@media(max-width:800px){
  .home-page #connection .mobile-photo-cta{background:rgba(247,243,235,.65);border:1px solid rgba(247,243,235,.75);color:var(--ink)}
  .home-page #connection .mobile-photo-cta:hover{background:rgba(247,243,235,.85)}
}

.home-pricing-links a{justify-content:center;text-align:center}

/* Enquiry buttons share the translucent charcoal pricing-button treatment. */
.home-page #connection .button,
.home-page #connection .mobile-photo-cta{background:rgba(37,35,33,.38);color:var(--ivory);border:1px solid rgba(247,243,235,.65);border-radius:28px;padding:9px 22px;min-height:44px;font-size:14px;line-height:1.4;letter-spacing:.08em;text-align:center}
.home-page #connection .button:hover{background:rgba(37,35,33,.7);border-color:var(--ivory)}

/* Align the enquiry label centrally within its button. */
.home-page #connection .button{display:flex;align-items:center;justify-content:center;text-align:center}
.home-page #connection .mobile-photo-cta{display:none!important}
@media(max-width:800px){
  .home-page #connection>div:not(.connection-photo) .button{display:none}
  .home-page #connection .mobile-photo-cta{display:flex!important;align-items:center;justify-content:center;text-align:center}
}

/* Omit the closing enquiry strip on mobile portfolio pages. */
@media(max-width:800px){
  .service-page .service-cta{display:none}
}

/* Package enquiry buttons use the brand's darker terracotta. */
.family-package .button{background:var(--rust);color:var(--ivory)}
.family-package .button:hover{background:#713b2c;color:var(--ivory)}

/* Lower the Babies photo-banner copy on mobile. */
@media(max-width:800px){
  .newborn-page .service-statement>div{justify-content:flex-end;padding-top:150px;padding-bottom:35px}
}

/* Lower the Events photo-banner copy on mobile. */
@media(max-width:800px){
  .events-page .service-statement>div{justify-content:flex-end;padding-top:150px;padding-bottom:35px}
}

/* Keep the mobile menu control accessible while scrolling. */
@media(max-width:800px){
  .home-page .menu-toggle{position:fixed;top:0;left:6%;z-index:50}
}

.home-intro-heading{font-size:clamp(46px,6vw,84px)}
@media(max-width:800px){.home-intro-heading{font-size:60px}}
@media(max-width:550px){.home-intro-heading{font-size:clamp(44px,13vw,60px)}}

.home-page .photo-grid img[src="assets/optimized/DSCF2200-1600.webp"]{object-position:66% center}

/* Consistent minimum photo-strip height across all portfolio pages. */
.service-page .service-filmstrip img{height:300px;min-height:300px;object-fit:cover}
@media(max-width:800px){.service-page .service-filmstrip img{height:auto;min-height:0;aspect-ratio:3 / 2;object-fit:cover}}

/* Minimum height for the full-width testimonial/text photograph banners. */
.service-page .service-statement,
.service-page .service-statement>div{min-height:640px}
@media(max-width:800px){
  .service-page .service-statement,
  .service-page .service-statement>div{min-height:500px}
}

/* Scale the contact photograph independently of its original pixel dimensions. */
.contact-page .contact-introduction>img{display:block;width:100%;max-width:420px;height:auto;aspect-ratio:4 / 3;object-fit:cover;object-position:center}

/* Contact photograph matches the introduction copy width. */
.contact-page .contact-introduction>img{width:100%;max-width:550px}

/* Centre button labels consistently across desktop and mobile. */
.button,.family-package .button,.service-page .service-feature-links .button{justify-content:center;text-align:center}
.service-page .service-feature-links .button>span{font-size:inherit;line-height:inherit}

/* Keep the couple central in the flipped maternity hero on phones. */
@media(max-width:800px){.maternity-page .service-hero .hero-image>img{object-position:25% center}}

/* Frame mum and baby together in the mobile Babies photo banner. */
@media(max-width:800px){.newborn-page .service-statement>img{object-position:40% 55%}}

/* Session pages sit beneath Photography in the expanded menu. */
#site-menu{overflow-y:auto}
#site-menu .menu-session-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 28px;padding:0 0 8px 20px;border-left:1px solid rgba(247,243,235,.35)}
#site-menu .menu-session-links a{font-family:'DM Sans',sans-serif;font-size:17px;min-height:44px;display:flex;align-items:center}