:root{
  --paper:#f4f0e8;
  --ink:#24221f;
  --muted:#756f67;
  --line:#c9c1b6;
  --soft:#e6ded3;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"DM Sans",sans-serif;
  font-weight:300;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; justify-content:space-between; align-items:center;
  padding:22px 5vw;
  background:rgba(244,240,232,.94);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(36,34,31,.08);
}
.brand{font-size:.82rem;font-weight:500;letter-spacing:.24em}
nav{display:flex;gap:30px;font-size:.86rem}
nav a:hover,.footer-links a:hover,.text-link:hover{opacity:.55}

.hero{
  min-height:88vh;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  align-items:stretch;
}
.hero-image{min-height:720px}
.placeholder{
  background:
  linear-gradient(rgba(30,25,21,.12),rgba(30,25,21,.12)),
  radial-gradient(circle at 30% 25%, #c4b9a9 0, #a89c8b 33%, #81786c 75%, #6a6259 100%);
  color:rgba(255,255,255,.65);
  display:flex;align-items:center;justify-content:center;
  letter-spacing:.2em;font-size:.72rem;
}
.hero-copy{
  display:flex;flex-direction:column;justify-content:center;
  padding:9vw 7vw;
}
.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.68rem;
  font-weight:500;
  margin:0 0 24px;
}
h1,h2,h3,blockquote{
  font-family:"Italiana",serif;
  font-weight:400;
}
h1{
  font-size:clamp(3.4rem,6vw,7rem);
  line-height:.93;
  margin:0 0 32px;
  letter-spacing:-.035em;
}
.lead{max-width:520px;font-size:1.06rem;color:var(--muted);margin-bottom:34px}
.button{
  display:inline-block;
  border:1px solid var(--ink);
  padding:13px 20px;
  width:max-content;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-size:.82rem;
  cursor:pointer;
  transition:.2s ease;
}
.button:hover{background:var(--ink);color:var(--paper)}
.intro{padding:12vw 10vw}
.intro h2,.section-heading h2,.contact h2,.about h2{
  font-size:clamp(2.6rem,5vw,5.4rem);
  line-height:1.02;
  margin:0 0 55px;
}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:8vw;max-width:1000px}
.two-col p{font-size:1.08rem}

.gallery{padding:0 5vw 10vw}
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:330px;
  gap:14px;
}
.photo.tall{grid-row:span 2}
.photo.wide{grid-column:span 2}

.quote-section{
  padding:12vw 12vw;
  text-align:center;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
blockquote{
  font-size:clamp(2.3rem,4.8vw,5rem);
  max-width:1100px;
  margin:auto;
  line-height:1.08;
}

.sessions,.process,.contact{padding:11vw 7vw}
.package-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid var(--line);
}
.package{padding:42px 34px;border-right:1px solid var(--line)}
.package:last-child{border-right:0}
.package-number{font-size:.7rem;letter-spacing:.15em}
.package h3{font-size:2.6rem;margin:8px 0}
.package-sub{color:var(--muted);margin-top:-7px}
.package ul{padding-left:18px;color:var(--muted)}
.price{font-size:1.05rem;font-weight:500;margin-top:30px}
.fine-print{font-size:.74rem;color:var(--muted);margin-top:20px}

.process{background:var(--soft)}
.steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.steps>div{padding:35px 24px 10px 0}
.steps span{font-size:.72rem;letter-spacing:.15em;color:var(--muted)}
.steps h3{font-size:1.8rem;margin:20px 0 8px}
.steps p{font-size:.9rem;color:var(--muted)}

.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:750px;
}
.about-image{min-height:700px}
.about-copy{padding:9vw 8vw;display:flex;flex-direction:column;justify-content:center}
.about-copy h2{margin-bottom:30px}
.about-copy p{max-width:560px}
.text-link{margin-top:18px;border-bottom:1px solid var(--ink);width:max-content;padding-bottom:3px}

.contact{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:10vw;
}
.contact-copy p{max-width:460px}
form{display:grid;grid-template-columns:1fr 1fr;gap:22px}
form label{
  display:flex;flex-direction:column;gap:8px;
  font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;
}
form label:nth-of-type(5){grid-column:1/-1}
input,textarea{
  border:0;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:11px 2px;
  font:inherit;
  border-radius:0;
}
textarea{border:1px solid var(--line);padding:12px}
input:focus,textarea:focus{outline:none;border-color:var(--ink)}
form button{grid-column:1/-1;margin-top:8px}
.form-note{grid-column:1/-1;font-size:.8rem;color:var(--muted)}

footer{
  padding:45px 5vw;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto;
  gap:25px;
  align-items:end;
}
footer p{margin:10px 0 0;color:var(--muted);font-size:.78rem}
.footer-links{display:flex;gap:22px;font-size:.8rem}
.copyright{grid-column:1/-1}

@media(max-width:900px){
  nav{display:none}
  .hero,.about,.contact{grid-template-columns:1fr}
  .hero-image,.about-image{min-height:62vh}
  .hero-copy{padding:18vw 7vw}
  .two-col,.package-grid,.steps{grid-template-columns:1fr}
  .package{border-right:0;border-bottom:1px solid var(--line);padding-left:0}
  .gallery-grid{grid-template-columns:1fr 1fr;grid-auto-rows:260px}
  .photo.wide{grid-column:span 2}
  .steps>div{border-bottom:1px solid var(--line);padding:30px 0}
}
@media(max-width:600px){
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:420px}
  .photo.wide{grid-column:auto}
  form{grid-template-columns:1fr}
  form label:nth-of-type(5),form button,.form-note{grid-column:auto}
  footer{grid-template-columns:1fr}
}

/* Landscape hero preserves both children in the photograph. */
.hero{grid-template-columns:1fr;min-height:0}
.hero-image{min-height:0;line-height:0}
.hero-image img{display:block;width:100%;height:auto}
.hero-copy{padding:70px 7vw 85px;align-items:center;text-align:center}
.hero-copy h1{max-width:1100px}
.hero-copy .lead{max-width:650px}
@media(max-width:900px){.hero-image{min-height:0}.hero-copy{padding:48px 7vw 60px}.site-header{flex-wrap:wrap;gap:14px}nav{display:flex;gap:16px;flex-wrap:wrap}}

.package-photo{display:block;width:75%;max-width:260px;height:auto;aspect-ratio:1 / 1;object-fit:cover;object-position:right center;margin:20px auto 28px}
.package-photo.maternity-photo{object-position:center 40%}
.package-photo.combined-photo{object-position:20% center}

/* Gallery keeps the full composition of every photograph. */
.gallery-grid{display:block;columns:3;column-gap:18px}
.gallery-grid img{display:block;width:100%;height:auto;margin:0 0 18px;break-inside:avoid}
@media(max-width:900px){.gallery-grid{columns:2}}
@media(max-width:600px){.gallery-grid{columns:1}}

/* Keep the three session packages side by side on tablet and desktop. */
@media(min-width:601px){
  .package-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
  .package{min-width:0;padding:32px clamp(12px,2vw,34px);border-bottom:0;border-right:1px solid var(--line)}
  .package:last-child{border-right:0}
  .package h3{font-size:clamp(1.65rem,3vw,2.6rem)}
}

/* Align package headings with their centred square photographs. */
.package h3{text-align:center}
.package-number{text-align:center}

/* Two full portraits accompany the photographer introduction. */
.about{align-items:center;min-height:0}
.about-portraits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:40px 0 40px 5vw;align-items:center}
.about-portraits img{display:block;width:100%;height:auto}
.about-portraits img:last-child{margin-top:64px}
@media(max-width:900px){.about-portraits{padding:32px 7vw 0}.about-portraits img:last-child{margin-top:32px}}

/* Three portraits, with the colour photograph in the middle. */
.about{grid-template-columns:1fr}
.about-portraits{grid-template-columns:repeat(3,minmax(0,1fr));padding:40px 7vw 0;gap:18px;align-items:start}
.about-portraits img:last-child{margin-top:0}
.about-copy{padding:60px 10vw 80px;max-width:1000px;margin:auto;width:100%}
.about-copy p{max-width:none}
@media(max-width:600px){.about-portraits{gap:8px;padding:28px 5vw 0}.about-copy{padding:40px 7vw 60px}}

/* Prominent Unfold wordmark in the site header. */
.site-header .brand{font-size:clamp(2.5rem,5vw,4rem);letter-spacing:.2em;line-height:1.2}

/* Each letter unfolds once as the page opens. */
.brand-unfold{perspective:700px}
.brand-letter{display:inline-block;transform-origin:left center;animation:unfold-letter 1s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.15s + var(--letter) * .2s)}
@keyframes unfold-letter{
  from{opacity:0;transform:rotateY(-85deg) translateY(.16em)}
  to{opacity:1;transform:rotateY(0) translateY(0)}
}
@media(prefers-reduced-motion:reduce){.brand-letter{animation:none}}

/* Editorial serif lettering for the animated wordmark. */
.site-header .brand{font-family:"Italiana",serif;font-weight:400;letter-spacing:.12em}

.booking-cta{text-align:center;padding:0 7vw 24px}
#contact{scroll-margin-top:120px}

.hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}