:root{
  --cream:#faf7f2; --ink:#231f1c; --accent:#9c7a52; --accent-dark:#6e5436; --line:#e7ddd0;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:'Jost',sans-serif; color:var(--ink); background:var(--cream); line-height:1.6;}
h1,h2,h3{font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:.02em;}
a{color:inherit;}
.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}
/* Nav */
header{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:20px 32px; color:#fff; text-shadow:0 1px 12px rgba(0,0,0,.55);}
header::before{content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0)); pointer-events:none;}
header .logo{display:flex; align-items:center;}
header .logo a{display:block; line-height:0;}
header .logo img{height:38px; width:auto; display:block;}
header nav a{margin-left:28px; font-size:13px; text-transform:uppercase; letter-spacing:.12em; text-decoration:none;}
@media (max-width:620px){
  header{padding:16px 20px;}
  header nav a{margin-left:16px; font-size:11px; letter-spacing:.08em;}
}
/* Hero */
.hero{position:relative; height:auto; min-height:100vh; display:flex; align-items:flex-end; background:#1a1816 url('auckland-winery-wedding-photography-barrels.jpg') center/cover no-repeat;
        background-image:image-set(url('img/auckland-winery-wedding-photography-barrels-1600.webp') type('image/webp'), url('auckland-winery-wedding-photography-barrels.jpg') type('image/jpeg'));}
.hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.55));}
/* padding-top keeps the hero text clear of the fixed header on short screens */
.hero-content{position:relative; z-index:2; color:#fff; padding:110px 32px 80px; width:100%;}
.hero-content .eyebrow{text-transform:uppercase; letter-spacing:.25em; font-size:12px; opacity:.85; margin-bottom:18px;}
.hero-content h1{font-size:clamp(40px,7vw,86px); line-height:1.05; max-width:900px;}
.hero-content p.lead{margin-top:18px; font-size:18px; max-width:540px; opacity:.92;}
.hero-ctas{margin-top:34px; display:flex; gap:16px; flex-wrap:wrap;}

/* Desktop: the couple sit dead centre of this frame and the image has no
   horizontal slack at 16:9, so the headline has to be kept narrow enough that
   it physically cannot reach their faces. Rule: never set type across a face. */
@media (min-width:861px){
  .hero::before{content:''; position:absolute; inset:0; z-index:1; pointer-events:none;
    background:linear-gradient(100deg, rgba(0,0,0,.74) 0%, rgba(0,0,0,.46) 26%, rgba(0,0,0,0) 50%);}
  .hero-content h1{font-size:clamp(42px,3.5vw,56px); max-width:min(545px,31vw);}
  .hero-content h1 br{display:none;}
  .hero-content p.lead{max-width:min(455px,27vw); font-size:16.5px;}
  .hero-content .eyebrow{margin-bottom:14px;}
}

.btn{display:inline-block; padding:15px 32px; font-size:13px; text-transform:uppercase; letter-spacing:.14em; text-decoration:none; border-radius:2px; transition:all .25s ease;}
.btn-primary{background:var(--accent); color:#fff;}
.btn-primary:hover{background:var(--accent-dark);}
.btn-ghost{border:1px solid rgba(255,255,255,.7); color:#fff;}
.btn-ghost:hover{background:rgba(255,255,255,.12);}
/* Section generic */
section{padding:110px 0;}
.section-head{text-align:center; max-width:640px; margin:0 auto 60px;}
.section-head .eyebrow{text-transform:uppercase; letter-spacing:.25em; font-size:12px; color:var(--accent); margin-bottom:14px;}
.section-head h2{font-size:clamp(32px,4vw,48px);}
/* About */
.about{background:#fff;}
.about-grid{display:grid; grid-template-columns:1fr 1.1fr; gap:64px; align-items:start;}
.about-grid img{width:100%; height:auto; display:block; border-radius:2px;}
.about-grid > picture{margin-top:33px;}
.about-copy p{margin-bottom:18px; font-size:16px; color:#4a4540;}
.about-stats{display:flex; gap:40px; margin-top:34px; padding-top:30px; border-top:1px solid var(--line);}
.about-stats div strong{display:block; font-family:'Cormorant Garamond',serif; font-size:36px; color:var(--accent-dark);}
.about-stats div span{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#8a8277;}
@media (max-width:860px){.about-grid{grid-template-columns:1fr;} .about-grid > picture{margin-top:0;}}
/* Portfolio
   Masonry by CSS columns. The library is 30 landscape to 8 portrait, so any
   fixed tile shape crops most of it: the old 4/5 tiles were cutting 47% off
   the width of every 3:2 frame and slicing people out of group shots. Columns
   let each photo keep its own ratio, uncropped, with no gaps. */
.portfolio-grid{column-count:3; column-gap:14px;}
.portfolio-grid figure{break-inside:avoid; margin:0 0 14px; overflow:hidden; border-radius:2px; position:relative; display:block;}
.portfolio-grid img{width:100%; height:auto; display:block; transition:transform .5s ease;}
.portfolio-grid figure:hover img{transform:scale(1.06);}
@media (max-width:760px){.portfolio-grid{column-count:2; column-gap:10px;} .portfolio-grid figure{margin-bottom:10px;}}
@media (max-width:359px){.portfolio-grid{column-count:1;}}
/* Extras: magazine cover + album */
.extras{background:#fff;}
.extras-grid{display:grid; grid-template-columns:1.15fr 1fr; gap:56px; align-items:start;}
.extras-covers{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.extras-covers img{width:100%; height:auto; border-radius:3px; box-shadow:0 20px 50px rgba(35,31,28,.22);}
.extras-copy h3{font-size:26px; margin-bottom:10px;}
.extras-copy h3 + p{margin-bottom:18px;}
.extras-copy p{font-size:16px; color:#4a4540; margin-bottom:14px;}
.extras-copy h3:nth-of-type(2){margin-top:28px; padding-top:28px; border-top:1px solid var(--line);}
@media (max-width:860px){.extras-grid{grid-template-columns:1fr; gap:40px;}}
/* Locations */
.areas{background:var(--cream);}
.areas-grid{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:start;}
.areas-copy p{font-size:16px; color:#4a4540; margin-bottom:16px;}
.areas-list{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:10px 24px; margin-top:8px;}
.areas-list li{font-size:15px; color:#4a4540; padding-left:16px; position:relative;}
.areas-list li::before{content:''; position:absolute; left:0; top:11px; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.areas-services h3{font-size:22px; margin:0 0 14px;}
.areas-services{background:#fff; border:1px solid var(--line); border-radius:3px; padding:34px;}
.areas-services dl{margin:0;}
.areas-services dt{font-weight:500; font-size:15px; margin-top:18px;}
.areas-services dt:first-of-type{margin-top:0;}
.areas-services dd{margin:4px 0 0; font-size:15px; color:#6b655e;}
@media (max-width:860px){.areas-grid{grid-template-columns:1fr; gap:36px;} .areas-list{grid-template-columns:1fr;}}
/* FAQ */
.faq{background:#fff;}
.faq-list{max-width:820px; margin:0 auto;}
.faq-list details{border-bottom:1px solid var(--line); padding:22px 0;}
.faq-list summary{font-family:'Cormorant Garamond',serif; font-size:23px; cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:20px; align-items:baseline;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:'+'; color:var(--accent); font-family:'Jost',sans-serif; font-size:22px; line-height:1;}
.faq-list details[open] summary::after{content:'–';}
.faq-list details p{margin-top:14px; font-size:16px; color:#4a4540; max-width:72ch;}
/* Testimonials */
.testimonials{background:var(--accent-dark); color:#fff;}
.testimonials .section-head .eyebrow{color:#e3cfb0;}
.testimonials .section-head h2{color:#fff;}
.t-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.t-card{background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); padding:30px; border-radius:3px;}
.t-card p{font-size:15px; font-style:italic; opacity:.92; margin-bottom:18px;}
.t-card span{font-size:12px; text-transform:uppercase; letter-spacing:.1em; color:#e3cfb0;}
@media (max-width:860px){.t-grid{grid-template-columns:1fr;}}
/* Pricing */
.pricing{background:#fff;}
.p-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
.p-card{border:1px solid var(--line); padding:44px 34px; text-align:center; border-radius:3px; position:relative;}
.p-card.featured{border-color:var(--accent); box-shadow:0 20px 50px rgba(156,122,82,.15);}
.p-card .badge{position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--accent); color:#fff; font-size:11px; text-transform:uppercase; letter-spacing:.1em; padding:5px 16px; border-radius:20px;}
.p-card h3{font-size:26px; margin-bottom:6px;}
.p-card .price{font-family:'Cormorant Garamond',serif; font-size:44px; color:var(--accent-dark); margin:14px 0;}
.p-card ul{list-style:none; text-align:left; margin:24px 0; font-size:14px; color:#4a4540;}
.p-card ul li{padding:8px 0; border-bottom:1px solid var(--line);}
.p-card .btn{width:100%;}
@media (max-width:860px){.p-grid{grid-template-columns:1fr;}}
.pay-note{max-width:680px; margin:46px auto 0; text-align:center; padding:30px 34px; background:var(--cream); border:1px solid var(--line); border-radius:3px;}
.pay-note h3{font-size:24px; margin-bottom:10px; color:var(--accent-dark);}
.pay-note p{font-size:15px; color:#4a4540; margin:0;}
/* Contact */
.contact{background:#1a1816; color:#fff;}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:start;}
.contact-ring{width:100%; height:auto; max-width:420px; aspect-ratio:3/2; object-fit:cover; border-radius:3px; margin-bottom:28px; display:block;}
.contact-copy h2{font-size:clamp(30px,4vw,44px); margin-bottom:18px;}
.contact-copy p{opacity:.85; margin-bottom:26px; max-width:420px;}
.contact-links a{display:block; font-size:14px; text-decoration:none; opacity:.85; margin-bottom:10px;}
form{display:grid; gap:16px; align-content:start;}
form input, form select, form textarea{width:100%; padding:14px 16px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.2); color:#fff; font-family:inherit; font-size:14px; border-radius:2px;}
form textarea{min-height:110px; resize:vertical;}
form .row2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
form button{justify-self:start;}
@media (max-width:860px){.contact-grid{grid-template-columns:1fr;} form .row2{grid-template-columns:1fr;}}
footer{background:#141210; color:#8a8277; text-align:center; padding:28px; font-size:12px; letter-spacing:.05em;}

/* ---- Interior pages (locations, services, pricing) ---- */
.page-hero{position:relative; min-height:62vh; display:flex; align-items:flex-end; background:#1a1816 center/cover no-repeat;}
.page-hero::after{content:''; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), rgba(0,0,0,.6));}
.page-hero .hero-content{padding:140px 32px 64px;}
.page-hero h1{font-size:clamp(34px,5.2vw,64px); line-height:1.08; max-width:860px;}
.page-hero p.lead{margin-top:16px; font-size:17px; max-width:600px; opacity:.92;}
.crumbs{padding:18px 0 0; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#8a8277;}
.crumbs a{text-decoration:none; color:var(--accent-dark);}
.prose{max-width:760px; margin:0 auto;}
.prose h2{font-size:clamp(28px,3.4vw,40px); margin:52px 0 16px;}
.prose h2:first-child{margin-top:0;}
.prose h3{font-size:23px; margin:34px 0 10px;}
.prose p{font-size:17px; color:#4a4540; margin-bottom:18px;}
.prose ul{margin:0 0 20px 22px; color:#4a4540; font-size:17px;}
.prose ul li{margin-bottom:9px;}
.prose .callout{background:var(--cream); border:1px solid var(--line); border-left:3px solid var(--accent); padding:26px 30px; border-radius:3px; margin:30px 0;}
.prose .callout p:last-child{margin-bottom:0;}
.strip{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:44px 0;}
.strip picture{display:block;}
.strip img{width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; border-radius:2px; display:block;}
@media (max-width:760px){.strip{grid-template-columns:1fr 1fr;} .strip > *:last-child{display:none;}}
.cta-band{background:var(--accent-dark); color:#fff; text-align:center; padding:84px 0;}
.cta-band h2{font-size:clamp(28px,3.6vw,42px); color:#fff; margin-bottom:14px;}
.cta-band p{opacity:.9; max-width:520px; margin:0 auto 28px;}
.sitenav{background:#141210; color:#8a8277; padding:44px 24px 10px;}
.sitenav-grid{max-width:1180px; margin:0 auto; display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.sitenav h4{font-family:'Jost',sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#cbbda6; margin-bottom:12px; font-weight:500;}
.sitenav a{display:block; font-size:13px; text-decoration:none; color:#8a8277; margin-bottom:8px;}
.sitenav a:hover{color:#e3cfb0;}
@media (max-width:760px){.sitenav-grid{grid-template-columns:1fr 1fr;}}

/* ---- Phone layout fix ----
   Five nav items plus the logo cannot sit on one line on a phone, so the
   header stacks into two rows. The hero then needs real clearance under it,
   and it has to be free to grow taller than the viewport instead of sliding
   its heading up behind the fixed header. */
@media (max-width:760px){
  header{flex-direction:column; align-items:flex-start; gap:9px; padding:14px 20px 13px;}
  header::before{background:linear-gradient(180deg, rgba(0,0,0,.62), rgba(0,0,0,.18) 72%, rgba(0,0,0,0));}
  header .logo img{height:30px;}
  header nav{display:flex; flex-wrap:wrap; gap:7px 17px; width:100%;}
  header nav a{margin-left:0; font-size:10.5px; letter-spacing:.1em; white-space:nowrap;}

  /* Art directed crop for phones: the landscape frame puts the couple dead
     centre, so on a tall screen their faces land exactly where the headline
     goes. This crop lifts them into the top third and leaves the darker lower
     half for the type. */
  .hero{height:auto; min-height:100svh;
    background-image:image-set(url("img/auckland-winery-wedding-photography-barrels-mobile.webp") type("image/webp"), url("auckland-winery-wedding-photography-barrels-mobile.jpg") type("image/jpeg"));
    background-position:center top;}
  /* Smaller type and tighter spacing, so the bottom-anchored block sits lower
     down the frame and clears the couple faces instead of sitting on them. */
  .hero-content{padding:128px 20px 44px;}
  .hero-content .eyebrow{font-size:10px; letter-spacing:.2em; margin-bottom:9px;}
  .hero-content h1{font-size:clamp(23px,6.4vw,30px); line-height:1.14;}
  .hero-content p.lead{font-size:14px; line-height:1.5; margin-top:11px;}
  .hero-content p.lead + p{font-size:12px !important; margin-top:12px !important;}
  .hero-ctas{margin-top:18px; gap:9px;}
  .hero-ctas .btn{width:100%; text-align:center; padding:12px 20px; font-size:12px;}

  /* three stats in a non-wrapping flex row set a 302px floor, which overflows a 320px screen */
  /* Three stats must stay on one row. Wrapping dropped "2 countries" onto a
     second line on its own, which read as an orphan. A fixed 3-column grid
     keeps the row intact and lets each label wrap inside its own column. */
  .about-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:0 12px; align-items:start;}
  .about-stats div strong{font-size:30px;}
  .about-stats div span{display:block; font-size:9.5px; letter-spacing:.055em; line-height:1.35;}

  .page-hero{min-height:auto;}
  .page-hero .hero-content{padding:124px 20px 50px;}
  .page-hero h1{font-size:clamp(27px,7.4vw,38px); line-height:1.14;}
  .page-hero p.lead{font-size:16px;}
}
@supports not (min-height:100svh){
  @media (max-width:760px){ .hero{min-height:100vh;} }
}

/* ---- Messenger button ----
   A plain link to m.me, not Facebook's chat SDK. Same result for the visitor,
   but no third-party script, no tracking cookie and no page weight. */
.msgr{position:fixed; right:18px; bottom:18px; z-index:60; display:inline-flex; align-items:center; gap:9px;
  padding:13px 20px 13px 16px; border-radius:999px; background:var(--accent-dark); color:#fff;
  text-decoration:none; font-size:13.5px; letter-spacing:.03em; box-shadow:0 8px 28px rgba(35,31,28,.34);
  transition:transform .2s ease, background .2s ease;}
.msgr:hover{background:#5a442b; transform:translateY(-2px);}
.msgr svg{width:21px; height:21px; flex:none; fill:currentColor;}
.msgr .msgr-label{white-space:nowrap;}
@media (max-width:760px){
  .msgr{right:14px; bottom:14px; padding:12px 17px 12px 14px; font-size:13px;}
}
@media (max-width:360px){
  .msgr .msgr-label{display:none;}
  .msgr{padding:14px; border-radius:50%;}
}

/* ---- The reel ----
   Vertical video, so it is capped narrow and never allowed to dominate.
   preload="none" in the markup means the 2.6MB only downloads on a click. */
.reel{background:var(--cream);}
.reel-grid{display:grid; grid-template-columns:minmax(0,340px) 1fr; gap:60px; align-items:end;}
.reel-grid video{width:100%; height:auto; display:block; border-radius:4px; background:#1a1816; box-shadow:0 20px 50px rgba(35,31,28,.22);}
.reel-copy h3{font-size:26px; margin-bottom:12px;}
.reel-copy p{font-size:16px; color:#4a4540; margin-bottom:16px;}
.reel-copy h3:nth-of-type(2){margin-top:26px; padding-top:26px; border-top:1px solid var(--line);}
@media (max-width:860px){
  .reel-grid{grid-template-columns:1fr; gap:34px; justify-items:center;}
  .reel-grid video{max-width:320px;}
  .reel-copy{width:100%;}
}

/* Small phones have less height for the same block, so the headline creeps
   back up over the faces. Trim the type a little further and drop the coffee
   line, which also appears in the contact section further down. */
@media (max-width:384px){
  .hero-content{padding:120px 18px 36px;}
  .hero-content h1{font-size:21px; line-height:1.13;}
  .hero-content p.lead{font-size:13px; line-height:1.45; margin-top:9px;}
  .hero-content p.lead + p{display:none;}
  .hero-ctas{margin-top:14px; gap:8px;}
  .hero-ctas .btn{padding:11px 18px; font-size:11px;}
}

/* Short phones (iPhone SE and similar) run out of height before they run out
   of width, so key off height rather than width here. */
@media (max-width:760px) and (max-height:700px){
  .hero-content{padding:104px 18px 28px;}
  .hero-content h1{font-size:19px; line-height:1.12;}
  .hero-content p.lead{font-size:12.5px; line-height:1.4; margin-top:8px;}
  .hero-content p.lead + p{display:none;}
  .hero-ctas{margin-top:12px; gap:7px;}
  .hero-ctas .btn{padding:10px 16px; font-size:10.5px;}
}