/* Trisect Media V6.7 — V6 image composition + restrained interactive finish.
   Additive styles. Does not change film/player/gallery/contact logic. */
:root { --tm67-orange:#e9aa3e; --tm67-orange-line:rgba(233,170,62,.94); }

/* The strongest V6 elements are back: full-sized rounded portraits, side type,
   and a substantial orange circle. Motion remains in hybrid.js. */
.hero-photo{position:relative;min-height:594px;isolation:isolate}
.hero-photo .main-photo{
 width:82%;height:535px;object-position:center top;
 border-radius:23px;filter:saturate(1) contrast(1.005);
 box-shadow:0 23px 78px rgba(0,0,0,.34);
 translate:var(--hy-main-x,0px) var(--hy-main-y,0px);
}
.hero-photo .secondary-photo{
 width:48%;height:338px;right:0;bottom:-26px;
 border-radius:23px;filter:none;object-position:center center;
 box-shadow:0 0 0 8px #101210,0 19px 49px rgba(0,0,0,.42);
 translate:var(--hy-small-x,0px) var(--hy-small-y,0px);
}
.hero-photo::after{
 content:'';position:absolute;width:157px;height:157px;
 top:-34px;right:-20px;border-radius:50%;
 border:2px solid rgba(239,172,62,.85);opacity:1;z-index:-1;
 box-shadow:0 0 45px rgba(233,170,62,.035);
}
.hero-photo .vertical-text{
 right:-19px;top:183px;color:#b9bdb7;font-size:10px;
 font-weight:650;letter-spacing:.22em;text-transform:uppercase;
 text-shadow:0 1px 6px rgba(0,0,0,.4);
}
.hero-photo .hy-frame-label,.hero-photo .hy-image-index,.hero-photo .hy-photo-corner{display:none!important}

/* An optional third, film-inspired contact-print. Its scale is deliberately
   modest so the two original images continue to own the composition. */
.hero-photo .tertiary-photo{
 position:absolute;right:2%;top:31px;width:28%;height:143px;
 z-index:2;border-radius:13px;object-fit:cover;object-position:center;
 background:#242622;filter:saturate(.98);
 box-shadow:0 0 0 6px #101210,0 13px 40px rgba(0,0,0,.42);
 translate:var(--tm67-third-x,0px) var(--tm67-third-y,0px);
 transition:translate .65s cubic-bezier(.2,.8,.2,1),filter .5s,box-shadow .5s;
}
.hero-photo .tertiary-photo[hidden]{display:none!important}
.hero-photo:hover .tertiary-photo{filter:saturate(1.075);box-shadow:0 0 0 6px #101210,0 19px 48px rgba(0,0,0,.5)}

/* Glow: much quieter than PRISM, and never captures mouse interaction. */
.tm67-cursor-aura{position:fixed;width:320px;height:320px;left:0;top:0;z-index:7;pointer-events:none;
 border-radius:50%;opacity:0;transform:translate3d(-500px,-500px,0);
 background:radial-gradient(circle,rgba(230,151,45,.066) 0%,rgba(230,151,45,.029) 36%,transparent 69%);
 transition:opacity .45s ease;mix-blend-mode:screen;will-change:transform}
.tm67-cursor-aura.is-active{opacity:1}

/* Hover accents: fade, don't pop. The orange outline is a transient flourish,
   not a permanent border around every element. */
:is(.button,.nav-contact,.filter-button,.menu-toggle,.album-back,
 .album-view,.contact-form button,.studio-back-to-top,.photo-filter-row button){
 transition:color .42s ease,background-color .42s ease,border-color .5s ease,
 box-shadow .48s cubic-bezier(.2,.8,.2,1),transform .42s ease!important;
}
.filter-button:not([aria-pressed="true"]):hover,
.photo-filter-row .filter-button:not([aria-pressed="true"]):hover,
.nav .nav-contact:hover,.menu-toggle:hover,.album-back:hover,
.contact-form button:hover{
 border-color:var(--tm67-orange-line)!important;
 box-shadow:0 0 0 1px rgba(233,170,62,.29);
}
.filter-button:focus-visible,.button:focus-visible,.menu-toggle:focus-visible,
.inline-link:focus-visible,.nav a:focus-visible,.photo-card:focus-visible,
.film-art:focus-visible,.hy-discipline-index a:focus-visible{
 outline:2px solid var(--tm67-orange);outline-offset:4px;
}
.button:hover{border-color:var(--tm67-orange-line);box-shadow:0 0 0 1px rgba(233,170,62,.24)}
.album-view:hover{border-color:var(--tm67-orange-line)!important;box-shadow:0 0 0 1px rgba(233,170,62,.26)}
.photo-card::before,.film-art::before{
 content:'';position:absolute;inset:0;pointer-events:none;
 border:2px solid var(--tm67-orange-line);border-radius:inherit;
 z-index:5;opacity:0;transition:opacity .52s cubic-bezier(.2,.8,.2,1);
}
.photo-card:hover::before,.photo-card:focus-visible::before,
.film-card:hover .film-art::before,.film-art:focus-visible::before{opacity:1}
.photo-card,.film-art{transition:box-shadow .52s ease,transform .5s ease}
/* Existing V6.6 glow handles service-card hover; make it a bit more gradual. */
.service-card::before{transition:opacity .7s cubic-bezier(.2,.8,.2,1)!important}

/* The title follows the interaction, instead of hard-switching colours. */
:is(.hy-discipline-index strong,.hy-discipline-index .hy-index-number,
 .film-details h3,.photo-info b,.service-card h3,.footer-nav a,
 .nav a:not(.nav-contact),.inline-link,.album-view){
 transition:color .47s ease,text-shadow .47s ease,opacity .47s ease,
 border-color .47s ease,background-color .47s ease;
}
.hy-discipline-index a:hover strong,.hy-discipline-index a:focus-visible strong,
.film-card:hover .film-details h3,.film-card:focus-within .film-details h3,
.photo-card:hover .photo-info b,.photo-card:focus-visible .photo-info b,
.service-card:hover h3,.service-card:focus-visible h3,
.footer-nav a:hover,.nav a:not(.nav-contact):hover,.inline-link:hover{
 color:var(--tm67-orange);text-shadow:0 0 20px rgba(235,168,55,.095);
}
.hy-discipline-index a:hover .hy-index-number{color:var(--tm67-orange)}
/* Keep photo grids equal-sized from V6.6 across all filters. */
#all-photos.photography-grid{grid-template-columns:repeat(2,minmax(0,1fr))}

@media(min-width:761px) and (max-width:1100px){
 .hero-photo{min-height:490px}
 .hero-photo .main-photo{height:443px}
 .hero-photo .secondary-photo{height:265px}
 .hero-photo .tertiary-photo{height:118px;top:25px}
 .hero-photo::after{width:130px;height:130px}
}
@media(max-width:760px){
 .hero-photo{min-height:444px}
 .hero-photo .main-photo{width:81%;height:423px;border-radius:19px}
 .hero-photo .secondary-photo{width:48%;height:265px;right:0;bottom:-17px;border-radius:17px;box-shadow:0 0 0 7px #101210,0 14px 30px rgba(0,0,0,.45)}
 .hero-photo::after{width:134px;height:134px;top:-24px;right:-7px;border-width:2px}
 .hero-photo .vertical-text{right:-1px;top:173px;letter-spacing:.14em;font-size:9px}
 .hero-photo .tertiary-photo{width:27%;height:116px;top:23px;right:1%;border-radius:11px;box-shadow:0 0 0 5px #101210,0 11px 32px #0006}
 .tm67-cursor-aura{display:none!important}
 #all-photos.photography-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:440px){
 .hero-photo{min-height:344px}
 .hero-photo .main-photo{height:326px;width:82%;border-radius:18px}
 .hero-photo .secondary-photo{height:181px;width:48%;bottom:-7px;border-radius:15px}
 .hero-photo .tertiary-photo{width:27%;height:90px;top:18px;right:1%;border-radius:9px;box-shadow:0 0 0 4px #101210,0 9px 25px #0006}
 .hero-photo::after{width:101px;height:101px;right:-9px;top:-15px}
 .hero-photo .vertical-text{top:124px;font-size:8px}
}
@media(prefers-reduced-motion:reduce){
 .tm67-cursor-aura{display:none!important}
 .hero-photo .tertiary-photo{translate:0 0!important;transition:none!important}
 .photo-card::before,.film-art::before,.service-card::before{transition:none!important}
}


/* V6.8 / final quiet refinement -----------------------------------------
   No new overlays, card effects or extra JavaScript libraries.
   Preserve V6.7 parallax through CSS individual translate + rotate properties.
*/
.tm67-cursor-aura {display:none!important}

/* Bring the vertical signature into a visual dialogue with the orange ring,
   but place its glyphs outside the image footprint so they remain legible. */
.hero-photo .vertical-text {
  right:-24px;
  top:137px;
  z-index:4;
  color:#c6c9c2;
  font-weight:650;
  text-shadow:0 2px 9px rgba(0,0,0,.7);
  pointer-events:none;
}

/* Tiny photographic rotation, not a theatrical spin: the image planes gently
   settle when the visitor hovers over the group. Independent rotate means the
   original cursor translations continue to work unchanged. */
@media(hover:hover) and (pointer:fine) {
  .hero-photo .main-photo {
    rotate:-.42deg;
    transition:translate .5s cubic-bezier(.2,.8,.2,1), rotate .9s cubic-bezier(.19,1,.22,1), filter .5s ease, box-shadow .5s ease;
  }
  .hero-photo .secondary-photo {
    rotate:.72deg;
    transition:translate .5s cubic-bezier(.2,.8,.2,1), rotate 1s cubic-bezier(.19,1,.22,1), box-shadow .5s ease;
  }
  .hero-photo .tertiary-photo {
    rotate:-1deg;
    transition:translate .65s cubic-bezier(.2,.8,.2,1),rotate 1s cubic-bezier(.19,1,.22,1), filter .5s, box-shadow .5s;
  }
  .hero-photo:hover .main-photo {rotate:.12deg}
  .hero-photo:hover .secondary-photo {rotate:-.12deg}
  .hero-photo:hover .tertiary-photo {rotate:.3deg}
}

/* All contact links and network links use the same deliberate orange fade.
   This covers CMS-populated links that begin as hidden attributes. */
.contact-points .socials a,
.contact-points a[data-contact-email],
.site-footer .footer-nav a,
.site-footer a[data-social] {
  color:inherit;
  transition:color .42s cubic-bezier(.2,.8,.2,1),text-shadow .42s ease;
}
.contact-points .socials a:hover,
.contact-points .socials a:focus-visible,
.contact-points a[data-contact-email]:hover,
.contact-points a[data-contact-email]:focus-visible,
.site-footer .footer-nav a:hover,
.site-footer .footer-nav a:focus-visible,
.site-footer a[data-social]:hover,
.site-footer a[data-social]:focus-visible {
  color:var(--tm67-orange,#e9aa3e)!important;
  text-shadow:0 0 14px rgba(233,170,62,.085);
}
.contact-points a:focus-visible {outline:2px solid var(--tm67-orange,#e9aa3e);outline-offset:5px;border-radius:2px}

@media(min-width:761px) and (max-width:1100px) {
  .hero-photo .vertical-text {right:-16px;top:116px}
}
@media(max-width:760px) {
  .hero-photo .vertical-text {right:-17px;top:111px}
}
@media(max-width:440px) {
  .hero-photo .vertical-text {right:-17px;top:95px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-photo .main-photo,.hero-photo .secondary-photo,.hero-photo .tertiary-photo {rotate:0deg!important;transition:none!important}
  .contact-points a,.site-footer .footer-nav a {transition:none!important}
}


/* ===========================================================================
   TRISECT MEDIA V6.9 — STRAIGHT AT REST / PORTRAIT-READY ABOUT
   Overrides the V6.8 initial hover tilt, while keeping cursor parallax separate.
   ========================================================================= */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference) {
  .hero-photo .main-photo,
  .hero-photo .secondary-photo,
  .hero-photo .tertiary-photo,
  .hero-photo:hover .main-photo,
  .hero-photo:hover .secondary-photo,
  .hero-photo:hover .tertiary-photo {
    rotate:0deg;
    transform-origin:center center;
  }
  .hero-photo .main-photo {
    transition:translate .5s cubic-bezier(.2,.8,.2,1), rotate .8s cubic-bezier(.18,.75,.18,1), filter .5s ease, box-shadow .5s ease;
  }
  .hero-photo .secondary-photo {
    transition:translate .5s cubic-bezier(.2,.8,.2,1), rotate .85s cubic-bezier(.18,.75,.18,1), filter .5s ease, box-shadow .5s ease;
  }
  .hero-photo .tertiary-photo {
    transition:translate .65s cubic-bezier(.2,.8,.2,1), rotate .8s cubic-bezier(.18,.75,.18,1),filter .5s ease,box-shadow .5s ease;
  }
  /* Each frame responds individually; hovering empty space doesn't tilt it. */
  .hero-photo .main-photo:hover {rotate:-.85deg}
  .hero-photo .secondary-photo:hover {rotate:.95deg}
  .hero-photo .tertiary-photo:hover {rotate:-1.1deg}
}

/* Existing two-column About page, now with a proper tall portrait treatment. */
.about-layout {align-items:center;gap:clamp(34px,5vw,86px)}
.about-layout > img {
  width:100%;
  height:clamp(520px,49vw,710px);
  max-height:none;
  object-fit:cover;
  object-position:50% 35%;
  border-radius:30px;
  border:1px solid rgba(242,237,222,.09);
  box-shadow:0 28px 78px rgba(0,0,0,.3);
}
.about-layout > div {min-width:0}
.about-layout p {line-height:1.82}
@media(max-width:760px) {
  .about-layout {gap:35px}
  .about-layout > img {
    height:clamp(400px,121vw,575px);
    border-radius:23px;
    object-position:50% 33%;
  }
}
@media(max-width:440px) {
  .about-layout > img {border-radius:20px}
}
@media(prefers-reduced-motion:reduce) {
  .hero-photo .main-photo,
  .hero-photo .secondary-photo,
  .hero-photo .tertiary-photo {rotate:0deg!important}
}