/* Open Sans, served from this site rather than Google Fonts, so the first
   paint doesn't wait on a second server. One variable file per style covers
   every weight the site uses (300-700). Latin only, which includes the
   accented letters in the reviews. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-display:swap;src:url('fonts/open-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Open Sans';font-style:italic;font-weight:300 800;font-display:swap;src:url('fonts/open-sans-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ============================================================
   RED BEARD PHOTO & FILM
   Shared stylesheet. Two modes: Corporate and Weddings.

   Weddings  — black and white. White ground, black type and
               furniture, the logo red as the only colour, used
               sparingly. Light headline weights and open
               spacing do the work; nothing else competes.
   Corporate — navy and white. White ground, navy type and
               furniture, the same red as the accent. Heavier
               headline weights and tighter spacing so it reads
               as businesslike rather than editorial.

   Brand constants:
     Red   #BE1E2D  the logo red — accent on both sides
     Black #111111  weddings: type and furniture
     Navy  #07182E  corporate: type and furniture

   Type: Open Sans throughout, per the client's brand form.
   Weight carries the difference between the two sides —
   300 for wedding headlines, 600 for corporate ones.
   ============================================================ */

:root{
  /* ---- Brand constants -- identical on both sites ---- */
  --rb-red:      #BE1E2D;
  --rb-black:    #111111;
  --rb-navy:     #07182E;
  --rb-grey:     #6B7077;   /* darkened from #8A8F96 to pass AA contrast on white and light grey */
  --rb-lgrey:    #D8DCE1;

  --serif: 'Open Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;
  --sans:  'Open Sans', Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* One card radius across the whole site, and one smaller one for the
     things too small to carry it: chips, inputs, badges. Anything that
     should read as a circle or a pill sets 50% or 999px directly. */
  --radius: 16px;
  --radius-sm: 8px;
  --btn-radius: 23px;
  --maxw:   1180px;

  /* ---- Corporate mode (default): navy and white ---- */
  --bg:        #FFFFFF;
  --bg-alt:    #F4F7FB;   /* alternate band, a cool near-white */
  --bg-deep:   #E6ECF4;   /* recessed panel, image placeholder */
  --card:      #FFFFFF;
  --ink:       #07182E;
  --ink-soft:  #44556E;
  --accent:    #07182E;   /* deep navy leads */
  --accent-ink:#FFFFFF;
  --gold:      #BE1E2D;   /* the logo red — accent only */
  --brand:     #BE1E2D;
  --line:      rgba(7,24,46,.16);
  --head:      #07182E;
  --rule:      #07182E;
  --footer:    #07182E;
  --head-weight:600;
  --head-track:-.015em;
}

/* weddings.html sets class="weddings" on <body> to repaint the palette.
   Red leads here: headlines, rules, buttons and the solid panels.
   corporate.html (class="corporate") now takes the same black palette in
   place of the navy. */
body.weddings,body.corporate{
  --bg:        #FFFFFF;
  --bg-alt:    #F6F6F6;   /* alternate band, a hair off white */
  --bg-deep:   #ECECEC;   /* recessed panel, image placeholder */
  --card:      #FFFFFF;
  --ink:       #111111;
  --ink-soft:  #5B5B5B;
  --accent:    #111111;   /* black leads */
  --accent-ink:#FFFFFF;
  --gold:      #BE1E2D;   /* the logo red — accent only */
  --brand:     #BE1E2D;
  --line:      rgba(17,17,17,.13);
  --head:      #111111;
  --rule:      #111111;
  --footer:    #231F20;   /* the brand guide's black, a touch lighter than the #111 text black */
  --head-weight:700;
  --head-track:-.015em;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:15px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- Type ---------- */
h1,h2{
  font-family:var(--serif);
  font-weight:var(--head-weight);
  color:var(--head);
  margin:0;
  line-height:1.12;
  letter-spacing:var(--head-track);
}
h1{font-size:clamp(2.3rem,5vw,3.6rem)}
body.weddings h1{font-size:clamp(2.4rem,5.4vw,4rem)}
h2{font-size:clamp(1.7rem,3.2vw,2.5rem)}
h3{
  margin:0;font-family:var(--sans);font-size:.84rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.4;color:var(--ink);
}
h4{margin:0;font-family:var(--serif);font-weight:600;font-size:1.25rem;line-height:1.25;color:var(--head)}
body.weddings h4{font-weight:700}
p{margin:0 0 1rem}

.eyebrow{
  font-size:clamp(.86rem,1.15vw,1rem);font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;line-height:1.4;
  color:var(--brand);margin:0 0 1.1rem;
}
/* SEO: the small label above a page heading sits inside the <h1>, so the
   search phrase it carries ("Cape Town wedding photographer ...") is part of
   the heading Google reads. It keeps the label's own look, not the h1's. */
h1 > .eyebrow{display:block;font-family:var(--sans);text-wrap:balance}
.lede{font-size:clamp(1rem,1.3vw,1.1rem);color:var(--ink-soft);max-width:62ch}
.meta{
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rb-grey);margin:0;
}

/* ---------- Nav ---------- */
header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;gap:24px;padding:12px 28px;max-width:var(--maxw);margin:0 auto}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex-shrink:0}
/* The supplied logo PNG is only 213x128, too low-res to set as a header
   lockup. The nav pairs the monogram with an Open Sans wordmark instead;
   swap both for a proper vector export when one exists. */
.logo img{height:30px;width:auto}
footer .logo img{display:none}
.logo .wordmark{display:flex;flex-direction:column;line-height:1}
.logo b{font-family:var(--serif);font-size:1.14rem;font-weight:600;letter-spacing:.01em}
.logo .wordmark span{font-size:.55rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--rb-grey);margin-top:5px}
.navlinks{display:flex;gap:24px;margin-left:auto;font-size:.72rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase}
.navlinks a{text-decoration:none;color:var(--ink-soft);padding-bottom:2px;border-bottom:1.5px solid transparent;transition:.2s}
.navlinks a:hover{color:var(--ink);border-color:var(--rule)}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;text-decoration:none;font-family:var(--sans);font-size:.72rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;padding:15px 32px;
  border-radius:var(--btn-radius);
  background:var(--accent);color:var(--accent-ink);transition:.22s;border:1.5px solid var(--accent);
}
/* The logo red is the hover state on every button — the one place colour
   arrives on either side of the site. */
.btn:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.gold{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.gold:hover{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}

/* ---------- Sections ---------- */
section{padding:clamp(60px,8vw,108px) 0}
.section-head{margin-bottom:52px;max-width:70ch}
.section-head h2{margin-bottom:16px}

/* ---------- Hero ---------- */
.hero{padding:clamp(52px,7vw,88px) 0 clamp(52px,7vw,96px)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,72px);align-items:center}
.hero h1{margin-bottom:22px}
.hero .lede{margin-bottom:30px;font-size:clamp(1.02rem,1.4vw,1.16rem)}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.tagline{
  font-family:var(--serif);font-style:normal;font-weight:700;
  font-size:.98rem;line-height:1.45;
  color:var(--brand);margin:0 0 18px;letter-spacing:.005em;
}

/* Image placeholders -- swap the .ph divs for <img> when photos are ready */
.ph{
  position:relative;background:var(--bg-deep);border-radius:var(--radius);overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
  border:1px solid var(--line);
}
.ph::after{
  content:attr(data-label);
  font-size:.62rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-soft);opacity:.5;padding:14px;max-width:80%;line-height:1.6;
}
.ph.tall{aspect-ratio:4/5}
.ph.wide{aspect-ratio:16/10}
.ph.square{aspect-ratio:1/1}

/* Real photography. Same footprint as .ph, so a placeholder can be swapped
   for a <img class="shot tall"> without touching any layout. */
.shot{
  width:100%;height:auto;object-fit:cover;
  border-radius:var(--radius);border:1px solid var(--line);background:var(--bg-deep);
}
.shot.tall{aspect-ratio:4/5}
.shot.wide{aspect-ratio:16/10}
.shot.square{aspect-ratio:1/1}
.svc .shot{border-radius:0;border:0;border-bottom:1px solid var(--line)}

/* ---------- Trust bar ---------- */
/* One line of tracked capitals rather than three stat blocks — quieter,
   and it reads as a mark of the studio rather than a scoreboard. */
.trustbar{background:var(--accent);color:var(--accent-ink)}
.trustbar .wrap{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:0 clamp(18px,3vw,40px);
  padding-top:30px;padding-bottom:30px;text-align:center;
}
.trustline{
  font-size:clamp(.66rem,1vw,.76rem);font-weight:700;
  letter-spacing:.26em;text-transform:uppercase;margin:0;
  display:flex;align-items:center;gap:0 clamp(18px,3vw,40px);flex-wrap:wrap;justify-content:center;
}
.trustline i{font-style:normal;opacity:.45;font-weight:400}

/* ---------- Pillars ---------- */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px)}
.pillar{border-top:2px solid var(--rule);padding-top:20px}
.pillar h3{margin-bottom:10px}
.pillar p{color:var(--ink-soft);margin:0;font-size:.94rem}

/* ---------- Service cards ---------- */
.services{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px}
.svc{background:var(--card);border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);display:flex;flex-direction:column}
.svc .ph{border-radius:0;border:0;border-bottom:1px solid var(--line)}
.svc-body{padding:22px 22px 26px}
.svc h3{margin-bottom:9px}
.svc p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ---------- Rates ---------- */
.rates{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,4vw,60px);align-items:start}
.ratecard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:clamp(26px,3vw,38px)}
.ratecard h3{margin-bottom:22px;padding-bottom:14px;border-bottom:2px solid var(--rule)}
.rate-row{display:flex;justify-content:space-between;gap:22px;align-items:baseline;padding:12px 0;border-bottom:1px solid var(--line)}
.rate-row:last-of-type{border-bottom:0}
.rate-row .desc{flex:1}
.rate-row .desc strong{display:block;font-weight:600;font-size:.94rem;line-height:1.4}
.rate-row .desc small{color:var(--ink-soft);font-size:.78rem;line-height:1.5;display:block;margin-top:2px}
.rate-row .price{font-family:var(--serif);font-weight:600;font-size:1.04rem;white-space:nowrap}
.note{font-size:.78rem;color:var(--ink-soft);margin-top:20px;font-style:italic}

/* ---------- 2.3 Meet Kobus ----------
   A short introduction directly under the hero, so somebody meets the person
   before they meet the packages. Deliberately brief: the About page carries
   the long version, and this only has to put a face to the work. */
/* The bottom is short, and What we do (#services) starts short, so the two
   read as one run rather than being parted by a 200px gap. On desktop the
   section is a grey band (the What we do card grey, the client's pick) with
   even space inside it; phones stay white. */
.meet{padding-block:clamp(56px,7vw,92px) clamp(28px,3.5vw,48px)}
@media(min-width:861px){
  .meet{background:#EEF0F2;padding-block:clamp(48px,6vw,80px)}
}
#services{padding-top:clamp(36px,4vw,60px)}
.meet-grid{
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  gap:clamp(28px,5vw,68px);align-items:center;
}
.meet-ph{margin:0}
/* Anchored low on every screen (client, 2026-10-13): less empty tree above
   Kobus's head and his forearms in frame, rather than stopping at his elbows. */
.meet-ph img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 92%;
  border-radius:var(--radius);
}
.meet-text h2{margin-bottom:.6rem}
.meet-text .lede{margin-bottom:1rem}
.meet-text p{color:var(--ink-soft)}
/* The button sits centred under the paragraphs at every size. */
.meet-text{display:flex;flex-direction:column}
.meet-text .btn{margin-top:1.4rem;align-self:center}
/* Desktop: the portrait sits in a thin red frame, offset down and right, and
   the eyebrow takes the red the other section eyebrows use (client's pick of
   three options, 2026-10-07). */
@media(min-width:861px){
  .meet-ph{position:relative;isolation:isolate;max-width:420px;justify-self:end;margin-right:28px}
  .meet-ph::before{
    content:"";position:absolute;inset:22px -22px -22px 22px;z-index:-1;
    border:2px solid var(--rb-red);border-radius:var(--radius);
  }
  .meet-text{max-width:56ch}
  .meet-text .eyebrow{color:var(--rb-red)}
  .meet-text h2{font-size:clamp(2.1rem,3.2vw,2.8rem)}
}
/* Phones: one column in the order the client asked for - eyebrow and
   heading centred, then the portrait, then the paragraphs (left-aligned for
   reading) and the button. .meet-text is unwrapped with display:contents so
   the portrait can sit between its heading and its paragraphs. */
@media(max-width:860px){
  .meet-grid{display:flex;flex-direction:column;gap:0}
  .meet-text{display:contents}
  .meet-text .eyebrow{order:1;text-align:center}
  .meet-text h2{order:2;text-align:center;margin-bottom:1.3rem}
  .meet-ph{order:3;width:100%;max-width:320px;margin:0 auto 1.6rem}
  .meet-text .lede{order:4}
  .meet-text .btn{order:5}
}

/* ---------- 2.7b Gallery on the wedding page ----------
   The tall Iain & Naomi photograph leads on the left, two rows of three sit
   beside it, and a short line runs under the tall one. One four-column grid:
   the feature fills column 1 across both rows and the six (.folio-rest,
   unwrapped with display:contents) fill columns 2-4. The tiles crop to 4:3,
   so two of them stacked come out the height of the 2:3 feature and the two
   sides line up. Reuses .folio-lead / .folio-rest so the lightbox steps
   through all seven. */
.wed-gallery{padding-block:clamp(56px,7vw,92px)}
.wed-gallery .section-head{text-align:center;margin-inline:auto;margin-bottom:clamp(28px,3vw,44px)}
.wed-gallery-more{margin:clamp(28px,3vw,40px) 0 0;text-align:center}
.fav-mosaic{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:clamp(10px,1.2vw,16px);
}
.wed-gallery .fav-grid{display:contents}
.fav-feature{grid-column:1;grid-row:1 / span 2}
.wed-gallery .fav-feature img{height:100%;aspect-ratio:auto;object-position:50% 40%}
.wed-gallery .fav-grid img{margin:0;width:100%;height:100%;aspect-ratio:4/3;object-fit:cover}
.fav-caption{
  grid-column:1;grid-row:3;margin:4px 0 0;padding-left:14px;
  border-left:3px solid var(--rb-red);
  /* The brand guide's headline serif, in italic: Georgia's italic is a true
     script-like cut, so it reads as italic at a glance where Open Sans's
     barely slants. */
  font-family:Georgia,'Times New Roman',serif;
  font-size:clamp(1.2rem,1.6vw,1.45rem);font-style:italic;line-height:1.35;color:var(--ink);
  white-space:nowrap;
}
/* Desktop shows the photographs alone; the line is for phones only
   (client, 2026-10-07). */
@media(min-width:861px){
  .fav-caption{display:none}
}
/* Below desktop: the tall photograph and its line on top, centred, then the
   six two to a row, one to a row on a phone. */
@media(max-width:860px){
  .fav-mosaic{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fav-feature{grid-column:1 / -1;grid-row:auto;max-width:440px;width:100%;margin-inline:auto}
  .wed-gallery .fav-feature img{height:auto;aspect-ratio:2/3}
  .fav-caption{grid-column:1 / -1;grid-row:auto;justify-self:center;margin:2px 0 14px}
}
@media(max-width:560px){
  .fav-mosaic{grid-template-columns:1fr}
}

/* ---------- Packages (weddings) ---------- */
.packages{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px}
.pkg{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:32px 30px;display:flex;flex-direction:column}
.pkg.featured{border:2px solid var(--accent);position:relative}
.pkg.featured::before{
  content:"Most popular";position:absolute;top:-11px;left:30px;background:var(--accent);color:var(--accent-ink);
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 13px;border-radius:var(--radius-sm);
}
.pkg h3{margin-bottom:12px}
.pkg .amount{font-family:var(--serif);font-size:2.1rem;font-weight:600;color:var(--head);margin-bottom:18px;line-height:1;display:flex;align-items:baseline;gap:11px;flex-wrap:wrap}
.pkg ul{list-style:none;margin:0 0 24px;padding:0;flex:1}
.pkg li{font-size:.89rem;color:var(--ink-soft);padding:6px 0 6px 20px;position:relative;border-bottom:1px solid var(--line);line-height:1.6}
.pkg li:last-child{border-bottom:0}
/* The card buttons run the full width of the card, so their label is centred. */
.pkg > .btn{text-align:center}
.pkg li::before{content:"";position:absolute;left:0;top:16px;width:6px;height:6px;border-radius:50%;background:var(--rule)}

/* ---------- Partnerships ---------- */
.partners{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.partner{background:var(--accent);color:var(--accent-ink);border-radius:var(--radius);padding:clamp(30px,3.4vw,44px)}
.partner.alt{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.partner h3{color:inherit}
.partner .amount{font-family:var(--serif);font-size:2.3rem;font-weight:600;line-height:1;margin:14px 0 6px;color:inherit}
.partner .per{font-size:.7rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;opacity:.75;margin-bottom:22px}
.partner ul{list-style:none;margin:0;padding:0}
.partner li{font-size:.9rem;padding:8px 0 8px 20px;position:relative;border-bottom:1px solid rgba(255,255,255,.18)}
.partner.alt li{border-bottom:1px solid var(--line)}
.partner li:last-child{border-bottom:0}
.partner li::before{content:"\2014";position:absolute;left:0;opacity:.6}

/* ---------- Process ---------- */
.process{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px);counter-reset:step}
.step{counter-increment:step;border-top:2px solid var(--rule);padding-top:20px}
.step::before{
  content:"0" counter(step);display:block;font-family:var(--serif);font-size:2rem;font-weight:600;
  color:var(--rule);line-height:1;margin-bottom:12px;
}
.step h3{margin-bottom:9px}
.step p{font-size:.89rem;color:var(--ink-soft);margin:0}

/* ---------- Gallery strip ---------- */
.strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px}
/* Corporate Recent work: one block per kind of work, each with an icon,
   a heading saying what it is and a line on the job, then the work. Stacked
   on a phone, side by side on a wide screen. */
.pf-list{display:grid;gap:48px}
.pf-item{margin:0}
.pf-head{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px}
.pf-ico{width:40px;height:40px;flex:none;border-radius:50%;background:var(--bg-alt);display:grid;place-items:center;color:var(--ink)}
.pf-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.pf-head h3{
  margin:0 0 3px;font-family:var(--serif);font-size:1.18rem;font-weight:600;
  letter-spacing:-.01em;text-transform:none;line-height:1.25;
}
.pf-head p{margin:0;font-size:.9rem;color:var(--ink-soft);line-height:1.5}
@media(min-width:900px){
  .pf-list{grid-template-columns:1fr 1fr;gap:40px;align-items:start}
}
.pf-frame{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--radius);background:#000;
}
.pf-frame video{display:block;width:100%;height:100%;object-fit:cover}
.pf-frame iframe{display:block;width:100%;height:100%;border:0}
/* A quiet play button: a thin white ring and outlined triangle over the
   picture, which firms up on hover. */
.pf-play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;
  background:rgba(0,0,0,.12);border:1.5px solid rgba(255,255,255,.8);color:#fff;
  opacity:.85;transition:opacity .2s,background-color .2s,transform .2s;
}
.pf-play:hover,.pf-play:focus-visible{opacity:1;background:rgba(255,255,255,.18);transform:translate(-50%,-50%) scale(1.05)}
.pf-play svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;margin-left:3px}
.pf-play[hidden],.pf-frame.playing .pf-play{display:none}
/* Headshots come as a pair, side by side at their full 2:3 frame. */
.pf-pair{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pf-pair img{
  display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;object-position:50% 15%;
  border-radius:var(--radius);
}

/* ---------- Team ---------- */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:24px}
.member .ph{margin-bottom:16px}
.member h3{margin-bottom:6px}
.member p{font-size:.84rem;color:var(--ink-soft);margin:0}

/* ---------- Testimonials ---------- */
.quotes{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:22px}
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rule);border-radius:var(--radius);padding:28px 26px}
.quote blockquote{margin:0 0 16px;font-family:var(--serif);font-size:1.02rem;line-height:1.55;color:var(--ink)}
.quote cite{font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--rb-grey)}

/* ---------- Values ---------- */
.values{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:22px}
.value{border-top:2px solid var(--brand);padding-top:18px}
.value h3{margin-bottom:8px}
.value p{font-size:.9rem;color:var(--ink-soft);margin:0}

/* ---------- FAQ ---------- */
/* Two columns, four questions each. Explicit columns rather than CSS
   multicol, so opening an answer never reshuffles items between sides. */
.faq{max-width:none}
.faq-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(30px,4.5vw,64px);align-items:start}
.faq-col{min-width:0}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;padding:20px 40px 20px 0;position:relative;list-style:none;
  font-family:var(--serif);font-size:1.06rem;font-weight:600;color:var(--ink);line-height:1.4;
}
.faq summary::-webkit-details-marker{display:none}
/* A chevron drawn from two borders rather than a glyph, so it can rotate
   between shut and open instead of swapping character. */
.faq summary::after{
  content:"";position:absolute;right:10px;top:50%;
  width:9px;height:9px;
  border-right:2px solid var(--rule);border-bottom:2px solid var(--rule);
  transform:translateY(-70%) rotate(45deg);
  transition:transform .22s ease;
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--rule)}
.faq .answer{padding:0 40px 22px 0;color:var(--ink-soft);font-size:.94rem}
.faq .answer p:last-child{margin-bottom:0}

/* ---------- Contact ---------- */
.contact{background:var(--accent);color:var(--accent-ink)}
.contact h2{color:var(--accent-ink)}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,72px);align-items:start}
.contact .eyebrow{color:var(--accent-ink);opacity:.7}
.contact .lede{color:inherit;opacity:.88}
.contact-detail{margin-top:28px;font-size:.92rem;line-height:1.9}
.contact-detail dt{
  font-size:.62rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  opacity:.6;margin-top:16px;
}
.contact-detail dd{margin:0}
.contact-detail a{font-weight:600}
form{display:grid;gap:14px}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
label{font-size:.64rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;opacity:.8;display:block;margin-bottom:6px}
input,select,textarea{
  width:100%;font:inherit;font-size:.92rem;padding:12px 14px;border-radius:var(--radius-sm);
  border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.12);color:inherit;
}
input::placeholder,textarea::placeholder{color:rgba(255,255,255,.5)}
select option{color:#231F20}
input:focus,select:focus,textarea:focus{outline:2px solid var(--accent-ink);outline-offset:1px}
textarea{resize:vertical;min-height:108px}
form .btn{background:var(--accent-ink);color:var(--accent);border-color:var(--accent-ink);cursor:pointer;font-family:inherit;justify-self:start}
form .btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.form-note{font-size:.72rem;opacity:.65;margin:0}
/* Replaces the form once EmailJS has sent the enquiry (site.js). */
.form-sent{padding:28px 0;outline:none}
.form-sent h3{margin:0 0 8px;color:var(--head)}
.form-sent p{margin:0;color:var(--ink-soft)}
form .btn:disabled{opacity:.6;cursor:wait}

/* ---------- Contact panel, wedding side: light ---------- */
/* The shared .contact panel is a solid --accent block, which on the wedding
   side is flat black and reads as heavy. Weddings and corporate get the
   light treatment; about keeps the dark panel.
   The base form controls are drawn for a dark ground (translucent white
   fills, white borders and placeholders), so every one of them has to be
   restated here or the fields vanish against the light background. */
body.weddings .contact,
body.corporate .contact{background:var(--bg-alt);color:var(--ink)}
body.weddings .contact h2,
body.corporate .contact h2{color:var(--head)}
/* The contact page's heading is its <h1>, sized like the h2 it replaced. */
.contact h1{font-size:clamp(1.7rem,3.2vw,2.5rem);color:var(--head)}
body.weddings .contact .eyebrow,
body.corporate .contact .eyebrow{color:var(--brand);opacity:1}
body.weddings .contact .lede,
body.corporate .contact .lede{color:var(--ink-soft);opacity:1}
body.weddings .contact label,
body.corporate .contact label{color:var(--ink-soft);opacity:1}
body.weddings .contact .contact-detail dt,
body.corporate .contact .contact-detail dt{color:var(--rb-grey);opacity:1}
body.weddings .contact .form-note,
body.corporate .contact .form-note{color:var(--ink-soft);opacity:1}
body.weddings .contact input,
body.weddings .contact select,
body.weddings .contact textarea,
body.corporate .contact input,
body.corporate .contact select,
body.corporate .contact textarea{
  border:1px solid var(--line);background:var(--card);color:var(--ink);
}
body.weddings .contact input::placeholder,
body.weddings .contact textarea::placeholder,
body.corporate .contact input::placeholder,
body.corporate .contact textarea::placeholder{color:var(--rb-grey)}
body.weddings .contact input:focus,
body.weddings .contact select:focus,
body.weddings .contact textarea:focus,
body.corporate .contact input:focus,
body.corporate .contact select:focus,
body.corporate .contact textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
body.weddings .contact form .btn,
body.corporate .contact form .btn{
  background:var(--accent);color:var(--accent-ink);border-color:var(--accent);
}
body.weddings .contact form .btn:hover,
body.corporate .contact form .btn:hover{background:var(--brand);border-color:var(--brand);color:#fff}
body.weddings .contact-media{border-color:var(--line)}

/* ---------- Footer ---------- */
footer{background:var(--footer);color:var(--ink-soft);padding:56px 0 36px;border-top:1px solid var(--line)}
footer h3{color:var(--head);margin-bottom:14px;font-size:.72rem}
/* The footer is dark (--footer), so it repaints the text colours for
   everything inside it: soft and heading type go light, rules go to a faint
   white. Every footer rule reads these through var(), so this one block
   covers the links, buttons, social discs and the base line. */
footer{--ink:#FFFFFF;--head:#FFFFFF;--ink-soft:rgba(255,255,255,.72);--line:rgba(255,255,255,.16)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:36px;padding-bottom:36px;border-bottom:1px solid var(--line)}
.foot-grid a{color:var(--ink-soft);text-decoration:none;transition:.2s}
.foot-grid a:hover{color:var(--rb-red)}
.foot-grid ul{list-style:none;margin:0;padding:0;font-size:.86rem;line-height:2}
.foot-blurb{font-size:.86rem;color:var(--ink-soft);margin:14px 0 0;max-width:34ch}
/* The colour logo is dark grey and vanishes on charcoal, so the footer
   uses the text wordmark instead. */
footer .logo b{color:var(--head)}
footer .logo .wordmark span{color:var(--rb-red)}
.foot-base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center;padding-top:26px}
.foot-base small,.foot-base a{font-size:.74rem;color:var(--ink-soft);text-decoration:none}
.foot-base a:hover{color:var(--rb-red)}
.socials{display:flex;gap:14px;font-size:.68rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase}

/* ---------- Long-form pages (privacy) ---------- */
.prose{max-width:760px}
.prose h2{margin:44px 0 14px;font-size:clamp(1.4rem,2.4vw,1.8rem)}
.prose h3{margin:26px 0 10px}
.prose p,.prose li{color:var(--ink-soft);font-size:.96rem}
.prose ul{padding-left:20px}
.prose li{margin-bottom:8px}

/* ============================================================
   WIREFRAME v1 COMPONENTS
   Sections 01–06 run in the same order on both paths.
   ============================================================ */

/* ---------- 01 · What we do ---------- */
.whatwedo{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,44px)}
.wd{display:flex;flex-direction:column;gap:12px}
.wd .ico{
  width:46px;height:46px;color:var(--rule);flex-shrink:0;
}
.wd .ico svg{width:100%;height:100%;display:block;stroke:currentColor;fill:none;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}
.wd h3{margin-top:4px}
.wd p{font-size:.92rem;color:var(--ink-soft);margin:0}

/* ---------- 02 · Portfolio ---------- */

/* Lightbox */
.lb{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;padding:5vh 5vw;
  background:rgba(8,8,9,.95);
}
.lb.open{display:flex}
.lb img{max-width:100%;max-height:90vh;width:auto;border-radius:var(--radius);display:block}
.lb-btn{
  position:absolute;background:transparent;border:1.5px solid rgba(255,255,255,.5);
  color:#fff;cursor:pointer;border-radius:999px;width:46px;height:46px;
  font-size:1.1rem;line-height:1;display:grid;place-items:center;transition:.2s;
}
.lb-btn:hover{background:#fff;color:#111;border-color:#fff}
.lb-close{top:22px;right:22px}
.lb-prev{left:18px;top:50%;transform:translateY(-50%)}
.lb-next{right:18px;top:50%;transform:translateY(-50%)}
.lb-count{
  position:absolute;bottom:22px;left:50%;transform:translateX(-50%);
  font-size:.66rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.7);
}

/* ---------- 04 · Reviews ---------- */
.reviews{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;align-items:start}
.rev{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 24px 22px;display:flex;flex-direction:column;gap:13px;
}
.stars{display:flex;gap:3px;color:var(--brand);font-size:.95rem;line-height:1}
.rev .txt{
  margin:0;font-size:.93rem;line-height:1.65;color:var(--ink);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;
}
.rev.is-open .txt{-webkit-line-clamp:unset;overflow:visible}
.rev .more{
  align-self:flex-start;background:none;border:0;padding:0;cursor:pointer;font:inherit;
  font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--rule);border-bottom:1.5px solid currentColor;
}
.rev .more:hover{color:var(--brand)}
.rev .who{display:flex;align-items:center;gap:11px;margin-top:auto;padding-top:6px}
.rev .avatar{
  width:34px;height:34px;border-radius:50%;flex-shrink:0;
  background:var(--bg-deep);color:var(--ink);display:grid;place-items:center;
  font-size:.76rem;font-weight:700;letter-spacing:.02em;
}
/* .rev .who span caught the wrapper span as well as the town, so the name
   inside it inherited the grey and faded away. The town is targeted on its
   own now, and the name states its own colour. The initials take the brand
   red, the one place colour is allowed on this side. */
.rev .who b{font-size:.9rem;font-weight:700;display:block;line-height:1.3;color:var(--head)}
.rev .who > span > span{font-size:.66rem;color:var(--rb-grey);letter-spacing:.04em}
.rev .avatar{background:var(--brand);color:#fff}
.reviews-head{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:22px;
  font-size:.86rem;color:var(--ink-soft);
}
.reviews-head .score{font-family:var(--serif);font-weight:700;font-size:1.5rem;color:var(--head);line-height:1}

/* ---------- 06 · Contact extras ---------- */
.btn.wa{background:#1FA855;border-color:#1FA855;color:#fff}
.btn.wa:hover{background:#17803F;border-color:#17803F;color:#fff}
.contact-media{margin-top:22px;border-radius:var(--radius);overflow:hidden;border:1px solid rgba(255,255,255,.25)}
.contact-media iframe{display:block;width:100%;height:230px;border:0;filter:grayscale(1) contrast(1.05)}

/* ---------- Floating WhatsApp ---------- */
.wa-float{
  position:fixed;right:20px;bottom:20px;z-index:120;
  width:54px;height:54px;border-radius:50%;background:#1FA855;
  display:grid;place-items:center;box-shadow:0 8px 26px -10px rgba(0,0,0,.5);
  transition:transform .2s;
}
.wa-float:hover{transform:translateY(-3px)}
.wa-float svg{width:28px;height:28px;fill:#fff;display:block}
.wa-float span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* ---------- Footer additions ---------- */
.foot-slogan{
  font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:.95rem;color:var(--rb-red);margin:10px 0 0;
}
.foot-credit{font-size:.72rem;color:var(--rb-grey)}
.foot-credit a{color:var(--ink-soft);text-decoration:none;border-bottom:1px solid var(--line)}
.foot-credit a:hover{color:var(--rb-red)}

@media(max-width:900px){
  .whatwedo{grid-template-columns:1fr}
}
@media(max-width:560px){
  .lb-prev{left:8px}
  .lb-next{right:8px}
}

/* ---------- Reviews marquee ----------
   The cards drift slowly from side to side and loop seamlessly: the JS
   clones the set once, so the track can translate exactly half its width
   and land back where it started. Pauses on hover, on focus, and while
   any review is expanded, so nothing moves while it is being read. */
.marquee{position:relative;overflow:hidden;margin:0 -28px;padding:4px 0}
.marquee-track{
  display:flex;gap:20px;width:max-content;padding:0 28px;
  animation:rb-marquee var(--marquee-duration,90s) linear infinite;
  will-change:transform;
}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track,
.marquee.is-paused .marquee-track{animation-play-state:paused}
.marquee .rev{flex:0 0 320px;width:320px}
@keyframes rb-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(calc(-50% - 10px))}
}
/* Fade the edges into the band the section sits on. */
.marquee::before,.marquee::after{
  content:"";position:absolute;inset-block:0;width:clamp(40px,10%,150px);z-index:2;pointer-events:none;
}
.marquee::before{left:0;background:linear-gradient(90deg,var(--bg-alt),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--bg-alt),transparent)}

@media(prefers-reduced-motion:reduce){
  .marquee{overflow-x:auto}
  .marquee-track{animation:none}
}
@media(max-width:560px){
  .marquee{margin:0 -20px}
  .marquee-track{padding:0 20px}
  .marquee .rev{flex-basis:270px;width:270px}
}

/* ---------- Reviews band ----------
   The section inverts: the lead colour fills the band, the cards stay
   white on top of it, so the reviews read as a distinct block rather
   than another pale strip. The texture is two very low-contrast
   gradients — enough to catch the light, not enough to compete. */
.reviews-band{
  background-color:var(--accent);
  background-image:
    repeating-linear-gradient(115deg,
      rgba(255,255,255,.028) 0 2px,
      transparent 2px 9px),
    radial-gradient(120% 80% at 18% 0%,
      rgba(255,255,255,.1) 0%,
      transparent 60%);
  color:var(--accent-ink);
}
.reviews-band h2{color:#FFFFFF}
.reviews-band .eyebrow{color:#FFFFFF;opacity:.82}
.reviews-band .lede{color:rgba(255,255,255,.82)}
.reviews-band .reviews-head{color:rgba(255,255,255,.8)}
.reviews-band .reviews-head .score{color:#FFFFFF}
.reviews-band .marquee::before{background:linear-gradient(90deg,var(--accent),transparent)}
.reviews-band .marquee::after{background:linear-gradient(270deg,var(--accent),transparent)}
.reviews-band .rev{
  border-color:transparent;
  box-shadow:0 18px 40px -28px rgba(0,0,0,.75);
}

/* Google mark, top right of every card */
.rev{position:relative}
.rev .gmark{
  position:absolute;top:18px;right:18px;width:19px;height:19px;display:block;
}
.rev .gmark svg{width:100%;height:100%;display:block}
.rev .stars{padding-right:30px}
.reviews-head a{color:inherit;font-weight:600}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .faq-cols{grid-template-columns:1fr}
  .hero-grid,.rates,.partners,.contact-grid{grid-template-columns:1fr}
  .pillars{grid-template-columns:1fr}
  .process{grid-template-columns:1fr 1fr}
  .navlinks{display:none}
  .trustbar .wrap{grid-template-columns:1fr;gap:18px;text-align:center}
  .foot-grid{grid-template-columns:1fr 1fr;gap:28px}
}
@media(max-width:560px){
  /* "Call Kobus Pretorius" wrapped onto two lines inside the button. The
     name sits in one span so the button's flex gap cannot land between
     the first name and the surname. */
  .foot-act .surname{display:none}
  .wrap,.nav{padding-left:20px;padding-right:20px}
  .process,.f2,.foot-grid{grid-template-columns:1fr}
  .nav{gap:12px}
  .logo .wordmark{display:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}

/* ============================================================
   WIREFRAME v2 — WEDDING PATH
   Built from docs/wireframe-wedding-path.pdf. New component
   names throughout so nothing fights the v1 cascade above.
   ============================================================ */

/* ---------- 2.1 Header: three links, always visible ---------- */
.nav .navlinks.nav-3{display:flex;gap:clamp(13px,1.5vw,20px)}
.nav .navlinks.nav-3 a{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  padding-block:5px;border-bottom:1px solid transparent;transition:.22s;
  /* Seven links with Home on the wedding side: on a tablet "Wedding films"
     and "Get in touch" broke over two lines. Kept whole, the row still fits
     down to the 760px switch to the phone menu. */
  white-space:nowrap;
}
.nav .navlinks.nav-3 a:hover{border-bottom-color:var(--brand);color:var(--brand)}
header.stuck{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}

/* The wedding header keeps the v1 wordmark exactly as it was and only grows
   the "rb" mark beside it.

   logo-monogram.png is a 213x128 canvas whose visible "rb" only occupies
   82x52 at offset (65,38) — the rest is transparent padding, so sizing the
   <img> by height alone renders a mark 41% of the height you asked for (the
   v1 30px box showed a 12px mark). The rules below size by --mark, the height
   the glyph should actually appear at, derive the image box from it, and pull
   the dead canvas back in with negative margins so the mark sits flush at the
   nav's left padding. Each breakpoint then only sets --mark. Replace all of
   this with a plain height if the monogram is ever re-exported tightly
   cropped. */
body.weddings .logo,body.corporate .logo{gap:13px}
body.weddings .logo img,body.corporate .logo img{
  --mark:30px;
  /* flex:none and max-width:none are both load-bearing: the negative margins
     shrink the img's margin box, so the global img{max-width:100%} would clamp
     the image against it and flexbox would shrink it the rest of the way. */
  flex:none;
  max-width:none;
  height:calc(var(--mark) * 128 / 52);
  width:calc(var(--mark) * 213 / 52);
  margin:calc(var(--mark) * -38 / 52) calc(var(--mark) * -66 / 52)
         calc(var(--mark) * -38 / 52) calc(var(--mark) * -65 / 52);
}

/* ---------- 2.2 Hero: full-bleed ---------- */
.hero-full{
  position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,90svh,880px);
  display:flex;align-items:center;
  color:#fff;padding:0;
}
/* The wedding hero wraps its img in <picture> for a phone frame. The wrapper
   gets no box of its own, so the img is laid out exactly as a bare child. */
.hero-full > picture{display:contents}
.hero-full > img,
.hero-full > picture > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;object-position:center 32%;
  /* In colour, like everything else on the wedding side. This is the base for
     the three package detail heroes; the weddings hero sets its own crop and
     wash below but no longer has to restate the grade. */
  filter:contrast(1.06) saturate(1.06);
}
/* Heavy behind the copy and gone by the right edge. The old version never
   dropped below 24% black even at the far side, which was fine over a
   greyscale photograph but mutes a colour one everywhere at once: the frame
   read as dull rather than dark. The left is barely changed, so the type
   keeps the same footing it had. */
.hero-full::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(105deg,rgba(8,8,8,.78) 0%,rgba(8,8,8,.46) 46%,rgba(8,8,8,.06) 100%);
}
.hero-full .wrap{width:100%;padding-block:clamp(60px,9vw,96px)}
.hero-full h1{color:#fff;max-width:15ch;margin-bottom:0}
.hero-full .eyebrow{color:rgba(255,255,255,.72)}
.hero-full .lede{color:rgba(255,255,255,.84);max-width:46ch;margin:1.4rem 0 2.1rem}
.btn.light{background:#fff;color:var(--ink);border-color:#fff}
.btn.light:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- 2.2 Hero: one photograph, gently alive ---------- */
/* A slow drift across the frame, so the hero reads as a held shot rather
   than a flat still. Deliberately CSS-only and deliberately one image: a
   cross-faded sequence showed two photographs at once through every
   transition and read as a double exposure.

   The scale never drops below 1.04, so the pan can never expose an edge,
   and the whole travel is 6%. The global prefers-reduced-motion rule kills
   animations outright, so this stops dead for anyone who asks for that. */
@keyframes hero-drift{
  /* Starts at scale 1 with no offset, which is exactly the framing the crop
     was tuned to, and ends 6% in. The pan is 1%, well inside the 3% of slack
     that 6% of scale buys, so no edge can ever show. The vertical drift is
     downward on purpose: drifting up walks the couple's heads off the top of
     the frame, which is already tight at 1920. */
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.03) translate3d(-0.6%,0.6%,0)}
}
/* 52% was tuned for the portrait frame this replaced. The hero photograph is
   now landscape, so far less is cropped; 40% keeps the couple's heads clear
   of the top edge through the whole drift, at every desktop width.

   filter:none overrides the greyscale .hero-full applies: this one frame
   keeps its own colour. The package page heroes are left black and white. */
/* The shared .hero-full scrim washes the whole frame, including the side with
   no type on it, which is what made the photograph look flat and murky. This
   one is heavy behind the copy and gone by 72%, so the right of the picture is
   untouched. The type carries its own shadow rather than leaning on the wash,
   so it separates without the image paying for it. */
/* The reference frames are high key: milky blacks, luminous highlights, very
   little contrast. Grading the photograph that way brightens the whole frame,
   so white type can no longer carry itself on shadow alone. The wash comes
   back, but only as a soft fall across the left third where the copy sits; by
   64% of the width the photograph is untouched. */
/* This frame was composed with room for type: the couple hold the right
   third and the left is open track, vineyard and mountain ridge, so the copy
   sits centred and left the way every other hero on the site does. The
   right-crossing layout the previous photograph needed is gone with it.

   The wash is a single fall from the left, deeper than a mono frame would
   need because white type over a bright sunset landscape has less to hold on
   to than white type over grey. It is clear of the picture by 60%, short of
   the couple at 55-80%, so they are never touched by it. */
/* Deeper and reaching further across than the single-frame version. That
   gradient was tuned to one photograph, whose left third was open track and
   sky. The hero now rotates through five frames with different tones and
   different things behind the copy, so the wash has to hold white type over
   the brightest of them, not just the one it was measured against. Still
   clear of the picture by 72%, so the right of every frame is untouched. */
/* Back to one photograph (the vintage car), so the wash is tuned to it
   again. The copy runs over the bright car window and the bride's veil, so it
   holds deep behind the type and falls away fast after 42%, which leaves the
   couple's faces, at 50-65%, all but untouched. */
.hero-live::after{
  background:linear-gradient(100deg,
    rgba(12,10,8,.84) 0%,
    rgba(12,10,8,.74) 30%,
    rgba(12,10,8,.46) 42%,
    rgba(12,10,8,.12) 54%,
    rgba(12,10,8,0) 64%);
}
/* The type carries its own weight now, so the wash can stay light and the
   photograph keeps its colour. A tight shadow for edge definition against
   busy detail, a wide soft one for separation. */
/* Lighter than before. A heavy black halo under the type fights the high-key
   grade and drags the frame back towards the punchy look; the wash on ::after
   now does most of the separating, so the shadow only has to hold the edges. */
.hero-live h1{
  text-shadow:
    0 1px 2px rgba(0,0,0,.72),
    0 2px 14px rgba(0,0,0,.52);
}

.hero-live .eyebrow,
.hero-live .lede{
  text-shadow:
    0 1px 2px rgba(0,0,0,.8),
    0 2px 12px rgba(0,0,0,.6);
}
.hero-live .lede{color:rgba(255,255,255,.96)}

/* ---------- 2.2b Hero slideshow ----------
   The hero holds several photographs instead of one. The earlier attempt at
   this was abandoned because cross-fading showed two frames at once and read
   as a double exposure; that happens when both images sit at partial opacity
   through the transition. Here they never do.

   The incoming shot is placed *under* the outgoing one at full opacity, and
   only the outgoing one animates, fading from 1 to 0 above it. At every
   moment of the transition the viewer sees one opaque photograph with a
   dissolving one on top of it, never a 50/50 blend of two.

   The per-photograph crop tuning the single-frame hero carried (object-position
   44%, transform-origin aimed at one couple) cannot survive a rotating set, so
   these share one general crop that keeps faces clear of the top edge. */
.hero-shots{position:absolute;inset:0;z-index:-2}
.hero-shot{position:absolute;inset:0;opacity:0}
.hero-shot img{
  width:100%;height:100%;object-fit:cover;
  object-position:50% 42%;
  filter:contrast(1.06) saturate(1.06);
  transform-origin:55% 45%;
}
/* The shot on screen: opaque, and below anything fading out. */
.hero-shot.is-on{opacity:1;z-index:1}
.hero-shot.is-on img{animation:hero-drift 32s ease-in-out infinite alternate}
/* The shot leaving: starts opaque (it was .is-on a moment ago) and fades,
   sitting above the incoming one so no blend is ever visible. */
.hero-shot.is-out{opacity:0;z-index:2;transition:opacity 1.2s ease}

@media(max-width:760px){
  /* Matches the single-frame rule below: the drift only nudges the couple
     towards an edge at this crop. */
  .hero-shot img{object-position:55% 50%}
  .hero-shot.is-on img{animation:none}
}
@media(prefers-reduced-motion:reduce){
  .hero-shot.is-out{transition:none}
}

.hero-live > img,
.hero-live > picture > img{
  /* The frame is 3:2 and most desktop heroes are wider than that, so the
     image is scaled to the width and only the vertical value bites. 44%
     keeps the ridge line and both faces clear of the top edge through the
     whole drift while holding the foreground track in shot. */
  object-position:50% 44%;
  transform-origin:65% 45%;
  animation:hero-drift 32s ease-in-out infinite alternate;
}

/* Must follow the rule above, not precede it: both selectors are
   .hero-live > img, so at equal specificity the later one wins and a media
   query placed earlier in the file silently loses. This block was above it
   and did nothing.

   A 3:2 frame in a portrait viewport shows about a third of its width. This
   couple stand between 55% and 80% of the frame with their faces around 65%,
   so 72% centres the window on the two of them. Re-aim this if the
   photograph is swapped. */
@media(max-width:760px){
  /* On a phone the hero takes the portrait sunset lift (see the <picture>
     in weddings.html). A 2:3 frame in a phone-shaped box loses only a
     quarter of its width, and its top third is open sky, so the eyebrow and
     a larger heading sit up there, centred, well clear of the couple, whose
     heads start about a third of the way down. The lede and button are
     centred at the foot over the track and the hem of the dress, on a
     deeper wash because the dress is white. The drift is off: at this crop
     it only nudges the couple towards an edge. */
  .hero-live{
    align-items:stretch;
    min-height:calc(100svh - 69px);
  }
  .hero-live > picture > img{object-position:55% 50%;animation:none}
  .hero-live::after{
    background:
      linear-gradient(to bottom,
        rgba(12,10,8,.42) 0%,
        rgba(12,10,8,.26) 20%,
        rgba(12,10,8,0) 34%),
      /* Deep enough under the lede to hold it over the white of the dress,
         and clear by 48%, below the couple's faces. */
      linear-gradient(to top,
        rgba(12,10,8,.9) 0%,
        rgba(12,10,8,.8) 22%,
        rgba(12,10,8,.52) 34%,
        rgba(12,10,8,0) 48%);
  }
  .hero-live .wrap{
    display:flex;flex-direction:column;align-items:center;text-align:center;
    /* Scaled to the screen height, like the couple, so the heading keeps
       the same short gap above their heads on tall and short phones. */
    padding-block:max(24px, calc((100svh - 69px) * .06)) 54px;
  }
  /* The keyword line and a two-line heading ("Your love story, / timelessly
     framed.") keep the whole block in the sky, clear of the bride's face;
     at the old size the heading broke onto three lines and "framed." sat
     on her head. */
  .hero-live .eyebrow{font-size:.66rem;letter-spacing:.16em;margin-bottom:.6rem;color:rgba(255,255,255,.9)}
  body.weddings .hero-live h1{
    font-size:clamp(1.8rem,8.4vw,2.3rem);max-width:none;line-height:1.08;text-wrap:balance;
  }
  .hero-live .lede{
    font-size:.97rem;line-height:1.55;max-width:32ch;
    margin:auto 0 1.5rem;color:rgba(255,255,255,.92);
  }
  .hero-live .btn{padding:14px 34px}
}

/* ---------- 2.3 Credentials strip ---------- */
/* corporate.html runs the same strip on a solid --accent band (black). */
/* The logo red goes muddy on the dark band, so the icons are white here. */
/* "Professional photographer since 2014" broke onto two lines on a phone at
   the strip's .16em tracking; at .08em it holds one line down to 360px. */
@media(max-width:760px){
}

/* ---------- 2.4 What we do: three cards, contained ---------- */
/* These sit inside .wrap and use the same card metrics as .packages
   below, so the two three-up sections line up with each other and with
   their own headings. Ran full-bleed originally, which left the copy
   stranded against a lot of empty column on wide screens. */
.services-3{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px}
/* Light grey, centred and borderless at every size, as on a phone. */
.svc{
  background:#EEF0F2;
  border:1px solid transparent;border-radius:var(--radius);
  padding:32px 30px;
  display:flex;flex-direction:column;gap:14px;
  align-items:center;text-align:center;
}
.svc .ico{width:46px;height:46px;color:var(--ink)}
.svc .ico svg{
  width:100%;height:100%;display:block;
  stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
}
.svc .num{display:none}
.svc h3{
  font-family:var(--serif);font-size:1.18rem;font-weight:600;
  letter-spacing:-.01em;text-transform:none;line-height:1.25;
}
.svc p{font-size:.94rem;color:var(--ink-soft);margin:0}
/* "What we do" on both pages: the section head centres over the cards. */
#services .section-head,#c-services .section-head{text-align:center;margin-inline:auto}
/* Weddings, desktop: What we do reads left-aligned, head and cards both, to
   match Packages below it (client, 2026-10-07). Phones keep it centred. */
@media(min-width:761px){
  #services .section-head{text-align:left;margin-inline:0}
  #services .svc{align-items:flex-start;text-align:left}
}

/* corporate.html uses the same cards with the icon beside the heading
   rather than above it. Its icons are drawn on a 24 grid, so the stroke is
   thinned to read at the same weight as the wedding icons. */
.corp-svc .svc-title{display:flex;align-items:center;justify-content:center;gap:14px}
.corp-svc .svc .ico{width:34px;height:34px;flex:none}
.corp-svc .svc .ico svg{stroke-width:1.15}
.corp-svc .svc h3{margin:0}
/* Corporate, desktop: the cards read left-aligned under the left-aligned
   section head, as the Weddings cards do. Phones keep them as they are. */
@media(min-width:761px){
  #c-services .svc{align-items:flex-start;text-align:left}
  .corp-svc .svc-title{justify-content:flex-start}
}

/* ---------- 2.5 Carousel ---------- */
.carousel{position:relative;overflow:hidden;background:var(--rb-black);padding:0}
/* The glide is deliberately long: the carousel advances on its own, so the
   movement should read as drifting rather than snapping. The global
   prefers-reduced-motion rule kills the transition, and site.js does not
   auto-advance at all in that case. */
.slides{display:flex;transition:transform 1.4s cubic-bezier(.4,.02,.2,1)}
/* The gallery runs full-bleed and near full-height — it is the one place
   where the photographs are the page rather than an illustration of it. */
.slide{position:relative;flex:0 0 100%;height:clamp(520px,92svh,940px);margin:0}
/* Same arithmetic as the hero. At 92svh a slide is a 0.5 box holding a 1.5
   photograph, so a third of the width survives and every frame is a crop of
   somebody's middle. These carry no copy, so they can go shorter than the
   hero: 56svh puts the box near 0.82 and better than half the width back. */
@media(max-width:760px){
  .slide{height:clamp(360px,56svh,520px)}
}
/* In colour, to match the hero. The carousel was forced to greyscale while
   the hero above it was mono too; now that the hero keeps its colour, a black
   and white band directly under it read as a different site. The grade is the
   same gentle one the hero uses, so the two sit together. */
.slide img{width:100%;height:100%;object-fit:cover;filter:contrast(1.06) saturate(1.06)}
.car-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;
  border:1px solid rgba(255,255,255,.5);background:rgba(12,12,12,.32);color:#fff;
  display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px);transition:.22s;
}
.car-btn:hover{background:#fff;color:var(--rb-black);border-color:#fff}
.car-btn svg{
  width:16px;height:16px;stroke:currentColor;fill:none;
  stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
.car-prev{left:clamp(12px,2.4vw,26px)}
.car-next{right:clamp(12px,2.4vw,26px)}
.dots{
  position:absolute;z-index:3;left:0;right:0;bottom:clamp(14px,2vw,20px);
  display:flex;justify-content:center;gap:9px;
}
/* Each dot sits in a 24px button so it is easy to tap; the dot itself is
   drawn by ::before and looks as it always has. */
.dots{gap:0}
.dots button{
  position:relative;width:24px;height:24px;padding:0;border:0;background:transparent;cursor:pointer;
  transition:width .22s;
}
.dots button::before{
  content:"";position:absolute;left:50%;top:50%;width:7px;height:7px;transform:translate(-50%,-50%);
  border-radius:50%;border:1px solid rgba(255,255,255,.75);background:transparent;transition:.22s;
}
.dots button[aria-current="true"]{width:36px}
.dots button[aria-current="true"]::before{background:#fff;width:22px;border-radius:999px}

/* Placeholder slides (Lifestyle, until its photographs arrive): two greys
   alternating so a move from one slide to the next is visible. */
.slide-ph .ph-block{
  width:100%;height:100%;display:grid;place-items:center;background:#D8DCE1;
  color:#4F545A;font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
}
.slide-ph:nth-child(even) .ph-block{background:#C9CED4}
/* 404 page: a short message and the four main routes back in. */
.nf{min-height:60vh;display:flex;align-items:center}
.nf .wrap{width:100%}
.nf-links{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
@media(max-width:600px){.nf-links li{flex:1 1 100%}.nf-links .btn{display:block;text-align:center}}

/* Lifestyle hero. Desktop: Henry and Kathrin's sunset kiss, an upright
   photograph, fills the right 60% at full height and fades into the dark
   ground under the copy (as on the Photo & Video packages hero); the crop
   sits at the top so both heads stay in. Phone: mum, dad and their toddler
   in a tall frame, the copy at the foot over a fade, clear of all three
   faces (same pattern as the video packages hero). */
@media(min-width:761px){
  .hero-ls{background:#15130f}
  .hero-ls > picture > img{
    left:auto;right:0;width:60%;object-position:50% 4%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 30%);
            mask-image:linear-gradient(90deg,transparent 0,#000 30%);
  }
  .hero-ls::after{background:linear-gradient(90deg,rgba(21,19,15,.55) 0%,rgba(21,19,15,.2) 40%,rgba(21,19,15,0) 60%)}
  .hero-ls .lede{max-width:40ch}
}
@media(max-width:760px){
  .hero-ls{align-items:flex-end;min-height:calc(100svh - 69px)}
  .hero-ls > picture > img{object-position:62% 30%}
  .hero-ls .wrap{padding-block:0 34px}
  .hero-ls .eyebrow{font-size:.7rem;margin-bottom:.6rem}
  .hero-ls h1{font-size:2.1rem;margin-bottom:.6rem}
  .hero-ls .lede{font-size:.95rem;line-height:1.5;margin:0}
  .hero-ls::after{
    background:linear-gradient(to top,rgba(8,8,8,.82) 0%,rgba(8,8,8,.58) 30%,rgba(8,8,8,.1) 50%,rgba(8,8,8,0) 100%);
  }
}
/* Wedding films and Galleries: a line under the closing button linking all
   three package pages, so each is reachable from more than the weddings page. */
.closing .closing-pkgs{margin:22px auto 0;font-size:.95rem;max-width:56ch}
.closing .closing-pkgs a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.closing .closing-pkgs a:hover{color:var(--brand)}

/* A plain closing straight after a slideshow needs its own top space: the
   usual one leans on the white section above for it. */
.carousel + .closing.closing-plain .wrap{padding-top:clamp(56px,6vw,88px)}
/* Lifestyle: the closing now follows the grey reviews band, not a white
   section, so it gets full room above and below rather than starting
   flush under the band and looking cut off. */
.ls-reviews + .closing.closing-plain .wrap{padding-block:clamp(84px,9vw,132px)}

/* ---------- 2.6 Packages: three category covers ---------- */
/* The wedding page shows one cover per category and sends the detail to
   its own page, so the three price ladders (2, 3 and 2 tiers) do not have
   to share one row. The tiers themselves reuse .packages/.pkg. */
.pkg-covers{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:24px}
.pkg-cover{
  position:relative;isolation:isolate;overflow:hidden;
  border-radius:var(--radius);
  min-height:clamp(400px,40vw,470px);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(26px,2.6vw,32px);
  text-decoration:none;color:#fff;
}
.pkg-cover img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  /* In colour, like the hero and the carousel. These three stacked into three
     full-width mono blocks on a phone, directly under a colour carousel, which
     is what made the page read as black and white on a small screen. */
  object-fit:cover;filter:contrast(1.06) saturate(1.06);
  transition:transform .6s cubic-bezier(.2,.6,.2,1);
}
.pkg-cover::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(8,8,8,.9) 0%,rgba(8,8,8,.5) 46%,rgba(8,8,8,.2) 100%);
}
.pkg-cover:hover img,.pkg-cover:focus-visible img{transform:scale(1.06)}
.pkg-cover .tag{
  position:absolute;top:0;left:clamp(26px,2.6vw,32px);
  background:var(--brand);color:#fff;
  font-size:.58rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:6px 13px;border-radius:0 0 var(--radius-sm) var(--radius-sm);
}
.pkg-cover h3{
  font-family:var(--serif);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;
  letter-spacing:-.01em;text-transform:none;line-height:1.2;color:#fff;margin:0 0 6px;
}
.pkg-cover .from{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,255,255,.72);margin:0 0 12px;
}
.pkg-cover .from b{font-family:var(--serif);font-size:1.25rem;font-weight:600;letter-spacing:0;color:#fff}
.pkg-cover p{font-size:.92rem;color:rgba(255,255,255,.86);margin:0 0 18px;max-width:34ch}
.pkg-cover .more{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1.5px solid rgba(255,255,255,.55);padding-bottom:4px;transition:.22s;
}
.pkg-cover:hover .more,.pkg-cover:focus-visible .more{border-bottom-color:#fff;gap:.85rem}
.pkg-cover .more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Package detail pages: tier ladder and the small print ---------- */
.tier-note{
  margin-top:clamp(30px,3vw,44px);padding:clamp(24px,2.6vw,32px);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
}
.tier-note p.foot-h,.tier-note .note-h{
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rb-grey);margin:0 0 14px;
}
.tier-note ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.tier-note li{
  font-size:.92rem;color:var(--ink-soft);line-height:1.6;
  padding-left:20px;position:relative;
}
.tier-note li::before{
  content:"";position:absolute;left:0;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--brand);
}

/* ---------- 2.6 Packages: note row ---------- */
.pkg-note{
  margin-top:clamp(28px,3vw,40px);padding-top:clamp(24px,2.6vw,32px);
  border-top:1px solid var(--line);
  display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;justify-content:space-between;
}
.pkg-note p{font-size:.94rem;color:var(--ink-soft);max-width:52ch;margin:0}
.doc-links{display:flex;flex-wrap:wrap;gap:10px}
.doc-link{
  display:inline-flex;align-items:center;gap:.55rem;
  border:1px solid var(--line);padding:.6rem 1rem;border-radius:var(--radius-sm);
  font-size:.76rem;font-weight:600;text-decoration:none;transition:.2s;
}
.doc-link:hover{border-color:var(--ink);color:var(--brand)}
.doc-link svg{
  width:15px;height:15px;flex:none;color:var(--brand);
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------- 2.7 Testimonials: three, shown in full ---------- */
.revs-3{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.4vw,32px)}
.revs-3 .rev{padding:clamp(26px,2.8vw,34px);gap:16px}
.revs-3 .rev blockquote{
  margin:0;font-family:var(--serif);font-weight:300;
  font-size:1.06rem;line-height:1.6;letter-spacing:-.005em;color:var(--ink);
}
.revs-3 .rev-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.revs-3 .gmark{width:19px;height:19px;flex:none}
.revs-3 .gmark svg{width:100%;height:100%;display:block}
.revs-3 .stars{color:#E8A700;letter-spacing:.18em;font-size:.92rem;padding:0}

/* ---------- Portfolio page: one section per couple ---------- */
/* The wedding page now carries a single teaser band and sends the detail
   here, so each couple gets room for a proper set of frames rather than one
   thumbnail and a disclosure button. */
.folio-intro{padding-bottom:0}
.folio-intro .section-head{margin-bottom:0}
.folio-intro h1{font-size:clamp(2.1rem,4.4vw,3.2rem);margin-bottom:16px}
/* Desktop: centred over the grid below, with the lede run wide enough to
   settle on two lines instead of three narrow ones against an empty right. */
@media(min-width:761px){
  .folio-intro .section-head{text-align:center;margin-inline:auto;max-width:none}
  .folio-intro .lede{max-width:min(100%,980px);margin-inline:auto;text-wrap:balance}
}

.folio-head{margin-bottom:clamp(18px,2.4vw,28px)}
.folio-head h2{font-weight:300;font-size:clamp(1.7rem,3.2vw,2.4rem);margin:0}
.folio-head .venue{
  font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--rb-grey);display:block;margin-top:8px;
}
.folio-head p{color:var(--ink-soft);margin:0;font-size:.98rem;line-height:1.7}

/* One photograph leads, the rest sit behind a button.

   The lead is the only frame that crops, to a wide 16:9, and it is picked
   from the landscape shots so the crop stays shallow. Everything behind the
   button keeps its own shape: these galleries mix 1024x682 landscape with
   1024x1536 portrait, and forcing both into one tile shape cuts about half
   the width off every landscape frame, which is what made them look stretched.

   The rest flows in columns rather than a grid, because columns take mixed
   heights without cropping and without leaving holes.

   The page stays in colour. The rest of the wedding side is black and white,
   but this is the work itself. */
.folio-lead{margin:0}
.folio-lead img{
  /* height:auto matters: the markup carries width/height attributes, and a
     height attribute beats aspect-ratio, which only governs when one axis is
     auto. Without it the lead renders at the file's own pixel height. */
  width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;
  border-radius:var(--radius);background:var(--bg-deep);
  cursor:zoom-in;transition:opacity .22s ease;
}
.folio-lead img:hover{opacity:.92}

.folio-rest{
  columns:3;column-gap:clamp(10px,1.2vw,16px);
  margin-top:clamp(10px,1.2vw,16px);
}
.folio-rest img{
  width:100%;height:auto;display:block;
  margin:0 0 clamp(10px,1.2vw,16px);
  break-inside:avoid;
  border-radius:var(--radius);background:var(--bg-deep);
  cursor:zoom-in;transition:opacity .22s ease;
}
.folio-rest img:hover{opacity:.92}

/* Galleries page: one card per couple, side by side (stacked on a phone).
   A card opens that couple's whole day as a full-screen sheet, which
   reuses .folio-lead / .folio-rest above, so the lightbox works inside it
   unchanged. site.js opens and closes the sheets. */
.couples-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,24px)}
.couple-card{
  position:relative;display:block;border-radius:var(--radius);overflow:hidden;
  background:var(--bg-deep);color:#fff;text-decoration:none;isolation:isolate;
}
.couple-card img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;transition:transform .7s ease}
.couple-card:hover img,.couple-card:focus-visible img{transform:scale(1.04)}
.couple-card::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(8,8,8,.72))}
.couple-card-text{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:clamp(18px,2vw,26px);display:flex;flex-direction:column;gap:6px;
}
.couple-card-text b{font-size:clamp(1.3rem,2vw,1.7rem);font-weight:300;line-height:1.2}
.couple-card-text span{font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.9}
.couple-card:hover .couple-card-text span{text-decoration:underline;text-underline-offset:4px}
@media(max-width:760px){
  .couples-grid{grid-template-columns:1fr}
  .couple-card img{aspect-ratio:4/3}
}

/* The sheet sits under the lightbox (z-index 200) so a photograph opened
   from it lands on top. */
.couple-sheet{position:fixed;inset:0;z-index:150;background:var(--bg);overflow-y:auto;overscroll-behavior:contain;padding:0}
.couple-sheet[hidden]{display:none}
.couple-sheet-bar{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:1rem;
  padding:14px clamp(20px,4vw,48px);border-bottom:1px solid var(--line);
  background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.couple-sheet-bar h2{margin:0;font-weight:300;font-size:clamp(1.3rem,2.4vw,1.8rem)}
.couple-sheet-count{
  margin-right:auto;font-size:.68rem;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:var(--rb-grey);
}
.couple-sheet-close{
  flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);
  background:#fff;color:var(--ink);font-size:1.4rem;line-height:1;cursor:pointer;transition:.2s;
}
.couple-sheet-close:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.couple-sheet-body{max-width:1240px;margin:0 auto;padding:clamp(20px,3vw,40px) clamp(20px,4vw,48px) 80px}
/* Lifestyle: a Back button at the foot of each "See all" sheet, back to the
   top of the galleries section (site.js). */
.couple-sheet-back{display:flex;justify-content:center;margin:clamp(32px,4vw,52px) 0 0}
#galleries{scroll-margin-top:69px}
@media(max-width:560px){
  .couple-sheet-count{display:none}
  .couple-sheet-bar h2{margin-right:auto}
  .couple-sheet .folio-rest{columns:2}
}

/* Lifestyle: a row per kind of shoot, its photographs in a strip that
   scrolls sideways (arrows on desktop from site.js, swipe on a phone). The
   strip keeps one height and lets each landscape photograph its own width,
   so nothing is cropped. "See all" opens the .couple-sheet above, where
   each shoot sits under its own name (.ls-shoot). */
.ls-galleries .section-head{text-align:center;margin-inline:auto;margin-bottom:clamp(30px,3.4vw,46px)}
.ls-row + .ls-row{margin-top:clamp(28px,3.2vw,44px)}
.ls-row-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:12px}
.ls-row-head h3{margin:0;font-weight:300;font-size:clamp(1.25rem,2vw,1.6rem);display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.ls-row-head h3 span,.ls-shoot span{
  font-size:.66rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--rb-grey);
}
.ls-row-all{
  flex:none;font-size:.7rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--ink);text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;transition:color .2s;
}
.ls-row-all:hover{color:var(--brand)}
.ls-strip-wrap{position:relative}
.ls-strip{
  display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;overscroll-behavior-x:contain;
}
.ls-strip::-webkit-scrollbar{display:none}
.ls-strip-item{flex:0 0 auto;display:block;border-radius:var(--radius);overflow:hidden;scroll-snap-align:start;background:var(--bg-deep)}
.ls-strip-item img{height:clamp(170px,15vw,214px);width:auto;display:block;transition:transform .6s ease}
.ls-strip-item:hover img{transform:scale(1.05)}
.ls-strip-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;
  background:rgba(255,255,255,.94);color:var(--ink);font-size:1.5rem;line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:opacity .25s ease,background .2s,color .2s;
}
.ls-strip-btn:hover{background:var(--brand);color:#fff}
.ls-strip-btn.prev{left:-16px}
.ls-strip-btn.next{right:-16px}
.ls-strip-btn[hidden]{display:block;opacity:0;pointer-events:none}
@media(max-width:760px){
  .ls-strip-btn{display:none}
  .ls-strip-btn[hidden]{display:none}
  .ls-strip-item img{height:170px}
}
.ls-shoot{
  font-weight:300;font-size:clamp(1.2rem,2vw,1.5rem);margin:clamp(30px,3.2vw,44px) 0 14px;
  display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 14px;
}
.ls-shoot:first-child{margin-top:0}

.gallery-more{display:flex;justify-content:center;margin:clamp(18px,2.4vw,28px) 0 0}
.gallery-more button{
  font:inherit;font-size:.72rem;font-weight:700;letter-spacing:.15em;
  text-transform:uppercase;cursor:pointer;
  padding:13px 30px;border-radius:var(--btn-radius);
  background:transparent;color:var(--ink);border:1.5px solid var(--ink);
  transition:.22s;
}
.gallery-more button:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* The teaser reuses .closing for the full-bleed image and only needs its
   content left-aligned, to match every other section head on the page (the
   closing CTA stays centred, as the finale). Both selectors carry .closing
   because the .closing rules are defined further down the file. */
.closing.folio-teaser{
  text-align:left;
  /* A wide strip, not the whole viewport. It used to take 100svh on the
     grounds that it was the only look at the work on this page, which stopped
     being true once the carousel above it grew to fourteen frames and the
     gallery page arrived.

     Height is what was making the photograph look zoomed in. At 100svh the
     band came out close to square on an ordinary laptop, and a 3:2 photograph
     covering a near-square box is scaled to the box height, which throws away
     the sides: at 1000x760 only 86% of the frame's width survived and the
     couple were blown up to fill what was left. A strip is wider than 3:2 at
     every desktop size, so the photograph is scaled to the width instead and
     the whole width of the scene shows. svh rather than vh so mobile browser
     chrome does not push the button out of reach. It now fills the screen
     below the 57px header: at 1440x900 that is 843px against the 960px a
     3:2 frame stands at full width, so it is still scaled to the width and
     no side of the scene is lost. */
  min-height:calc(100svh - 57px);
  display:flex;align-items:center;
}
.closing.folio-teaser .wrap{align-items:flex-start;width:100%}
/* In colour, and scoped to this band alone so the closing CTA at the foot of
   every page keeps the flat mono treatment it shares with the other pages.
   The frame here is a couple seen through the window of a pale blue car, and
   the blue is the whole point of it: under .closing's greyscale and its flat
   70% black there was nothing left to see. So this one gets the hero's grade
   and a fall from the left instead of a wash over everything, which leaves
   the car and the couple alone and still carries the type. */
.closing.folio-teaser > img{filter:contrast(1.06) saturate(1.06)}
/* The photograph sits in a <picture> so phones can take a portrait frame,
   which puts the img one level down and out of reach of .closing > img. */
.closing.folio-teaser > picture{position:absolute;inset:0;z-index:-2}
.closing.folio-teaser > picture > img{
  width:100%;height:100%;object-fit:cover;
  /* Anchored to the foot of the frame: the bride's skirt and their feet run
     to the bottom edge, so whatever the band crops comes off the sky. */
  object-position:50% 100%;
  filter:contrast(1.06) saturate(1.06);
}
.closing.folio-teaser::after{
  background:linear-gradient(100deg,
    rgba(10,10,10,.76) 0%,
    rgba(10,10,10,.56) 30%,
    rgba(10,10,10,.28) 50%,
    rgba(10,10,10,.10) 68%);
}
/* Desktop: the frame is the veil and vintage car (client, 2026-10-07),
   shown near whole. The couple and the car hold the left and middle and the
   veil the upper right, so the copy moves to the open road at the bottom
   right, on a wash that rises from that corner and leaves the couple clear. */
@media(min-width:761px){
  .closing.folio-teaser{align-items:flex-end}
  .closing.folio-teaser > picture > img{object-position:50% 28%}
  .closing.folio-teaser .wrap{
    padding-block:0 clamp(40px,5vw,64px);gap:1.1rem;
    /* A 420px column whose right edge lines up with the page content, so it
       sits on the road to the right of the dress. */
    width:420px;max-width:100%;margin-left:auto;margin-right:max(0px, calc((100% - var(--maxw)) / 2));
  }
  .closing.folio-teaser::after{
    background:
      radial-gradient(ellipse 60% 70% at 100% 100%,
        rgba(10,10,10,.72) 0%, rgba(10,10,10,.5) 45%, rgba(10,10,10,0) 100%),
      linear-gradient(to top, rgba(10,10,10,.35) 0%, rgba(10,10,10,0) 40%);
  }
}
/* On a phone the copy runs the full width, so a fall from the left has
   nothing to offer it and the block lands across the couple's faces. Same
   answer as the hero: the copy drops to the bottom of the band, they keep
   the middle, and the wash turns to come up from the foot of the frame. */
@media(max-width:760px){
  /* The strip height above is a desktop fix and the wrong answer here: phones
     get the portrait crop, which needs the height, and the copy needs room
     below their faces. Shortening the band put the headline back across the
     groom's chin, so the full viewport comes back at this width. */
  /* The phone frame is the couple walking off up the farm track. It is
     scaled to the screen height, so their heads land a little under halfway
     down at any phone size. The eyebrow and heading are padded down in
     proportion to sit just above them, over the mountains; the copy and
     button are centred at the foot, over the track. */
  .closing.folio-teaser{align-items:stretch;min-height:calc(100svh - 69px)}
  .closing.folio-teaser{text-align:center}
  .closing.folio-teaser > picture > img{object-position:58% 50%}
  .closing.folio-teaser .wrap{
    padding-block:max(34px, calc((100svh - 69px) * .41 - 112px)) 34px;gap:0;
    min-height:calc(100svh - 69px);align-items:center;
  }
  .closing.folio-teaser .eyebrow{margin-bottom:.7rem}
  body.weddings .closing.folio-teaser h2{font-size:clamp(1.75rem,8vw,2.1rem);max-width:14ch}
  .closing.folio-teaser .wrap > p:not(.eyebrow){margin-top:auto;margin-bottom:1.5rem;max-width:32ch}
  .closing.folio-teaser::after{
    background:
      linear-gradient(to bottom,
        rgba(10,10,10,.20) 0%,
        rgba(10,10,10,.42) 24%,
        rgba(10,10,10,.26) 36%,
        rgba(10,10,10,0) 44%),
      linear-gradient(to top,
        rgba(10,10,10,.78) 0%,
        rgba(10,10,10,.45) 20%,
        rgba(10,10,10,0) 38%);
  }
}
/* Set like every other section head rather than like the closing CTA whose
   layout it borrows: same size and weight as "Photo, video, or both".
   White is kept, since it sits on a photograph. */
.closing.folio-teaser h2{
  max-width:20ch;
  font-size:clamp(1.7rem,3.2vw,2.5rem);
  font-weight:var(--head-weight);
  letter-spacing:var(--head-track);
}

@media(max-width:860px){
  .folio-rest{columns:2}
  .folio-lead img{aspect-ratio:3/2}
}
@media(max-width:560px){
  .folio-rest{columns:1}
  .folio-lead img{aspect-ratio:4/3}
}

/* ---------- Gallery page: every frame, one grid ---------- */
/* Borrows .folio and .folio-rest wholesale, so the masonry and the shared
   lightbox both work with no new behaviour. Only three things differ: the
   grid starts at the top of the section rather than under a lead photograph,
   it runs four columns wide because there is no couple heading to sit beside
   it, and it drops to three before it hits the breakpoints .folio-rest
   already defines. */
.gallery-all{padding-top:clamp(28px,3.4vw,44px)}
.gallery-all .folio-rest{margin-top:0;columns:4}

.gallery-back{display:flex;justify-content:center;margin:clamp(24px,3vw,38px) 0 0}
.gallery-back a{
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  text-decoration:none;color:var(--ink-soft);
  border-bottom:1.5px solid var(--rule);padding-bottom:3px;transition:.22s;
}
.gallery-back a:hover{color:var(--brand);border-color:var(--brand)}
/* The way on to the rest of the work, on Facebook and Instagram. The site's
   own black button with each network's mark, stacked at one width, so they
   read as part of the page rather than as the networks' colours. */
.gallery-social{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  margin:clamp(22px,2.6vw,30px) auto 0;width:max-content;
}
.btn.social{display:flex;align-items:center;justify-content:center;gap:10px;width:100%}
.btn.social svg{width:18px;height:18px;fill:currentColor;flex:none}
.btn.social svg.stroke{fill:none;stroke:currentColor;stroke-width:1.8}
.btn.social svg.stroke .dot{fill:currentColor;stroke:none}
@media(max-width:560px){
  .gallery-social{width:100%}
  .gallery-social .btn{padding-inline:16px;white-space:nowrap}
}

@media(max-width:1100px){
  .gallery-all .folio-rest{columns:3}
}
@media(max-width:860px){
  .gallery-all .folio-rest{columns:2}
}

/* Corporate gallery page: three sets (events, brand, Kort Coffee), each its
   own .folio so the lightbox stays inside one set, with a heading above each
   and a rule between them. The Kort set is ninety-odd frames, so it keeps
   the four-column masonry of the wedding gallery. */
.corp-set .section-head{margin-bottom:clamp(18px,2.2vw,28px)}
.corp-set + .corp-set{padding-top:clamp(44px,5vw,72px)}
.corp-set + .corp-set > .wrap{border-top:1px solid var(--rule);padding-top:clamp(36px,4vw,56px)}
.corp-gallery-cta{margin-top:clamp(56px,6vw,88px)}
/* Desktop (client, 2026-10-13): tidy rows that read left to right instead
   of masonry columns, which ran each set down the page and left ragged
   column ends. Events: three across at their own 3:2. Brand: the five
   portraits in one row at their own 2:3. Kort Coffee: an even grid of
   square tiles, four across; the lightbox still shows each photo whole.
   Phones keep the two-column masonry. */
@media(min-width:861px){
  .corp-set .folio-rest{columns:auto;display:grid;gap:14px}
  .corp-set .folio-rest img{margin:0;height:100%;object-fit:cover}
  .corp-set--events .folio-rest{grid-template-columns:repeat(3,minmax(0,1fr))}
  .corp-set--events .folio-rest img{aspect-ratio:3/2}
  .corp-set--brand .folio-rest{grid-template-columns:repeat(5,minmax(0,1fr))}
  .corp-set--brand .folio-rest img{aspect-ratio:2/3}
  .corp-set--kort .folio-rest{grid-template-columns:repeat(4,minmax(0,1fr))}
  .corp-set--kort .folio-rest img{aspect-ratio:1/1}
}
@media(max-width:560px){
  .gallery-all .folio-rest{columns:1}
}

/* ---------- How to book: three steps, as cards ---------- */
/* Each step is its own block, on the same card metrics as .pkg and .svc so
   the three-up rows across the site read as one family. */
.steps-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.step3{
  display:flex;flex-direction:column;gap:14px;
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:32px 30px;
}
.step3 .n{
  width:44px;height:44px;border-radius:50%;flex:none;
  border:1.5px solid var(--line);display:grid;place-items:center;
  font-size:.86rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);
}
.step3 p{font-size:.94rem;color:var(--ink-soft);margin:0}
/* The numbered circle carries the accent once the step sits on a card. */
.step3 .n{border-color:var(--rule);color:var(--head)}

/* ---------- 2.11 Closing call to action ---------- */
.closing{
  position:relative;isolation:isolate;overflow:hidden;
  color:#fff;text-align:center;padding:0;
  min-height:64svh;display:flex;align-items:center;
}
.closing > img{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;
  object-fit:cover;filter:contrast(1.06) saturate(1.06);
}
/* The flat 70% black was tuned over a greyscale photograph, where there was no
   colour for it to kill. Over a colour one it left a muddy near-black panel,
   so it comes down to 58%: still a solid ground for centred white type, but
   the photograph underneath is now legible as a photograph. */
.closing::after{content:"";position:absolute;inset:0;z-index:-1;background:rgba(8,8,8,.58)}
.closing .wrap{
  width:100%;
  padding-block:clamp(70px,9vw,120px);
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
}
.closing h2{color:#fff;max-width:18ch;font-size:clamp(2.1rem,4.4vw,3.4rem);font-weight:300}
.closing .eyebrow{color:rgba(255,255,255,.72);margin:0}
.closing p{color:rgba(255,255,255,.82);max-width:52ch;margin:0}

/* ---------- 2.12 Footer: three columns ---------- */
.foot-grid-3{
  display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;
  gap:clamp(30px,4vw,56px);padding-bottom:clamp(36px,4vw,52px);
  border-bottom:1px solid var(--line);
}
.foot-grid-3 a{color:var(--ink-soft);text-decoration:none;transition:.2s}
.foot-grid-3 a:hover{color:var(--rb-red)}
/* The lockup is assembled from two tight crops of logo-full-colour.png
   rather than the single file, so the mark and the wordmark can be sized
   against each other. In the source artwork they are locked at a ratio of
   211:91; here the mark comes down and the wordmark goes up, which is the
   only way to give the wordmark more weight without re-setting it as type
   and losing the drawn letterforms. Both crops are padding-free, so none
   of the negative-margin trimming the rest of the logos need applies. */
.foot-logo{display:flex;align-items:center;gap:13px;margin-bottom:18px}
.foot-logo img{display:block;width:auto;max-width:none}
.foot-logo .fm-rb{height:44px}
.foot-logo .fm-word{height:25px}
.foot-h{
  font-size:.68rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:#8A8F96;margin:0 0 18px;   /* the light grey reads on the dark footer; --rb-grey is for light backgrounds */
}
.foot-actions{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.foot-act{
  display:inline-flex;align-items:center;gap:.6rem;
  color:var(--head);font-size:.82rem;border:1px solid var(--line);
  border-radius:var(--btn-radius);padding:.48rem 1rem;transition:.22s;
}
/* Needs .foot-grid-3 in front of it: .foot-grid-3 a:hover above sets white,
   and an element in the selector outranks this one on its own, so the hover
   used to land white-on-white and swallow the label. Light grey rather than
   a hard white fill, with the type dark enough to read against it. */
.foot-grid-3 .foot-act:hover{
  background:var(--rb-red);color:#fff;border-color:var(--rb-red);
}
.foot-act svg{
  width:15px;height:15px;flex:none;
  stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.socials-round{display:flex;gap:10px}
.social-round{
  width:42px;height:42px;border-radius:50%;flex:none;
  border:1px solid var(--line);
  display:grid;place-items:center;color:var(--head);transition:.22s;
}
.social-round:hover{background:var(--rb-red);color:#fff;border-color:var(--rb-red)}
.social-round svg{width:18px;height:18px;fill:currentColor}
.foot-links{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:10px;font-size:.88rem;
}

/* ---------- Responsive, v2 components ---------- */
@media(max-width:920px){
  .revs-3,.steps-3{grid-template-columns:1fr}
  .foot-grid-3{grid-template-columns:1fr 1fr}
}
/* Has to sit after the 920px rule above, not up with the other 560px
   ones: those are declared earlier in the file and were being overridden,
   leaving the footer two-up on a phone. */
@media(max-width:560px){
  .foot-grid-3{grid-template-columns:1fr}
}
@media(max-width:900px){
  /* v1 hides .navlinks on small screens; the three-link header keeps them. */
  .nav .navlinks.nav-3{display:flex;gap:clamp(12px,1.6vw,17px)}
  .nav .navlinks.nav-3 a{font-size:.66rem;letter-spacing:.12em}
}
@media(max-width:760px){
  /* Stacked, one line each. The block is centred as a whole but the lines
     are left-aligned inside it, so the three red icons sit in one column
     instead of each shifting with the width of its own label. */

  /* The service cards: centred, icon straight above the heading, and the
     padding and gaps cut down. The 01/02/03 counters are dropped here, since
     on a single column they only added another row of empty space. */
  /* Section heads centre on a phone, to match the centred photo sections
     and service cards around them. */
  body.weddings .section-head{text-align:center;margin-inline:auto;margin-bottom:36px}

  .services-3{gap:14px}
  .svc{
    padding:22px 20px 24px;gap:8px;
    align-items:center;text-align:center;
    background:#EEF0F2;border-color:transparent;
  }

  /* The packages note: the booking terms and both document links centred. */
  .pkg-note{flex-direction:column;text-align:center;justify-content:center}
  .doc-links{justify-content:center}
  .svc .ico{width:38px;height:38px}
  .svc .num{display:none}
}
/* Tablet: the lockup steps down a little so four links keep their gutter. */
@media(max-width:900px){
  body.weddings .logo,body.corporate .logo{gap:11px}
  body.weddings .logo img,body.corporate .logo img{--mark:26px}
}
/* Below 560px the v1 cascade hides the wordmark, so the mark carries the
   header alone and can run back up to its full size. */
@media(max-width:560px){
  body.weddings .logo img,body.corporate .logo img{--mark:30px}
}
/* Five links plus the mark run out of room on a phone. The links were down
   to .58rem, about 9px, which is below what anyone wants to aim a thumb at.

   Measured at 375 the row had only about 14px of slack, so the size could not
   simply go up: the space is bought back first. Uppercase tracking at .05em
   costs roughly 17px across the 36 characters in the five labels and the
   gaps cost 44px, so trimming the tracking to .02em and the gap to 8px frees
   about 22px, and the type can then rise to .66rem, near 10.6px, and still
   sit inside the row. The labels keep enough tracking to read as the small
   caps they are. */
@media(max-width:460px){
  body.weddings .logo img,body.corporate .logo img{--mark:26px}
  body.weddings .nav,body.corporate .nav{gap:8px}
  .nav .navlinks.nav-3{gap:8px}
  .nav .navlinks.nav-3 a{font-size:.66rem;letter-spacing:.02em}
}
/* The bump above fits 375 with room and 360 with a little, but the row is
   squeezed by about 356. Below that the size steps back down rather than
   letting the five labels collide, which is still larger than the .58rem
   they all used to be. */
@media(max-width:359px){
  .nav .navlinks.nav-3{gap:6px}
  .nav .navlinks.nav-3 a{font-size:.6rem;letter-spacing:0}
}

/* ---------- Phone menu ---------- */
/* Below 760px the five header links fold into a dropdown behind a
   three-line button, which site.js adds. Everything is keyed to
   .has-toggle, so a page without the script keeps its links in the row.
   With the links out of the row there is room for the wordmark again,
   which the v1 cascade hides below 560px. */
.menu-toggle{display:none}
@media(max-width:760px){
  .nav.has-toggle{position:relative;justify-content:space-between}
  body.weddings .nav.has-toggle .logo .wordmark,
  body.corporate .nav.has-toggle .logo .wordmark{display:flex}
  body.weddings .nav.has-toggle .logo img,
  body.corporate .nav.has-toggle .logo img{--mark:30px}

  .nav.has-toggle .menu-toggle{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:44px;height:44px;margin-left:auto;margin-right:-10px;padding:0 10px;
    background:none;border:0;cursor:pointer;color:var(--ink);
  }
  .menu-toggle span{
    display:block;height:2px;width:24px;border-radius:2px;background:currentColor;
    transition:transform .22s,opacity .22s;
  }
  .nav.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.menu-open .menu-toggle span:nth-child(2){opacity:0}
  .nav.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* The dropdown hangs from the bottom of the header, full width. */
  .nav.has-toggle .navlinks.nav-3{
    display:none;
    position:absolute;top:100%;left:0;right:0;margin:0;
    flex-direction:column;gap:0;
    background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    box-shadow:0 14px 28px rgba(0,0,0,.12);
    padding:6px 20px 14px;
  }
  .nav.has-toggle.menu-open .navlinks.nav-3{display:flex}
  .nav.has-toggle .navlinks.nav-3 a{
    font-size:.82rem;letter-spacing:.16em;
    padding:15px 0;border-bottom:1px solid var(--line);color:var(--ink);
  }
  .nav.has-toggle .navlinks.nav-3 a:last-child{border-bottom:0}
  .nav.has-toggle .navlinks.nav-3 a:hover{color:var(--brand);border-bottom-color:var(--line)}
}

/* Facebook and Instagram beside the wedding menu (client asked, V2 review).
   Between 761px and 1080px the seven links already fill the row, so the
   icons step out there; on a phone they sit just left of the menu button. */
.nav-social{display:flex;gap:2px;margin-left:clamp(6px,1vw,14px)}
.nav-social a{width:32px;height:32px;display:grid;place-items:center;color:var(--ink-soft);border-radius:50%;transition:color .2s}
.nav-social a:hover{color:var(--brand)}
.nav-social svg{width:16px;height:16px;fill:currentColor}
@media(min-width:761px) and (max-width:1080px){.nav-social{display:none}}
@media(max-width:760px){
  .nav.has-toggle .nav-social{margin-left:auto}
  .nav.has-toggle .nav-social ~ .menu-toggle{margin-left:2px}
}

/* ---------- Corporate header ---------- */
/* corporate.html now uses the wedding header (five links, three-line menu
   on a phone). A menu jump would otherwise land each section under the
   sticky header, hiding its label. */
body.corporate section[id]{scroll-margin-top:69px}
@media(max-width:760px){
  body.corporate #c-services .section-head{margin-bottom:36px}
  .corp-svc .svc-title{text-align:left}
}
/* "Price list" sits under the service cards (straight under the event &
   promo video card on a phone) as a solid red button. */
.svc-cta{display:flex;justify-content:center;margin-top:28px}
.svc-cta .btn{padding-inline:34px}
@media(max-width:760px){
  .svc-cta{margin-top:18px}
  .svc-cta .btn{width:100%;text-align:center}
  /* Corporate hero on a phone: copy, button and photograph all centred. */
  body.corporate .hero-grid > div{text-align:center}
  body.corporate .hero .lede{margin-inline:auto}
  body.corporate .hero-cta{justify-content:center}
  body.corporate .hero .shot{margin-inline:auto}
}
/* About page: Kobus's portrait sits in the right-hand column on desktop and
   straight under "Meet Red Beard." on a phone, from the same file. */
.kobus-phone{display:none}
.kobus-desk{object-position:50% 20%}
@media(max-width:900px){
  .kobus-desk{display:none}
  .kobus-phone{display:block;margin:6px 0 22px;object-position:50% 20%}
}
/* On a phone the portfolio film runs taller, at 4:3 (shown whole once it
   plays). */
@media(max-width:760px){
  .pf-frame{aspect-ratio:4/3}
  .pf-frame.playing video{object-fit:contain}
}

/* ---------- Corporate hero photograph ----------
   The panel audience, shown on a phone only (desktop uses it as the
   section background). */

/* On a phone the hero stacks on black: eyebrow and heading at the top, the
   delegates in a full-width band under it (feathered into the black top and
   bottom), then the tagline, lede and button. Nothing sits over a face. */
@media(max-width:760px){
  body.corporate .hero{background:#0c0c0c;padding:34px 0 48px}
  body.corporate .hero-grid{display:flex;flex-direction:column;gap:0}
  body.corporate .hero-grid > div{display:contents}
  body.corporate .hero .eyebrow{order:1;color:rgba(255,255,255,.72);margin-bottom:.7rem}
  body.corporate .hero h1{order:2;color:#fff;margin-bottom:0;
    font-size:clamp(1.9rem,8.6vw,2.4rem);line-height:1.1;text-wrap:balance}
  body.corporate .hero .corp-hero-img{
    order:3;display:block;width:100vw;max-width:none;
    margin:-4px calc(50% - 50vw) 0;
    aspect-ratio:1/1;height:auto;border:0;border-radius:0;object-position:50% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 68%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 30%,#000 68%,transparent 100%);
  }
  body.corporate .hero .tagline{order:4;color:#fff;margin:-28px 0 .7rem;position:relative}
  body.corporate .hero .lede{order:5;color:rgba(255,255,255,.8);font-size:.98rem;
    line-height:1.6;max-width:34ch;margin:0 auto 1.6rem}
  body.corporate .hero-cta{order:6}
  body.corporate .hero .btn{background:#fff;border-color:#fff;color:#111}
}

/* ---------- Corporate desktop tidy-ups ---------- */
/* "Make a booking" centred in the hero copy column. */
body.corporate .hero-cta{justify-content:center}
/* Half the usual section gap under the "Request a quote" button. */
@media(min-width:761px){
  body.corporate #c-services{padding-bottom:20px}
  /* "02 · Portfolio" follows the quote note closely, as on a phone. */
  body.corporate #c-portfolio{padding-top:clamp(36px,4vw,52px)}
  /* The note spreads to two lines under the button. */
  body.corporate .svc-cta-note{max-width:920px}
}

/* Recent work: both films sit level and the same size, whatever the
   length of the line above each one. */
@media(min-width:900px){
  .pf-list{align-items:stretch}
  .pf-item{display:flex;flex-direction:column}
  .pf-item .pf-frame{margin-top:auto}
}

/* Corporate reviews: every card the same height, quotes held to eight
   lines, with "Read more" (site.js) on any that run longer. */
.revs-3 .rev .txt{-webkit-line-clamp:8}
.revs-3 .rev .more{margin-top:-4px}
/* Three corporate reviews (Gerbrand van Dyk added 2026-10-13) take the
   shared three-across grid. */
/* Terri-leigh's review is several times Ronel's, so both are held to four
   lines and the long one opens with "Read more"; the pair stays level
   instead of one card sitting half empty. Opening a card lets it grow on
   its own rather than stretching its neighbour to match. */
#c-reviews .revs-3 .rev .txt{-webkit-line-clamp:4}
#c-reviews .revs-3 .rev.is-open .txt{-webkit-line-clamp:unset}
#c-reviews .revs-3:has(.rev.is-open){align-items:start}
/* The Google mark sat absolutely 18px from the corner, inside the card's
   34px padding, so it looked jammed into the corner. Back in the row with
   the stars, on the same inset as the text, and a little larger. */
#c-reviews .rev .gmark{position:static;order:2;width:24px;height:24px}
#c-reviews .rev-top{min-height:24px}
/* Wedding reviews are shorter, so a long one is held to four lines: the
   length of the longest of the others, which keeps the row level. */
body.weddings .revs-3 .rev .txt{-webkit-line-clamp:4}
/* The clamp above out-ranks .rev.is-open, so "Read more" let the text spill
   over the name instead of opening the card. Lift it here, and let the open
   card grow on its own rather than stretching the others. */
body.weddings .revs-3 .rev.is-open .txt{-webkit-line-clamp:unset}
body.weddings .revs-3:has(.rev.is-open){align-items:start}

/* Galleries page: one couple's review on its own, centred above the call to
   action. Same card, stars and Google mark as the review rows, set larger
   and centred, held to four lines with "Read more" (site.js). */
.rev-feature .rev{
  max-width:780px;margin:0 auto;text-align:center;align-items:center;
  padding:clamp(32px,5vw,56px) clamp(24px,5.5vw,68px);gap:20px;
  box-shadow:0 18px 40px -28px rgba(17,17,17,.35);
}
.rev-feature .rev-top{display:flex;align-items:center;justify-content:center;gap:14px}
.rev-feature .rev .gmark{position:static;width:26px;height:26px;flex:none}
.rev-feature .rev .stars{color:#E8A700;letter-spacing:.18em;font-size:1rem;padding:0}
.rev-feature .rev .txt{
  font-family:var(--serif);font-weight:300;
  font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.7;letter-spacing:-.005em;
  -webkit-line-clamp:4;
}
.rev-feature .rev.is-open .txt{-webkit-line-clamp:unset}
.rev-feature .rev .more{align-self:center;margin-top:-6px}
.rev-feature .rev .who{justify-content:center;margin-top:6px;padding-top:0}
/* Portfolio: two photo-wedding reviews side by side, one above the other on a phone. */
.revs-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.4vw,32px);max-width:1120px;margin:0 auto;align-items:start}
.revs-2 .rev{max-width:none;margin:0;height:100%}
.revs-2 .rev.is-open{height:auto}
@media(max-width:760px){.revs-2{grid-template-columns:1fr}}

/* Lifestyle page: eight family reviews, three at a time (two on a tablet,
   one on a phone), paged with arrows and dots by site.js [data-pager].
   Same card as the corporate and wedding reviews, with the shoot type as
   a small red label under the name. */
.ls-reviews .section-head{text-align:center;margin-inline:auto;margin-bottom:clamp(32px,3.6vw,48px)}
.pager-view{overflow:hidden;padding:6px 6px 34px;margin:-6px -6px -34px}
.pager-track{display:flex;gap:24px;transition:transform .55s cubic-bezier(.2,.7,.2,1)}
.pager-track .rev{flex:0 0 calc((100% - 48px)/3);min-width:0}
.pager-track:has(.rev.is-open){align-items:flex-start}
.ls-reviews .rev{background:#fff;padding:clamp(24px,2.6vw,32px);gap:16px;box-shadow:0 18px 40px -30px rgba(17,17,17,.35)}
.ls-reviews .rev-top{display:flex;align-items:center;justify-content:space-between}
.ls-reviews .rev .gmark{position:static;order:2;width:24px;height:24px;flex:none}
.ls-reviews .rev .stars{color:#E8A700;letter-spacing:.18em;font-size:.92rem;padding:0}
.ls-reviews .rev .txt{font-family:var(--serif);font-weight:300;font-size:1.04rem;line-height:1.65;-webkit-line-clamp:4}
.ls-reviews .rev.is-open .txt{-webkit-line-clamp:unset}
.ls-reviews .rev .more{margin-top:-4px}
.ls-reviews .rev .who > span > span{
  display:block;margin-top:2px;font-size:.66rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--brand);
}
.pager-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.pager-dots{display:flex;gap:8px}
.pager-dots button{
  width:9px;height:9px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:rgba(17,17,17,.2);transition:width .3s ease,background .3s ease;
}
.pager-dots button[aria-selected="true"]{width:26px;background:var(--brand)}
@media(max-width:920px){.pager-track .rev{flex-basis:calc((100% - 24px)/2)}}
@media(max-width:620px){.pager-track .rev{flex-basis:100%}}
@media(prefers-reduced-motion:reduce){.pager-track{transition:none}}

/* Corporate hero on desktop: the hotel ballroom keynote fills the whole
   section (client's pick, 2026-10-08). The copy goes bottom left on a wash
   that darkens towards that corner, leaving the speaker at the podium and the
   screen clear on the right. Phones show a square crop of the same photo,
   centred on the speaker. */
@media(min-width:761px){
  /* The copy sits centre left (client, 2026-10-12; it was bottom left),
     on a wash that darkens from the left. */
  body.corporate .hero{
    position:relative;overflow:hidden;isolation:isolate;
    display:flex;align-items:center;
    min-height:calc(100svh - 69px);padding:clamp(48px,6vw,80px) 0;
  }
  body.corporate .hero::before,
  body.corporate .hero::after{content:"";position:absolute;inset:0}
  body.corporate .hero::before{
    z-index:-2;
    background:url('images/corporate-hero-ballroom.webp') 50% 62%/cover no-repeat;
  }
  body.corporate .hero::after{
    z-index:-1;
    background:
      linear-gradient(to right,rgba(8,8,8,.68) 0%,rgba(8,8,8,.46) 30%,rgba(8,8,8,.12) 52%,rgba(8,8,8,0) 64%),
      linear-gradient(to top,rgba(8,8,8,.28) 0%,rgba(8,8,8,0) 30%);
  }
  body.corporate .hero .wrap{width:100%}
  body.corporate .hero-grid{grid-template-columns:1fr}
  body.corporate .hero-grid > div{max-width:620px}
  body.corporate .hero .corp-hero-img{display:none}
  body.corporate .hero h1{color:#fff;margin-bottom:16px;font-size:clamp(2.6rem,4.4vw,3.9rem)}
  body.corporate .hero-cta{justify-content:flex-start}
  body.corporate .hero .eyebrow{color:rgba(255,255,255,.8)}
  body.corporate .hero .tagline{color:#fff;font-weight:400;font-size:clamp(1.05rem,1.4vw,1.25rem);line-height:1.55;max-width:44ch;margin:0 0 34px;text-shadow:0 1px 12px rgba(0,0,0,.35)}
  body.corporate .hero h1{text-shadow:0 2px 18px rgba(0,0,0,.3)}
  body.corporate .hero .lede{color:rgba(255,255,255,.86);margin-bottom:48px}
  body.corporate .hero .btn{background:#fff;border-color:#fff;color:#111}
}

/* Corporate credentials strip on a light grey band, with the logo red icons. */
@media(max-width:760px){
}

/* The short italic note under "Request a quote". */
.svc-cta-note{
  max-width:60ch;margin:16px auto 0;text-align:center;
  font-style:italic;font-size:.95rem;line-height:1.6;color:var(--ink-soft);
}
/* On a phone: the quote note lines up left with the copy, the button gets
   more air either side, and "02 · Portfolio" follows much closer. */
@media(max-width:760px){
  body.corporate .svc-cta{margin-top:34px}
  body.corporate .svc-cta-note{text-align:left;margin-top:26px;max-width:none}
  body.corporate #c-services{padding-bottom:20px}
  body.corporate #c-portfolio{padding-top:28px}
}
/* On a phone every corporate section opens the same way: a larger number
   label and heading, centred, from What we do down to the FAQ. */
@media(max-width:760px){
  body.corporate .section-head,
  body.corporate .contact-head,
  body.corporate .contact-info > .lede{text-align:center;margin-inline:auto}
  body.corporate .section-head .eyebrow,
  body.corporate .contact .eyebrow{font-size:.95rem}
  body.corporate .section-head h2,
  body.corporate .contact h2{font-size:2.1rem;line-height:1.15}
}
/* "Request a quote" on a phone: the desktop shape (sized to its text,
   centred) rather than a full-width bar. */
@media(max-width:760px){
  body.corporate .svc-cta .btn{width:auto;padding-inline:34px}
}

/* Recent work on desktop: more air between the four blocks. It keeps the
   standard content width, so its heading and blocks line up with every
   other section (a wider 1400px stage made it the one section out of line). */
@media(min-width:900px){
  body.corporate #c-portfolio .section-head{margin-bottom:56px}
  body.corporate .pf-list{gap:72px 56px}
  body.corporate .pf-head{gap:16px;margin-bottom:20px}
  body.corporate .pf-ico{width:46px;height:46px}
  body.corporate .pf-ico svg{width:22px;height:22px}
  body.corporate .pf-head h3{font-size:1.4rem}
  body.corporate .pf-head p{font-size:1rem}
  body.corporate .pf-pair{gap:14px}
}

/* The closing line under Recent work. */
.pf-quote{
  max-width:780px;margin:clamp(56px,6vw,88px) auto 0;padding:0;border:0;text-align:center;
}
.pf-quote p{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.2vw,1.75rem);line-height:1.45;color:var(--head);
}
.pf-quote::before{
  content:"";display:block;width:48px;height:2px;margin:0 auto 22px;background:var(--brand);
}
/* The two Recent work films run a little taller than 16:9 on desktop, at
   3:2, and are shown whole (letterboxed) once they play. */
@media(min-width:761px){
  body.corporate .pf-frame{aspect-ratio:3/2}
  body.corporate .pf-frame.playing video{object-fit:contain}
}
/* Desktop: What we do and Portfolio open left-aligned, like Reviews. */
@media(min-width:761px){
  body.corporate #c-services .section-head,
  body.corporate #c-portfolio .section-head{text-align:left;margin-inline:0}
  /* "Photography services we provide" holds one line; the lede keeps its
     usual measure. */
  body.corporate #c-services .section-head{max-width:none}
  body.corporate #c-services .section-head .lede{max-width:62ch}
}

/* Footer socials: the general footer link hover turned these white on the
   white hover disc. Keep the icon black so the network stays readable. */
.foot-grid .social-round:hover,
.foot-grid-3 .social-round:hover{background:var(--rb-red);border-color:var(--rb-red);color:#fff}

/* Corporate contact: the heading gets room from its lede, each detail gets
   an icon (mail, phone, studio), and a map of Durbanville fills the rest of
   the column so it finishes level with the form. */
body.corporate .contact-info{display:flex;flex-direction:column}
body.corporate .contact-info > .lede{margin:0}
.cd-icons{display:grid;gap:18px;margin-top:30px}
.cd-row{position:relative;padding-left:56px;min-height:42px}
.cd-row dt{margin:0}
.cd-ico{
  position:absolute;left:0;top:0;width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;background:var(--card);border:1px solid var(--line);color:var(--brand);
}
.cd-ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cd-map{
  margin-top:28px;flex:1;min-height:120px;border-radius:var(--radius);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-deep);
}
.cd-map iframe{display:block;width:100%;height:100%;min-height:120px;border:0}
/* Desktop: heading across the top, then lede and form start level, and the
   map stretches so its foot lines up with the last line of the form note. */
@media(min-width:900px){
  body.corporate .contact-grid{align-items:stretch;row-gap:22px}
  body.corporate .contact-head{grid-column:1 / -1}
}
@media(max-width:899px){
  body.corporate .cd-map{flex:none;height:240px}
}
/* Corporate contact form: starts a little lower (level with the heading),
   rows sit closer, fields are a size smaller, and Send enquiry and its note
   are centred. align-content keeps the rows packed when the column is
   stretched to the map's height. */
body.corporate #corpform{gap:10px;align-content:start}
body.corporate #corpform .f2{gap:12px}
body.corporate #corpform label{font-size:.6rem;margin-bottom:4px}
body.corporate #corpform input,
body.corporate #corpform select,
body.corporate #corpform textarea{font-size:.86rem;padding:9px 12px}
body.corporate #corpform textarea{min-height:92px}
body.corporate #corpform .btn{justify-self:center;margin-top:8px}
body.corporate #corpform .form-note{text-align:center}
/* Corporate contact form on a phone: a "Contact us" heading with room above
   it after the map, and no email-app note under Send enquiry. Desktop shows
   neither change. */
.form-title{display:none}
@media(max-width:899px){
  body.corporate #corpform .form-title{
    display:block;margin:20px 0 10px;text-align:center;
    font-family:var(--serif);font-size:1.7rem;line-height:1.2;color:var(--head);
  }
  body.corporate #corpform .form-note{display:none}
}

/* Closing "Let's talk" over the orchard couple (weddings and portfolio): on
   desktop the band runs taller and the photograph is anchored near its top,
   so the groom's head is no longer cut off by the crop. */
@media(min-width:761px){
  .closing:not(.folio-teaser):has(> img){min-height:86svh;align-items:flex-end}
  .closing:not(.folio-teaser):has(> img) .wrap{padding-block:0 clamp(48px,6vw,80px)}
  .closing:not(.folio-teaser) > img{object-position:50% 8%}
  /* The copy sits low, over the couple's clothes, so the wash deepens
     towards the foot and leaves their faces brighter. */
  .closing:not(.folio-teaser):has(> img)::after{
    background:linear-gradient(to top,rgba(8,8,8,.78) 0%,rgba(8,8,8,.55) 45%,rgba(8,8,8,.28) 100%);
  }
}

/* Photo packages "Contact us" card, above the link back to all packages. */
.pkg-contact{
  position:relative;isolation:isolate;overflow:hidden;text-align:center;
  margin-top:clamp(40px,5vw,64px);padding:clamp(40px,5vw,56px) clamp(20px,4vw,48px);
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
}
.pkg-contact .eyebrow{margin-bottom:12px}
.pkg-contact h2{margin:0 auto 14px;max-width:none;text-wrap:balance}
.pkg-contact .lede{margin:0 auto 28px;max-width:46ch}
.pkg-contact-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
/* Package pages: three contact tiles (client's pick, option C, 2026-10-10).
   Email, WhatsApp and Call, each a whole-card link with a red icon. */
.pkg-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:4px;text-align:center}
.pkg-tile{
  display:flex;flex-direction:column;align-items:center;gap:10px;padding:26px 16px;
  border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--ink);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.pkg-tile:hover,.pkg-tile:focus-visible{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.06)}
.pkg-tile-ico{width:52px;height:52px;border-radius:50%;background:#F1E3E4;color:var(--brand);display:grid;place-items:center}
.pkg-tile-ico svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pkg-tile b{font-size:.72rem;letter-spacing:.18em;text-transform:uppercase}
.pkg-tile span:last-child{font-size:.95rem;color:var(--ink-soft);overflow-wrap:anywhere}
@media(max-width:760px){
  .pkg-tiles{grid-template-columns:1fr;gap:10px}
  .pkg-tile{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:14px;row-gap:2px;align-items:center;text-align:left;padding:14px 16px}
  .pkg-tile-ico{width:44px;height:44px;grid-row:1 / span 2}
  .pkg-tile b{align-self:end}
  .pkg-tile span:last-child{align-self:start;font-size:.92rem}
}
@media(max-width:560px){
  .pkg-contact-actions .btn{width:100%;text-align:center}
}

/* Photo packages hero. Desktop: the landscape dam photograph, couple just
   right of centre, clear of the copy. Phone: the tall venue-steps frame,
   where the couple fill the lower half, so the copy moves to the top and
   tightens to finish above their heads. */
.hero-pkg-photo > picture > img{object-position:center 70%}
@media(max-width:760px){
  .hero-pkg-photo{align-items:flex-start;min-height:calc(100svh - 69px)}
  .hero-pkg-photo > picture > img{object-position:50% 50%}
  .hero-pkg-photo .wrap{padding-block:52px 0}
  .hero-pkg-photo .eyebrow{font-size:.7rem;margin-bottom:.6rem}
  .hero-pkg-photo h1{font-size:2.2rem;margin-bottom:.6rem}
  .hero-pkg-photo .lede{font-size:.95rem;line-height:1.5;margin:0 0 1rem}
  .hero-pkg-photo::after{
    background:linear-gradient(to bottom,rgba(8,8,8,.72) 0%,rgba(8,8,8,.5) 32%,rgba(8,8,8,.08) 52%,rgba(8,8,8,0) 100%);
  }
}

/* Photo & video packages hero (the couple on the venue steps). Desktop: the
   crop sits low so more of the bride's dress and the steps show. Phone: the
   crop centres on the couple, the eyebrow and heading sit at the top above
   their heads, and the lede at the foot over the steps, so both faces are
   clear. */
/* Photo & Film packages: Iain and Naomi by the dam (client asked for a fresh
   photo, 2026-10-10). The couple sit right of centre, so the copy keeps a
   narrower measure on desktop to stay clear of the bride. */
.hero-pkg-combo{background:#15130f}
.hero-pkg-combo > img{object-position:52% 40%}
/* Desktop: the tall photo stands at full height on the right, never
   stretched, and fades into the dark under the copy on the left. */
@media(min-width:761px){
  .hero-pkg-combo > img{
    left:auto;right:0;width:auto;height:100%;aspect-ratio:1/1;max-width:62%;object-position:52% 40%;
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28%);
            mask-image:linear-gradient(90deg,transparent 0,#000 28%);
  }
  .hero-pkg-combo .lede{max-width:40ch}
}
/* Phone: stretched to the full screen height, the 3:2 frame showed only a
   third of its width, so it was all cheek and lapel and visibly soft. Now
   the photograph sits between the heading and the lede as a square on the
   dark ground, which keeps both faces, her hair and the veil above them,
   and fades top and bottom into the dark the way the desktop one fades left.
   The .wrap steps aside (display:contents) so the photo can sit between
   its heading and lede. */
@media(max-width:760px){
  .hero-pkg-combo{flex-direction:column;align-items:stretch;min-height:0;padding-block:34px 38px}
  .hero-pkg-combo::after{display:none}
  .hero-pkg-combo .wrap{display:contents}
  .hero-pkg-combo h1,
  .hero-pkg-combo .lede{padding-inline:22px}
  .hero-pkg-combo h1{order:1;font-size:2.1rem;margin-bottom:0;max-width:none}
  .hero-pkg-combo .eyebrow{font-size:.7rem;margin-bottom:.6rem}
  .hero-pkg-combo > img{
    order:2;position:relative;inset:auto;z-index:0;
    width:100%;height:auto;aspect-ratio:1/1;margin-top:6px;
    object-position:56% 50%;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
            mask-image:linear-gradient(to bottom,transparent 0,#000 16%,#000 82%,transparent 100%);
  }
  .hero-pkg-combo .lede{order:3;font-size:.95rem;line-height:1.55;margin:4px 0 0;max-width:none}
}

/* Video packages hero (the orchard couple). Their heads sit high in the
   frame, so the crop is anchored near the top on every screen. On a phone
   the copy goes to the foot, over the bouquet and dress, clear of both
   faces. */
.hero-pkg-video > picture > img{object-position:center 6%}
@media(max-width:760px){
  .hero-pkg-video{align-items:flex-end;min-height:calc(100svh - 69px)}
  .hero-pkg-video > picture > img{object-position:50% 20%}
  .hero-pkg-video .wrap{padding-block:0 34px}
  .hero-pkg-video .eyebrow{font-size:.7rem;margin-bottom:.6rem}
  .hero-pkg-video h1{font-size:2.1rem;margin-bottom:.6rem}
  .hero-pkg-video .lede{font-size:.95rem;line-height:1.5;margin:0}
  .hero-pkg-video::after{
    background:linear-gradient(to top,rgba(8,8,8,.82) 0%,rgba(8,8,8,.58) 30%,rgba(8,8,8,.1) 50%,rgba(8,8,8,0) 100%);
  }
}

/* Package heroes on desktop. The shared .hero-full wash never drops below
   46% black across the middle of the frame, which dulled these three next to
   their phone versions, where the wash only sits behind the copy. Same answer
   as the weddings hero: a fall from the left that is gone by 50%, so the
   photograph keeps its colour, and the type carries its own shadow. */
@media(min-width:761px){
  .hero-pkg-photo::after,
  .hero-pkg-combo::after,
  .hero-pkg-video::after{
    background:linear-gradient(100deg,
      rgba(12,10,8,.52) 0%,
      rgba(12,10,8,.30) 24%,
      rgba(12,10,8,.08) 40%,
      rgba(12,10,8,0) 50%);
  }
  .hero-pkg-photo h1,.hero-pkg-combo h1,.hero-pkg-video h1{
    text-shadow:0 1px 2px rgba(0,0,0,.72),0 2px 14px rgba(0,0,0,.52);
  }
  .hero-pkg-photo .eyebrow,.hero-pkg-photo .lede,
  .hero-pkg-combo .eyebrow,.hero-pkg-combo .lede,
  .hero-pkg-video .eyebrow,.hero-pkg-video .lede{
    text-shadow:0 1px 2px rgba(0,0,0,.72),0 2px 12px rgba(0,0,0,.5);
  }
}

/* Portfolio closing over the bridal flat lay (shoes, headband, perfume): no
   faces to keep clear, so it keeps the centred copy and a flat wash, at the
   standard height, on every screen. */
.closing.closing-flatlay{min-height:64svh;align-items:center}
.closing.closing-flatlay > img{object-position:50% 50%}
.closing.closing-flatlay::after{background:rgba(8,8,8,.55)}
/* Gallery closing: the table setting is light and soft, so it takes a
   lighter veil than the other closings and still holds the white type. */
.closing.closing-table::after{background:rgba(8,8,8,.38)}
/* Weddings closing: a tall close-up cropped into a wide band. Centred, it
   shows only lace, so it sits 85% down, and the band runs taller on wider
   screens to show more of the hands: the photo is only 1024px wide, so
   height is the only way to take in more of it. */
.closing.closing-rings > img{object-position:50% 85%}
.closing.closing-rings::after{background:rgba(8,8,8,.42)}
/* Desktop: a shorter band (client, 2026-10-10), the crop dropping the upper
   hand so the ring and the joined hands stay in view. */
@media(min-width:761px){.closing.closing-rings{min-height:62svh}.closing.closing-rings > img{object-position:50% 92%}}
/* Phones: centred, the type sat right over the ring. A taller band with the
   type pinned to the top drops the hands and the ring clear below the button. */
@media(max-width:760px){
  .closing.closing-rings{min-height:190vw;align-items:flex-start}
  .closing.closing-rings h2,.closing.closing-rings p{text-shadow:0 1px 12px rgba(0,0,0,.35)}
}
@media(min-width:761px){
  .closing.closing-flatlay .wrap{padding-block:clamp(70px,9vw,120px)}
}

/* Wedding films: the rings close-up moves up into the hero, so the hero crops
   it the same way the closing band did, low enough to show the hands. */
/* Hands and rings (client, 2026-10-07): centred on the hands, which sit just
   right of the middle, so the copy on the left lands on the dark sleeve. */
.hero-full.hero-films > img,
.hero-full.hero-films > picture > img{object-position:55% 50%}
/* Desktop: Nic and Sheree under the veil. Their faces sit in the top half,
   so the copy goes to the bottom left over her hair, and the crop is held
   high enough that a wide screen keeps both faces whole. */
@media(min-width:761px){
  .hero-full.hero-films > picture > img{object-position:50% 25%}
  .hero-full.hero-films{align-items:flex-end}
  .hero-full.hero-films .wrap{padding-block:0 clamp(48px,6vw,80px)}
}
/* Phones see the middle third of the frame, so the crop moves left to bring
   the engagement ring in, and the copy goes to the foot on a wash rising
   from the bottom, clear of both rings. */
@media(max-width:760px){
  .hero-full.hero-films{align-items:flex-end}
  /* Nic and Sheree, upright: centred, held a little high so their faces
     stay clear of the copy at the foot. */
  .hero-full.hero-films > picture > img{object-position:50% 30%}
  .hero-full.hero-films .wrap{padding-block:0 44px}
  .hero-full.hero-films::after{
    background:linear-gradient(to top,
      rgba(8,8,8,.82) 0%, rgba(8,8,8,.6) 26%, rgba(8,8,8,.2) 44%, rgba(8,8,8,0) 58%);
  }
}

/* Closing with no photograph: black type on the page ground, and the default
   black button. */
.closing.closing-plain{min-height:0;color:var(--ink);background:var(--bg)}
.closing.closing-plain::after{content:none}
/* It sits on the same white as the section above, whose bottom padding is
   already the gap, so no top padding of its own and a shorter bottom. */
.closing.closing-plain .wrap{padding-block:0 clamp(56px,6vw,88px)}
/* Desktop: the films section's full bottom padding still left the closing
   floating a long way below the YouTube note, so it comes in closer. */
@media(min-width:761px){
  body.weddings #films{padding-bottom:48px}
}
.closing.closing-plain h2{color:var(--head)}
.closing.closing-plain .eyebrow{color:var(--ink-soft)}
.closing.closing-plain p{color:var(--ink)}

/* The italic line on white under the portfolio closing. */
.closing-quote{background:#fff;padding:clamp(56px,7vw,96px) 0;text-align:center}
.closing-quote blockquote{margin:0 auto;padding:0;border:0;max-width:760px}
.closing-quote blockquote::before{
  content:"";display:block;width:48px;height:2px;margin:0 auto 22px;background:var(--brand);
}
.closing-quote p{
  margin:0;font-family:var(--serif);font-style:italic;font-weight:300;
  font-size:clamp(1.3rem,2.4vw,1.85rem);line-height:1.45;color:var(--head);
}

/* About page: the contact photograph sits level with the details. */
.about-contact-img{align-self:center;justify-self:center;max-width:440px}

/* ============================================================
   About pages (about.html for weddings, about-corporate.html)
   One build for both sides. Colour arrives in blocks here, on
   purpose: a black hero, a charcoal split screen, and a grey band for
   the other shoots, so the page reads
   as a story in chapters rather than a run of white sections.
   Sections are tighter than the site default (.ab-sec).
   ============================================================ */
.ab-sec{padding:clamp(52px,6.5vw,88px) 0}
.ab-head{max-width:62ch;margin-bottom:clamp(28px,3.4vw,44px)}
.ab-head.center{text-align:center;margin-inline:auto}
.ab-head h2{margin-bottom:12px}
.ab-head .lede{margin:0}
.ab-head.center .lede{margin-inline:auto}

/* Scroll reveal. site.js adds .reveal-on to <html> only when it can run,
   so without script, or with reduced motion, everything is simply shown. */
.reveal-on [data-reveal]{
  opacity:0;transform:translateY(24px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);
  transition-delay:var(--d,0s);
}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}

/* ---- Hero: black, portrait on a grey offset frame, live stats ---- */
.ab-hero{
  background:#111;color:#fff;position:relative;overflow:hidden;
  padding:clamp(56px,7vw,96px) 0 0;
}
.ab-hero::before{
  content:"";position:absolute;right:-12%;top:-30%;width:60vw;height:60vw;max-width:820px;max-height:820px;
  background:radial-gradient(circle,rgba(190,30,45,.34),rgba(190,30,45,0) 65%);pointer-events:none;
}
.ab-hero-grid{
  position:relative;display:grid;grid-template-columns:1.1fr .9fr;
  gap:clamp(36px,5vw,72px);align-items:center;
}
/* Light grey on every screen, on both About pages (client, 2026-10-13): the
   pink red clashed with the brand red in "Red Beard", and the label had
   drifted to white on one phone layout and grey on the other. */
.ab-hero .eyebrow{color:#C9C9C9}
.ab-hero h1{color:#fff;font-weight:700;margin-bottom:18px}
.ab-hero h1 span{color:var(--brand)}
.ab-hero .ab-tag{
  font-size:clamp(1.25rem,2.2vw,1.65rem);font-weight:300;font-style:italic;
  line-height:1.35;color:#fff;margin:0 0 20px;
  border-left:3px solid var(--brand);padding-left:16px;
}
.ab-hero .lede{color:rgba(255,255,255,.78);max-width:56ch;margin-bottom:26px}
.ab-hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.55)}
.ab-hero .btn.ghost:hover{border-color:var(--brand)}
.ab-cta{display:flex;flex-wrap:wrap;gap:12px}

.ab-portrait{position:relative;margin:0 0 0 auto;max-width:420px;width:100%}
.ab-portrait::before{
  content:"";position:absolute;inset:22px -22px -22px 22px;
  background:#3A3A3A;border-radius:var(--radius);z-index:0;
  transition:transform .5s ease;
}
.ab-portrait:hover::before{transform:translate(-8px,-8px)}
.ab-portrait img{
  position:relative;z-index:1;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;
  border-radius:var(--radius);box-shadow:0 30px 60px rgba(0,0,0,.45);
}

/* About (wedding) hero: the café photo of Kobus fills the section, with a
   dark wash from the left so the text reads and he stays clear on the right. */
.ab-hero--photo::before{display:none}
/* The whole photo shows at the hero's full height, pinned right, so the
   camera and iPad on the table stay in frame; its left edge fades out. */
.ab-hero-bg{
  position:absolute;top:0;right:0;height:100%;width:auto;aspect-ratio:4/3;
  object-fit:cover;object-position:70% 50%;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 35%);
  mask-image:linear-gradient(90deg,transparent,#000 35%);
}
.ab-hero--photo::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(17,17,17,.85) 0%,rgba(17,17,17,.7) 38%,rgba(17,17,17,.15) 58%,rgba(17,17,17,0) 75%);
}
.ab-hero--photo>.wrap{position:relative;z-index:1}
/* Four stats (the corporate About page) run in one row on desktop. */
@media(min-width:761px){
  .ab-stats:has(> .ab-stat:nth-child(4)){grid-template-columns:repeat(4,1fr)}
}
/* Corporate About: a tall black-and-white portrait of Kobus (client's pick,
   2026-10-09), at full height on the right like the café photo on the
   wedding About page, fading into the dark under the copy. Phones show it
   as the usual band, cropped on Kobus and the camera. */
.ab-hero-bg.ab-hero-bg--portrait{aspect-ratio:3/4;object-position:60% 50%}
/* The stats row runs across the bottom of the photo here, so the foot of the
   hero darkens a little to keep the numbers readable over the table. */
@media(min-width:761px){
  .ab-hero--photo:has(.ab-hero-bg--portrait)::after{
    background:
      linear-gradient(to top,rgba(17,17,17,.82) 0%,rgba(17,17,17,.45) 16%,rgba(17,17,17,0) 30%),
      linear-gradient(90deg,rgba(17,17,17,.85) 0%,rgba(17,17,17,.7) 38%,rgba(17,17,17,.15) 58%,rgba(17,17,17,0) 75%);
  }
}
@media(max-width:760px){
  .ab-hero-bg.ab-hero-bg--portrait{aspect-ratio:5/4;object-position:55% 62%}
}
.ab-hero--photo .ab-hero-grid{grid-template-columns:minmax(0,600px)}
/* Phones: too narrow to sit text beside him, so the photo becomes a band
   across the top that fades into the black behind the text. */
@media(max-width:760px){
  body .ab-hero--photo{padding-top:0}
  .ab-hero-bg{
    position:relative;width:100%;height:auto;aspect-ratio:5/4;object-position:78% 40%;
    -webkit-mask-image:linear-gradient(180deg,#000 65%,transparent);
    mask-image:linear-gradient(180deg,#000 65%,transparent);
  }
  .ab-hero--photo::after{display:none}
  .ab-hero--photo>.wrap{margin-top:-28px}
}

.ab-stats{
  position:relative;margin-top:clamp(44px,5vw,64px);
  display:grid;grid-template-columns:repeat(2,1fr);
  border-top:1px solid rgba(255,255,255,.14);
}
.ab-stat{padding:clamp(22px,2.6vw,32px) 12px;text-align:center;border-left:1px solid rgba(255,255,255,.14)}
.ab-stat:first-child{border-left:0}
.ab-stat b{display:block;font-size:clamp(2rem,3.6vw,2.8rem);font-weight:700;line-height:1;color:#fff}
.ab-stat b i{font-style:normal;color:var(--brand)}
.ab-stat b em{font-style:normal}
.ab-stat span{display:block;margin-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62)}

/* ---- Meet Kobus (corporate About): his portrait beside a short
   introduction, in the same editorial style as the mission and vision
   below, with a taller frame for the upright photograph ---- */
.ab-kobus{background:var(--bg-alt)}
@media(min-width:761px){.ab-kobus .ab-ed-row{grid-template-columns:minmax(0,.85fr) minmax(0,1fr)}}
.ab-ed-ph.ab-ed-ph--portrait{aspect-ratio:4/5;max-width:460px;width:100%;justify-self:center}
.ab-ed-ph--portrait img{object-position:50% 20%}
.ab-kobus .ab-ed-text p + p{margin-top:1rem}

/* Corporate About, desktop: the 88px top and bottom on every section left
   176px of blank between them, which read as wasted space (client,
   2026-10-12). Tighter here, and the values and mission, both on white,
   share one gap instead of two. "Our values" takes the same large
   editorial heading as "Our mission" and "Our vision". */
@media(min-width:761px){
  body.corporate .ab-sec{padding:clamp(44px,4.6vw,64px) 0}
  body.corporate #values + .ab-ed{padding-top:0}
  body.corporate .contact.ab-contact{padding-block:clamp(48px,5vw,72px)}
}
body.corporate #values .ab-head{margin-bottom:clamp(24px,2.6vw,36px)}
body.corporate #values .ab-head h2{font-size:clamp(2.4rem,4.4vw,3.5rem);line-height:1.05;margin:0}
body.corporate #values .ab-head h2 span{color:var(--brand)}


/* Corporate featured shoot: Kort Coffee at a coffee festival. One row of
   larger 4:5 photographs, four in view (two and a bit on a phone, so the
   next one peeks in), scrolled with the round arrows at the sides or a
   swipe. The row is .folio-lead for the shared lightbox; its own 16:9 look
   is overridden. */
.kort{margin-top:clamp(56px,6vw,88px)}
#c-portfolio .kort-head{margin-bottom:clamp(24px,2.6vw,34px)}
.kort-slider{position:relative}
.kort-track{
  display:grid;grid-auto-flow:column;gap:clamp(10px,1.2vw,16px);
  grid-auto-columns:calc((100% - 3 * clamp(10px,1.2vw,16px)) / 4);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0;
}
.kort-track::-webkit-scrollbar{display:none}
.kort-track img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;margin:0;
  scroll-snap-align:start;border-radius:var(--radius-sm);background:var(--bg-deep);
  cursor:zoom-in;transition:opacity .22s ease;
}
.kort-track img:hover{opacity:.92}
.kort-btn{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:48px;height:48px;border-radius:50%;border:0;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.94);color:var(--ink);
  box-shadow:0 6px 20px rgba(0,0,0,.18);transition:opacity .25s ease,background .2s ease,color .2s ease;
}
.kort-btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.kort-btn:hover{background:var(--brand);color:#fff}
.kort-btn:disabled{opacity:0;pointer-events:none}
.kort-prev{left:-14px}
.kort-next{right:-14px}
@media(max-width:760px){
  .kort-track{grid-auto-columns:calc((100% - clamp(10px,1.2vw,16px)) / 2.2)}
  .kort-btn{width:40px;height:40px}
  .kort-prev{left:6px}
  .kort-next{right:6px}
}

/* Corporate services: six even cards, three across (two on a tablet, one
   on a phone). Each: a large 4:3 example, a row of three small 4:3 ones,
   then the kind of work, the service, a line on it and the example's
   client. The films play in the large frame (.pf-frame keeps the shared
   film behaviour). .folio-lead is only there for the shared lightbox; its
   own 16:9 look is overridden. */
.svcx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(44px,5vw,64px) clamp(24px,3vw,40px)}
.svcx{display:flex;flex-direction:column}
.svcx .folio-lead{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.svcx .folio-lead img{border-radius:var(--radius-sm);aspect-ratio:4/3;height:auto;object-fit:cover;display:block;width:100%}
body.corporate .svcx .pf-frame{aspect-ratio:4/3;border-radius:var(--radius-sm)}
.svcx-thumbs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.svcx-thumbs img{border-radius:6px!important}
.svcx-more{
  display:flex;align-items:center;justify-content:center;gap:6px;aspect-ratio:auto;
  border-radius:6px;background:var(--bg-alt);border:1px solid var(--line);
  font-size:.7rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);text-decoration:none;
  transition:background .2s,color .2s;
}
.svcx-more:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.svcx h3{margin:0 0 .4em;font-size:1.25rem;line-height:1.25;text-transform:none;letter-spacing:-.01em}
.svcx-eg{margin:.7em 0 0;font-size:.86rem;color:var(--ink-soft)}
.svcx-eg::before{content:"";display:inline-block;width:14px;height:2px;background:var(--brand);vertical-align:middle;margin-right:8px}
@media(max-width:700px){.svcx-grid{grid-template-columns:1fr}}
/* Each card opens with the same heading block as Team headshots below (an
   icon, then the name over its line), then the photographs, then the
   example's client as a caption. On desktop the heading keeps three lines'
   height so the photographs in a row line up. */
.svcx .pf-head{order:1}
.svcx .folio-lead{order:2;margin-bottom:0}
.svcx-eg{order:3;margin-top:14px}
@media(min-width:900px){body.corporate .svcx .pf-head{min-height:5.6em}}
@media(max-width:700px){.svcx-grid{gap:64px}}
.svcx .pf-head h3{margin:0 0 3px;font-size:1.18rem}
/* Headshots and marketing images under the cards, in the Recent work style. */
.svcx-pf{margin-top:clamp(56px,6vw,80px)}
/* The quote request: a dark panel with room around it. */
.quote-band{
  margin-top:clamp(64px,7vw,104px);padding:clamp(30px,4vw,56px);
  display:flex;align-items:center;justify-content:space-between;gap:clamp(24px,4vw,56px);
  background:#111;color:#fff;border-radius:var(--radius);
}
.quote-band .eyebrow{color:var(--brand);margin:0 0 .6em}
.quote-band h3{color:#fff;margin:0 0 .5em;font-size:clamp(1.5rem,2.6vw,2.1rem);text-transform:none;letter-spacing:-.01em;line-height:1.2}
.quote-band-text p:last-child{margin:0;color:rgba(255,255,255,.72);line-height:1.7;max-width:62ch}
.quote-band .btn{flex:none;padding:18px 38px;font-size:.82rem}
@media(max-width:760px){
  .quote-band{flex-direction:column;align-items:stretch;text-align:left}
  .quote-band .btn{text-align:center}
}
#c-portfolio .kort{margin-top:0}
/* The three grey service blocks come first, above the photograph cards. */
#c-services .corp-svc{margin-bottom:clamp(44px,5vw,64px)}

/* The two films (client, 2026-10-13): side by side on a grey panel between
   event coverage / brand awareness and the headshots, at their own 16:9,
   no stills.
   Stacked on a phone. */
.svcx-films{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,40px);
  background:var(--bg-alt);border-radius:var(--radius);
  padding:clamp(22px,3.2vw,44px);margin-top:clamp(56px,6vw,80px);
}
.svcx-film-frame{order:2}
body.corporate .svcx-film .pf-frame{aspect-ratio:16/9;border-radius:var(--radius-sm)}
.svcx-film .pf-head h3{font-size:clamp(1.18rem,1.6vw,1.4rem)}
@media(min-width:900px){body.corporate .svcx-film .pf-head{min-height:0}}
@media(max-width:760px){
  .svcx-films{grid-template-columns:1fr;gap:36px;margin-inline:-8px;padding:22px 18px}
}

/* Headshots beside marketing images on desktop and tablet. On a phone
   (client, 2026-10-13) every card stacks, one under the other: event
   coverage, brand awareness, then headshots and marketing images, each
   with its two photographs side by side. */
@media(min-width:701px){
  .pf-list.svcx-pf{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .pf-list.svcx-pf{grid-template-columns:1fr;gap:56px}
}
/* More air above the closing quote on the corporate page. */
body.corporate .pf-quote{margin-top:clamp(88px,10vw,140px)}
/* Corporate gallery: the wedding carousel, with the grade baked into the
   files instead of the CSS filter. */
.corp-carousel .slide img{filter:none}
/* Moves on after 6 s (data-hold on the section) with a slow 3 s glide. */
.corp-carousel .slides{transition-duration:3s}

/* Corporate About hero on a phone: the label and "Meet Red Beard" first,
   then Kobus's portrait, then the tagline, paragraph, buttons and stats.
   Selectors carry .ab-hero twice over so they outrank the shared phone
   ordering further down. The wrappers step aside (display:contents) so the photo and the text
   share one column and can be ordered; each text block keeps the page
   gutter itself. */
@media(max-width:760px){
  .ab-hero--corp{display:flex;flex-direction:column}
  /* Room under the header for the label (outranks the shared phone padding-top:0). */
  body .ab-hero.ab-hero--corp{padding:44px 0 0}
  .ab-hero--corp > .wrap,
  .ab-hero--corp .ab-hero-grid,
  .ab-hero--corp .ab-hero-text{display:contents}
  .ab-hero.ab-hero--corp h1{order:1;margin:0 20px 22px}
  /* The portrait with the empty wall above Kobus trimmed (client,
     2026-10-12): square, about 120px shorter than its own 3:4, cut from the top
     only, so his head, the camera in his hands and the table stay in view.
     A short fade at the top and foot. */
  .ab-hero.ab-hero--corp .ab-hero-bg{
    order:2;margin:0 0 24px;aspect-ratio:1/1;object-position:50% 100%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent);
            mask-image:linear-gradient(180deg,transparent 0,#000 6%,#000 92%,transparent);
  }
  .ab-hero.ab-hero--corp .ab-tag{order:3;margin:0 20px 18px}
  .ab-hero.ab-hero--corp .lede{order:4;margin:0 20px 24px}
  .ab-hero.ab-hero--corp .ab-cta{order:5;margin:0 20px}
  .ab-hero.ab-hero--corp .ab-stats{order:6;margin:40px 20px 0}
}

/* Wedding About hero on a phone (client, 2026-10-12): "Meet Red Beard" and
   the tagline first, then the café photo of Kobus, then the paragraph,
   buttons and stats. Same mechanics as the corporate hero above. */
@media(max-width:760px){
  .ab-hero--wed{display:flex;flex-direction:column}
  /* Room under the header for the label (outranks the shared phone padding-top:0). */
  body .ab-hero.ab-hero--wed{padding:44px 0 0}
  .ab-hero--wed > .wrap,
  .ab-hero--wed .ab-hero-grid,
  .ab-hero--wed .ab-hero-text{display:contents}
  .ab-hero.ab-hero--wed h1{order:1;margin:0 20px 18px}
  .ab-hero.ab-hero--wed .ab-tag{order:2;margin:0 20px 22px}
  /* Squarer than the shared 5:4 band and pinned right, so Kobus sits in
     the middle of the frame rather than off to the right. */
  .ab-hero.ab-hero--wed .ab-hero-bg{
    order:3;margin:0 0 24px;aspect-ratio:1/1;object-position:100% 40%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent);
            mask-image:linear-gradient(180deg,transparent 0,#000 12%,#000 70%,transparent);
  }
  .ab-hero.ab-hero--wed .lede{order:4;margin:0 20px 24px}
  .ab-hero.ab-hero--wed .ab-cta{order:5;margin:0 20px}
  .ab-hero.ab-hero--wed .ab-stats{order:6;margin:40px 20px 0}
}

/* ---- Mission and vision, editorial: a photograph beside a large heading,
   alternating sides like a magazine spread ---- */
.ab-ed-row{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:clamp(32px,5vw,72px)}
.ab-ed-row + .ab-ed-row{margin-top:clamp(40px,5vw,64px)}
.ab-ed-row.flip .ab-ed-ph{order:2}
.ab-ed-ph{margin:0;border-radius:var(--radius);overflow:hidden;aspect-ratio:3/2}
.ab-ed-ph img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease}
.ab-ed-row:hover .ab-ed-ph img{transform:scale(1.04)}
.ab-ed-text .kicker{display:block;font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);margin-bottom:12px}
.ab-ed-text h2{font-size:clamp(2.4rem,4.4vw,3.5rem);line-height:1.05}
.ab-ed-text h2 span{color:var(--brand)}
.ab-ed-text .rule{display:block;width:56px;height:3px;background:var(--brand);margin:20px 0}
.ab-ed-text p{margin:0;color:var(--ink-soft);font-size:1.08rem;line-height:1.75;max-width:46ch}

/* ---- Values: numbered cards that turn black on hover ---- */
.ab-values-band{background:var(--bg-alt)}
.ab-values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.ab-value{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(26px,3vw,36px);transition:background .35s ease,color .35s ease,transform .35s ease;
}
.ab-value .num{
  display:block;font-size:2.6rem;font-weight:700;line-height:1;margin-bottom:14px;
  color:transparent;-webkit-text-stroke:1.5px var(--brand);transition:color .35s ease;
}
.ab-value h3{margin-bottom:8px;transition:color .35s ease}
.ab-value p{margin:0;color:var(--ink-soft);transition:color .35s ease}
.ab-value:hover{background:#111;transform:translateY(-6px)}
.ab-value:hover .num{color:var(--brand)}
.ab-value:hover h3{color:#fff}
.ab-value:hover p{color:rgba(255,255,255,.75)}

/* ---- Other shoots: a grey band of icon cards, each a quote request ---- */
.ab-more{background:#ECECEC;position:relative;overflow:hidden}
.ab-more::before{
  content:"";position:absolute;left:-120px;top:-120px;width:360px;height:360px;border-radius:50%;
  border:60px solid rgba(17,17,17,.035);pointer-events:none;
}
.ab-svc{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.8vw,22px);position:relative}
.ab-svc-card{
  display:flex;flex-direction:column;gap:10px;text-decoration:none;
  background:#fff;color:var(--ink);border-radius:var(--radius);padding:clamp(24px,2.6vw,32px);
  box-shadow:0 10px 26px rgba(0,0,0,.14);
  transition:transform .35s ease,box-shadow .35s ease;
}
.ab-svc-card .ico{
  width:56px;height:56px;border-radius:50%;display:grid;place-items:center;
  background:#FBE8EA;color:var(--brand);margin-bottom:6px;
  transition:background .35s ease,color .35s ease,transform .35s ease;
}
.ab-svc-card .ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.ab-svc-card h3{font-size:.9rem}
.ab-svc-card p{margin:0;color:var(--ink-soft);font-size:.95rem;line-height:1.6}
.ab-svc-card .go{
  margin-top:auto;padding-top:8px;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);display:inline-flex;align-items:center;gap:8px;
}
.ab-svc-card .go::after{content:"\2192";transition:transform .3s ease}
/* Lifestyle: price and session length above the link (V2 review). It takes
   over the auto top margin so prices line up along the bottom of each row. */
.ab-svc-card .ls-price{margin-top:auto;padding-top:10px;font-size:.9rem;color:var(--ink-soft)}
.ab-svc-card .ls-price b{font-size:1.15rem;font-weight:700;color:var(--head)}
.ab-svc-card .ls-price + .go{margin-top:0;padding-top:4px}
.ab-svc-card:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(0,0,0,.24)}
.ab-svc-card:hover .ico{background:var(--brand);color:#fff;transform:rotate(-8deg) scale(1.06)}
.ab-svc-card:hover .go::after{transform:translateX(5px)}
.ab-svc-card.other{background:#2B2B2B;color:#fff;box-shadow:none}
.ab-svc-card.other .ico{background:rgba(255,255,255,.12);color:#fff}
.ab-svc-card.other h3{color:#fff}
.ab-svc-card.other p{color:rgba(255,255,255,.78)}
.ab-svc-card.other .go{color:#fff}
.ab-svc-card.other:hover{background:#1E1E1E}
.ab-svc-card.other:hover .ico{background:var(--brand);color:#fff}
.ab-more-cta{
  position:relative;margin-top:clamp(28px,3.4vw,40px);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:12px 14px;text-align:center;
}

/* ---- Team: initial badges in place of photographs ---- */
.ab-team{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.ab-initials{
  width:96px;height:96px;margin:0 auto 16px;border-radius:50%;display:grid;place-items:center;
  font-size:1.7rem;font-weight:700;letter-spacing:.04em;color:#fff;
  background:linear-gradient(135deg,#555,#333);
  box-shadow:0 0 0 6px #fff,0 0 0 8px rgba(17,17,17,.14);
  transition:transform .5s cubic-bezier(.2,.7,.2,1),background .35s ease;
}

/* ---- Contact: the shared block, just tighter on this page ---- */
body .contact.ab-contact{padding:clamp(52px,6.5vw,88px) 0;background:#fff}
.ab-contact h2{margin-bottom:12px}
.ab-contact .about-contact-img{max-height:520px;object-fit:cover}

@media(max-width:960px){
  .ab-svc,.ab-values{grid-template-columns:1fr 1fr}
  .ab-team{grid-template-columns:1fr 1fr}
}
@media(max-width:760px){
  .ab-hero-grid,.ab-ed-row{grid-template-columns:1fr}
  .ab-ed-row.flip .ab-ed-ph{order:0}
  .ab-hero{padding-top:40px}
  /* Phones: the portrait comes straight after the tagline, before the
     paragraph. The text block steps aside (display:contents) so its parts
     and the portrait share one column and can be ordered. */
  .ab-hero-grid{gap:0}
  .ab-hero-text{display:contents}
  .ab-hero .eyebrow{order:1}
  .ab-hero h1{order:2}
  .ab-hero .ab-tag{order:3}
  .ab-portrait{order:4}
  .ab-hero .lede{order:5}
  .ab-hero .ab-cta{order:6}
  .ab-portrait{margin:10px auto 40px;max-width:300px}
  .ab-portrait::before{inset:16px -14px -14px 16px}
  .ab-stats{grid-template-columns:1fr 1fr;margin-top:44px}
  .ab-cta .btn{flex:1 1 100%;text-align:center}
  .ab-svc,.ab-values{grid-template-columns:1fr}
  .ab-more-cta .btn{flex:1 1 100%}
  .ab-initials{width:78px;height:78px;font-size:1.4rem}
  .ab-team{gap:12px}
}

/* Reviews close the page, after Get in touch: a grey band, the intro on the
   left and one review at a time on the right. Phones stack them. */
.ab-fam{background:var(--bg-alt)}
.ab-fam-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(32px,5vw,72px);align-items:center}
.ab-fam-intro h2{margin-bottom:14px}
.ab-fam-intro .lede{margin:0 0 22px;max-width:40ch}
.ab-fam-score{display:flex;align-items:center;gap:12px;margin:0;font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rb-grey)}
.ab-fam-score .stars{color:#E8A700;letter-spacing:.18em;font-size:1rem}
@media(max-width:860px){
  .ab-fam-grid{grid-template-columns:1fr}
  .ab-fam-intro{text-align:center}
  .ab-fam-intro .lede{margin-inline:auto}
  .ab-fam-score{justify-content:center}
}

/* Reviews under the other shoots: one at a time. The box takes the height
   of the review showing, so a short one leaves no empty card; the others
   wait, out of the flow, on top of it. site.js adds the dots and arrows. */
/* The waiting slides sit 24px to the side, ready to slide in; the section
   clips them so they never widen the page on a phone. */
.ab-fam{overflow:hidden}
.ab-slider{max-width:780px;margin:0 auto;width:100%}
.ab-slides{position:relative}
.ab-slide:not(.is-active){position:absolute;top:0;left:0;width:100%}
.ab-slide{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(28px,4vw,48px);display:flex;flex-direction:column;gap:18px;
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  opacity:0;visibility:hidden;transform:translateX(24px);
  transition:opacity .45s ease,transform .45s ease,visibility 0s linear .45s;
}
.ab-slide.is-active{opacity:1;visibility:visible;transform:none;transition:opacity .45s ease,transform .45s ease,visibility 0s}
.ab-slide.from-left{transform:translateX(-24px)}
.ab-slide-top{display:flex;align-items:center;justify-content:space-between}
.ab-slide .stars{color:#E8A700;letter-spacing:.18em;font-size:1rem}
.ab-slide .gmark{width:20px;height:20px}
.ab-slide .gmark svg{width:100%;height:100%;display:block}
.ab-slide blockquote{margin:0;font-size:clamp(1.05rem,1.5vw,1.2rem);font-weight:300;line-height:1.7;color:var(--ink)}
/* A large red opening quote mark over each review. */
.ab-slide blockquote::before{
  content:"\201C";display:block;height:.55em;margin-bottom:6px;
  font-size:4.2rem;line-height:1;font-weight:700;color:var(--brand);font-family:Georgia,serif;
}
.ab-slide .who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:18px;border-top:1px solid var(--line)}
.ab-slide .avatar{width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-size:.8rem;font-weight:700}
.ab-slide .who b{display:block;font-size:.95rem;color:var(--head)}
/* The shoot type as a small tag under the name. */
.ab-slide .who > span > span{
  display:inline-block;margin-top:5px;padding:3px 10px;border-radius:999px;
  background:#F1E3E4;color:var(--brand);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.ab-slider-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px}
.ab-arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;color:var(--ink);
  display:grid;place-items:center;cursor:pointer;transition:background .25s ease,color .25s ease,border-color .25s ease;
}
.ab-arrow svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ab-arrow:hover{background:var(--brand);border-color:var(--brand);color:#fff}
.ab-dots{display:flex;gap:8px}
.ab-dots button{
  width:10px;height:10px;border-radius:999px;border:0;padding:0;cursor:pointer;
  background:#C9C9C9;transition:width .3s ease,background .3s ease;
}
.ab-dots button[aria-selected="true"]{width:28px;background:var(--brand)}
@media(prefers-reduced-motion:reduce){
  .ab-slide,.ab-slide.is-active{transition:none;transform:none}
}

/* Values sit on white, so the grey band below belongs to the other shoots
   alone and no two greys run together. */
#values.ab-values-band{background:#fff}

/* ---------- Contact page ---------- */
/* The enquiry form sits on its own white card with a "Contact us" heading,
   and the send button is centred under it. The details beside it take the
   same round icons as the About page. */
.contact-page form{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(24px,3.2vw,40px);box-shadow:0 18px 44px rgba(0,0,0,.07);
}
.contact-page .form-head{text-align:center;margin-bottom:4px}
.contact-page .form-head h2{
  font-family:var(--sans);line-height:1.4;
  font-size:clamp(1.5rem,2.6vw,1.9rem);letter-spacing:-.01em;text-transform:none;
  font-weight:700;color:var(--head);margin-bottom:6px;
}
.contact-page .form-head h2::after{content:"";display:block;width:44px;height:3px;background:var(--brand);margin:12px auto 0}
.contact-page .form-head p{margin:10px 0 0;color:var(--ink-soft);font-size:.95rem}
body.weddings .contact-page form .btn{justify-self:center;min-width:220px;text-align:center;margin-top:6px}
@media(max-width:760px){
  .contact-page .contact-grid{gap:32px}
  .contact-page form{padding:24px 18px}
  body.weddings .contact-page form .btn{justify-self:stretch;width:100%}
}
.contact-page h2{margin-bottom:12px}
/* Contact page: "Love captured" and three photographs under the details,
   filling the space beside the form. */
.love-captured{margin-top:clamp(32px,4vw,48px)}
.love-captured-title{
  margin:0 0 16px;font-family:var(--serif);font-weight:300;font-style:italic;
  font-size:clamp(2rem,3.6vw,2.9rem);line-height:1;color:var(--head);letter-spacing:-.01em;
}
.love-captured-title span{color:var(--brand);font-weight:700;font-style:normal}
.love-captured{min-width:0}
.contact-page .contact-grid > div{min-width:0}
.love-captured-photos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.love-captured-photos img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;border-radius:var(--radius);display:block}
.love-captured-photos img:nth-child(2){transform:translateY(18px)}
@media(max-width:760px){.love-captured-photos img:nth-child(2){transform:none}}

/* "(optional)" marker next to the one field that is not required */
.contact form .opt{font-weight:400;text-transform:none;letter-spacing:0;color:var(--ink-soft);font-size:.92em}

/* The merged Galleries page: a route through to the every-frame grid. */
/* Centred under the centred heading and lede (client, 2026-10-07). */
.folio-intro-more{margin:clamp(22px,2.6vw,32px) 0 0;text-align:center}

/* Package pages: "see the work" photo cards between the notes and the
   contact card. One wide card (Film or Photo packages) or two side by side
   (Photo & Film), each a real photo with a soft shade, a small label and a
   title with an arrow; the whole card is the link. */
.pkg-work{display:grid;gap:clamp(14px,2vw,22px);margin:clamp(36px,4.5vw,56px) 0 0}
.pkg-work.two{grid-template-columns:1fr 1fr}
.work-tile{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  aspect-ratio:2/1;color:#fff;text-decoration:none;isolation:isolate;
  box-shadow:0 18px 40px rgba(0,0,0,.08);
}
.pkg-work.two .work-tile{aspect-ratio:4/3}
.work-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .7s ease}
/* The film card's still (the bride at the window, from the highlights film)
   keeps her face in the frame at every card shape. */
.work-tile img.focus-face{object-position:50% 18%}
.work-tile img.focus-couple{object-position:50% 62%}
.work-tile::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(10,10,10,.72) 0%,rgba(10,10,10,.28) 42%,rgba(10,10,10,0) 70%);
}
.work-tile-copy{position:absolute;left:clamp(20px,2.6vw,32px);right:clamp(20px,2.6vw,32px);bottom:clamp(20px,2.6vw,30px);display:flex;flex-direction:column;gap:8px}
.work-tile-kicker{display:flex;align-items:center;gap:10px;font-size:.72rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.88)}
.work-tile-play{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.92);color:#111}
.work-tile-play svg{width:13px;height:13px;fill:currentColor;margin-left:2px}
.work-tile-title{font-family:var(--serif);font-weight:700;font-size:clamp(1.35rem,2.3vw,1.9rem);line-height:1.15}
.work-tile-title span{display:inline-block;transition:transform .25s ease}
.work-tile:hover img{transform:scale(1.04)}
.work-tile:hover .work-tile-title span,.work-tile:focus-visible .work-tile-title span{transform:translateX(6px)}
.work-tile:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
@media(max-width:760px){
  .pkg-work.two{grid-template-columns:1fr}
  .work-tile,.pkg-work.two .work-tile{aspect-ratio:4/3}
}

/* Wedding films: one film should fill the row rather than sit in half of a
   two-column grid; as more are added they pair up on their own. */
/* min() keeps the 440px column from overflowing a phone narrower than that. */
.pf-list.films-list{grid-template-columns:repeat(auto-fit,minmax(min(440px,100%),1fr))}
/* Phones: the films stay 16:9, the shape of the YouTube players, and stack
   closer together. (An upright 4:5 cover was tried on 2026-10-13 and
   dropped at the client's request the same day.) */
@media(max-width:760px){
  .pf-list.films-list{gap:36px}
  .films-list .pf-frame{aspect-ratio:16/9}
}
.films-note{margin-top:clamp(24px,3vw,36px);color:var(--ink-soft);font-size:.92rem}
/* "You can watch more of our films" and the YouTube channel as a button
   beside it (client, 2026-10-13); the button drops under the line on a
   phone. The note's own top margin moves to the row. */
.films-more{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px 20px;margin-top:clamp(28px,3.4vw,44px);
}
.films-more .films-note{margin:0;font-size:1rem;color:var(--ink)}
.films-more .btn.social{width:auto}

/* Wedding films: each YouTube film is a still from the film with a small
   play button bottom left, like the self-hosted highlights film's controls,
   over a soft shadow. Pressing it swaps in the YouTube player (site.js). */
.yt-lite{position:absolute;inset:0;display:block;cursor:pointer;color:#fff}
.yt-lite img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.yt-lite::after{
  content:"";position:absolute;inset:auto 0 0 0;height:30%;pointer-events:none;
  background:linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0));
}
/* The play control mirrors the highlights film's own video controls: a
   slim bar along the foot of the frame with a play icon, the running time
   and the track, over a soft shade. */
.yt-bar{
  position:absolute;left:0;right:0;bottom:0;z-index:1;display:flex;align-items:center;gap:12px;
  padding:0 18px 16px;color:#fff;font-size:.82rem;font-variant-numeric:tabular-nums;
}
.yt-bar svg{width:18px;height:18px;fill:currentColor;flex:none;transition:transform .2s ease}
.yt-time{flex:none;opacity:.95}
.yt-track{flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}
.yt-lite:hover img{transform:scale(1.02)}
.yt-lite:hover .yt-bar svg,.yt-lite:focus-visible .yt-bar svg{transform:scale(1.2)}
.yt-lite:focus-visible{outline:3px solid var(--brand);outline-offset:-3px}

/* Route from the About page shoot cards through to the Lifestyle page. */