/* ==========================================================================
   CARLOSTEE STUDIO — shared stylesheet
   Loaded by every page. Edit once, changes everywhere.
   ========================================================================== */

:root{
  --ink:      #2b2b2b;
  --body-txt: #6b6b6b;
  --panel:    #f1f1ef;
  --line:     #dcdcda;
  --btn:      #3a3a3a;
  --white:    #fff;

  --serif: "Playfair Display", Georgia, serif;
  --sans:  "Montserrat", Helvetica, Arial, sans-serif;

  --pad: clamp(1.5rem, 7vw, 7rem);
}

*,*::before,*::after{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--white);
  color:var(--body-txt);
  font-family:var(--sans);
  font-size:0.875rem;
  line-height:1.9;
}

img{ display:block; width:100%; height:auto; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:400;
  color:var(--ink);
  line-height:1.2;
  margin:0;
}

:focus-visible{ outline:2px solid var(--ink); outline-offset:3px; }

.label{
  font-family:var(--sans);
  font-size:0.625rem;
  font-weight:500;
  letter-spacing:0.22em;
  text-transform:uppercase;
  line-height:1.8;
}

.rule{ border:0; border-top:1px solid var(--line); margin:0; }

.btn{
  display:inline-block;
  background:var(--btn);
  color:var(--white);
  text-decoration:none;
  padding:1.05rem 2.1rem;
  font-family:var(--sans);
  font-size:.625rem;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  border:0;
  cursor:pointer;
  transition:background .25s;
}
.btn:hover{ background:#000; }

/* ============================ HEADER ============================ */

.site-head{
  position:absolute;
  inset:0 0 auto 0;
  z-index:70;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  padding:2.2rem var(--pad);
}

/* add class="site-head on-light" on pages with no hero image behind the nav */
.site-head.on-light{ position:relative; background:var(--white); }

.logo{ display:block; width:clamp(140px,13vw,200px); }
.site-head.on-light .logo img{ filter:invert(1); }

.main-nav ul{ display:flex; gap:2.6rem; margin:0; padding:0; list-style:none; }
.main-nav a{
  color:var(--white);
  text-decoration:none;
  padding-block:.5rem;
  opacity:.92;
  transition:opacity .25s;
}
.main-nav a:hover{ opacity:1; }
.site-head.on-light .main-nav a{ color:var(--ink); }

.has-children{ position:relative; }

.main-nav .submenu{
  display:block;          /* overrides the flex row on .main-nav ul */
  position:absolute;
  top:100%; left:50%;
  transform:translateX(-50%);
  min-width:13rem;
  padding:1.6rem 1.5rem;
  background:var(--panel);
  text-align:center;
  opacity:0; visibility:hidden;
  transition:opacity .25s, visibility .25s;
  box-shadow:0 6px 26px rgba(0,0,0,.09);
}
.has-children:hover .submenu,
.has-children:focus-within .submenu{ opacity:1; visibility:visible; }
.main-nav .submenu li{ display:block; }
.submenu li + li{ margin-top:.9rem; }
.submenu a{ color:var(--ink) !important; opacity:.75; }
.submenu a:hover{ opacity:1; }

.burger,.menu-close{ display:none; background:none; border:0; padding:.5rem; cursor:pointer; }
.burger span{ display:block; width:26px; height:1.5px; background:var(--white); margin:6px 0; }
.site-head.on-light .burger span{ background:var(--ink); }

/* ============================ HERO SLIDER ============================ */

.hero{
  position:relative;
  height:100svh;      /* full screen by default (phones, small tablets) */
  min-height:32rem;
  overflow:hidden;
  background:var(--ink);
}
@media (min-width:761px){
  .hero{ height:88svh; min-height:26rem; }
}
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.3s ease; }
.hero-slide.on{ opacity:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; }
.hero-slide::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 55%);
}

.hero-caption{
  position:absolute; z-index:3;
  left:var(--pad); right:var(--pad);
  bottom:clamp(2.5rem,7vh,4.5rem);
  color:var(--white);
}
.hero-title{
  color:var(--white);
  font-size:clamp(2.4rem,5.2vw,4.4rem);
  transition:opacity .38s;
}
.hero-caption .rule{ border-top-color:rgba(255,255,255,.55); margin:1.6rem 0 1.15rem; }

.hero-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; color:var(--white);
}
.hero-sub{ transition:opacity .38s; }

.slider-ctrl{ display:flex; align-items:center; gap:2.2rem; }
.slider-ctrl button{
  background:none; border:0; padding:.4rem;
  color:inherit; cursor:pointer;
  font-size:1.5rem; line-height:1;
  opacity:.85; transition:opacity .25s;
}
.slider-ctrl button:hover{ opacity:1; }
.count{ font-size:.8rem; letter-spacing:.12em; font-variant-numeric:tabular-nums; }

/* ============================ PAGE BANNER ============================ */
/* Static hero used on About / Contact / gallery pages */

.banner{
  position:relative;
  min-height:min(78svh,42rem);
  display:grid; place-items:center;
  padding:8rem var(--pad) 4rem;
  text-align:center;
  overflow:hidden;
}
.banner > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.banner::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.3); }
.banner-inner{ position:relative; z-index:2; color:var(--white); }
.banner-inner h1{ color:var(--white); font-size:clamp(2.2rem,5vw,4rem); }
.banner-inner .label{ display:block; }
.banner-inner .label.above{ margin-bottom:1.2rem; }
.banner-inner .label.below{ margin-top:1.6rem; }
.banner-inner p{ max-width:52ch; margin:1.4rem auto 0; color:rgba(255,255,255,.9); }
.banner-inner .btn{ margin-top:2.2rem; }

/* ============================ INTRO (2-col) ============================ */

.intro{
  background:var(--panel);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,6vw,6rem);
  padding:clamp(4rem,9vw,8rem) var(--pad);
}
.intro-left{
  text-align:center;
  display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  gap:1.5rem;
}
.intro-left h2{ font-size:clamp(1.8rem,3.4vw,2.8rem); max-width:20ch; }
.intro-left .label{ display:block; color:var(--ink); }
.intro-right p{ margin:0 0 1.6rem; max-width:58ch; }
.intro-right p:last-child{ margin-bottom:0; }

/* ============================ CATEGORY GRID ============================ */

.cats{
  display:grid; grid-template-columns:1fr 1fr;
  max-width:64rem; margin-inline:auto;
  gap:clamp(2rem,5vw,4.5rem) clamp(2rem,5vw,4rem);
  padding:clamp(4rem,8vw,7rem) var(--pad);
}
.cat{ text-decoration:none; display:block; }
.cat figure{ margin:0; overflow:hidden; }
.cat img{ aspect-ratio:1/1; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.cat:hover img{ transform:scale(1.03); }
.cat figcaption{ text-align:center; padding-top:1.6rem; }
.cat h3{ font-size:clamp(1.35rem,2.2vw,1.8rem); }
.cat .label{ display:block; margin-top:.7rem; color:var(--body-txt); }

/* ============================ FILM BLOCK ============================ */

.film{ padding:0 var(--pad) clamp(1.5rem,3vw,2.5rem); }
.film-frame{
  position:relative; aspect-ratio:16/9;
  background:#000; overflow:hidden;
  margin-top:clamp(2.5rem,5vw,4rem);
}
.film-frame img,.film-frame iframe,.film-frame video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; border:0;
}
.play{
  position:absolute; top:50%; left:50%;
  transform:translate(-50%,-50%);
  width:4.5rem; height:4.5rem; border-radius:50%;
  border:1.5px solid rgba(255,255,255,.85);
  background:rgba(0,0,0,.15); color:var(--white);
  font-size:1.1rem; cursor:pointer;
  display:grid; place-items:center;
  transition:background .25s;
}
.play:hover{ background:rgba(0,0,0,.4); }

.film-meta{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1.5rem; padding:clamp(2.5rem,5vw,4rem) 0;
}
.film-meta h2{ font-size:clamp(1.6rem,3vw,2.4rem); }
.film-meta .label{ display:block; margin-top:.9rem; }

/* ============================ MASONRY ============================ */

.work{ padding:clamp(2rem,4vw,3rem) var(--pad) clamp(3.5rem,7vw,6rem); text-align:center; }
.work .label{ display:block; color:var(--body-txt); }
.work h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin-top:.9rem; }

.masonry{
  column-count:3; column-gap:1.25rem;
  margin-top:clamp(2.5rem,5vw,4rem);
  text-align:left;
}
.masonry figure{ margin:0 0 1.25rem; break-inside:avoid; }
.masonry img{ cursor:zoom-in; }

/* ============================ TESTIMONIALS ============================ */

.says{ padding:0 var(--pad) clamp(4rem,8vw,7rem); }
.say{ display:none; grid-template-columns:1fr 2fr; gap:0; min-height:clamp(24rem,42vw,30rem); }
.say.on{ display:grid; }
.say > img{ width:100%; height:100%; object-fit:cover; display:block; }
.say-body{
  background:var(--panel);
  padding:clamp(2.5rem,6vw,5rem) clamp(2rem,7vw,7rem);
  text-align:center;
  display:flex; flex-direction:column; justify-content:center;
  gap:clamp(1.5rem,4vw,3rem);
}
.say-body blockquote{ margin:0; max-width:58ch; margin-inline:auto; }
.say-body cite{
  font-family:var(--serif); font-style:normal;
  font-size:clamp(1.3rem,2.2vw,1.75rem); color:var(--ink);
}
.say-body .slider-ctrl{ justify-content:center; color:var(--ink); }

/* ============================ PROSE ============================ */
/* Text sections on About and gallery pages */

.prose{ padding:clamp(3.5rem,7vw,6rem) var(--pad); }
.prose-narrow{ max-width:72rem; margin-inline:auto; }
.prose h2{ font-size:clamp(1.7rem,3.2vw,2.6rem); margin-bottom:1.4rem; }
.prose h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); margin:2.8rem 0 1rem; }
.prose h4{ font-family:var(--serif); font-style:italic; font-size:1.15rem; margin:1.8rem 0 .4rem; }
.prose p{ margin:0 0 1.2rem; }
.prose .label{ display:block; margin:2.6rem 0 1.2rem; color:var(--ink); }
.prose ol{ list-style:none; margin:0; padding:0; counter-reset:step; }
.prose ol li{ margin-bottom:1.5rem; }
.prose ol li h4::before{ counter-increment:step; content:counter(step) ". "; }

/* Split section: image one side, text the other */
.split{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  gap:clamp(2rem,6vw,5rem);
  padding:clamp(3rem,7vw,6rem) var(--pad);
}
.split.reverse > figure{ order:2; }
.split figure{ margin:0; }
.split-text .label{ display:block; margin-bottom:1.4rem; color:var(--ink); }
.split-text h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:1.6rem; }
.split-text p{ margin:0 0 1.2rem; max-width:62ch; }
.split-text .btn{ margin-top:1.2rem; }

/* Approach strip on the About page */
.approach{
  background:var(--panel);
  display:grid;
  grid-template-columns:repeat(12,1fr);
  row-gap:clamp(2rem,5vw,4rem);
  padding:clamp(4rem,9vw,7rem) var(--pad);
}

.approach-item{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:clamp(1.5rem,3vw,3rem);
  align-items:center;
}
/* the three items step across and down the band */
.approach-item:nth-of-type(1){ grid-column:2 / 8;  grid-row:1; }
.approach-item:nth-of-type(2){ grid-column:6 / 12; grid-row:2; }
.approach-item:nth-of-type(3){ grid-column:3 / 9;  grid-row:3; }

.approach-item img,
.approach-item .ph{
  width:clamp(120px,12vw,175px);
  aspect-ratio:2/3;
  object-fit:cover;
}
/* empty slot until you drop a photo in — swap .ph for an <img> */
.approach-item .ph{ background:#e2e2dd; }

.approach-item h4{ font-style:italic; font-size:clamp(1.1rem,1.8vw,1.4rem); margin:0 0 .6rem; }
.approach-item .label{ color:var(--ink); }

.approach-copy{
  grid-column:8 / 13; grid-row:3;
  text-align:right;
  align-self:center;
}
.approach-copy h2{ font-size:clamp(1.9rem,3.6vw,3rem); margin-bottom:1.4rem; }
.approach-copy p{ margin:0 0 0 auto; max-width:42ch; }

/* Centred panel */
.panel-note{
  background:var(--panel);
  margin:0 var(--pad);
  padding:clamp(3rem,7vw,6rem) clamp(1.5rem,6vw,5rem);
  text-align:center;
}
.panel-note .label{ display:block; color:var(--ink); }
.panel-note h2{ font-size:clamp(1.1rem,2vw,1.4rem); margin:.6rem 0 2.4rem; }
.panel-note p{ margin:0 auto 1.4rem; max-width:80ch; }
.panel-note p.em{
  font-family:var(--serif); font-style:italic; color:var(--ink);
  font-size:1.05rem;
  line-height:1.7; max-width:80ch;
  margin:0 auto;
}

/* ============================ FORM ============================ */

.form-wrap{ padding:clamp(3.5rem,7vw,6rem) var(--pad); text-align:center; }
.form-wrap h2{ font-size:clamp(1.9rem,3.6vw,3rem); }
.form-wrap > .label{ display:block; margin-top:clamp(2rem,4vw,3rem); color:var(--ink); font-weight:600; }

.contact-lines{
  display:flex; flex-wrap:wrap;
  justify-content:center; align-items:baseline;
  gap:1.2rem clamp(3rem,8vw,6rem);
  margin-block:clamp(2.5rem,5vw,4rem) clamp(2.5rem,5vw,4rem);
}
.contact-lines a{ text-decoration:none; color:var(--ink); }

form.enquiry{ max-width:34rem; margin-inline:auto; text-align:center; }
form.enquiry .field{ margin-bottom:2.2rem; }
form.enquiry label{
  display:block; margin-bottom:.6rem;
  font-family:var(--sans); font-size:.625rem; font-weight:500;
  letter-spacing:.22em; text-transform:uppercase; color:var(--ink);
}
form.enquiry input,
form.enquiry textarea{
  width:100%;
  border:0; border-bottom:1px solid var(--line);
  background:none;
  font-family:var(--sans); font-size:.875rem; color:var(--ink);
  padding:.6rem 0;
  text-align:center;
}
form.enquiry textarea{ min-height:7rem; resize:vertical; }
form.enquiry input:focus,
form.enquiry textarea:focus{ outline:0; border-bottom-color:var(--ink); }
form.enquiry ::placeholder{ color:#aaa; }
.hp{ position:absolute; left:-9999px; }        /* honeypot */
.form-status{ margin-top:1.5rem; min-height:1.5rem; }
.form-status.err{ color:#a33; }

/* Three-up link row (contact page footer) */
.triple{
  display:grid; grid-template-columns:repeat(3,1fr);
  padding:clamp(2.5rem,5vw,4rem) var(--pad);
  text-align:center;
}
.triple > a{ text-decoration:none; padding:1rem; }
.triple > a + a{ border-left:1px solid var(--line); }
.triple .label{ display:block; color:var(--body-txt); }
.triple h3{ font-size:1.5rem; margin-top:.5rem; }

/* ============================ FOOTER ============================ */

.endlinks{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(.75rem,2vw,1.5rem);
  padding:0 var(--pad) clamp(3rem,6vw,5rem);
}
.endlink{
  background:var(--panel); text-align:center;
  padding:clamp(2.5rem,5vw,4rem) 1.5rem;
  text-decoration:none; transition:background .25s;
}
.endlink:hover{ background:#e9e9e6; }
.endlink h3{ font-style:italic; font-size:1.5rem; }
.endlink .label{ display:block; margin-top:.9rem; color:var(--body-txt); }

.site-foot{ text-align:center; padding:0 var(--pad) 3.5rem; }
.site-foot ul{
  display:flex; justify-content:center; flex-wrap:wrap;
  gap:2.4rem; margin:0 0 2rem; padding:0; list-style:none;
}
.site-foot a{ text-decoration:none; color:var(--ink); }
.site-foot small{ font-size:.75rem; letter-spacing:.04em; }

/* ============================ LIGHTBOX ============================ */

.lightbox{
  position:fixed; inset:0; z-index:200;
  background:rgba(15,15,15,.94);
  display:none; place-items:center;
  padding:3rem;
}
.lightbox.open{ display:grid; }
.lightbox img{ max-width:92vw; max-height:88vh; width:auto; object-fit:contain; }
.lightbox button{
  position:absolute; background:none; border:0;
  color:#fff; font-size:2rem; cursor:pointer;
  opacity:.8; padding:1rem;
}
.lightbox button:hover{ opacity:1; }
.lb-close{ top:1rem; right:1.5rem; }
.lb-prev{ left:1rem; top:50%; transform:translateY(-50%); }
.lb-next{ right:1rem; top:50%; transform:translateY(-50%); }

/* ============================ RESPONSIVE ============================ */

@media (max-width:900px){
  .intro{ grid-template-columns:1fr; }
  .intro-left .label{ margin-top:1.5rem; }
  .intro-right p{ max-width:none; text-align:center; }
  .intro-left h2{ font-size:1.9rem; }

  .cats{ grid-template-columns:1fr; }
  .cat img{ aspect-ratio:1/1; }

  .masonry{ column-count:2; }

  .say.on{ grid-template-columns:1fr; }

  .endlinks{ grid-template-columns:1fr; }

  .split,.approach{ grid-template-columns:1fr; }
  .split.reverse > figure{ order:0; }
  .approach-copy{ text-align:left; }
  .approach-copy p{ margin-left:0; }

  .triple{ grid-template-columns:1fr; gap:2rem; }
  .triple > a + a{ border-left:0; border-top:1px solid var(--line); padding-top:2rem; }
}

@media (max-width:760px){
  .burger{ display:block; }

  .main-nav{
    position:fixed; inset:0; z-index:90;
    background:var(--panel);
    display:flex; align-items:center; justify-content:center;
    opacity:0; visibility:hidden;
    transition:opacity .3s, visibility .3s;
  }
  .main-nav.open{ opacity:1; visibility:visible; }

  .menu-close{
    display:block; position:absolute;
    top:1.5rem; right:1.4rem;
    font-size:1.5rem; line-height:1; color:var(--ink);
  }

  .main-nav ul{ flex-direction:column; gap:1.1rem; text-align:center; }
  .main-nav > ul > li > a{
    font-family:var(--serif); font-style:italic;
    font-size:1.5rem; color:var(--ink) !important; opacity:1;
  }

  .submenu{
    position:static; transform:none;
    box-shadow:none; background:none;
    padding:.8rem 0 0;
    max-height:0; overflow:hidden;
    opacity:1; visibility:visible;
    transition:max-height .3s;
  }
  .has-children.expand .submenu{ max-height:14rem; }
  .submenu a{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; }

  .hero-foot{ flex-direction:column; align-items:flex-start; gap:1.6rem; }
  .slider-ctrl{ width:100%; justify-content:space-between; gap:1rem; }
  .hero-title{ font-size:2.1rem; }

  .masonry{ column-count:2; column-gap:.6rem; }
  .masonry figure{ margin-bottom:.6rem; }

  .approach-item{ grid-template-columns:1fr; }
  .approach-item img{ width:100%; aspect-ratio:16/9; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition-duration:.01ms !important; }
}


/* ============================ SOCIAL ICONS ============================ */

.social{ display:flex; gap:1.5rem; justify-content:center; align-items:center; }
.social a{
  display:inline-flex; opacity:.75;
  transition:opacity .25s, transform .25s;
}
.social a:hover{ opacity:1; transform:translateY(-2px); }
.social svg{ width:30px; height:30px; display:block; }
.social a{ opacity:1; }
.social a:hover{ opacity:.85; }

.banner-inner .social{ margin-top:2.6rem; }
.site-foot .social{ margin:0 0 2rem; }

/* ============================ PORTFOLIO PAGE ============================ */

.pf-head{
  text-align:center;
  padding:clamp(7rem,13vw,10rem) var(--pad) clamp(2.5rem,5vw,4rem);
}
.pf-head h1{ font-size:clamp(2.6rem,6vw,4.5rem); }
.pf-head .label{
  display:block; margin-top:1.6rem;
  max-width:60ch; margin-inline:auto; color:var(--ink);
}

.pf-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:0 clamp(2rem,6vw,5rem);
  padding:0 var(--pad) clamp(3rem,6vw,5rem);
  align-items:start;
}
/* right-hand column drops down so the two sides stagger */
.pf-col + .pf-col{ margin-top:clamp(3rem,10vw,9rem); }

.pf-item{ display:block; text-decoration:none; margin-bottom:clamp(3rem,8vw,7rem); }
.pf-item .shot{ overflow:hidden; }
.pf-item img{ transition:transform 1.1s cubic-bezier(.2,.7,.3,1); }
.pf-item:hover img{ transform:scale(1.03); }
.pf-item h3{ text-align:center; font-size:clamp(1.5rem,2.6vw,2.1rem); margin-top:1.7rem; }
.pf-item .label{ display:block; text-align:center; margin-top:1rem; color:var(--body-txt); }

@media (max-width:760px){
  .pf-grid{ grid-template-columns:1fr; }
  .pf-col + .pf-col{ margin-top:0; }
}


/* ============ uniform 3-up tile grid (weddings gallery) ============ */

.tile-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(.5rem,1.2vw,1rem);
  margin-top:clamp(2.5rem,5vw,4rem);
}
.tile-grid figure{ margin:0; overflow:hidden; }
.tile-grid img{ aspect-ratio:4/5; object-fit:cover; cursor:zoom-in; }

@media (max-width:760px){
  .tile-grid{ grid-template-columns:repeat(2,1fr); }
}

/* ============ "want to see more" overlap panel ============ */

.seemore{
  position:relative;
  max-width:72rem;
  margin-inline:auto;
  padding:clamp(3rem,7vw,6rem) var(--pad) clamp(4rem,8vw,7rem);
}
.seemore-photo{ width:70%; margin-left:auto; }
.seemore-photo img{ aspect-ratio:5/4; object-fit:cover; }

.seemore-card{
  position:absolute;
  top:38%; left:var(--pad);
  transform:translateY(-50%);
  width:37%;
  background:var(--panel);
  padding:clamp(2.5rem,4vw,3.5rem) clamp(1.5rem,2.5vw,2rem);
  text-align:center;
}
.seemore-card .dash{ display:block; width:14px; height:1px; background:var(--ink); margin:0 auto 1.8rem; }
.seemore-card .label{ display:block; color:var(--ink); font-weight:700; }
.seemore-card h3,
.seemore-card h4{ font-weight:400; font-family:var(--serif); font-size:clamp(1.3rem,2.2vw,1.8rem); }
.seemore-card h3{ margin:3rem 0 1.2rem; }
.seemore-card h4{ margin:3rem 0 .9rem; }
.seemore-card a.quiet{ text-decoration:none; font-weight:400; }

@media (max-width:760px){
  .seemore-photo{ width:100%; }
  .seemore-card{
    position:static; transform:none;
    width:auto; margin-top:-3rem;
  }
  .approach{ grid-template-columns:1fr; }
  .approach-item:nth-of-type(1),
  .approach-item:nth-of-type(2),
  .approach-item:nth-of-type(3),
  .approach-copy{ grid-column:1; grid-row:auto; text-align:left; }
  .approach-copy p{ margin-left:0; }
}


/* ============================ HOME PAGE: SHARED CONTENT COLUMN ============================ */
/* Header, hero caption, categories, film, recent work and testimonials all sit in
   one centred column, like the Pixieset reference. The column never grows past
   --wrap; on wider screens the space left and right grows instead.
   --wrap-pad is the inner left/right padding that stays on small screens.       */

:root{
  --wrap:     1050px;
  --wrap-pad: 10px;
}

.home .site-head,
.home .hero-caption,
.home .cats,
.home .film,
.home .work,
.home .says{
  width:100%;
  max-width:calc(var(--wrap) + 2 * var(--wrap-pad));
  margin-inline:auto;
  padding-left:var(--wrap-pad);
  padding-right:var(--wrap-pad);
}

/* the two absolutely positioned blocks: stretch edge to edge, then the
   max-width + auto margins above centre them on the same column */
.home .site-head{ left:0; right:0; }
.home .hero-caption{ left:0; right:0; }


/* ============================ ABOUT: TEAM PORTRAITS ============================ */
/* kept at portrait size, as on the live site (and so small source files stay sharp) */
.split figure.team-shot{ max-width:300px; justify-self:center; }

/* ============================ VIDEOS: FILM GRID ============================ */
.films{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem) clamp(1.25rem,3vw,2.5rem);
  padding:clamp(1rem,3vw,2rem) var(--gutter) clamp(4rem,8vw,7rem);
}
.films figure{ margin:0; }
.films .film-frame{ margin-top:0; }
.films figcaption{ text-align:center; padding-top:1.4rem; }
.films h3{ font-size:clamp(1.3rem,2.2vw,1.7rem); }
.films .label{ display:block; margin-top:.6rem; color:var(--body-txt); }
@media (max-width:760px){ .films{ grid-template-columns:1fr; } }


/* ============================ INNER PAGES: SAME CONTENT COLUMN ============================ */
/* About, Portfolio, Weddings, Commercial, Portraits, Videos and Contact use the
   same 1050px column as the home page. --gutter is the space left and right of
   the column: 10px on small screens, growing as the screen widens. Because it is
   padding (not a max-width), full-width backgrounds and banners still run edge
   to edge while their content lines up with everything else.                    */

:root{ --gutter: max(var(--wrap-pad), calc((100% - var(--wrap)) / 2)); }

.col .site-head,
.col .banner,
.col .prose,
.col .split,
.col .approach,
.col .pf-head,
.col .pf-grid,
.col .work,
.col .triple,
.col .form-wrap,
.col .endlinks,
.col .site-foot{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

.col .prose-narrow{ max-width:none; }
.col .panel-note{ margin-inline:var(--gutter); }

.col .seemore{
  max-width:none;
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}
.col .seemore-card{ left:var(--gutter); }

/* ============================ CONTACT: TEL LEFT, EMAIL RIGHT ============================ */
/* .form-wrap > .label sets display:block, which was cancelling the flex row */
.form-wrap > .contact-lines{ display:flex; justify-content:space-between; }
@media (max-width:600px){
  .form-wrap > .contact-lines{ flex-direction:column; align-items:center; gap:1rem; }
}


/* ============================ ABOUT: APPROACH (staggered, like the live site) ============================ */
/* Measured from the reference at a 1050px column: 165×254 photos, 55px to the
   text, the three pairs stepping across and down a 651px band. The first photo
   touches the top of the grey band and the last one touches the bottom.        */

.col .approach{ display:block; padding-top:0; padding-bottom:0; }
.approach-stage{ position:relative; height:651px; }

.approach-stage .approach-item{
  position:absolute;
  display:flex; align-items:center; gap:55px;
}
.approach-stage .approach-item img{ width:165px; aspect-ratio:165/254; object-fit:cover; }
.approach-stage .approach-item:nth-of-type(1){ left:0;     top:0; }
.approach-stage .approach-item:nth-of-type(2){ left:54.7%; top:132px; }
.approach-stage .approach-item:nth-of-type(3){ left:16.8%; top:auto; bottom:0; }

.approach-stage .approach-copy{
  position:absolute; right:0; bottom:48px;
  width:250px; text-align:right;
}
.approach-stage .approach-copy h2{ font-size:2.75rem; margin-bottom:1.6rem; white-space:nowrap; }
.approach-stage .approach-copy p{ max-width:none; font-size:.8125rem; line-height:1.7; }

@media (max-width:900px){
  .approach-stage{
    height:auto;
    display:flex; flex-direction:column; gap:2rem;
    padding-block:3.5rem;
  }
  .approach-stage .approach-item,
  .approach-stage .approach-copy{ position:static; width:auto; }
  .approach-stage .approach-item:nth-of-type(2){ margin-left:auto; flex-direction:row-reverse; text-align:right; }
  .approach-stage .approach-copy{ text-align:left; margin-top:1rem; }
  .approach-stage .approach-item img{ width:140px; aspect-ratio:165/254; }
}

/* ============================ ABOUT: TEAM ROWS ============================ */
/* photo 298px | text | photo 298px, 55px apart, 44px between rows.
   Normal rows: photo left, text left-aligned. .reverse: photo right, text right-aligned. */

.col .split.team{
  grid-template-columns:298px 1fr 298px;
  gap:0 55px;
  align-items:start;
  padding-top:22px; padding-bottom:22px;
}
.col .split.team-first{ padding-top:clamp(3rem,6vw,4rem); }
.col .split.team-last{ padding-bottom:clamp(3rem,6vw,4rem); }

.split.team figure.team-shot{ grid-column:1; grid-row:1; max-width:none; justify-self:stretch; }
.split.team figure.team-shot img{ aspect-ratio:298/387; object-fit:cover; }
.split.team .split-text{ grid-column:2; grid-row:1; padding-top:3.9rem; }
.split.team .split-text h2{ font-size:2.75rem; margin-bottom:1.5rem; }
.split.team .split-text .label{ font-size:.5625rem; margin-bottom:1.1rem; }
.split.team .split-text p{ max-width:none; }

.split.team.reverse figure.team-shot{ grid-column:3; order:0; }
.split.team.reverse .split-text{ text-align:right; }

@media (max-width:999px){
  .col .split.team{ grid-template-columns:minmax(0,260px) 1fr; gap:0 2.5rem; }
  .col .split.team.reverse{ grid-template-columns:1fr minmax(0,260px); }
  .split.team.reverse figure.team-shot{ grid-column:2; }
  .split.team.reverse .split-text{ grid-column:1; }
  .split.team .split-text{ padding-top:2.5rem; }
}
@media (max-width:600px){
  .col .split.team,
  .col .split.team.reverse{ grid-template-columns:1fr; }
  .split.team figure.team-shot,
  .split.team.reverse figure.team-shot{ grid-column:1; grid-row:1; max-width:300px; }
  .split.team .split-text,
  .split.team.reverse .split-text{ grid-column:1; grid-row:2; padding-top:1.6rem; text-align:left; }
  .split.team .split-text h2{ font-size:2.1rem; }
}

/* ============================ CONTACT: NUMBER + EMAIL ACROSS THE FORM WIDTH ============================ */
.col form.enquiry,
.form-wrap > .contact-lines{ max-width:30rem; margin-inline:auto; }

/* ============================ WEDDINGS: "WANT TO SEE MORE" OVERLAP ============================ */
/* Photo takes the right three-quarters of the column; the card sits in the left
   part and overlaps the photo's left edge, centred on it vertically. Both share
   one grid cell row, so the overlap holds at every width.                        */

.col .seemore{
  display:grid;
  grid-template-columns:repeat(12,1fr);
  align-items:center;
}
.col .seemore-photo{ grid-column:4 / 13; grid-row:1; width:auto; margin:0; }
.col .seemore-photo img{ aspect-ratio:3/2; object-fit:cover; }
.col .seemore-card{
  grid-column:1 / 6; grid-row:1;
  position:relative; z-index:2;
  top:auto; left:auto; transform:none;
  width:auto;
}
@media (max-width:760px){
  .col .seemore{ grid-template-columns:1fr; }
  .col .seemore-photo{ grid-column:1; grid-row:1; }
  .col .seemore-card{ grid-column:1; grid-row:2; margin:-3rem 1.25rem 0; }
}
/* keep the two lines on one row, in the smaller type used on the live site */
.form-wrap > .contact-lines{
  flex-wrap:nowrap; gap:1.5rem;
  font-size:.5625rem; font-weight:500; letter-spacing:.14em;
}
.form-wrap > .contact-lines a{ white-space:nowrap; }


/* ============================ IMAGE FOCUS POINTS ============================ */
/* keep heads in frame when a photo is cropped to fit its box */
.banner > img.focus-top{ object-position:center 6%; }   /* weddings banner: groom's head */
.cat img.focus-face{ object-position:center 14%; }      /* home portraits tile: full face */

/* ============================ HOME TESTIMONIAL: GAP BETWEEN PHOTO AND TEXT ============================ */
.say{ gap:10px; }

/* ============================ HOME HERO: KEEP LOGO + NAV READABLE ============================ */
/* A soft dark fade across the top of the slider, under the header, so the white
   logo and links stay legible even on bright photos (like the first slide).
   It only covers the top strip, so the photo itself is untouched.               */
.hero::before{
  content:""; position:absolute; z-index:2;
  left:0; right:0; top:0; height:clamp(9rem,24vh,13rem);
  background:linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 55%, rgba(0,0,0,0) 100%);
  pointer-events:none;
}
.home .site-head .main-nav > ul > li > a{ text-shadow:0 1px 8px rgba(0,0,0,.35); }
.home .site-head .logo img{ filter:drop-shadow(0 1px 6px rgba(0,0,0,.3)); }

/* ============================ COMMERCIAL ============================ */
/* banner: title in the middle, small label down at the bottom edge */
.banner--split .banner-inner{ position:static; }
.banner--split h1{ position:relative; z-index:2; }
.banner--split .label.below{
  position:absolute; z-index:2; left:0; right:0;
  bottom:clamp(1.8rem,5%,3rem); margin:0;
}
/* square 3-up gallery */
.tile-grid.square{ gap:11px; }
.tile-grid.square img{ aspect-ratio:1/1; }
.strong-link{ color:var(--ink); font-weight:700; text-decoration:none; }
.strong-link:hover{ text-decoration:underline; }


/* ============================ VIDEOS PAGE ============================ */
/* Everything sits in the same 1050px column as the rest of the site.
   .land = 16:9 film, .vert = 9:16 portrait reel.                              */

.vpage-feature,
.vpage-group{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
  text-align:center;
}
.vpage-feature{ padding-top:clamp(2.5rem,5vw,4rem); }
.vpage-group{ padding-top:clamp(4.5rem,9vw,7.5rem); }
.vpage-group:last-of-type{ padding-bottom:clamp(4rem,8vw,7rem); }

.vpage-title{
  font-size:clamp(2rem,3.4vw,2.75rem);
  margin:0 0 clamp(2rem,4vw,3.25rem);
}
.vpage-kicker{ display:block; margin-top:clamp(1.6rem,3vw,2.2rem); color:var(--ink); }

.vid{ position:relative; background:#000; overflow:hidden; }
.vid iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.vid.land{ aspect-ratio:16/9; }
.vid.vert{ aspect-ratio:9/16; }

/* wedding: 3 across */
.vgrid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:16px;
}
/* wedding row 3: reel | film | reel — column widths chosen so all three are the same height */
.vrow-vlv{
  display:grid; grid-template-columns:1fr 3.1605fr 1fr;
  gap:16px; margin-top:16px; align-items:start;
}
/* commercial: tall reel on the left, 2×2 films beside it */
.vgrid-com{
  display:grid; grid-template-columns:0.66fr 1fr 1fr;
  gap:16px;
}
.vgrid-com .vid.vert{ grid-row:span 2; aspect-ratio:auto; }

@media (max-width:900px){
  .vgrid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:640px){
  .vgrid,
  .vrow-vlv,
  .vgrid-com{ grid-template-columns:1fr; }
  .vrow-vlv .vid.vert,
  .vgrid-com .vid.vert{ width:min(100%,300px); margin-inline:auto; grid-row:auto; aspect-ratio:9/16; }
}
.banner > img.focus-marina{ object-position:24% 8%; }   /* portraits banner: keep her face in frame, phones too */


/* ============================ COOKIE CONSENT BAR (Google Analytics) ============================ */
.cookie-bar{
  position:fixed; z-index:150;
  left:50%; transform:translateX(-50%);
  bottom:calc(16px + env(safe-area-inset-bottom, 0px));
  width:min(calc(100% - 20px), 44rem);
  background:var(--white); color:var(--body-txt);
  box-shadow:0 8px 30px rgba(0,0,0,.14);
  padding:1.1rem 1.4rem;
  display:flex; align-items:center; gap:1.4rem;
  font-size:.8125rem; line-height:1.6;
}
.cookie-bar p{ margin:0; flex:1; }
.cookie-actions{ display:flex; gap:.6rem; flex-shrink:0; }
.cookie-bar .btn{ margin:0; padding:.75rem 1.3rem; }
.cookie-bar .btn.quiet{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
@media (max-width:600px){
  .cookie-bar{ flex-direction:column; align-items:stretch; text-align:center; }
  .cookie-actions{ justify-content:center; }
}


/* ============================ FOOTER: COPYRIGHT + LEGAL LINKS ON ONE LINE ============================ */
/* © 2026 Carlostee Studio · Privacy Policy · Cookie settings
   Dots are drawn by CSS, so any link added here gets one automatically.
   On very narrow screens the items wrap neatly and stay centred.             */
.foot-legal{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline;
  row-gap:.4rem;
  font-size:.75rem; letter-spacing:.04em; line-height:1.6;
  color:var(--body-txt);
}
.foot-legal > * + *::before{
  content:"·"; display:inline-block; margin:0 .7rem; color:var(--body-txt);
  text-decoration:none;
}
.site-foot .foot-legal a,
.foot-legal .cookie-settings{
  color:var(--body-txt); text-decoration:none;
  background:none; border:0; padding:0; font:inherit; letter-spacing:inherit; cursor:pointer;
}
.site-foot .foot-legal a:hover,
.foot-legal .cookie-settings:hover{ color:var(--ink); }
.site-foot .foot-legal a:hover,
.foot-legal .cookie-settings:hover{ text-decoration:underline; text-underline-offset:3px; }
.foot-legal small{ font-size:inherit; letter-spacing:inherit; }

/* ============================ PRIVACY POLICY PAGE ============================ */
.legal{ padding-left:var(--gutter); padding-right:var(--gutter); }

.legal-head{
  text-align:center;
  padding:clamp(1.25rem,3vw,2.25rem) 0 clamp(1.5rem,3vw,2.25rem);
  border-bottom:1px solid var(--line);
}
.legal-head h1{ font-size:clamp(2.2rem,5vw,3.5rem); margin:.8rem 0 0; }
.legal-updated{ margin:.8rem 0 0; font-size:.8125rem; color:var(--body-txt); }

.legal-layout{
  display:grid; grid-template-columns:15rem 1fr;
  gap:clamp(2.5rem,6vw,5rem);
  padding:clamp(2.5rem,5vw,4rem) 0 clamp(4rem,8vw,6.5rem);
  align-items:start;
}

/* table of contents: sticks beside the text while you scroll on desktop */
.legal-toc{
  position:sticky; top:1.5rem;
  background:var(--panel); padding:1.6rem 1.5rem;
}
.legal-toc .label{ display:block; margin-bottom:1rem; color:var(--ink); }
.legal-toc ol{ margin:0; padding:0; list-style:none; counter-reset:toc; }
.legal-toc li{ counter-increment:toc; }
.legal-toc a{
  display:flex; gap:.7rem; padding:.42rem 0;
  font-size:.8125rem; line-height:1.45; color:var(--body-txt); text-decoration:none;
  border-top:1px solid var(--line);
}
.legal-toc li:first-child a{ border-top:0; }
.legal-toc a::before{
  content:counter(toc, decimal-leading-zero);
  font-size:.6875rem; letter-spacing:.08em; color:var(--ink); padding-top:.1rem; min-width:1.4rem;
}
.legal-toc a:hover{ color:var(--ink); }

/* body text: comfortable line length for reading */
.legal-body{ max-width:44rem; font-size:.9375rem; line-height:1.85; color:var(--body-txt); }
.legal-sec{ scroll-margin-top:1.5rem; }
.legal-sec + .legal-sec{ margin-top:clamp(2.5rem,4.5vw,3.25rem); padding-top:clamp(2.5rem,4.5vw,3.25rem); border-top:1px solid var(--line); }
.legal-sec h2{
  display:flex; align-items:baseline; gap:1rem;
  font-size:clamp(1.45rem,2.4vw,1.85rem); line-height:1.25;
  margin:0 0 1.2rem; color:var(--ink);
}
.legal-num{
  font-family:var(--sans); font-size:.6875rem; font-weight:600; letter-spacing:.12em;
  color:var(--body-txt); flex-shrink:0; transform:translateY(-.2em);
}
.legal-body p{ margin:0 0 1rem; }
.legal-body p:last-child{ margin-bottom:0; }
.legal-body strong{ color:var(--ink); font-weight:600; }
.legal-body a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; overflow-wrap:anywhere; }
.legal-body ul{ margin:0 0 1rem; padding-left:1.2rem; }
.legal-body li{ margin:.3rem 0; padding-left:.3rem; }
.legal-body li::marker{ color:var(--ink); }
.legal-body code{ font-size:.85em; background:var(--panel); padding:.1em .4em; }

.legal-card{
  font-style:normal; background:var(--panel);
  padding:1.3rem 1.5rem; margin:0 0 1.2rem;
  border-left:2px solid var(--ink); line-height:1.9;
}
/* placeholders you still need to fill in */
.legal-card .fill{ background:#fff3c4; color:var(--ink); padding:0 .25em; }

@media (max-width:860px){
  .legal-layout{ grid-template-columns:1fr; gap:2.25rem; }
  .legal-toc{ position:static; }
  .legal-toc ol{ columns:2; column-gap:1.5rem; }
  .legal-toc li{ break-inside:avoid; }
  .legal-toc li:first-child a,
  .legal-toc li a{ border-top:0; border-bottom:1px solid var(--line); }
  .legal-body{ max-width:none; }
}
@media (max-width:520px){
  .legal-toc ol{ columns:1; }
  .legal-toc{ padding:1.3rem 1.2rem; }
  .legal-body{ font-size:.9063rem; }
  .legal-card{ padding:1.1rem 1.1rem; }
}
@media (max-width:480px){
  .foot-legal{ letter-spacing:.01em; }
  .foot-legal > * + *::before{ margin:0 .45rem; }
}


/* ============================ CLICK-TO-LOAD VIDEO PLACEHOLDERS ============================ */
/* Shown until the visitor clicks; only then is Vimeo / YouTube contacted. */
.vid[data-src]{ cursor:pointer; }
.vid-ph{
  position:absolute; inset:0;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:clamp(.55rem,1.2vw,.9rem);
  padding:1rem; text-align:center;
  background:
    radial-gradient(120% 90% at 50% 40%, #3a3a38 0%, #242423 55%, #1a1a1a 100%);
  color:#fff;
  transition:background-color .3s ease;
}
.vid-play{
  width:clamp(2.9rem,5vw,4.1rem); aspect-ratio:1;
  border-radius:50%; border:1px solid rgba(255,255,255,.75);
  background:rgba(255,255,255,.06);
  display:grid; place-items:center; cursor:pointer; padding:0;
  transition:transform .25s ease, background-color .25s ease, border-color .25s ease;
}
.vid-play span{
  width:0; height:0; margin-left:12%;
  border-style:solid; border-color:transparent transparent transparent #fff;
  border-width:.5em 0 .5em .85em;
  font-size:clamp(.8rem,1.4vw,1.05rem);
}
.vid[data-src]:hover .vid-play,
.vid-play:focus-visible{ transform:scale(1.06); background:rgba(255,255,255,.16); border-color:#fff; }
.vid-play:focus-visible{ outline:2px solid #fff; outline-offset:4px; }
.vid-name{
  font-family:var(--serif); font-size:clamp(1rem,1.7vw,1.3rem); line-height:1.25;
  max-width:22ch;
}
.vid.feature .vid-name{ font-size:clamp(1.4rem,3vw,2.2rem); }
/* cover image (stored on this website, so nothing loads from Vimeo/YouTube until play) */
.vid-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-ph:has(.vid-cover){ justify-content:flex-end; padding-bottom:clamp(1rem,2.5vw,1.6rem); }
.vid-ph:has(.vid-cover)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%);
}
.vid-ph:has(.vid-cover) .vid-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  background:rgba(0,0,0,.25);
}
.vid-ph:has(.vid-cover) .vid-name{ position:relative; z-index:2; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.vid[data-src]:hover .vid-ph:has(.vid-cover) .vid-play{ transform:translate(-50%,-50%) scale(1.06); }
.vid-note{
  font-size:.625rem; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(255,255,255,.62);
}
.vid-note a{ color:rgba(255,255,255,.85); text-decoration:underline; text-underline-offset:2px; }
.vid-note a:hover{ color:#fff; }
/* narrow portrait tiles: keep it compact */
.vid.vert .vid-name{ font-size:clamp(.95rem,1.4vw,1.1rem); max-width:12ch; }
.vid.vert /* cover image (stored on this website, so nothing loads from Vimeo/YouTube until play) */
.vid-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vid-ph:has(.vid-cover){ justify-content:flex-end; padding-bottom:clamp(1rem,2.5vw,1.6rem); }
.vid-ph:has(.vid-cover)::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.05) 55%);
}
.vid-ph:has(.vid-cover) .vid-play{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2;
  background:rgba(0,0,0,.25);
}
.vid-ph:has(.vid-cover) .vid-name{ position:relative; z-index:2; text-shadow:0 1px 10px rgba(0,0,0,.4); }
.vid[data-src]:hover .vid-ph:has(.vid-cover) .vid-play{ transform:translate(-50%,-50%) scale(1.06); }
.vid-note{ letter-spacing:.1em; max-width:14ch; line-height:1.7; }
/* cookie bar: Accept and Decline look the same (equal choice, as German regulators expect) */
.cookie-bar p strong{ display:block; color:var(--ink); font-weight:600; letter-spacing:.02em; margin-bottom:.15rem; }
.cookie-bar p a{ color:var(--ink); text-decoration:underline; text-underline-offset:2px; }
.cookie-bar .btn{ min-width:6.5rem; }

/* ============================ HOME: INTRO IN THE SAME COLUMN ============================ */
/* grey background still runs edge to edge; the text sits in the 1050px column */
.home .intro{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}