@font-face{
  font-family:'Inter'; src:url('inter-var.woff2') format('woff2');
  font-weight:400 800; font-style:normal; font-display:swap;
}

:root{
  --ink:#141414;
  --dim:#666;
  --line:#E6E6E3;
  --wash:#F6F6F3;
  --paper:#fff;
  --red:#E11211;      /* the logo's red */
  --red-hover:#C20F0E;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --gut:clamp(1rem,4vw,2.5rem);
  --max:84rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:6rem}
body{
  margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans);
  font-size:clamp(1rem,.96rem + .2vw,1.125rem); line-height:1.55; letter-spacing:-.011em;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is load-bearing: the width/height attributes are for layout stability only */
img{display:block; max-width:100%; width:100%; height:auto}
a{color:inherit}
p{margin:0 0 1rem}
:focus-visible{outline:2px solid var(--red); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.band{padding-block:clamp(3.5rem,8vw,7rem)}
.red{color:var(--red)}

h1,h2{margin:0; font-weight:700; letter-spacing:-.04em; line-height:1.02; text-wrap:balance}
h1{font-size:clamp(2.6rem,1.5rem + 4.6vw,5.25rem)}
h2{font-size:clamp(2rem,1.4rem + 2.6vw,3.5rem)}
h3{margin:0; font-size:1.0625rem; font-weight:650; letter-spacing:-.018em}
.lead{font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem); line-height:1.45; color:var(--dim); max-width:36em; margin:1.4rem 0 0}

/* header */
.top{position:sticky; top:0; z-index:20; background:var(--paper); border-bottom:1px solid var(--line)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-block:.5rem}
.mark{display:block; flex:none; line-height:0}
.mark img{width:78px}
@media(max-width:40rem){.mark img{width:64px}}

/* buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; text-decoration:none; white-space:nowrap;
  background:var(--red); color:#fff; font-weight:650; letter-spacing:-.012em; border-radius:100px;
  padding:.95rem 1.7rem; transition:background-color .15s ease;
  border:0; font-family:inherit; font-size:inherit; cursor:pointer;
}
.btn:hover{background:var(--red-hover)}
.btn.small{padding:.55rem 1.1rem; font-size:.9375rem}

/* small labels: rounded corners here only, never on headlines */
.chips{display:flex; flex-wrap:wrap; gap:.5rem; margin:1.75rem 0 0; padding:0; list-style:none}
.chips li{
  display:inline-flex; align-items:center; gap:.45rem; font-size:.875rem; color:var(--ink);
  border:1px solid var(--line); border-radius:100px; padding:.4rem .8rem;
}
.chips svg{width:15px; height:15px; flex:none; color:var(--red)}

/* hero */
.hero{display:grid; gap:clamp(2rem,4vw,4rem); align-items:center; padding-block:clamp(2rem,5vw,4.5rem)}
@media(min-width:60rem){.hero{grid-template-columns:1.05fr .95fr}}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:.75rem 1.1rem; margin-top:2rem}
.hero img{border-radius:4px; width:100%; aspect-ratio:1; object-fit:cover; object-position:bottom}
@media(min-width:60rem){.hero img{aspect-ratio:4/5}}

/* why photos */
.uses{display:grid; gap:clamp(1.5rem,3vw,2.5rem); margin:0; padding:0; list-style:none}
@media(min-width:48rem){.uses{grid-template-columns:repeat(3,1fr)}}
.uses li{border-top:2px solid var(--ink); padding-top:.9rem}
.uses p{margin:.4rem 0 0; color:var(--dim); font-size:.9375rem}
@media(min-width:48rem){.uses.four{grid-template-columns:repeat(2,1fr)}}
@media(min-width:64rem){.uses.four{grid-template-columns:repeat(4,1fr)}}

/* packages */
.plans{display:grid; gap:clamp(1rem,2.4vw,2rem); margin-top:clamp(2.5rem,5vw,4rem)}
@media(min-width:48rem){.plans{grid-template-columns:repeat(2,1fr)}}
.plan{display:flex; flex-direction:column; align-items:flex-start; background:var(--wash); border-radius:4px; padding:clamp(1.5rem,3vw,2.5rem)}
.plan h3{align-self:center; text-align:center; font-size:clamp(1.5rem,1.2rem + 1vw,2rem); letter-spacing:-.03em; margin:0 0 .4rem}
.plan-price{align-self:center; margin:0 0 .5rem; font-size:clamp(1.25rem,1.1rem + .6vw,1.625rem); font-weight:650; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.plan-for{align-self:center; text-align:center; margin:0 0 1.25rem; color:var(--dim); font-size:.9375rem}
.head + .plans{margin-top:0}
.plan .specs{width:100%; margin-bottom:1.75rem}
.plan .btn{margin-top:auto; align-self:center}
.plan-note{margin:1.25rem 0 0; color:var(--dim); font-size:.9375rem}

/* booking */
.book{padding-block:clamp(1.5rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.book h1{outline:none; margin-bottom:1rem}
.book h2{font-size:1.125rem; letter-spacing:-.02em; margin:0}
.book .plans{margin-top:clamp(1.5rem,3vw,2.5rem)}
.book-steps{display:flex; gap:.5rem 1.5rem; margin:0 0 clamp(1.5rem,3vw,2.5rem); padding:0; list-style:none; counter-reset:b; font-size:.875rem; color:var(--dim)}
.book-steps li{counter-increment:b}
.book-steps li::before{content:counter(b) ". "}
.book-steps .current{color:var(--ink); font-weight:600}
.book-note{margin:0 0 1.25rem; padding:.75rem 1rem; background:var(--wash); border-radius:4px; font-size:.9375rem}
.link{background:none; border:0; padding:0; font:inherit; color:var(--dim); text-decoration:underline; cursor:pointer}
.link:hover{color:var(--ink)}
.calendar-layout{display:grid; gap:clamp(1.5rem,4vw,3.5rem); margin-top:clamp(1.25rem,3vw,2rem); align-items:start}
@media(min-width:48rem){.calendar-layout{grid-template-columns:minmax(0,28rem) minmax(0,16rem)}}
.calendar-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:1rem}
.cal-nav{width:2.75rem; height:2.75rem; border:1px solid var(--line); border-radius:50%; background:var(--paper); font:inherit; cursor:pointer}
.cal-nav:hover:not(:disabled){border-color:var(--ink)}
.cal-nav:disabled{opacity:.3; cursor:default}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:.25rem}
.cal-days{margin-bottom:.35rem; font-size:.75rem; color:var(--dim); text-align:center}
.cal-grid[aria-busy=true]{opacity:.45}
.cal-day{aspect-ratio:1; min-height:2.75rem; border:0; border-radius:50%; background:var(--wash); font:inherit; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); cursor:pointer}
.cal-day:hover:not(:disabled){background:#E8E8E4}
.cal-day:disabled{background:none; color:#B5B5B1; font-weight:400; cursor:default}
.cal-day.selected,.cal-day.selected:hover{background:var(--red); color:#fff}
.times-zone{margin:.15rem 0 1rem; font-size:.875rem; color:var(--dim)}
.time-list{display:grid; gap:.5rem}
.time-option{min-height:3rem; border:1px solid var(--line); border-radius:4px; background:var(--paper); font:inherit; font-weight:550; cursor:pointer}
.time-option:hover{border-color:var(--ink)}
.review-layout{display:grid; gap:clamp(2rem,5vw,4rem); margin-top:clamp(1.25rem,3vw,2rem); align-items:start}
@media(min-width:56rem){.review-layout{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}}
#review-form h2:not(:first-child){margin-top:2rem}
.field{margin-top:1rem}
.field label{display:block; margin-bottom:.35rem; font-size:.875rem; font-weight:550}
.field input{width:100%; min-height:3rem; padding:.6rem .8rem; border:1px solid #CFCFCB; border-radius:4px; background:var(--paper); font:inherit; color:var(--ink)}
.field input[aria-invalid=true]{border-color:var(--red)}
.field-row{display:grid; grid-template-columns:minmax(0,1fr) 8rem; gap:.75rem}
.field-error,.form-error{margin:.35rem 0 0; font-size:.875rem; color:var(--red-hover)}
.form-error{margin-top:1rem}
.summary{background:var(--wash); border-radius:4px; padding:clamp(1.5rem,3vw,2.25rem)}
.summary .specs{margin-top:1rem}
.sum-total dd{font-size:1.25rem; font-weight:650; font-variant-numeric:tabular-nums}
.change-links{display:flex; flex-wrap:wrap; gap:.25rem 1rem; margin:.9rem 0 0; font-size:.875rem}
.agree{display:flex; gap:.6rem; align-items:flex-start; margin-top:1.25rem; font-size:.9375rem; cursor:pointer}
.agree input{width:1.15rem; height:1.15rem; margin:.15rem 0 0; flex:none; accent-color:var(--red)}
.summary .btn{margin-top:1.25rem; width:100%; justify-content:center}
.summary .btn:disabled{opacity:.6; cursor:default}
.booked .specs{margin-top:2rem; max-width:36rem}
.booked h1{margin-bottom:1rem}

/* section heads */
.head{max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem)}
.head .lead{text-wrap:pretty}

/* portfolio folders */
.folders{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(1.25rem,2.4vw,2rem)}
@media(max-width:60rem){.folders{grid-template-columns:repeat(2,1fr)}}
@media(max-width:34rem){.folders{grid-template-columns:1fr}}
.folder{display:block; text-decoration:none}
.folder .frame{aspect-ratio:4/5; overflow:hidden; border-radius:4px; background:var(--wash)}
.folder img{width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.folder:hover img{transform:scale(1.025)}
.folder .row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-top:.8rem}
.folder .count{font-size:.875rem; color:var(--dim); white-space:nowrap}
.folder p{margin:.2rem 0 0; font-size:.9375rem; color:var(--dim)}

/* package */
.wash{background:var(--wash)}
.package{display:grid; gap:clamp(2rem,5vw,5rem)}
@media(min-width:56rem){.package{grid-template-columns:.8fr 1.2fr}}
.specs{margin:0; border-top:1px solid #DADAD6}
.specs div{display:grid; grid-template-columns:minmax(7rem,.5fr) 1fr; gap:1rem; padding:1rem 0; border-bottom:1px solid #DADAD6}
.specs dt{color:var(--dim)}
.specs dd{margin:0; font-weight:550}

/* steps */
.steps{display:grid; gap:clamp(1.5rem,3vw,2.5rem); margin:0; padding:0; list-style:none; counter-reset:s}
@media(min-width:48rem){.steps{grid-template-columns:repeat(4,1fr)}}
.steps li{counter-increment:s; border-top:2px solid var(--ink); padding-top:.9rem}
.steps li::before{content:counter(s); display:block; font-size:.875rem; color:var(--red); font-weight:650; margin-bottom:.9rem}
.steps p{margin:.4rem 0 0; color:var(--dim); font-size:.9375rem}

/* faq */
.faq{max-width:50rem; border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; padding:1.15rem 2rem 1.15rem 0; font-weight:600; letter-spacing:-.015em; list-style:none; position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:.1rem; top:.95rem; font-size:1.4rem; font-weight:400; color:var(--dim)}
.faq details[open] summary::after{content:'\2212'}
.faq details p{color:var(--dim); margin:0 0 1.25rem; max-width:42em}


/* gallery pages */
.page-head{padding-block:clamp(2.25rem,5vw,4rem) clamp(1.5rem,3vw,2.5rem)}
.back{display:inline-block; font-size:.9375rem; color:var(--dim); text-decoration:none; margin-bottom:1.25rem}
.back:hover{color:var(--ink)}
/* column layout keeps every photo uncropped at its own shape */
.gallery{column-count:3; column-gap:clamp(.5rem,1vw,.9rem)}
@media(max-width:60rem){.gallery{column-count:2}}
@media(max-width:34rem){.gallery{column-count:1}}
.gallery img{break-inside:avoid; margin-bottom:clamp(.5rem,1vw,.9rem); border-radius:3px; background:var(--wash)}
.next{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:1.25rem; border-top:1px solid var(--line); margin-top:clamp(2.5rem,5vw,4rem); padding-block:clamp(2rem,4vw,3rem)}
.next a.plain{font-size:clamp(1.25rem,1rem + 1.2vw,1.875rem); font-weight:650; letter-spacing:-.03em; text-decoration:none}
.next small{display:block; font-size:.875rem; color:var(--dim); font-weight:400; letter-spacing:-.01em; margin-bottom:.15rem}

/* text pages */
.text{max-width:44rem; padding-block:clamp(2.5rem,6vw,5rem)}
.text h2{font-size:1.25rem; letter-spacing:-.02em; line-height:1.25; margin:2.25rem 0 .6rem}
.text p,.text li{color:#3D3D3D}
.text ul{padding-left:1.15rem; margin:0 0 1rem}
.text li{margin-bottom:.4rem}
.stamp{color:var(--dim); font-size:.9375rem; margin-top:.75rem}

/* footer */
footer{border-top:1px solid var(--line); padding-block:2rem; font-size:.875rem; color:var(--dim)}
footer .wrap{display:flex; flex-wrap:wrap; justify-content:space-between; gap:.5rem 2rem}
footer nav{display:flex; flex-wrap:wrap; gap:.25rem 1.25rem}
footer a{text-decoration:none}
footer a:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){*{transition:none !important; scroll-behavior:auto !important}}