/* PIX ALTER — shared type scale & brand lockup (FIX-26, FIX-27, FIX-28)
   Loaded last on every page so heading sizes are defined in one place.

   Level 1  Page title (H1) ............ unchanged (homepage hero 89px, inner pages 75px at 1440)
   Level 2  Section heading (H2) ....... max 54px desktop / ~31px mobile
   Level 3  Item titles (H3, FAQ, list)  max 28–32px desktop / 20–24px mobile
   Label    Gold eyebrow ............... 12px desktop / 11px mobile, gold, everywhere

   "html" prefix: raises specificity by one step so these rules reliably follow
   the page-level inline styles without using !important. */

/* Level 2 — section headings */
html h2{font-size:clamp(34px,3.6vw,54px)}
html .contact h2{font-size:clamp(34px,3.6vw,54px)}
html .viewer-title,html .video-portfolio-title{font-size:clamp(34px,3.6vw,54px)}

/* Level 3 — item titles */
html .faq-item summary{font-size:clamp(20px,1.95vw,28px)}
html .journal-card h3{font-size:clamp(22px,1.95vw,28px)}
html .service-enhanced-title{font-size:clamp(24px,2.2vw,32px)}
html .video-portfolio-meta h3{font-size:clamp(22px,1.95vw,28px)}

/* Journal — index title matches other page titles; article titles get the serif title style */
html .page-head h1{font-size:clamp(40px,5.2vw,82px);line-height:.95;letter-spacing:-.03em}
html .article > h1{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;font-size:clamp(34px,4vw,58px);line-height:1.02;letter-spacing:-.02em;margin:0 0 24px}

/* Gold labels (eyebrows) — FIX-27: 10px → 12px desktop / 11px mobile for legibility;
   letter-spacing reduced slightly so longer labels keep a similar width */
html .eyebrow,html .pf-intro p.eyebrow{font-size:12px;letter-spacing:.26em}
/* Fix — portfolio pages: gold label was overridden by ".pf-intro p" */
html .pf-intro p.eyebrow{color:var(--gold)}

@media(max-width:900px){
  html .eyebrow,html .pf-intro p.eyebrow{font-size:11px;letter-spacing:.24em}
  html h2,html .contact h2,html .viewer-title,html .video-portfolio-title,
  html .svc-block h2,html .pf-postprod h2{font-size:clamp(28px,8vw,36px)}
}

/* Brand lockup — FIX-28
   Header tagline: letter-spaced to match the width of the PIX ALTER wordmark
   (font-size = 0.264 × wordmark size; letter-spacing 0.211em). Hidden on mobile (≤ 900px). */
html .brand-tagline{font-size:9.5px;letter-spacing:.211em;white-space:nowrap;text-align:left;text-align-last:left}
/* Footer: same official wordmark as the header (wide-spaced, medium weight) */
html .footer-brand span{font-family:'Cormorant Garamond',Georgia,serif;font-weight:500;letter-spacing:.24em;text-transform:uppercase;font-size:30px;line-height:.85}
@media(max-width:1180px){html .brand-tagline{font-size:8.36px}}
@media(max-width:900px){html .brand-tagline{display:none}}
@media(max-width:560px){html .footer-brand span{font-size:24px}}

/* Footer logo as home link — FIX-29: clickable area limited to the logo; subtle hover and keyboard focus */
html a.footer-brand{display:flex;width:fit-content;text-decoration:none;color:var(--text);transition:opacity .25s ease}
html a.footer-brand:hover{opacity:.78}
html a.footer-brand:focus-visible,html a.brand-logo:focus-visible{outline:1px solid var(--gold);outline-offset:6px}

/* Services — FIX-33: video-specific tagline shown inside the Video Editing card (gold label style, as card numbers) */
html .service-enhanced-tags{display:block;margin-top:8px;font-size:10px;letter-spacing:.16em;line-height:1.6;color:var(--gold)}

/* Image Rights & Portfolio Notice links (FIX-35): discreet, inherit footer colour */
html .rights-link{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
html footer .rights-link{white-space:nowrap}
html .rights-link:hover,html .rights-link:focus-visible{color:var(--gold)}
html .pf-rights-note{margin:30px 0 0;font-size:12px;line-height:1.6;letter-spacing:.02em;color:var(--muted)}

/* FIX-37: spacing for the added service-page notes (below the list and the process steps) and the Journal closing line */
html .svc-note{margin-top:28px}
html .article-next{margin-top:26px}

/* FIX-47 */
html .navlinks a.current{color:var(--gold)}
html .skip-link{position:absolute;left:12px;top:-60px;z-index:10000;padding:12px 18px;background:#f4eee7;color:#160506;font-size:13px;letter-spacing:.04em;text-decoration:none;transition:top .15s ease}
html .skip-link:focus{top:12px;outline:2px solid var(--gold);outline-offset:2px}
html .viewer-count{display:none}
html .journal-card:has(> a){display:flex;flex-direction:column}
html .journal-card > a{margin-top:auto;align-self:flex-start}
html .svc-gallery .svc-work-link{display:block;text-decoration:none}
html .svc-gallery .svc-work-link:hover img,html .svc-gallery .svc-work-link:focus-visible img{border-color:var(--gold)}
html .svc-gallery .svc-work-link:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
@media(min-width:1200px){html .hero-copy .eyebrow{white-space:nowrap}}
html .nowrap{white-space:nowrap}

/* FIX-48 — design pass: type scale, single button style, tap targets, inner-page layout, portfolio viewer.
   Headings, palette, fonts and wording are unchanged. The homepage hero (slides, overlay, wording, button)
   is left exactly as it was (owner decision C). Video-specific components are not restyled. */

/* 1. Navigation and logo sub-line */
@media(min-width:901px){html .navlinks a{padding-top:6px;padding-bottom:6px}}
@media(min-width:1181px){html .navlinks a{font-size:12.5px}html .brand-tagline{font-size:10.5px;letter-spacing:.152em}}
@media(min-width:901px) and (max-width:1180px){html .navlinks a{font-size:11px}html .brand-tagline{font-size:9.24px;letter-spacing:.128em}}
@media(min-width:901px){html .navlinks a.project-link,html .navlinks a:last-of-type{padding:12px 16px}}

/* 2. One button style (homepage hero button excluded — decision C) */
html .btn,html .contact a.btn,html div > a.btn{font-family:Montserrat,Arial,sans-serif;font-size:12px;letter-spacing:.16em;min-height:52px;padding-top:0;padding-bottom:0;line-height:1.2;box-sizing:border-box}
html .hero .btn,html .hero-copy a.btn{font-size:10px;min-height:0;padding-top:18px;padding-bottom:18px;line-height:normal}

/* 3. Supporting text sizes */
html .breadcrumb,html nav.breadcrumb{font-size:12px}
html .eyebrow,html .pf-intro p.eyebrow{font-size:12px}
@media(max-width:900px){html .eyebrow,html .pf-intro p.eyebrow{font-size:12px}html .hero-copy .eyebrow{font-size:11px}}
html .footer-heading{font-size:11.5px}
html .footer-links a{font-size:14px}
html .footer-bottom{font-size:12px}
html .footer-social{gap:28px}
html .footer-social a{padding:14px;margin:-14px}
html .service-enhanced-copy{font-size:15px}
html .service-enhanced-tags{font-size:11.5px}
html .service-enhanced-num{font-size:11.5px}
html .journal-index{font-size:11.5px}
html .about-kicker{font-size:11.5px!important}
html .journal-card p:not(.journal-index){font-size:15px}
html .journal-card a{font-size:12px}
html .faq-answer{font-size:16px}
html .svc-list li,html .svc-process li{font-size:16px}
html .svc-hub-card-body p,html .pf-hub-card-body p{font-size:15px}
html .svc-hub-card-body span,html .pf-hub-card-body span{font-size:12px}
html .article-meta,html .article-meta .time,html .article-date{font-size:12px}
html .back-link,html .read-more{font-size:12px}
html .article-body p,html .article-body ul,html .article:has(.article-body) > p{font-size:17px;max-width:68ch}

/* 4. Inner-page spacing (desktop; not the homepage or the Video page) */
@media(min-width:901px){
  html body:not(:has(.hero)):not(:has(.video-portfolio-grid)) .section{padding-bottom:72px}
  html body:not(:has(.hero)):not(:has(.video-portfolio-grid)) .section:not(.svc-intro):not(.pf-intro){padding-top:72px}
  html body:not(:has(.hero)) .faq-section{padding-top:72px;padding-bottom:72px}
  html body:not(:has(.video-portfolio-grid)) .contact.portfolio-contact{padding-top:96px;padding-bottom:96px}
}

/* 5. Service pages — facts panel (decision A) */
html .svc-aside{background:#120909;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 6vw}
html .svc-panel{max-width:560px;border:1px solid var(--line);background:#160506;padding:24px 26px 26px}
html .svc-panel-label{font-size:12px;letter-spacing:.26em;color:var(--gold);font-weight:600;margin:0 0 12px}
html .svc-facts{margin:0}
html .svc-facts div{padding:11px 0;border-top:1px solid var(--line)}
html .svc-facts dt{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--text);font-weight:600;margin:0 0 5px}
html .svc-facts dd{margin:0;font-size:14px;line-height:1.55;color:var(--muted)}
html .svc-panel-faq{display:inline-block;margin:4px 0 18px;font-size:12px;letter-spacing:.08em;color:var(--gold);text-decoration:none;border-bottom:1px solid var(--gold)}
html .svc-panel-faq:hover,html .svc-panel-faq:focus-visible{color:var(--text);border-color:var(--text)}
html .svc-panel-actions{display:flex;flex-direction:column;gap:12px}
html .svc-panel-actions .btn{width:100%}
@media(min-width:1100px){
  html .svc-layout{position:relative}
  html .svc-aside{position:absolute;top:0;bottom:0;right:6vw;width:400px;padding:72px 0;background:none;border:0;z-index:2;pointer-events:none}
  html .svc-panel{pointer-events:auto;max-width:none}
  html .svc-layout > .section{padding-right:calc(6vw + 400px + 56px)}
}
@media(min-width:1100px) and (min-height:860px){html .svc-panel{position:sticky;top:32px}}

/* 6. Hub grids: 3 columns on desktop, 2 on tablet */
@media(min-width:1100px){
  html .svc-hub-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  html .svc-hub-grid > *{grid-column:span 2}
  html .svc-hub-grid > :nth-child(4):nth-last-child(2){grid-column:2 / span 2}
  html .pf-hub-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:640px) and (max-width:1099px){
  html .svc-hub-grid,html .pf-hub-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
  html .svc-hub-grid > *,html .pf-hub-grid > *{grid-column:span 2}
  html .svc-hub-grid > :last-child:nth-child(odd),html .pf-hub-grid > :last-child:nth-child(odd){grid-column:2 / span 2}
}

/* 7. Portfolio viewer — larger 1600 × 2100 frame (never cropped), notes beside it on desktop,
      Previous/Next below the frame, thumbnail strip */
html .editorial-compare-card .pair-number{font-size:12px;letter-spacing:.18em}
html .compare .label{font-size:11px}
html .control-btn,html .editorial-viewer-controls .control-btn{font-family:Montserrat,Arial,sans-serif;font-size:12px;letter-spacing:.14em}
html .pf-info-desc{font-size:16px}
html .pf-info-tags{font-size:11.5px}
html .pf-info-techniques summary{font-size:12px}
html .pf-info-techniques ul{font-size:15px}
html .pf-nav{display:flex;justify-content:center;gap:12px;margin:16px 0 0}
html .pf-nav .control-btn{min-height:44px;min-width:140px;padding:0 20px;background:transparent;border:1px solid rgba(244,238,231,.42);color:var(--text);cursor:pointer}
html .pf-nav .control-btn:hover{border-color:var(--gold)}
html .pf-nav .control-btn:focus-visible,html .editorial-viewer-controls .control-btn:focus-visible{outline:1px solid var(--gold);outline-offset:3px}
html.compare-locked .pf-nav{display:none}
html .pf-thumbs{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;position:relative;margin:26px 0 0;padding:4px 4px 12px;scrollbar-width:thin;scrollbar-color:rgba(196,167,128,.5) transparent}
html .pf-thumbs > :first-child{margin-left:auto}
html .pf-thumbs > :last-child{margin-right:auto}
html .pf-thumb{flex:0 0 auto;width:72px;aspect-ratio:1600/2100;padding:0;margin:0;border:1px solid var(--line);background:#120909;cursor:pointer;opacity:.62;transition:opacity .2s ease,border-color .2s ease}
html .pf-thumb img{display:block;width:100%;height:100%;object-fit:cover}
html .pf-thumb:hover{opacity:.9}
html .pf-thumb[aria-current="true"]{opacity:1;border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
html .pf-thumb:focus-visible{outline:2px solid var(--text);outline-offset:3px;opacity:1}
@media(min-width:621px) and (max-width:1199px){
  html .editorial-compare-card .compare{height:max(460px,min(calc(100vh - 220px),820px));min-height:0}
}
@media(min-width:1200px){
  html .editorial-compare-card{display:grid;grid-template-columns:auto minmax(300px,1fr);grid-template-rows:auto auto 1fr;column-gap:48px;align-items:start}
  html .editorial-compare-card > .compare{grid-column:1;grid-row:1 / span 3;--pf-fh:max(480px,min(calc(100vh - 160px),820px));height:var(--pf-fh);width:calc(var(--pf-fh) * 1600 / 2100 + 48px);min-height:0;padding:0}
  html .editorial-compare-card > .compare:not(.is-expanded)::before,html .editorial-compare-card > .compare:not(.is-expanded)::after{display:none}
  html .editorial-compare-card > .pair-number{grid-column:2;grid-row:1;margin:4px 0 0}
  html .editorial-compare-card > .pf-nav{grid-column:2;grid-row:2;justify-content:flex-start;margin:18px 0 0}
  html .editorial-compare-card > .pf-info{grid-column:2;grid-row:3;margin:26px 0 0}
}
@media(max-width:620px){
  html .editorial-compare-card .compare{padding:0}
  html .editorial-compare-card .compare-media{width:100%}
  html .pf-nav .control-btn{flex:1 1 0;min-width:0}
  html .pf-thumb{width:60px}
}
html .editorial-compare-card .compare.is-expanded{width:100vw;height:100vh;height:100dvh;padding:0}
@media(prefers-reduced-motion:reduce){html .pf-thumb{transition:none}}
html .contact a.btn{width:260px}
@media(min-width:901px) and (max-width:1023px){html .navlinks{gap:13px}html nav{gap:16px}}

/* FIX-48.1 — tablet viewer (621–1199 px): plain dark band around the frame, as on desktop.
   No blurred image fill and no vignette; the frame itself is unchanged (1600 × 2100, uncropped). */
@media(min-width:621px) and (max-width:1199px){
  html .editorial-compare-card > .compare:not(.is-expanded)::before,
  html .editorial-compare-card > .compare:not(.is-expanded)::after{display:none}
}

/* FIX-48.2 — Video page text sizes (approved plan §3). Text size only: layout, spacing,
   grid, wording, videos and posters are unchanged. These classes appear only on the Video page. */
html .video-portfolio-category{font-size:11.5px}
html .video-portfolio-meta > p{font-size:12px}
html .video-portfolio-intro{font-size:15px}
html .pf-postprod-lead{font-size:16px}
html .pf-postprod-item p{font-size:15px}
html .pf-postprod-note{font-size:14px}

/* FIX-48.3 — Video page line breaking only (FIX-48.2 report §4).
   Descriptions: balanced lines so no word is left alone on a line. Browsers without
   text-wrap support ignore this declaration and keep the FIX-48.2 line breaks.
   Category labels: kept on one line ("COLOUR & FINISHING" wrapped at 901–909 px). */
html .video-portfolio-meta > p{text-wrap:balance}
html .video-portfolio-category{white-space:nowrap}

/* FIX-49 — Homepage only: hero test-edit link (Option B) and contact reply-time line */
html .hero-copy a.hero-testedit{display:inline-block;align-self:flex-start;margin-top:18px;font-family:Montserrat,Arial,sans-serif;font-size:12px;line-height:1.4;letter-spacing:.06em;color:#c4a780;text-decoration:none;border-bottom:1px solid rgba(196,167,128,.6);padding-bottom:3px}
html .hero-copy a.hero-testedit:hover{border-bottom-color:#c4a780}
html .hero-copy a.hero-testedit:focus-visible{outline:2px solid #c4a780;outline-offset:4px}
html .contact p.contact-reply{font-size:13px;line-height:1.6;letter-spacing:.04em;color:#5a5048;margin:18px 0 28px}

/* FIX-50 — Homepage contact helper line: line breaking only */
html .contact p.contact-prompt{text-wrap:balance}

/* FIX-52 — Portfolio hub cards: let the existing 4:3 aspect-ratio apply (the HTML height="450" attribute was fixing every card at 450 px tall) */
html .pf-hub-card img{height:auto}

/* FIX-52.1 — Services hub cards: let the existing 1:1 aspect-ratio apply (the HTML height="500" attribute was fixing every card at 500 px tall) */
html .svc-hub-card img{height:auto}

/* FIX-52.4: soft dark scrim (height reduced 35% in FIX-52.6) behind the header so cream nav text and CTA stay readable over bright hero slides */
html nav::before{content:'';position:absolute;top:0;left:0;right:0;height:calc((100% + 28px) * .65);background:linear-gradient(180deg,rgba(14,9,9,.78) 0%,rgba(14,9,9,.5) 55%,rgba(14,9,9,0) 100%);pointer-events:none;z-index:-1}

/* FIX-52.7: email helper — copy button and fallback notice */
.copy-email{display:inline-block;margin:18px 0 0;padding:11px 18px;background:transparent;border:1px solid #777;color:#211112;font:600 10px/1.2 'Montserrat',Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.copy-email:hover,.copy-email:focus-visible{background:#211112;color:#f4eee7;border-color:#211112}
.contact .copy-email{display:block;margin:20px 0 0}
.mail-fallback{position:fixed;left:24px;bottom:24px;z-index:60;max-width:min(420px,calc(100vw - 32px));background:#0e0909;color:#f4eee7;border:1px solid rgba(196,167,128,.5);padding:16px 18px 14px;box-shadow:0 12px 30px rgba(0,0,0,.45);font:400 12px/1.6 'Montserrat',Arial,sans-serif}
.mail-fallback[hidden]{display:none}
.mail-fallback p{margin:0 0 10px;color:#c8bbb0}
.mail-fallback-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
.mail-fallback-actions a,.mail-fallback-actions button{background:none;border:0;padding:4px 0;color:#c4a780;font:600 10px/1.2 'Montserrat',Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(196,167,128,.5);cursor:pointer}
.mail-fallback-actions .mail-fallback-close{margin-left:auto;border:0;font-size:18px;letter-spacing:0;color:#f4eee7}
@media(max-width:560px){.mail-fallback{left:16px;right:16px;bottom:16px;max-width:none}}

/* FIX-52.8: portfolio switching — dim the current comparison slightly only if the next pair takes longer than 250 ms to load */
.editorial-compare-card.is-loading .compare{opacity:.78;transition:opacity .2s ease}