:root{
    --bg:#FFFFFF;
    --bg-alt:#F2ECE1;
    --ink:#17140F;
    --ink-soft:#6f6a60;
    --gold:#AD8752;
    --gold-deep:#8C6A3D;
    --gold-soft:#E4D3B6;
    --dark:#15130F;
    --cream:#F7F5F1;
    --serif:'Playfair Display', serif;
    --sans:'Jost', sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{font-family:var(--sans);color:var(--ink);background:var(--bg);font-weight:300;overflow-x:hidden;}
  img{display:block;width:100%;height:100%;object-fit:cover;}
  a{color:inherit;}
  .container{max-width:1320px;margin:0 auto;padding:0 48px;}
  .label{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;display:inline-block;margin-bottom:20px;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;
    padding:16px 30px;border:1px solid currentColor;text-decoration:none;
    transition:background .25s ease,color .25s ease;
  }
  .btn-dark{color:var(--ink);}
  .btn-dark:hover{background:var(--ink);color:var(--bg);}
  .btn-light{color:var(--cream);}
  .btn-light:hover{background:var(--cream);color:var(--dark);}
  .btn-gold{background:var(--gold);color:var(--dark);border-color:var(--gold);}
  .btn-gold:hover{background:transparent;color:var(--gold);}
  section{position:relative;}

  /* Keyboard focus has to be visible on both the light sections and the dark ones. */
  a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{
    outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
  }
  /* Respect the system setting: no smooth scrolling, no hover zooms, no transitions. */
  @media (prefers-reduced-motion: reduce){
    html{scroll-behavior:auto;}
    *,*::before,*::after{transition-duration:.01ms !important;animation-duration:.01ms !important;}
    .gallery-grid figure:hover img{transform:none;}
  }

  /* ---------------- NAV ---------------- */
  header.site-nav{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    padding:24px 48px;
    transition:background .35s ease, padding .35s ease, box-shadow .35s ease;
  }
  header.site-nav.scrolled{
    background:rgba(255,255,255,0.94);backdrop-filter:blur(8px);
    padding:14px 48px;box-shadow:0 1px 0 rgba(0,0,0,0.06);
  }
  .nav-logo img{height:48px;width:auto;object-fit:contain;transition:height .3s ease;display:block;}
  header.site-nav.scrolled .nav-logo img{height:38px;}
  .nav-logo{display:block;}
  /* Logo matches the nav text: white ink over the hero photo, black once the
     nav picks up its white background on scroll. */
  .nav-logo .logo-light{display:none;filter:drop-shadow(0 1px 5px rgba(0,0,0,0.35));}
  header.site-nav:not(.scrolled) .nav-logo .logo-light{display:block;}
  header.site-nav:not(.scrolled) .nav-logo .logo-dark{display:none;}
  .nav-links{display:flex;align-items:center;gap:38px;list-style:none;}
  .nav-links a{
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
    position:relative;padding-bottom:4px;
  }
  .nav-links a::after{
    content:'';position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold);
    transition:width .25s ease;
  }
  .nav-links a:hover::after{width:100%;}
  .nav-cta{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;
    border:1px solid currentColor;padding:11px 20px;
  }
  .nav-burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:5px;
    background:none;border:none;cursor:pointer;padding:10px;min-width:44px;min-height:44px;z-index:1200;}
  .nav-burger span{width:24px;height:1px;background:var(--ink);display:block;transition:all .3s ease;}

  /* light text on hero (before scroll) */
  header.site-nav.on-dark:not(.scrolled) .nav-links a,
  header.site-nav.on-dark:not(.scrolled) .nav-cta{color:#fff;text-shadow:0 1px 4px rgba(0,0,0,0.3);}

  /* ---------------- HERO ---------------- */
  .hero{min-height:100svh;display:flex;flex-direction:column;position:relative;}
  .hero-media{position:absolute;inset:0;z-index:1;}
  .hero-media picture{display:block;width:100%;height:100%;}
  .hero-media img{filter:grayscale(0.05) contrast(1.03);object-position:center 35%;}
  /* Matches the <source> breakpoint above: the tall crop is already framed, so it
     just needs centring rather than the landscape image's 35% offset. */
  .hero-media::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg, rgba(10,9,7,0.34) 0%, rgba(10,9,7,0.12) 30%, rgba(10,9,7,0.28) 55%, rgba(10,9,7,0.75) 100%);
  }
  @media (max-width:820px){
    .hero-media img{object-position:center center;}
    /* Faces sit around a third of the way down this crop, so the overlay only starts
       working below them: keeps the copy legible over bright water without dulling them. */
    .hero-media::after{
      background:linear-gradient(180deg, rgba(10,9,7,0.30) 0%, rgba(10,9,7,0.08) 26%,
        rgba(10,9,7,0.38) 48%, rgba(10,9,7,0.82) 100%);
    }
  }
  .hero-copy{position:relative;z-index:3;margin-top:auto;padding:0 48px 88px;color:#fff;}
  .hero-eyebrow{font-size:12px;letter-spacing:.28em;text-transform:uppercase;margin-bottom:22px;color:var(--gold-soft);}
  .hero-title{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7.2vw,104px);line-height:0.98;}
  .hero-sub{max-width:460px;margin-top:24px;font-size:16px;line-height:1.7;font-weight:300;color:rgba(255,255,255,0.85);}
  .hero-actions{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap;}
  .scroll-cue{
    position:absolute;bottom:32px;right:48px;z-index:3;color:#fff;
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;writing-mode:vertical-rl;
    display:flex;align-items:center;gap:10px;opacity:.85;
  }
  .scroll-cue::after{content:'';width:1px;height:38px;background:#fff;opacity:.6;}

  /* ---------------- ABOUT ---------------- */
  .about{padding:150px 0 120px;background:var(--bg);}
  .about-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start;}
  .about-heading{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.18;}
  .about-body p{font-size:16px;line-height:1.85;color:var(--ink-soft);max-width:520px;}
  .about-body p + p{margin-top:20px;}
  .about-sig{margin-top:34px;font-family:var(--serif);font-style:italic;font-size:19px;color:var(--gold-deep);}
  /* THE TEAM (own band, after the work and the testimonials) */
  .team{padding:120px 0;background:var(--bg);}
  /* Two portraits side by side. Both sit on the same two-column grid as everything else
     in this section, and every paragraph here runs at the same 16px as the rest of the
     page, so nothing reads as a different size by accident. */
  /* The team block runs on even columns so the two bios line up exactly with the
     intro paragraph above them. The rest of the page keeps its 0.9/1.1 split. */
  .team .about-grid{grid-template-columns:1fr 1fr;}
  /* Drop the intro by the height of the eyebrow so its first line sits on the headline. */
  @media (min-width:981px){ .team .about-body{padding-top:37px;} }
  .bios{display:grid;grid-template-columns:1fr 1fr;gap:70px;margin-top:52px;}
  .bio{margin:0;}
  .bio img{aspect-ratio:4 / 5;width:100%;max-width:290px;height:auto;object-fit:cover;filter:grayscale(1);}
  .bio figcaption{margin-top:24px;}
  .bio h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);
    font-weight:500;margin-bottom:14px;}
  .bio p{font-size:16px;line-height:1.85;color:var(--ink-soft);}
  .about-close{margin-top:56px;padding-top:28px;border-top:1px solid rgba(23,20,15,0.1);
    font-size:16px;line-height:1.85;color:var(--ink-soft);max-width:640px;}

  /* ---------------- SERVICES ---------------- */
  .services{padding:100px 0 110px;background:var(--bg-alt);}
  .services-head{max-width:960px;margin-bottom:52px;}
  .services-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);line-height:1.15;}
  .services-head p{margin-top:20px;font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:840px;}
  @media (min-width:1100px){ .nowrap-head{white-space:nowrap;} }
  .pillars-soon{margin-top:26px;font-size:15px;line-height:1.8;color:var(--ink-soft);max-width:900px;}
  .pillars-soon a{color:var(--ink);border-bottom:1px solid var(--gold);text-decoration:none;padding-bottom:2px;}
  /* Four notional columns on one row: Weddings occupies two of them, the two pillars
     that aren't bookable take one each and are dimmed back, exactly as they were before
     the hierarchy pass. Same row height throughout, so the band reads as one object. */
  .pillars{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1px;background:rgba(23,20,15,0.14);}
  .pillar{
    background:var(--bg-alt);padding:34px 32px;
    display:flex;flex-direction:column;position:relative;overflow:hidden;
  }
  .pillar-main{background:var(--bg);padding:38px 40px;}
  /* Recede using colour and the linen fill rather than blanket opacity: at 55% the body
     copy dropped to roughly 2:1 against the background, which is unreadable for a lot of
     people. This keeps the hierarchy and stays above the contrast floor. */
  .pillar-soon h3{color:#8a8378;}
  .pillar-soon p{color:var(--ink-soft);}
  .pillar-soon .pillar-index{color:#a99b84;}
  .pillar-soon h3{font-size:23px;}
  .pillar-index{font-family:var(--serif);font-size:15px;color:var(--gold);margin-bottom:auto;}
  .pillar-status{
    position:absolute;top:44px;right:38px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  }
  .pillar-status.live{color:var(--gold-deep);}
  .pillar-status.soon{color:var(--ink-soft);}
  .pillar h3{font-family:var(--serif);font-size:26px;font-weight:500;margin:22px 0 14px;}
  .pillar p{font-size:14.5px;line-height:1.75;color:var(--ink-soft);flex-grow:1;}
  .pillar-link{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gold);padding:6px 0;align-self:flex-start;}
  .pillar.dimmed{opacity:0.62;}
  .pillar.dimmed h3, .pillar.dimmed p{color:var(--ink-soft);}

  /* ---------------- PORTFOLIO ---------------- */
  .portfolio{padding:130px 0 60px;background:var(--bg);}
  .portfolio-head{max-width:660px;margin-bottom:20px;}
  .portfolio-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(32px,3.6vw,50px);line-height:1.15;}
  .portfolio-head p{margin-top:18px;font-size:16px;line-height:1.75;color:var(--ink-soft);max-width:540px;}

  .chapter{padding:86px 0 30px;border-top:1px solid rgba(23,20,15,0.1);}
  .chapter-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:38px;flex-wrap:wrap;}
  .chapter-num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:16px;}
  .chapter-title{font-family:var(--serif);font-weight:500;font-size:clamp(24px,2.6vw,34px);margin-top:8px;}
  .chapter-desc{max-width:380px;font-size:14.5px;line-height:1.7;color:var(--ink-soft);}

  /* Gallery: the grid rules below are the fallback only. On the live page the script
     (justifyGalleries in site.js) lays every photo out at its own shape in full-width rows,
     and extra.css switches the container to a wrapping row. */
  .gallery-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:190px;gap:10px;}
  .gallery-grid figure{grid-column:span 1;grid-row:span 2;margin:0;cursor:zoom-in;overflow:hidden;position:relative;}
  .gallery-grid figure.wide{grid-column:span 2;}
  .gallery-grid figure img{transition:transform .6s ease;}
  .gallery-grid figure:hover img{transform:scale(1.035);}

  /* ---------------- PACKAGES ---------------- */
  .pricing{padding:120px 0;background:var(--bg);}
  .pricing-head{max-width:640px;margin-bottom:60px;}
  .pricing-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);}
  .pricing-head p{margin-top:20px;font-size:16px;line-height:1.8;color:var(--ink-soft);}
  .packages{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
  .package{background:var(--bg-alt);border:1px solid rgba(23,20,15,0.07);padding:42px 34px;display:flex;flex-direction:column;position:relative;}
  /* Section is white, cards are linen, and the lead tier lifts out of them in white with
     a gold rule across the top. Every card is framed identically, so there is no stray
     edge on one side and not the other. */
  .package.featured{background:var(--bg);border-color:var(--gold-soft);box-shadow:inset 0 3px 0 var(--gold);}
  .package-tag{position:absolute;top:20px;right:34px;font-size:10.5px;letter-spacing:.14em;
    text-transform:uppercase;color:var(--gold-deep);}
  .package h3{font-family:var(--serif);font-size:25px;font-weight:500;}
  .package-price{margin-top:10px;font-size:14px;letter-spacing:.06em;color:var(--gold-deep);}
  .package ul{list-style:none;margin:28px 0 auto;padding:0;}
  .package li{font-size:14.5px;line-height:1.6;color:var(--ink-soft);padding:11px 0;
    border-top:1px solid rgba(23,20,15,0.07);}
  .package li:first-child{border-top:none;}
  .package-link{margin-top:30px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gold);padding:6px 0;align-self:flex-start;}
  .pricing-note{margin-top:34px;font-size:14px;line-height:1.8;color:var(--ink-soft);max-width:720px;}

  /* ---------------- FAQ ---------------- */
  .faq{padding:120px 0;background:var(--bg-alt);}
  .faq-head{max-width:600px;margin-bottom:50px;}
  .faq-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,42px);}
  .faq-list{max-width:820px;border-top:1px solid rgba(23,20,15,0.12);}
  .faq details{border-bottom:1px solid rgba(23,20,15,0.12);}
  .faq summary{
    list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative;
    font-size:16.5px;line-height:1.5;color:var(--ink);
  }
  .faq summary::-webkit-details-marker{display:none;}
  .faq summary::after{
    content:'+';position:absolute;right:6px;top:50%;transform:translateY(-50%);
    font-size:19px;color:var(--gold-deep);transition:transform .25s ease;
  }
  .faq details[open] summary::after{content:'–';}
  .faq summary:hover{color:var(--gold-deep);}
  .faq details p{padding:0 40px 26px 0;font-size:15px;line-height:1.8;color:var(--ink-soft);max-width:680px;}

  /* ---------------- TESTIMONIALS ---------------- */
  .voices{padding:120px 0;background:var(--bg-alt);}
  .voices-head{max-width:600px;margin-bottom:64px;}
  .voices-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1.15;}
  /* Four quotes in a 2x2 rather than a carousel: every one stays on screen, and proof
     you have to swipe for is proof most visitors never read. Past six, switch to
     a scroll-snap row. */
  .voices-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:52px 70px;max-width:1000px;}
  .voice{margin:0;}
  .voice blockquote{margin:0;font-family:var(--serif);font-size:17px;line-height:1.66;color:var(--ink);
    font-style:italic;font-weight:500;}
  .voice blockquote::before{content:'“';color:var(--gold);font-size:26px;line-height:0;vertical-align:-4px;margin-right:2px;}
  .voice blockquote::after{content:'”';color:var(--gold);font-size:26px;line-height:0;vertical-align:-8px;margin-left:2px;}
  .voice figcaption{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);}
  .voice figcaption span{display:block;margin-top:6px;letter-spacing:.14em;color:var(--gold-deep);}

  /* ---------------- PROCESS ---------------- */
  .process{padding:130px 0;background:var(--bg-alt);}
  .process-head{max-width:640px;margin-bottom:70px;}
  .process-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.4vw,46px);}
  .process-head p{margin-top:20px;font-size:16px;line-height:1.8;color:var(--ink-soft);}
  .process-note{margin-top:56px;padding-top:26px;border-top:1px solid rgba(23,20,15,0.12);
    max-width:720px;font-size:14.5px;line-height:1.8;color:var(--ink-soft);}
  .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;}
  .step-num{font-family:var(--serif);font-style:italic;font-size:34px;color:var(--gold);margin-bottom:22px;}
  .step h4{font-size:16px;letter-spacing:.02em;font-weight:500;margin-bottom:12px;}
  .step p{font-size:14px;line-height:1.7;color:var(--ink-soft);}

  /* ---------------- CONTACT / CTA ---------------- */
  .contact{background:var(--dark);color:var(--cream);padding:150px 0 90px;}
  .contact-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:60px;align-items:start;}
  .contact .label{color:var(--gold-soft);}
  .contact h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,70px);line-height:1.05;}
  .contact-sub{margin-top:22px;font-size:16px;line-height:1.75;color:rgba(247,245,241,0.65);max-width:440px;}
  /* Nudged down by the height of the eyebrow label so the first field lines up with the
     headline rather than with "Get in touch". */
  .contact-actions{display:flex;flex-direction:column;gap:18px;align-items:flex-start;padding-top:38px;}
  .enquiry{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;width:100%;max-width:520px;}
  /* min-width:0 stops long placeholder text forcing the grid wider than its container */
  .enquiry .field{display:flex;flex-direction:column;gap:8px;min-width:0;}
  .enquiry input{min-width:0;}
  .enquiry label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(247,245,241,0.55);}
  .enquiry input{
    background:transparent;border:none;border-bottom:1px solid rgba(247,245,241,0.28);
    padding:9px 0;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--cream);
    transition:border-color .25s ease;
  }
  .enquiry input::placeholder{color:rgba(247,245,241,0.45);}
  .enquiry input:focus{outline:none;border-bottom-color:var(--gold);}
  .enquiry button{grid-column:1 / -1;justify-self:start;margin-top:10px;cursor:pointer;font-family:var(--sans);}
  .form-status{grid-column:1 / -1;font-size:13.5px;line-height:1.6;color:var(--gold-soft);min-height:1px;}
  .contact-links{margin-top:16px;display:flex;flex-direction:column;gap:10px;}
  .contact-links a{text-decoration:none;font-size:14px;color:rgba(247,245,241,0.7);border-bottom:1px solid transparent;transition:border-color .2s, color .2s;}
  .contact-links a:hover{color:#fff;border-color:var(--gold);}

  /* Three columns on a baseline: brand, where to go, how to reach us. The legal line
     sits on its own rule underneath so it stops competing with the navigation. */
  footer{border-top:1px solid rgba(247,245,241,0.12);margin-top:100px;padding-top:56px;}
  footer .foot-top{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:60px;align-items:start;}
  footer .foot-logo{display:inline-block;}
  footer .foot-logo img{height:44px;width:auto;object-fit:contain;opacity:.9;display:block;}
  footer .foot-tagline{font-family:var(--serif);font-size:17px;line-height:1.65;
    color:rgba(247,245,241,0.72);max-width:420px;margin-top:26px;}
  footer .foot-col h5{font-size:11px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
    color:rgba(247,245,241,0.4);margin-bottom:20px;}
  footer .foot-links{display:flex;flex-direction:column;gap:8px;list-style:none;font-size:14px;}
  footer .foot-links a{display:inline-block;padding:5px 0;}
  footer .foot-links a{text-decoration:none;color:rgba(247,245,241,0.72);transition:color .2s ease;}
  footer .foot-links a:hover{color:var(--gold-soft);}
  footer .foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;
    margin-top:64px;padding-top:24px;border-top:1px solid rgba(247,245,241,0.1);
    font-size:12px;color:rgba(247,245,241,0.42);letter-spacing:.02em;}

  /* ---------------- WHATSAPP (floating, low-friction contact) ---------------- */
  .wa-float{
    position:fixed;right:24px;bottom:24px;z-index:900;
    width:52px;height:52px;border-radius:50%;
    background:var(--dark);color:var(--cream);
    display:flex;align-items:center;justify-content:center;
    text-decoration:none;box-shadow:0 4px 18px rgba(0,0,0,0.22);
    transition:background .2s ease, transform .2s ease;
  }
  .wa-float:hover{background:var(--gold-deep);transform:translateY(-2px);}
  .wa-float svg{width:24px;height:24px;}

  /* ---------------- LIGHTBOX ---------------- */
  .lightbox{
    position:fixed;inset:0;background:rgba(10,9,7,0.96);z-index:2000;
    display:flex;align-items:center;justify-content:center;
    opacity:0;pointer-events:none;transition:opacity .3s ease;
  }
  .lightbox.open{opacity:1;pointer-events:auto;}
  .lightbox img{max-width:88vw;max-height:84vh;width:auto;height:auto;object-fit:contain;}
  .lightbox-close,.lightbox-prev,.lightbox-next{
    position:absolute;background:none;border:none;color:#fff;cursor:pointer;
    font-family:var(--sans);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  }
  /* Padded out so they are thumb-sized on a phone rather than hairline glyphs. */
  .lightbox-close{top:20px;right:22px;padding:12px 16px;}
  .lightbox-prev,.lightbox-next{top:50%;transform:translateY(-50%);font-size:30px;padding:14px 20px;line-height:1;}
  .lightbox-prev{left:6px;}
  .lightbox-next{right:6px;}

  /* ---------------- RESPONSIVE ---------------- */
  @media (max-width:980px){
    .about-grid,.contact-grid{grid-template-columns:1fr;}
    .about-grid > *,.contact-grid > *{min-width:0;}
    .enquiry{grid-template-columns:1fr;}
    .pillars{grid-template-columns:1fr;}
    .pillar{min-height:auto;padding:40px 30px;}
    .pillar-main{grid-row:auto;min-height:auto;padding:40px 30px;}
    .steps{grid-template-columns:1fr 1fr;row-gap:44px;}
    .voices-grid{grid-template-columns:1fr;gap:44px;}
    .bios{grid-template-columns:1fr;gap:44px;}
    .packages{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px;}
    .container{padding:0 26px;}
  }
  @media (max-width:640px){
    header.site-nav{padding:18px 22px;}
    header.site-nav.scrolled{padding:12px 22px;}
    .nav-logo img{height:40px;}
    header.site-nav.scrolled .nav-logo img{height:32px;}
    .nav-links{
      position:fixed;inset:0;background:var(--dark);flex-direction:column;justify-content:center;gap:34px;
      transform:translateX(100%);transition:transform .4s ease;z-index:1100;
    }
    .nav-links.open{transform:translateX(0);}
    .nav-links a{color:#fff !important;font-size:15px;padding:10px 0;}
    .nav-links a::after{background:var(--gold);}
    .nav-cta{display:none;}
    .nav-burger{display:flex;}
    header.site-nav.on-dark:not(.scrolled) .nav-burger span{background:#fff;}
    .hero-copy{padding:0 22px 64px;}
    .hero-actions{flex-direction:column;align-items:flex-start;}
    .about,.services,.portfolio,.process,.contact{padding-left:0;padding-right:0;}
    .about{padding:100px 0 80px;}
    .services{padding:80px 0 90px;}
    .portfolio{padding:90px 0 40px;}
    .process{padding:90px 0;}
    .contact{padding:100px 0 60px;}
    .steps{grid-template-columns:1fr;}
    .gallery-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px;gap:6px;}
    .scroll-cue{display:none;}
    footer .foot-top{grid-template-columns:1fr;gap:44px;}
    footer .foot-tagline{font-size:16px;}
    .wa-float{right:16px;bottom:16px;width:48px;height:48px;}
  }

  /* ================= V2 ADDITIONS ================= */

  /* Hero: each page sets where its subject sits, so the crop never cuts them out. */
  .hero-media img{object-position:var(--focus,50%) var(--focus-y,35%);}
  /* A soft shade on the left on wide screens, so the headline reads over any photo. */
  @media (min-width:821px){
    .hero-media::before{content:'';position:absolute;inset:0;z-index:1;
      background:linear-gradient(90deg, rgba(10,9,7,0.5) 0%, rgba(10,9,7,0.22) 38%, rgba(10,9,7,0) 62%);}
  }
  @media (max-width:820px){ .hero-media img{object-position:center center;} }
  .hero-title.long{font-size:clamp(40px,5.4vw,80px);line-height:1.02;max-width:15ch;}
  .hero-sub{max-width:500px;}

  /* Headlines break into even lines, so no single word is left on a line of its own. */
  h1,h2,h3,.about-heading,.chapter-title,.hero-title{text-wrap:balance;}
  p,blockquote{text-wrap:pretty;}

  /* Justified gallery: every photo at its own shape, rows run edge to edge. */
  .gallery-grid{display:flex;flex-wrap:wrap;gap:10px;grid-template-columns:none;grid-auto-rows:auto;}
  .gallery-grid figure{flex:none;grid-column:auto;grid-row:auto;}
  .gallery-grid figure img{object-position:50% 50%;}
  @media (max-width:640px){ .gallery-grid{gap:6px;} }

  /* Sections alternate white and linen down every page. */
  .process{background:var(--bg);}
  .pricing{background:var(--bg-alt);}
  .package{background:var(--bg);border-color:rgba(23,20,15,0.08);}
  .package.featured{background:var(--bg);border-color:var(--gold-soft);box-shadow:inset 0 3px 0 var(--gold), 0 14px 36px rgba(23,20,15,0.08);}
  .faq{background:var(--bg);}

  /* Current page in the nav */
  .nav-links a[aria-current="page"]::after{width:100%;}

  /* Two cards with photographs: home pillars and the portraits doors */
  .cards{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
  .card{background:var(--bg);display:flex;flex-direction:column;text-decoration:none;color:inherit;}
  .card-media{aspect-ratio:4 / 3;overflow:hidden;}
  .card-media img{transition:transform .6s ease;object-position:center 30%;}
  .card:hover .card-media img{transform:scale(1.03);}
  .card-body{padding:30px 32px 34px;display:flex;flex-direction:column;flex-grow:1;}
  .card-body .label{margin-bottom:12px;}
  .card-body h3{font-family:var(--serif);font-size:28px;font-weight:500;margin-bottom:12px;}
  .card-body p{font-size:15px;line-height:1.75;color:var(--ink-soft);flex-grow:1;}
  .card-link{margin-top:22px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink);
    border-bottom:1px solid var(--gold);padding:6px 0;align-self:flex-start;}
  .services .card{background:var(--bg);}
  .doors{padding:110px 0;background:var(--bg-alt);}
  .doors .card-media{aspect-ratio:4 / 5;}   /* upright, so a standing person fits head to toe */
  .doors .card-media img{object-position:center center;}

  /* Professional / Personal split inside The Work on /portraits/ */
  .group{padding-top:40px;scroll-margin-top:90px;}
  .group + .group{padding-top:90px;}
  .group-head{display:flex;align-items:baseline;gap:18px;margin-bottom:6px;}
  .group-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3vw,40px);}
  .group-head span{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);}
  .chapter{scroll-margin-top:90px;}

  /* Package cards: the one-line promise under each price */
  .package-promise{margin-top:18px;font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.5;color:var(--ink);}
  .package-tag{font-weight:500;}

  /* Where the money goes */
  .cost-note{margin-top:56px;padding:34px 38px;background:var(--bg);max-width:820px;}
  .cost-note .label{margin-bottom:14px;}
  .cost-note p{font-size:16px;line-height:1.8;color:var(--ink-soft);}   /* body text, so the prices stay the strongest thing in the section */

  /* A single testimonial */
  .voices-grid.single{grid-template-columns:1fr;max-width:760px;}
  .voices-grid.single .voice blockquote{font-size:21px;}

  /* Selected work on the home page */
  .selected{padding:120px 0 80px;background:var(--bg);}
  .selected .portfolio-head{margin-bottom:46px;}
  .selected-links{margin-top:40px;display:flex;gap:16px;flex-wrap:wrap;}

  /* Form: a select and a longer text field alongside the inputs */
  .enquiry select,.enquiry textarea{
    background:transparent;border:none;border-bottom:1px solid rgba(247,245,241,0.28);
    padding:9px 0;font-family:var(--sans);font-size:15px;font-weight:300;color:var(--cream);min-width:0;
  }
  .enquiry select option{color:var(--ink);}
  .enquiry textarea{resize:vertical;min-height:44px;}
  .enquiry select:focus,.enquiry textarea:focus{outline:none;border-bottom-color:var(--gold);}
  .enquiry .field.wide{grid-column:1 / -1;}

  @media (max-width:980px){
    .team .about-grid{grid-template-columns:1fr;gap:28px;}
    .cards{grid-template-columns:1fr;}
    .doors{padding:80px 0;}
  }
  @media (max-width:640px){
    .card-body{padding:24px 22px 28px;}
    .cost-note{padding:26px 22px;}
    .selected{padding:90px 0 60px;}
    .hero-title.long{font-size:clamp(36px,10vw,52px);}
  }

  /* ================= STRUCTURE PASS: WEDDINGS (25 Oct) ================= */

  /* Section tone overrides, so each page can keep white and linen alternating */
  .tone-alt{background:var(--bg-alt) !important;}
  .tone-plain{background:var(--bg) !important;}

  /* Chapter preview: the first rows, a sliver of the next, and a button for the rest */
  .gallery-wrap{position:relative;}
  .gallery-wrap .gallery-grid{position:relative;}
  .gallery-wrap.collapsed .gallery-grid{max-height:var(--peek);overflow:hidden;}
  .gallery-wrap.collapsed .gallery-grid::after{
    content:'';position:absolute;left:0;right:0;bottom:0;height:var(--fade,120px);pointer-events:none;
    background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,0.75) 55%, var(--bg) 100%);
  }
  .gallery-more{
    display:block;margin:22px auto 0;cursor:pointer;background:transparent;
    font-family:var(--sans);font-size:12px;letter-spacing:.16em;text-transform:uppercase;font-weight:500;color:var(--ink);
    border:1px solid var(--ink);padding:14px 26px;transition:background .25s ease,color .25s ease;
  }
  .gallery-more:hover{background:var(--ink);color:var(--bg);}
  .gallery-more[hidden]{display:none;}

  /* A client's words under the chapter they describe, and one more above the prices */
  .chapter-voice{margin:38px 0 0;max-width:680px;}
  .pricing-voice{margin:-20px 0 44px;max-width:680px;}

  /* The quiet link after the last chapter */
  .work-cta{margin-top:54px;padding-top:28px;border-top:1px solid rgba(23,20,15,0.1);font-size:15px;color:var(--ink-soft);}
  .work-cta a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--gold);padding-bottom:2px;margin-left:6px;
    font-size:12px;letter-spacing:.14em;text-transform:uppercase;}

  /* Who you'll be working with (short version for the weddings page) */
  .team-short{padding:110px 0;background:var(--bg);}
  .team-short-head{max-width:640px;margin-bottom:46px;}
  .team-short-head h2{font-family:var(--serif);font-weight:500;font-size:clamp(28px,3.2vw,42px);line-height:1.15;}
  .team-short-head p{margin-top:16px;font-size:16px;line-height:1.8;color:var(--ink-soft);}
  .mini-bios{display:grid;grid-template-columns:1fr 1fr;gap:40px;max-width:900px;}
  .mini-bio{margin:0;display:grid;grid-template-columns:120px 1fr;gap:24px;align-items:start;}
  .mini-bio img{width:120px;height:150px;object-fit:cover;filter:grayscale(1);}
  .mini-bio h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-deep);font-weight:500;margin:4px 0 10px;}
  .mini-bio p{font-size:15px;line-height:1.75;color:var(--ink-soft);}
  .team-short-link{display:inline-block;margin-top:38px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;color:var(--ink);border-bottom:1px solid var(--gold);padding:6px 0;}

  /* FAQ group headings */
  .faq-group{font-family:var(--sans);font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;
    color:var(--gold-deep);padding:44px 0 10px;border-bottom:1px solid rgba(23,20,15,0.12);}
  .faq-list .faq-group:first-child{padding-top:18px;}
  .faq-list:has(.faq-group){border-top:none;}

  @media (max-width:980px){
    .mini-bios{grid-template-columns:1fr;gap:30px;}
    .team-short{padding:80px 0;}
  }
  @media (max-width:640px){
    .mini-bio{grid-template-columns:96px 1fr;gap:18px;}
    .mini-bio img{width:96px;height:120px;}
    .gallery-more{width:100%;}
  }

  /* Hero eyebrow on phones: tighter spacing so the line sits inside the text column. */
  @media (max-width:640px){
    .hero-eyebrow{font-size:11px;letter-spacing:.2em;margin-bottom:16px;}
  }

/* Hero buttons on phones and tablets: two equal buttons side by side, read as a pair of choices. */
@media (max-width:820px){
  .hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:440px;align-items:stretch;}
  .hero-actions .btn{justify-content:center;text-align:center;padding:16px 10px;letter-spacing:.12em;line-height:1.3;}
  .hero-actions .btn:only-child{grid-column:1 / -1;justify-self:start;padding:16px 30px;}
}
@media (max-width:360px){
  .hero-actions .btn{font-size:11px;letter-spacing:.08em;}
}

/* Team on phones: name on its own line, then photo and bio side by side, both starting on the same line. */
@media (max-width:640px){
  .bios{gap:36px;margin-top:36px;}
  .bio,.mini-bio{display:grid;grid-template-columns:112px 1fr;column-gap:18px;row-gap:0;align-items:start;}
  .bio figcaption,.mini-bio figcaption{display:contents;}
  .bio h4,.mini-bio h4{grid-column:1 / -1;grid-row:1;margin:0 0 12px;}
  .bio img,.mini-bio img{grid-column:1;grid-row:2;width:112px;height:140px;max-width:none;}
  .bio p,.mini-bio p{grid-column:2;grid-row:2;margin-top:-5px;}
  .bio p{font-size:15px;line-height:1.75;}
}

/* Portraits: "The Work" label sits close to its first heading. */
.portfolio > .container > .label + .group{padding-top:0;}

/* Home team: the line above the closing sentence runs the full width; the text keeps a comfortable length. */
.about-close{max-width:none;padding-right:max(0px, calc(100% - 640px));}

/* Privacy line under each enquiry form */
.form-note{margin-top:16px;font-size:12.5px;line-height:1.6;color:rgba(247,245,241,0.55);max-width:460px;}
.form-note a{color:inherit;text-decoration:underline;text-underline-offset:2px;}

/* Page not found */
.notfound{min-height:100vh;display:flex;align-items:flex-end;}
.notfound .container{width:100%;}
.notfound-body{padding:160px 0 90px;max-width:640px;}
.notfound h1{font-family:var(--serif);font-weight:500;font-size:clamp(36px,5vw,64px);line-height:1.08;color:var(--cream);margin:6px 0 18px;}
.notfound-home{margin-top:28px;font-size:14px;}
.notfound-home a{color:var(--cream);opacity:.8;}

/* Privacy line: spans the full width of the form */
.form-note{grid-column:1 / -1;max-width:none;}

/* Privacy page */
.privacy-top{min-height:auto;}
.privacy-top .notfound-body{padding:170px 0 70px;}
.privacy{padding:80px 0 110px;background:var(--bg);}
.privacy-body{max-width:680px;}
.privacy-body h2{font-family:var(--serif);font-weight:500;font-size:clamp(22px,2.4vw,28px);margin:44px 0 12px;}
.privacy-body h2:first-child{margin-top:0;}
.privacy-body p{font-size:16px;line-height:1.8;color:var(--ink-soft);margin-bottom:14px;}
.privacy-body a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;}
.privacy-foot{padding-top:40px;}
.foot-base a{color:inherit;}