/* ==========================================================================
   COMPONENTS — visual styling per component (colors, type, hover states)
   ========================================================================== */

/* ---------- Site header / nav ---------- */
.header{
  background:linear-gradient(to bottom, rgba(var(--scrim-rgb),var(--header-scrim)), rgba(var(--scrim-rgb),0));
  backdrop-filter:blur(0.2rem);
  transition:background .3s ease;
}
.header--scrolled{
  background:rgba(var(--scrim-rgb),0.92);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(1rem);
}
.header__brand{
  font-family:var(--serif);
  font-size:1.9rem;
  letter-spacing:0.02em;
}
.header__brand b{ font-weight:600; }
.header__logo{
  width:3rem;
  height:3rem;
  object-fit:contain;
  filter:var(--logo-filter);
  opacity:0.92;
}
.header__links{
  font-size:1.4rem;
  color:var(--text-muted);
}
.header__link{ transition:color .2s ease; }
.header__link:hover{ color:var(--brass); }
.header__cta{
  border:1px solid var(--brass-line);
  color:var(--brass);
  padding:0.9rem 2rem;
  font-size:1.4rem;
  letter-spacing:0.03em;
  transition:background .2s ease, color .2s ease;
}
.header__cta:hover{ background:var(--brass); color:var(--on-brass); }

/* ---------- Hero ---------- */
.hero{
  background:
    linear-gradient(180deg, rgba(var(--scrim-rgb),var(--hero-scrim-1)) 0%, rgba(var(--scrim-rgb),var(--hero-scrim-2)) 55%, rgba(var(--scrim-rgb),var(--hero-scrim-3)) 100%),
    url('../assets/images/bg-frame-for-frames.webp') center/cover no-repeat;
}
.hero__eyebrow{ margin-bottom:2.2rem; display:block; }
.hero__title{
  font-size:clamp(3.8rem, 6vw, 7.4rem);
  max-width:90rem;
  color:var(--text-strong);
}
.hero__subtitle{
  margin-top:2.4rem;
  max-width:54rem;
  font-size:1.7rem;
  color:var(--text-soft);
}

/* ---------- Trust bar ---------- */
.trust{
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg-alt);
  padding:3.4rem 0;
}
.trust__label{
  font-size:1.3rem;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--brass);
  font-weight:500;
  white-space:nowrap;
}
.trust__names{
  font-family:var(--serif);
  font-size:1.6rem;
  line-height:1.2;
  color:var(--text-soft);
  letter-spacing:0.01em;
}
.trust__name{ opacity:0.75; transition:opacity .2s ease; white-space:nowrap; }
.trust__name:hover{ opacity:1; color:var(--brass); }

/* ---------- About (Z pattern) ---------- */
.about__copy p{
  color:var(--text-muted);
  font-size:1.6rem;
  margin-bottom:2rem;
}
.about__copy p:last-child{ margin-bottom:0; }
.about__copy strong{ color:var(--text); font-weight:500; }
.about__title{ margin:1.6rem 0 2.4rem; font-size:clamp(2.6rem,3.4vw,3.6rem); }
.about__media img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  filter:grayscale(15%);
}
/* Focus lock: brackets slide inwards and a REC timecode fades in. Hover-capable
   devices trigger it on hover; touch devices get .is-focused once on scroll-in. */
.about__focus{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.about__focus-corner{
  position:absolute;
  width:3.2rem;
  height:3.2rem;
  border:0 solid var(--brass);
  opacity:0;
  transition:opacity .25s ease, transform .45s cubic-bezier(.2,.8,.2,1);
}
.about__focus-corner--tl{ top:7%; left:7%; border-width:2px 0 0 2px; transform:translate(-2.4rem,-2.4rem); }
.about__focus-corner--tr{ top:7%; right:7%; border-width:2px 2px 0 0; transform:translate(2.4rem,-2.4rem); }
.about__focus-corner--bl{ bottom:7%; left:7%; border-width:0 0 2px 2px; transform:translate(-2.4rem,2.4rem); }
.about__focus-corner--br{ bottom:7%; right:7%; border-width:0 2px 2px 0; transform:translate(2.4rem,2.4rem); }
.about__rec{
  position:absolute;
  top:calc(7% + 1.8rem);
  right:calc(7% + 1.8rem);
  display:flex;
  align-items:center;
  gap:0.8rem;
  padding:0.6rem 1rem;
  background:rgba(11,13,16,0.6);
  color:#EDEDE7;
  font-family:var(--sans);
  font-size:1.3rem;
  letter-spacing:0.14em;
  font-variant-numeric:tabular-nums;
  opacity:0;
  transition:opacity .3s ease .2s;
}
.about__rec-dot{
  width:0.8rem;
  height:0.8rem;
  border-radius:50%;
  background:#E5484D;
}
/* Clips the slow push-in; the corner motif and stat box stay outside it. */
.about__frame{ overflow:hidden; }
/* A transformed img paints like a positioned element, so lift the static
   viewfinder corners above it while zoomed. */
.about__media::before,
.about__media::after{ z-index:1; }
.about__frame img{ display:block; transition:filter .4s ease, transform 1.8s cubic-bezier(.25,.1,.25,1); }
@media (hover:hover){
  .about__media:hover .about__focus-corner{ opacity:1; transform:none; }
  .about__media:hover .about__rec{ opacity:1; }
  .about__media:hover .about__rec-dot{ animation:about-rec-blink 1s steps(1) infinite; }
  .about__media:hover img{ filter:grayscale(15%) brightness(1.06); transform:scale(1.08); }
}
.about__media.is-focused .about__focus-corner{ opacity:1; transform:none; }
.about__media.is-focused .about__rec{ opacity:1; }
.about__media.is-focused img{ filter:grayscale(15%) brightness(1.06); transform:scale(1.08); }
.about__media.is-focused .about__rec-dot{ animation:about-rec-blink 1s steps(1) infinite; }
@keyframes about-rec-blink{ 50%{ opacity:0.2; } }
@media (prefers-reduced-motion: reduce){
  .about__rec-dot{ animation:none !important; }
  .about__media img{ transform:none !important; }
}
@media (max-width: 620px){
  .about__focus-corner{ width:2.4rem; height:2.4rem; }
  .about__rec{ font-size:1.2rem; padding:0.5rem 0.8rem; }
}

.about__stat{
  position:absolute;
  bottom:-2.8rem;
  left:-2.8rem;
  background:var(--bg);
  border:1px solid var(--brass-line);
  padding:2.4rem 2.8rem;
}
.about__stat-number{
  font-family:var(--serif);
  font-size:3.4rem;
  color:var(--brass);
  line-height:1;
}
.about__stat-caption{
  font-size:1.4rem;
  color:var(--text-muted);
  margin-top:0.8rem;
  letter-spacing:0.03em;
}

/* ---------- Solutions + Gallery (full-bleed) ---------- */
.solutions-gallery{ background:var(--bg); }
.solutions-gallery__eyebrow{ margin-bottom:1.8rem; }
.solutions-gallery__title{ font-size:clamp(2.8rem, 2.4vw, 4.4rem); margin-bottom:2.4rem; }
.solutions-gallery__intro-text{ color:var(--text-muted); font-size:1.8rem; line-height:1.6; max-width:56rem; }
.solutions-gallery__departments{ border-top:1px solid var(--line); }
.solutions-gallery__department-icon{
  width:2.4rem; height:2.4rem;
  color:var(--brass);
  flex-shrink:0;
  margin-top:0.2rem;
}
.solutions-gallery__department-name{
  font-size:1.55rem;
  font-weight:500;
  color:var(--text);
  display:block;
  line-height:1.3;
}
.solutions-gallery__department-desc{
  font-size:1.4rem;
  color:var(--text-muted);
  margin-top:0.4rem;
  line-height:1.4;
}
.solutions-gallery__gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(25%) contrast(1.03);
  transition:filter .3s ease, transform .4s ease;
}
.solutions-gallery__gallery-item:hover img{ filter:grayscale(0%); transform:scale(1.03); }

/* ---------- Solutions grid (Production Solutions cards) ---------- */
.solutions{
  background:var(--bg-alt);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.solutions__grid{
  background:var(--line);
  border:1px solid var(--line);
}
.solutions__card{
  background:var(--bg);
  padding:4rem 3.4rem;
  transition:background .25s ease;
}
.solutions__card:hover{ background:var(--bg-alt); }
.solutions__card-index{
  font-family:var(--serif);
  font-style:italic;
  color:var(--brass);
  font-size:1.4rem;
  margin-bottom:2.2rem;
  display:block;
}
.solutions__card-title{
  font-size:2rem;
  margin-bottom:1.4rem;
  font-weight:500;
}
.solutions__card-text{
  font-size:1.45rem;
  color:var(--text-muted);
  line-height:1.65;
}

/* ---------- Vertical video ---------- */
.vertical-video{ background:var(--bg); }
.vertical-video__visual{ border:1px solid var(--line); }
.vertical-video__visual img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(20%);
  display:block;
}
.vertical-video__visual video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.vertical-video__eyebrow{ display:block; margin-bottom:1.6rem; }
.vertical-video__title{
  font-size:clamp(2.8rem, 3.4vw, 4rem);
  margin-bottom:1.8rem;
}
.vertical-video__text{
  color:var(--text-muted);
  font-size:1.6rem;
  max-width:56rem;
  margin-bottom:2.8rem;
}
.vertical-video__list{
  list-style:none;
  margin-bottom:3.6rem;
  max-width:56rem;
}
.vertical-video__list-item{
  font-size:1.45rem;
  color:var(--text-muted);
  padding:1.2rem 0;
  border-top:1px solid var(--line);
  padding-left:2.2rem;
  position:relative;
}
.vertical-video__list-item:first-child{ border-top:none; }
.vertical-video__list-item::before{
  content:"—";
  color:var(--brass);
  position:absolute;
  left:0;
}

/* ---------- Team ---------- */
/* Vertical Video above shares the same background. Without an edge the two
   paddings read as one large gap; the hairline marks the change of topic,
   like the colour changes and lines at the other section boundaries. */
.team{ border-top:1px solid var(--line); }
.team__card{ text-align:left; }
.team__photo::after{
  content:"";
  position:absolute;
  inset:0;
  border:1px solid var(--line);
}
.team__photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter:grayscale(35%);
  transition:filter .3s ease;
}
.team__card:hover .team__photo img{ filter:grayscale(0%); }
.team__name{
  font-size:1.9rem;
  margin-bottom:0.6rem;
}
.team__role{
  font-size:1.4rem;
  color:var(--brass);
  letter-spacing:0.03em;
}

/* ---------- Contact ---------- */
.contact{
  padding:9.6rem 3.2rem;
  background:var(--bg-alt);
  border-top:1px solid var(--line);
}
.contact__card{
  background:var(--bg);
  border:1px solid var(--line);
  border-radius:0.6rem;
}
.contact__eyebrow{ display:block; margin-bottom:1.4rem; }
.contact__title{ font-size:clamp(2.4rem,2.6vw,3.2rem); margin-bottom:1.4rem; }
.contact__intro{ color:var(--text-muted); font-size:1.5rem; margin-bottom:3.2rem; }
.contact__benefit-icon{
  width:2.6rem;
  height:2.6rem;
  color:var(--brass);
  margin-bottom:1.6rem;
}
.contact__benefit-title{
  /* h3 for a correct outline, but styled like body text, not the serif headings */
  font-family:var(--sans);
  letter-spacing:normal;
  line-height:1.4;
  font-size:1.5rem;
  font-weight:500;
  margin-bottom:0.8rem;
}
.contact__benefit-text{
  font-size:1.4rem;
  color:var(--text-muted);
  line-height:1.55;
}

.contact__field label{
  font-size:1.3rem;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.contact__form input,
.contact__form select,
.contact__form textarea{
  /* Fields fill their column and may shrink below their intrinsic width; a
     select is otherwise at least as wide as its longest option. */
  width:100%;
  min-width:0;
  background:transparent;
  border:1px solid var(--line);
  color:var(--text);
  padding:1.1rem 1.3rem;
  font-size:1.4rem;
  font-family:var(--sans);
  outline:none;
  transition:border-color .2s ease;
}
.contact__form input:focus,
.contact__form select:focus,
.contact__form textarea:focus{ border-color:var(--brass); }
.contact__form input::placeholder,
.contact__form textarea::placeholder{ color:var(--text-faint); }
.contact__form select{
  appearance:none;
  /* Room for the arrow; long options are cut with an ellipsis on narrow screens. */
  padding-right:3.6rem;
  text-overflow:ellipsis;
  background:transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%23C6A15B" stroke-width="1.4" fill="none"/></svg>') no-repeat right 1.4rem center;
}
/* The arrow is baked into a data-URI, so its colour cannot come from a
   variable — the light palette needs its own copy with the darker brass. */
:root[data-theme="light"] .contact__form select{
  background:transparent url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8"><path d="M1 1l5 5 5-5" stroke="%238A6A24" stroke-width="1.4" fill="none"/></svg>') no-repeat right 1.4rem center;
}
.contact__form select option{ background:var(--bg-alt); color:var(--text); }
.contact__form select optgroup{ background:var(--bg-alt); color:var(--text-muted); font-style:normal; font-weight:500; }
.contact__form textarea{ resize:vertical; min-height:7.2rem; font-family:var(--sans); }

.contact__submit{ margin-top:0.4rem; }

.contact__success{
  display:none;
  margin-top:1.6rem;
  font-size:1.4rem;
  color:var(--brass);
  border:1px solid var(--brass-line);
  padding:1.2rem 1.4rem;
}
.contact__success--visible{ display:block; }

.contact__media img{
  display:block;
  width:100%;
  height:100%;
  min-height:100%;
  object-fit:cover;
  filter:contrast(1.05);
}

/* ---------- Footer ---------- */
.site-footer{
  padding:5.6rem 0 4rem;
  border-top:1px solid var(--line);
}
.site-footer__brand{
  font-family:var(--serif);
  font-size:1.7rem;
}
.site-footer__follow{ display:flex; align-items:center; gap:1.6rem; }
.site-footer__follow-label{ font-size:1.4rem; color:var(--text-muted); }
.site-footer__icons{ display:flex; gap:1rem; }
/* 4.4rem hit area so the icons stay comfortable to tap on touch screens. */
.site-footer__icon-link{
  display:flex;
  align-items:center;
  justify-content:center;
  width:4.4rem;
  height:4.4rem;
  padding:0;
  background:none;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.site-footer__icon-link:hover{ color:var(--brass); border-color:var(--brass-line); }
.site-footer__icon-link svg{ width:2rem; height:2rem; }
.site-footer__share-group{ position:relative; display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; }
/* Sits below the icons so the confirmation never shifts the layout. */
.site-footer__share-status{ position:absolute; right:0; top:calc(100% + 0.6rem); font-size:1.4rem; color:var(--brass); }
.site-footer__logo{
  width:2.4rem;
  height:2.4rem;
  object-fit:contain;
  filter:var(--logo-filter);
  opacity:0.92;
}
.site-footer__col-title{
  font-size:1.3rem;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--text-muted);
  margin-bottom:1.4rem;
  font-weight:500;
}
.site-footer__col-text,
.site-footer__col-link{
  font-size:1.4rem;
  color:var(--text-muted);
  display:block;
  margin-bottom:0.8rem;
}
.site-footer__col-link:hover{ color:var(--brass); }
.site-footer__address{ font-style:normal; margin-bottom:0.8rem; }
.site-footer__address .site-footer__col-link{
  line-height:1.6;
  text-decoration:underline;
  text-decoration-color:var(--brass-line);
  text-underline-offset:0.3rem;
}
/* Name, role and a visible, copyable address per contact person. */
.site-footer__contact{ margin-bottom:2rem; }
.site-footer__contact:last-child{ margin-bottom:0; }
.site-footer__contact-name{ font-size:1.4rem; color:var(--text); }
.site-footer__contact-role{ font-size:1.4rem; color:var(--text-muted); margin-bottom:0.4rem; }
.site-footer__contact .site-footer__col-link{
  margin-bottom:0;
  overflow-wrap:anywhere;
  text-decoration:underline;
  text-decoration-color:var(--brass-line);
  text-underline-offset:0.3rem;
}
.site-footer__bottom{
  font-size:1.4rem;
  color:var(--text-faint);
}

.site-footer__credit a{
  color:inherit;
  text-decoration:none;
  border-bottom:1px solid var(--line);
  transition:color .2s ease, border-color .2s ease;
}

.site-footer__credit a:hover{
  color:var(--brass);
  border-color:var(--brass-line);
}

/* ---------- Header: theme toggle ---------- */
.header__theme{
  background:transparent;
  border:1px solid var(--line);
  border-radius:50%;
  color:var(--text-muted);
  cursor:pointer;
  transition:color .2s ease, border-color .2s ease;
}
.header__theme:hover{ color:var(--brass); border-color:var(--brass-line); }


/* ---------- Mobile menu ---------- */
.header__toggle{
  background:transparent;
  border:0;
  color:var(--text);
  cursor:pointer;
}
.header__toggle-bar{
  display:block;
  width:2.4rem;
  height:0.15rem;
  background:currentColor;
  transition:transform .3s ease;
}
/* Two bars cross into an X. Offset = half of (gap + bar height). */
.menu-open .header__toggle-bar:first-child{ transform:translateY(0.375rem) rotate(45deg); }
.menu-open .header__toggle-bar:last-child{ transform:translateY(-0.375rem) rotate(-45deg); }

/* While open, the header takes the panel's solid background, so menu items
   scrolling underneath (short screens, landscape) disappear behind it. */
.menu-open .header,
.menu-open .header--scrolled{
  background:var(--bg);
  border-bottom-color:transparent;
  backdrop-filter:none;
}

.mobile-menu{
  background:var(--bg);
  transition:opacity .3s ease, visibility 0s linear .3s;
}
/* Visible immediately on open (a hidden panel cannot take focus); on close the
   visibility switch waits until the fade-out has finished. */
.menu-open .mobile-menu{ transition:opacity .3s ease, visibility 0s; }
.mobile-menu__link{
  font-family:var(--serif);
  font-size:3.2rem;
  line-height:1.2;
  color:var(--text);
  padding:1.6rem 0;
  border-bottom:1px solid var(--line);
  opacity:0;
  transform:translateY(1.2rem);
  transition:color .2s ease, opacity .4s ease, transform .4s ease;
}
.mobile-menu__link:hover{ color:var(--brass); }
/* Links rise in one after another when the menu opens. */
.menu-open .mobile-menu__link{ opacity:1; transform:none; }
.menu-open .mobile-menu__link:nth-child(1){ transition-delay:.05s; }
.menu-open .mobile-menu__link:nth-child(2){ transition-delay:.1s; }
.menu-open .mobile-menu__link:nth-child(3){ transition-delay:.15s; }
.menu-open .mobile-menu__link:nth-child(4){ transition-delay:.2s; }

.mobile-menu__theme{
  background:transparent;
  border:0;
  padding:0.8rem 0;
  color:var(--text-muted);
  font-family:var(--sans);
  font-size:1.5rem;
  cursor:pointer;
  transition:color .2s ease;
}
.mobile-menu__theme:hover{ color:var(--brass); }
/* ---------- Phone fixes ----------
   Kept in this file on purpose: it loads after layout.css, so overrides of
   properties first set here (padding, white-space) only take effect here. */
@media (max-width: 900px){
  /* Only the side padding changes here; top/bottom follow the section rhythm
     (9.6rem, 8rem below 620 px) like every other section. */
  .contact{ padding-left:2rem; padding-right:2rem; }
}
@media (max-width: 620px){
  /* .contact sets its own padding, so the generic section{ padding:8rem 0 }
     does not reach it and has to be repeated. */
  .contact{ padding-top:8rem; padding-bottom:8rem; }
  /* The letter-spaced label is ~360 px wide on one line and made the whole
     page wider than the screen. */
  .trust__label{ white-space:normal; }
}