/* Commercials — an editorial production dossier. Scoped to this page.
   Desktop uses the site's 1440px scaler; fluid sizing starts below 1024px. */
.commercials-page { --cm-paper: #f2eee3; --cm-ink: #1c1a1d; --cm-muted: #65605b; --cm-rule: #cdc8bf; }
.commercials-page .svh { min-height: 870px; padding-bottom: 82px; }
.commercials-page .svh-grid { align-items: center; }
.commercials-page .svh-aside { padding-top: 22px; }
.commercials-page .svh-cta { margin-top: 38px; }
.cm-hero-copy { max-width: 510px; margin-top: 26px; font-size: 19px; line-height: 1.55; color: #fff; }
.cm-section { width: 100%; padding: 64px 60px 88px; background: var(--cm-paper); color: var(--cm-ink); }
.cm-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding-bottom: 20px; margin-bottom: 56px; border-bottom: 1px solid var(--cm-rule); font: 500 12px/1.5 'Archivo',sans-serif; text-transform: uppercase; letter-spacing: .1em; }
.cm-meta a { color: inherit; text-decoration: none; }
.cm-meta a:hover { color: var(--orange); }
.cm-meta a span { margin-left: 14px; }
#scaler .cm-title { font-family: 'Boldonse',sans-serif; font-size: 64px !important; font-weight: 400; line-height: 1.48 !important; letter-spacing: -.025em !important; text-transform: uppercase; }
.cm-title > span { color: var(--orange); }
.cm-library-head { display: grid; grid-template-columns: 1.45fr 1fr; gap: 64px; align-items: end; margin-bottom: 54px; }
#scaler .cm-library .cm-title { font-size: 62px !important; }
.cm-library-copy { padding-bottom: 10px; font-size: 18px; line-height: 1.6; }
.cm-emphasis { margin-top: 20px; font-weight: 650; }
.cm-edit-board { background: var(--cm-ink); color: var(--cm-paper); padding: 24px 28px 0; overflow: hidden; }
.cm-board-top { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #c8c4bb; }
.cm-board-top i { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--orange); margin-right: 9px; }
.cm-board-stage { display: grid; grid-template-columns: 1.16fr .26fr 1fr; align-items: center; padding: 42px 8px 48px; min-height: 400px; }
.cm-master { position: relative; transform: rotate(-2deg); background: #f2eee3; color: #1c1a1d; padding: 11px; box-shadow: 9px 10px 0 #ffffff0d; transition: transform .5s ease, opacity .5s ease; }
.cm-frame-top { display: flex; justify-content: space-between; padding-bottom: 10px; text-transform: uppercase; font-size: 10px; letter-spacing: .08em; }
.cm-master > img { display: block; width: 100%; aspect-ratio: 16/9; height: auto; object-fit: cover; }
.cm-master figcaption { display: flex; justify-content: space-between; align-items: center; padding: 10px 0 0; font-size: 12px; font-weight: 650; }
.cm-master figcaption > span:last-child { font-size: 24px; line-height: 1; }
.cm-branch { color: #e56344; }
.cm-branch > span { display: block; text-align: center; text-transform: uppercase; font-size: 9px; line-height: 1.6; letter-spacing: .06em; margin: 0 -8px 18px; }
.cm-branch svg { display: block; width: 100%; height: 150px; }
.cm-outputs { display: grid; grid-template-columns: .83fr 1fr; gap: 23px 22px; align-items: start; padding-left: 8px; }
.cm-output { position: relative; transition: transform .5s ease, opacity .5s ease; }
.cm-output img { display: block; width: 100%; object-fit: cover; border: 1px solid #f2eee360; }
.cm-output figcaption { display: flex; justify-content: space-between; gap: 4px; text-transform: uppercase; margin-top: 10px; font-size: 9px; letter-spacing: .04em; }
.cm-output figcaption span { color: #c7c1b8; }
.cm-output-vertical { grid-row: span 2; transform: rotate(3deg); }
.cm-output-vertical img { aspect-ratio: 9/16; height: auto; object-position: 63% 50%; }
.cm-output-square { padding-right: 30px; transform: rotate(-3deg); }
.cm-output-square img { aspect-ratio: 1; height: auto; }
.cm-output-still { width: 100%; transform: rotate(2deg); }
.cm-output-still img { aspect-ratio: 16/9; height: auto; }
.cm-board-bottom { border-top: 1px solid #ffffff30; padding: 20px 0; display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.cm-format-controls { display: flex; gap: 5px; flex-wrap: wrap; }
.cm-format-controls button { border: 1px solid transparent; background: none; color: #c8c4bb; padding: 10px 13px; cursor: pointer; font: 500 11px/1.5 'Archivo',sans-serif; text-transform: uppercase; letter-spacing: .04em; min-height: 44px; }
.cm-format-controls button[aria-pressed="true"] { color: var(--cm-paper); border-color: #77716b; background: #ffffff0a; }
.cm-format-controls button:hover { color: #fff; border-color: var(--orange); }
.cm-format-note { font-size: 12px; line-height: 1.5; color: #c8c4bb; max-width: 280px; }
.cm-edit-board[data-format="vertical"] .cm-master, .cm-edit-board[data-format="stills"] .cm-master { opacity: .48; transform: rotate(-4deg) scale(.96); }
.cm-edit-board[data-format="vertical"] .cm-output-vertical { transform: rotate(0) scale(1.065); }
.cm-edit-board[data-format="vertical"] .cm-output-square, .cm-edit-board[data-format="vertical"] .cm-output-still { opacity: .45; }
.cm-edit-board[data-format="stills"] .cm-output-vertical { opacity: .45; }
.cm-edit-board[data-format="stills"] .cm-output-square, .cm-edit-board[data-format="stills"] .cm-output-still { transform: rotate(0) scale(1.055); }
.cm-library-foot { display: flex; justify-content: space-between; gap: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-top: 22px; }
.cm-section-head { display: flex; justify-content: space-between; align-items: end; gap: 56px; margin-bottom: 48px; }
.cm-section-head > p { font-size: 18px; line-height: 1.6; max-width: 350px; padding-bottom: 8px; }
.cm-brand-grid { display: grid; grid-template-columns: 1.14fr 1fr; gap: 52px; align-items: start; }
.cm-brand { color: inherit; text-decoration: none; }
.cm-brand-hydr8 { margin-top: 100px; }
.cm-brand-image { position: relative; overflow: hidden; background: #afd4d8; }
.cm-brand-image img { display: block; width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; transition: transform .6s ease; }
.cm-brand-hydr8 .cm-brand-image img { aspect-ratio: 1; }
.cm-brand:hover img { transform: scale(1.035); }
.cm-brand-action { position: absolute; right: 18px; bottom: 18px; display: flex; align-items: center; gap: 22px; padding: 12px 18px; background: var(--cm-paper); color: var(--cm-ink); border-radius: 24px; font-size: 12px; }
.cm-brand-caption { padding: 20px 0; border-top: 3px solid var(--cm-ink); display: flex; justify-content: space-between; gap: 20px; align-items: baseline; }
#scaler .cm-brand-caption h3 { font: 650 27px/1.2 'Archivo',sans-serif !important; text-transform: none; letter-spacing: -.045em; }
.cm-brand-caption > span { font-size: 11px; color: var(--cm-muted); }
.cm-testimonial { background: #e7e1d5; padding-top: 48px; }
.cm-quote-layout { display: grid; grid-template-columns: .75fr 1.4fr; gap: 72px; margin-top: 56px; padding: 46px 0 8px; border-top: 3px solid var(--cm-ink); }
.cm-quote-side { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 45px; }
.cm-quote-mark { font: 700 170px/.8 Georgia,serif; color: var(--orange); height: 90px; }
.cm-quote-person { display: flex; gap: 16px; align-items: center; }
.cm-person-initials { display: grid; place-items: center; flex: 0 0 50px; height: 50px; border: 1px solid #a29b90; border-radius: 50%; font-size: 13px; }
.cm-quote-person strong { display: block; font-size: 18px; margin-bottom: 7px; }
.cm-quote-person div > span { display: block; font-size: 13px; line-height: 1.5; color: #65605b; }
.cm-quote blockquote { font: 550 28px/1.45 'Archivo',sans-serif; letter-spacing: -.025em; }
.cm-quote figcaption { display: flex; gap: 16px; align-items: center; margin-top: 32px; text-transform: none; letter-spacing: normal; color: var(--cm-ink); }
.commercials-page .cm-ways { background: var(--orange); padding-top: 48px; }
.cm-ways .cm-meta { color: #fff; border-color: #ffffff70; }
#scaler .cm-ways .cta-head h2 { font-size: 48px !important; line-height: 1.45 !important; }
.cm-ways .cta-head p { max-width: 400px; }
.commercials-page :is(.cm-section) :is(a,button,summary):focus-visible { outline: 2px solid currentColor; outline-offset: 5px; }
.commercials-page :is(.cm-section,#sv-deliver,#sv-process) { scroll-margin-top: 110px; }
@media(min-width:1024px) {
  .commercials-page #scaler h1.svh-title { font-size: 96px !important; }
}
@media(max-width:1023px) {
  .commercials-page .svh { min-height: auto; padding-bottom: 76px; }
  .commercials-page .svh-grid { align-items: start; }
  .commercials-page .svh-aside { padding-top: 16px; max-width: none; }
  .cm-section { padding: 48px 32px 64px; }
  .cm-meta { margin-bottom: 36px; font-size: 10px; }
  #scaler .cm-title, #scaler .cm-library .cm-title { font-size: clamp(28px,4.2vw,40px) !important; }
  .cm-library-head { gap: 30px; grid-template-columns: 1.2fr 1fr; }
  .cm-library-copy, .cm-section-head > p { font-size: 16px; }
  .cm-board-stage { min-height: 0; padding: 40px 0; }
  .cm-outputs { gap: 18px 12px; }
  .cm-output-square { padding-right: 0; }
  .cm-output figcaption { font-size: 8px; flex-wrap: wrap; }
  .cm-branch svg { height: 100px; }
  .cm-board-bottom { align-items: start; flex-direction: column; gap: 10px; }
  .cm-format-note { max-width: none; }
  .cm-brand-grid { gap: 28px; }
  .cm-brand-caption { flex-direction: column; gap: 8px; }
  .cm-quote-layout { gap: 32px; grid-template-columns: .7fr 1.3fr; }
  .cm-quote blockquote { font-size: 23px; }
  #scaler .cm-ways .cta-head h2 { font-size: 38px !important; }
}
@media(max-width:767px) {
  .commercials-page .svh { padding-bottom: 55px; }
  .commercials-page .svh-grid { gap: 36px; }
  .commercials-page .svh-cta { margin-top: 32px; }
  .cm-hero-copy { font-size: 16px; margin-top: 23px; line-height: 1.6; max-width: 36ch; }
  .cm-section { padding: 36px 22px 52px; }
  .cm-meta { font-size: 9px; letter-spacing: .075em; gap: 20px; margin-bottom: 32px; padding-bottom: 16px; }
  .cm-meta > :last-child { max-width: 45%; text-align: right; }
  #scaler .cm-title, #scaler .cm-library .cm-title { font-size: clamp(24px,6.3vw,39px) !important; line-height: 1.5 !important; }
  .cm-library-head { grid-template-columns: 1fr; gap: 24px; margin-bottom: 26px; }
  .cm-library-copy { font-size: 16px; max-width: 50ch; }
  .cm-emphasis { margin-top: 16px; }
  .cm-edit-board { padding: 17px 14px 0; }
  .cm-board-top { font-size: 8px; letter-spacing: .035em; }
  .cm-board-stage { grid-template-columns: 1fr; padding: 24px 8px 22px; gap: 22px; }
  .cm-master { width: 92%; margin: 0 auto; padding: 8px; }
  .cm-master > img { aspect-ratio: 16/9; }
  .cm-frame-top { font-size: 8px; padding-bottom: 7px; }
  .cm-master figcaption { font-size: 10px; padding-top: 6px; }
  .cm-branch { display: none; }
  .cm-outputs { grid-template-columns: .7fr 1fr 1fr; align-items: center; gap: 14px; padding: 0; }
  .cm-output-vertical { grid-row: auto; }
  .cm-output figcaption { font-size: 7px; line-height: 1.6; letter-spacing: 0; gap: 0; display: block; }
  .cm-output figcaption span { display: block; }
  .cm-output-square { transform: rotate(-3deg) translateY(-8px); }
  .cm-output-still { transform: rotate(3deg) translateY(8px); }
  .cm-board-bottom { padding: 13px 0 17px; }
  .cm-format-controls { width: 100%; gap: 3px; }
  .cm-format-controls button { flex: 1; padding: 8px 4px; font-size: 8px; white-space: nowrap; }
  .cm-format-note { font-size: 11px; min-height: 33px; }
  .cm-library-foot { font-size: 9px; line-height: 1.6; }
  .cm-library-foot > :last-child { max-width: 42%; text-align: right; }
  .cm-section-head { display: block; margin-bottom: 28px; }
  .cm-section-head > p { margin-top: 22px; font-size: 16px; padding: 0; }
  .cm-brand-grid { grid-template-columns: 1fr; gap: 30px; }
  .cm-brand-hydr8 { margin-top: 0; }
  .cm-brand-caption { flex-direction: row; align-items: start; gap: 16px; padding: 16px 0 0; }
  #scaler .cm-brand-caption h3 { font-size: 24px !important; }
  .cm-brand-caption > span { text-align: right; max-width: 130px; font-size: 10px; line-height: 1.4; }
  .cm-brand-hydr8 .cm-brand-image img { aspect-ratio: 1.12; }
  .cm-quote-layout { grid-template-columns: 1fr; gap: 28px; margin-top: 28px; padding-top: 26px; }
  .cm-quote-side { flex-direction: row; align-items: center; gap: 20px; }
  .cm-quote-mark { font-size: 100px; height: 58px; }
  .cm-quote-person { gap: 12px; }
  .cm-quote-person strong { font-size: 16px; }
  .cm-quote-person div > span { font-size: 11px; }
  .cm-person-initials { flex-basis: 40px; height: 40px; font-size: 11px; }
  .cm-quote blockquote { font-size: 23px; line-height: 1.5; }
  .cm-quote figcaption { font-size: 9px; line-height: 1.6; margin-top: 23px; }
  .commercials-page .cm-ways { padding: 36px 22px 52px; }
  #scaler .cm-ways .cta-head h2 { font-size: clamp(28px,7.5vw,42px) !important; }
  .cm-ways .cta-head p { font-size: 16px; }
}
@media(prefers-reduced-motion:reduce) {
  .cm-edit-board *, .cm-brand img { transition: none !important; }
}
.a11y-reduce-motion .cm-edit-board *, .a11y-reduce-motion .cm-brand img { transition: none !important; }
/* This page already has a persistent navigation CTA and a dedicated contact section. */
.commercials-page .gv-cta-bubble { display: none !important; }
.cm-ways .cta-head p { margin-inline: auto; }
/* Reserve the same description space in every row so hover and automatic
   selection cannot move the list under the pointer or shift the page. */
.commercials-page .sv-wyg-section { padding-top: 32px; padding-bottom: 32px; }
.commercials-page .sv-wyg-heading { margin-bottom: 20px; }
.commercials-page .sv-wyg-header-row { padding-bottom: 24px; }
.commercials-page .sv-wyg-item { min-height: 0; padding: 3px 0 3px 56px; }
.commercials-page .sv-wyg-item::before { top: 7px; }
.commercials-page #scaler .sv-wyg-name { font-size: calc(var(--gv-type-card) * .8) !important; }
.commercials-page .sv-wyg-item.wyg-active .sv-wyg-name { transform: none; }
.commercials-page .sv-wyg-desc { grid-template-rows: 1fr; font-size: 14px; line-height: 18px; max-width: none; }
.commercials-page .sv-wyg-item.wyg-active .sv-wyg-desc { grid-template-rows: 1fr; }
.commercials-page .sv-wyg-desc-inner { min-height: 36px; max-height: none; padding-top: 0; }
.commercials-page .sv-proc-flower-title { font-size: calc(var(--gv-h3-size) * .8) !important; }
.commercials-page #scaler .sv-proc-flower-title,
.commercials-page #scaler .sv-proc-mobile-title { font-size: calc(var(--gv-type-card) * .8) !important; }
@media (max-width: 1023px) {
  .commercials-page .sv-wyg-section { padding-top: 14px; padding-bottom: 14px; }
  .commercials-page .sv-wyg-heading { margin-bottom: 12px; }
  .commercials-page .sv-wyg-header-row { padding-bottom: 16px; }
  .commercials-page .sv-wyg-layout { min-height: 0; }
  .commercials-page .sv-wyg-panel { aspect-ratio: auto; }
  .commercials-page .sv-wyg-mobile-desc { height: auto; min-height: calc(5.1em + 16px); }
}
/* Keep the existing circular process composition readable with the longer copy
   on the narrowest phones. Its artwork, typefaces and scroll behaviour are unchanged. */
@media (max-width: 359px) {
  .commercials-page .sv-proc-flower-shape { width: 90vw !important; height: 90vw !important; }
  .commercials-page .sv-proc-flower-step { padding: 14px !important; gap: 12px !important; }
}