/* photos.css — real studio photographs (owner's own shoot, 2026-10-25).
   Never filtered, tinted or overlaid: the images are already graded.
   No borders, shadows or backgrounds — the photo sits straight on the
   room's ground (pure #000 dark / paper light). No captions: alt text only.
   Treatment: Mickey Nox full-bleed banner for the wide shots, Julia
   Borelli contained, un-cropped, generously spaced portraits for the rest. */
.ph{margin:0; padding:0; background:transparent; line-height:0;}
.ph img{display:block; width:100%; height:auto; border:0; background:transparent; border-radius:var(--img-radius);}

/* full-bleed band (about header, home) */
.ph--bleed{width:100%;}
.ph--bleed img{aspect-ratio:3/2; object-fit:cover;}
@media (min-width:900px){
  .ph--bleed img{aspect-ratio:2/1;}

}

/* breathing room above/below contained photos */
.ph-sec{padding:var(--sec-pad) var(--page-x); background:var(--paper); position:relative; z-index:3;}
.ph-sec--bleed{padding:0; margin:var(--sec-pad) 0;}

#bio{border-top:1px solid var(--hairline);}
/* about: layout C. Wide 16:9 on top, two equal squares below, all on one
   grid edge. The photo column's top meets the first line of the bio. */
#bio .about-photos{display:grid; gap:clamp(12px, 1.6vw, 24px); margin:0 0 var(--sec-pad);}
#bio .about-photos .ph--wide img{aspect-ratio:16/9; object-fit:cover;}
#bio .about-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:inherit;}
#bio .about-pair img{aspect-ratio:1/1; object-fit:cover;}
@media (min-width:900px){
  #bio .bio-grid{align-items:start;}
  /* same frame as Services: a full-width rule under the header, photos and
     bio start one equal gap below it, photos end the same gap above the next line */
  #bio .about-photos{margin:clamp(28px, 3.2vw, 56px) 0;}
  #bio .bio-copy p:first-child{text-box:trim-start cap alphabetic;}
}

/* services: rows left, one square photo right, its top on the first row's
   title. One image: three short rows can't carry a taller photo column. */
.svc-photos{padding:0 var(--page-x) var(--sec-pad);}
.svc-photos img{aspect-ratio:1/1; object-fit:cover;}
@media (min-width:900px){
  .svc-panel .svc-grid{
    grid-template-columns:minmax(0,2fr) minmax(0,1fr);
    column-gap:clamp(40px, 6vw, 112px); align-items:start; padding-right:var(--page-x);
  }
  .svc-panel .svc-rows .c-row{padding-right:0;}
  /* one frame: a single top rule runs the full width over both columns and
     the photo hangs from it; the rows drop their own half-width lines */
  .svc-panel .svc-grid{border-top:1px solid var(--hairline);}
  .svc-panel .svc-rows, .svc-panel .svc-rows .c-rows{border-top:none;}
  /* photo spans exactly the three rows: same top rule, same bottom edge */
  .svc-panel .svc-grid{align-items:stretch;}
  /* photo + last row end together on the section's bottom rule: no forced
     full-screen height on the page that carries the photo */
  .svc-panel:has(.svc-photos){min-height:0;}
  .svc-panel .svc-rows{padding-bottom:0;}
  /* equal gap above and below: the photo sits centred between the top rule
     and the section's bottom rule */
  .svc-photos{padding:clamp(28px, 3.2vw, 56px) 0; display:flex; align-items:center;}
  .svc-photos .ph{flex:1;}
  .svc-photos img{aspect-ratio:1/1; object-fit:cover; object-position:60% 55%;}
}

/* links: 2:1 studio strip across the full column, above the wordmark */
.links-strip{width:100%; margin:0 0 28px;}
.links-strip img{aspect-ratio:2/1; object-fit:cover;}


/* pages that carry a photo: the motif band steps down so the photo, not
   the graphic, is the main image on the page */
.c-motif-band.c-motif-band--slim{height:clamp(64px, 6.5vw, 108px); margin:0 0 var(--r4);}
/* services: the motif closes the page, between the rows and the footer */
/* one closing treatment everywhere: full-width hairline directly above the
   band, equal air above and below (the line sits at the top of the upper air,
   drawn by ::before so the canvas box keeps its exact size) */
.c-motif-band.c-motif-band--close{--close-air:clamp(32px, 4vw, 64px); height:clamp(48px, 4.5vw, 80px); margin:var(--close-air) 0; overflow:visible;}
.c-motif-band--close::before{content:""; position:absolute; left:0; right:0; top:calc(-1 * var(--close-air)); height:1px; background:var(--hairline);}
/* where the section above already ends on a full-width line, don't double it */
.svc-panel + .c-motif-band--close::before,
.work-tiles + .c-motif-band--close::before{display:none;}

/* a full-width hairline directly under the page header on every page that
   doesn't already draw one (the other pages get theirs from their first section) */
.c-pagehead + .prj-body{border-top:1px solid var(--hairline);}
.c-pagehead + .c-steps{border-top:1px solid var(--hairline);}
body.is-enquire-mode .c-pagehead{border-bottom:1px solid var(--hairline);}
/* testimonial: the "fields marked" note closes the header, with the same air
   under it as the intro text has on other pages */
.tst-inner .required-note{margin-bottom:var(--r6);}
/* /start/ on phones resets the band's size/margins by id; keep the shared closing treatment */
#page-start .c-motif-band.c-motif-band--close{height:clamp(48px, 4.5vw, 80px); margin:var(--close-air) 0;}

/* inner pages: the motif fills the header's empty right half, inside the page
   gutter (right edge on the nav button's edge). Each band is drawn whole
   within its box (data-motif-params x0/width), never clipped. Hidden on phones. */
.c-pagehead > .c-motif-band--head{display:none;}
@media (min-width:900px){
  .c-pagehead > .c-motif-band--head{
    display:block; position:absolute;
    /* spans the header text block (eyebrow to intro) so the shape keeps its
       proportions; lightness comes from fewer lines, not squashing */
    top:calc(var(--nav-h) + var(--sec-pad)); bottom:var(--r6); margin:0;
    left:55%; right:var(--page-x); width:auto; height:auto;
  }
}

/* no prices on the site (2026-10-28): "enquire" stands alone at the row end,
   so drop the divider that used to separate it from the price */
.c-row-end .c-row-enq{border-left:none; padding-left:0; min-width:0;}

/* service pages (2026-10-28 tidy): one "what to send" list, single column,
   with the file-prep PDFs as its last rows (no separate section); the add-on
   reads as a quiet line inside its option row, not a second row */
.c-send__list{grid-template-columns:minmax(0,1fr) !important; max-width:calc(56rem + 2 * var(--page-x)); box-sizing:border-box;}
.c-send__list li:last-child{border-bottom:1px solid var(--hairline);}
.c-send__list li.c-send__file{display:block; padding:0;}
.c-send__file .c-files__row{padding-left:2.75rem;}
@media (max-width:640px){ .c-send__file .c-files__row{padding-left:2.25rem;} }
.opt-panel .c-addon::before{display:none;}
.opt-panel .c-addon{padding-top:0;}

/* footer: just "get in touch." now (label + sub-line dropped 2026-10-28) —
   give the form its own air under the heading */
.site-footer h2 + .c-enquiring + .sf-form, .site-footer h2 + .sf-form{margin-top:clamp(24px, 2.4vw, 36px);}
.site-footer h2{margin-bottom:0;}

/* curved image corners (owner 2026-10-28, replaces the square-corner rule):
   one radius for every photo and every cover-art tile */
:root{--img-radius:clamp(8px, 0.8vw, 14px);}
img[src*="/assets/art/"]{border-radius:var(--img-radius);}

/* buttons share the image language at a smaller scale: a tiny 4px curve on
   every bordered button (owner 2026-10-28). Lines, dividers and form fields
   stay square. */
:root{--btn-radius:4px;}
.nav-links a.cta, .cta, .panel-cta, .hero-cta, .static-cta, .learn-cta,
.c-cta, .cta-main, .btn-secondary, .gform-submit, .sf-submit{border-radius:var(--btn-radius);}