.service-page{--service-warm:#fff7ef;--service-line:#e4ebee}
.service-width{width:calc(100% - 8.6%);max-width:1316px;margin-inline:auto}
.service-page h1,.service-page h2,.service-page h3{font-weight:800;letter-spacing:-.035em}
.service-page h2{font-size:clamp(28px,3.1vw,43px);line-height:1.18;margin:0}
.service-page h3{font-size:21px;line-height:1.3;margin:0 0 12px}
.service-page p{line-height:1.65}
.service-page .header-contact{font-size:14px;padding-inline:22px}
.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;align-items:center;font-size:13px;line-height:1.5;color:var(--muted);padding-top:24px;padding-bottom:26px}
.breadcrumbs a:hover{color:var(--orange)}
.breadcrumbs [aria-current]{color:var(--ink)}
.service-hero{display:grid;grid-template-columns:1.1fr 1fr;gap:48px;align-items:center;padding:8px 0 34px}
.service-eyebrow{font-size:13px!important;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:#c65a14;margin:0 0 20px!important;line-height:1.4!important}
.service-hero h1{font-size:clamp(38px,4.6vw,64px);line-height:1.06;margin:0 0 25px;max-width:640px}
.service-lead{font-size:clamp(17px,1.55vw,21px);line-height:1.6!important;margin:0;max-width:620px}
.service-actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:28px}
.service-actions .orange-button{min-height:53px;padding:14px 22px}
.quiet-button{display:inline-flex;align-items:center;justify-content:center;border:1px solid #cfdce3;min-height:53px;padding:13px 19px;border-radius:15px;font-size:15px;font-weight:800}
.quiet-button:hover{border-color:var(--ink);background:#f5f8fa}
.service-action-hint{font-size:13px;color:var(--muted);margin:11px 0 0}
.service-hero-links{margin-top:28px}
.service-hero-controls{min-width:0}
.service-hero-links .service-actions{margin-top:0;gap:12px;align-items:flex-start}
.project-thumbnail{display:block;position:absolute;top:0;left:0;transform:translateX(calc(-100% * var(--preview-offset,0)));z-index:2;min-width:0;width:var(--preview-width);max-width:calc(100% - 32px);overflow:hidden;border:0;border-radius:11px;background:#fff;box-shadow:0 7px 22px #092b3d0c}
/* Show the 1332px page content; the rightmost 16px browser scrollbar stays clipped. */
.project-thumbnail img{display:block;width:calc(100% * 1348 / 1332);max-width:none;height:auto;aspect-ratio:1348/926;object-fit:contain}
.project-thumbnail:hover{box-shadow:0 8px 24px #092b3d1a}
.project-thumbnail:focus-visible{outline-offset:-3px}
.service-hero-visual{height:430px;position:relative;overflow:visible;isolation:isolate;border-radius:20px;background:#edf4f7}
/* Crop the empty, baked-in left veil without changing the original photographs. */
.service-photo{height:100%;width:100%;overflow:hidden;border-radius:inherit}
.service-photo>img{display:block;height:100%;width:100%;object-fit:cover;object-position:right top;transform:scale(var(--photo-zoom,1.28));transform-origin:right top}
.service-page[data-service="audio-advertising"]{--photo-zoom:1.34}
.service-page[data-service="checkout-advertising"],.service-page[data-service="yaradio"]{--photo-zoom:1.4}
.hero-format{position:absolute;left:24px;bottom:24px;display:flex;gap:13px;align-items:center;background:#ffffffed;padding:15px 20px;border-radius:12px;box-shadow:0 8px 26px #092b3d16;font-size:14px;line-height:1.5}
.hero-format .icon{color:var(--orange);width:30px;height:30px}
.hero-format strong{font-weight:800}
.service-facts{display:grid;grid-template-columns:repeat(3,1fr);background:#f4f8fa;border-radius:14px;padding:24px 30px;gap:30px}
.service-facts>div{border-right:1px solid #d9e4e9;padding-right:22px}
.service-facts>div:last-child{border-right:0}
.service-facts dt{font-size:13px;color:var(--muted);margin-bottom:6px}
.service-facts dd{margin:0;font-size:20px;font-weight:800}
.service-section{padding-block:72px}
.service-overview{display:grid;grid-template-columns:.85fr 1fr;gap:70px;padding-bottom:34px}
.service-body p{font-size:17px;margin:0 0 17px}
.service-body p:last-child{margin-bottom:0}
.benefit-row{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;padding-bottom:68px}
.benefit-row article{border-top:1px solid var(--service-line);padding-top:25px}
.benefit-row .icon{width:30px;height:30px;color:var(--teal);margin-bottom:16px}
.benefit-row h3{font-size:20px;margin-bottom:10px}
.benefit-row p,.usecase-grid p{font-size:16px;margin:0;color:#506976}
.service-usecases{background:var(--service-warm)}
.usecase-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:38px;margin-top:35px}
.item-number{display:inline-block;color:#cb641e;font-size:14px;font-weight:800;margin-bottom:22px}
.usecase-grid h3{font-size:24px}
.service-clients{border-top:1px solid var(--project-line);margin-top:38px;padding-top:28px}
.service-clients h3{font-size:20px;margin-bottom:18px}
.service-clients ul{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.service-clients li{max-width:100%;overflow-wrap:anywhere;background:#fff;border:1px solid var(--project-line);border-radius:8px;padding:10px 14px;font-size:16px;font-weight:600}
.service-clients>p{max-width:850px;margin:20px 0 0;color:#506976;font-size:16px}
.service-process{display:grid;grid-template-columns:.75fr 1fr;gap:75px}
.process-heading>p:last-child{font-size:17px;color:var(--muted);margin:23px 0 0}
.process-steps{list-style:none;padding:0;margin:0}
.process-steps li{display:flex;gap:23px;padding:25px 0;border-top:1px solid var(--service-line)}
.process-steps li:first-child{padding-top:0;border:0}
.process-steps li:last-child{padding-bottom:0}
.step-number{flex:0 0 42px;width:42px;height:42px;border-radius:50%;background:var(--service-warm);color:#c65a14;display:grid;place-items:center;font-size:14px;font-weight:800}
.process-steps h3{margin-bottom:8px}
.process-steps p{font-size:16px;color:#506976;margin:0}
.product-bridge{background:#092f42;border-radius:20px;padding:42px 45px;color:#fff;display:flex;justify-content:space-between;align-items:center;gap:45px}
.product-bridge>div{max-width:760px}
.bridge-brand{font-size:24px;font-weight:800;display:flex;align-items:center;gap:10px;margin-bottom:19px}
.bridge-brand .icon{color:var(--orange);width:27px;height:30px}
.product-bridge h2{font-size:clamp(27px,2.8vw,37px)}
.product-bridge p{font-size:16px;color:#d5e3e9;max-width:740px;margin:18px 0 0}
.product-bridge .orange-button{flex-shrink:0}
.service-faq{display:grid;grid-template-columns:.75fr 1fr;gap:75px}
.faq-list details{border-bottom:1px solid var(--service-line);padding:20px 0}
.faq-list details:first-child{padding-top:0}
.faq-list summary{font-size:18px;font-weight:800;line-height:1.4;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:22px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary:after{content:'+';font-size:24px;font-weight:400;line-height:1;color:#bc571c;flex-shrink:0}
.faq-list details[open] summary:after{content:'−'}
.faq-list summary:focus-visible{outline:3px solid var(--teal);outline-offset:6px;border-radius:2px}
.faq-list p{font-size:16px;color:#506976;margin:15px 26px 0 0}
.service-contact{background:#f1f7fa;padding:54px 0}
.service-contact>.service-width{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center}
.service-contact p{font-size:17px;color:#506976;margin:18px 0 0;max-width:640px}
.service-contact address{font-style:normal;display:flex;flex-direction:column;gap:13px;align-items:flex-start;justify-self:end}
.service-contact address span{font-size:14px;color:#506976;margin-bottom:2px}
.service-contact address a{font-size:20px;font-weight:600;line-height:1.4;overflow-wrap:anywhere}
.service-contact address .contact-phone{font-size:clamp(23px,2.3vw,32px);font-weight:800}
.service-contact address a:hover{color:#c65a14}
.service-footer{display:flex;gap:28px;align-items:center;padding-block:25px;font-size:14px}
.service-footer a:first-child{margin-right:auto;font-weight:800}
.service-footer a:hover{color:var(--orange)}
@media(max-width:1100px){.service-hero{gap:30px}.service-hero-visual{height:400px}.service-hero h1{font-size:46px}.service-lead{font-size:17px}.service-actions{gap:12px}.service-actions a{font-size:14px;min-height:48px;padding:12px 17px}.service-overview,.service-process,.service-faq{gap:42px}.service-page .header-contact{font-size:12px;padding-inline:15px}.product-bridge{gap:28px;padding:34px}.product-bridge .orange-button{font-size:14px;padding-inline:18px}.service-contact>.service-width{gap:35px}}
@media(max-width:860px){.service-width{width:calc(100% - 40px)}.service-hero{grid-template-columns:1fr 1fr;gap:24px}.service-hero h1{font-size:38px}.service-hero-visual{height:440px}.service-lead{font-size:16px}.service-actions{flex-direction:column;align-items:flex-start}.service-action-hint{max-width:220px}.hero-format{left:14px;bottom:17px;padding:13px;gap:9px;font-size:12px}.hero-format .icon{width:25px;height:25px}.service-facts{padding:23px;gap:20px}.service-facts dd{font-size:17px}.service-section{padding-block:50px}.service-overview{padding-bottom:30px}.service-overview,.service-process,.service-faq{gap:32px}.service-page h2{font-size:29px}.benefit-row{gap:23px;padding-bottom:44px}.benefit-row h3{font-size:19px}.benefit-row p,.usecase-grid p{font-size:16px}.usecase-grid{gap:27px}.usecase-grid h3{font-size:21px}.product-bridge{flex-direction:column;align-items:flex-start}.service-contact>.service-width{grid-template-columns:1fr 1fr}.service-contact address a{font-size:17px}.service-contact address .contact-phone{font-size:23px}}
@media(max-width:620px){.service-page .header-contact{display:inline-flex;font-size:12px;padding:10px 12px;min-height:40px;border-radius:10px}.service-page .header-tools .language{display:none}.service-page .header-inner{gap:10px}.service-page .main-logo{width:113px}.service-page .header-tools{gap:4px}.service-page .menu-button{width:33px}.breadcrumbs{font-size:12px;gap:7px;padding-top:19px;padding-bottom:23px}.service-hero{grid-template-columns:1fr;gap:25px;padding:3px 0 27px}.service-hero h1{font-size:42px;max-width:460px;margin-bottom:22px}.service-eyebrow{font-size:12px!important;margin-bottom:14px!important}.service-lead{font-size:17px}.service-actions{flex-direction:row;align-items:center;gap:12px;margin-top:24px}.service-actions a{font-size:14px}.service-action-hint{max-width:none}.service-hero-visual{height:270px;border-radius:16px}.hero-format{left:18px;bottom:18px;padding:13px 18px;font-size:14px}.service-facts{grid-template-columns:1fr;padding:7px 22px;gap:0}.service-facts>div{display:flex;align-items:center;justify-content:space-between;gap:15px;border-right:0;border-bottom:1px solid #d9e4e9;padding:16px 0}.service-facts>div:last-child{border-bottom:0}.service-facts dt{margin:0}.service-facts dd{font-size:16px}.service-section{padding-block:43px}.service-overview,.service-process,.service-faq{grid-template-columns:1fr;gap:24px}.service-overview{padding-bottom:28px}.service-body p{font-size:16px}.benefit-row{grid-template-columns:1fr;gap:22px;padding-bottom:38px}.benefit-row article{padding-top:22px}.benefit-row .icon{float:left;margin:0 17px 14px 0;width:28px;height:28px}.benefit-row h3{font-size:20px;margin-bottom:8px}.benefit-row p{clear:both}.usecase-grid{grid-template-columns:1fr;gap:27px;margin-top:26px}.usecase-grid article{border-top:1px solid #eadfd6;padding-top:22px}.item-number{margin-bottom:11px}.usecase-grid h3{font-size:22px;margin-bottom:9px}.process-heading h2 br,.process-heading>p:last-child br{display:none}.process-heading>p:last-child{margin-top:15px;font-size:16px}.process-steps li{gap:16px;padding-block:23px}.process-steps h3{font-size:20px}.step-number{flex-basis:35px;width:35px;height:35px;font-size:13px}.product-bridge{padding:28px 23px;border-radius:16px;gap:24px}.product-bridge h2{font-size:28px}.bridge-brand{font-size:23px}.product-bridge .orange-button{min-height:48px}.service-faq{gap:28px}.faq-list summary{font-size:17px;gap:20px}.service-contact{padding:37px 0}.service-contact>.service-width{grid-template-columns:1fr;gap:28px}.service-contact address{justify-self:start}.service-contact address .contact-phone{font-size:27px}.service-contact address a{font-size:18px}.service-contact p{font-size:16px}.service-footer{flex-wrap:wrap;gap:20px;font-size:13px}}
@media(max-width:370px){.service-page .main-logo{width:101px}.service-page .header-inner{padding-inline:15px}.service-page .header-contact{font-size:11px;padding-inline:10px}.service-hero h1{font-size:37px}.service-actions{align-items:stretch;flex-direction:column}.service-actions a{width:100%}.service-facts dd{font-size:15px}.service-footer{gap:15px}}

.service-hero h1{overflow-wrap:break-word}@media(min-width:621px){.service-page .service-hero-copy:has(h1) {min-width:0}}

/* Product identity stays within detail pages; the corporate homepage is unchanged. */
.service-page{--project-accent:#ed7724;--project-strong:#a9480b;--project-tint:#fff5ec;--project-line:#f1d8c5;--project-deep:#70350f;--project-button-ink:#fff;--orange:var(--project-accent);--service-warm:var(--project-tint);--service-line:var(--project-line);background:linear-gradient(180deg,var(--project-tint),#fff 730px) no-repeat}
.service-page .site-header{background:#ffffffed;border-bottom:1px solid var(--project-line)}
.service-page .orange-button{background:var(--project-accent);color:var(--project-button-ink);border:1px solid transparent}
.service-page .orange-button:hover{filter:brightness(.94)}
.service-page .service-eyebrow,.service-page .item-number,.service-page .step-number,.service-page .faq-list summary:after{color:var(--project-strong)}
.service-page .hero-format .icon,.service-page .benefit-row .icon{color:var(--project-strong)}
.service-page .breadcrumbs a:hover,.service-page .main-nav a:hover,.service-page .service-contact address a:hover,.service-page .service-footer a:hover{color:var(--project-strong)}
.service-page .quiet-button{border-color:var(--project-line);background:#fff}
.service-page .quiet-button:hover{background:var(--project-tint);border-color:var(--project-accent)}
.service-page .service-facts{background:var(--project-tint);border:1px solid var(--project-line)}
.service-page .service-facts>div{border-color:var(--project-line)}
.service-page .service-usecases,.service-page .service-contact{background:var(--project-tint)}
.service-page .product-bridge{background:var(--project-deep)}
.service-page .product-bridge p{color:#ffffffe0}
.service-page .bridge-brand .icon{color:#fff}
.service-page .usecase-grid article{border-color:var(--project-line)}
.service-page :is(a,button,summary):focus-visible{outline-color:var(--project-strong)}

/* Palettes sampled from the projects' public homepages, October 2026. */
.project-reclamist{--project-accent:#075bc4;--project-strong:#06489d;--project-tint:#eaf3ff;--project-line:#cfdef4;--project-deep:#063476;--project-button-ink:#fff}
.project-retail-radio{--project-accent:#e5b0b0;--project-strong:#8b5156;--project-tint:#fbf7f7;--project-line:#eadbdb;--project-deep:#f2e5e6;--project-button-ink:#402b2f}
.project-retail-radio .product-bridge{color:var(--ink)}
.project-retail-radio .product-bridge p{color:#615356}
.project-retail-radio .bridge-brand .icon{color:var(--project-strong)}
.project-vionsy{--project-accent:#7a61fe;--project-strong:#593ac7;--project-tint:#f2efff;--project-line:#ded5ff;--project-deep:#33235f;--project-button-ink:#fff}
.project-yourbgm{--project-accent:#08d9e6;--project-strong:#006d77;--project-tint:#e8fbfc;--project-line:#bfecef;--project-deep:#101820;--project-button-ink:#041317}
.project-yaradio{--project-accent:#232323;--project-strong:#232323;--project-tint:#f2f2f2;--project-line:#dadada;--project-deep:#1d1d1b;--project-button-ink:#fff}
.project-vionsy .orange-button{background:#6f53ed}
.service-page .orange-button:hover{filter:none;box-shadow:0 4px 14px #092b3d24}

/* Approved placement: 40% of each preview sits left of the main photograph. */
.service-page{--preview-offset:.4}
.service-hero{--preview-width:210px;--hero-column-gap:48px;--guide-gap:4px;--guide-drop:20px;align-items:start;row-gap:0}
.service-hero-copy{display:contents}
.service-hero-copy>.service-eyebrow{grid-column:1;grid-row:1}
.service-hero-heading{grid-column:1;grid-row:2;display:grid;grid-template-columns:minmax(min-content,1fr) minmax(100px,170px);gap:24px;align-items:start;padding-bottom:25px;min-width:0}
.service-hero-heading h1{min-width:0;margin:0}
.service-hero-copy>.service-lead{grid-column:1;grid-row:3}
.service-hero-copy>.service-hero-links{grid-column:1;grid-row:4}
.service-hero-visual{grid-column:2;grid-row:2 / 5}
@media(min-width:1001px){
  .service-hero-copy>.service-eyebrow{position:relative}
  /* Independent horizontal rule: fade only above the thumbnail's final quarter. */
  .service-hero-copy>.service-eyebrow:after{content:'';position:absolute;left:0;top:100%;width:calc(100% + var(--hero-column-gap) + var(--preview-width) * (1 - var(--preview-offset)));height:1px;background:linear-gradient(to right,var(--project-strong) 0%,var(--project-strong) calc(100% - var(--preview-width) * .25),transparent 100%);opacity:.45;pointer-events:none}
  /* Preserve the approved 4px gap above the miniature and its 40% overlap. */
  .service-hero-visual .project-thumbnail{top:calc(var(--guide-gap) + 1px - var(--guide-drop))}
}
@media(max-width:1100px){.service-hero{--preview-width:192px;--hero-column-gap:30px}}
@media(max-width:1000px){
  .service-hero{--preview-width:176px;grid-template-columns:1fr;column-gap:0}
  .service-hero-heading{display:contents}
  .service-hero-copy>.service-eyebrow{grid-column:1 / -1;grid-row:1}
  .service-hero-heading h1{grid-column:1 / -1;grid-row:2;margin:0 0 25px;max-width:none}
  .service-hero-copy>.service-lead{grid-column:1 / -1;grid-row:3;max-width:720px}
  .service-hero-copy>.service-hero-links{grid-column:1 / -1;grid-row:4;margin-bottom:28px}
  .service-hero-visual{grid-column:1 / -1;grid-row:5;margin-left:calc(var(--preview-width) * var(--preview-offset,0))}
  .service-hero-links .service-actions{flex-direction:row}
  .service-hero-links .service-action-hint{max-width:none}
}
@media(max-width:620px){
  /* The narrow portrait frame already crops most of the empty left field. */
  .service-page[data-service]{--photo-zoom:1.08}
  .service-hero{--preview-width:calc(clamp(100px,27vw,150px) + 8px)}
  .service-hero-copy>.service-hero-links{margin-top:24px;margin-bottom:25px}
  .hero-format{left:10px;right:10px;bottom:14px;padding:11px 10px;gap:8px;font-size:12px}
  .hero-format .icon{width:23px;height:23px}
}
@media(max-width:370px){.service-hero-links .service-actions{flex-direction:column}}

/* Contextual links between related services. */
.service-related { padding-top: 30px; padding-bottom: 38px; border-top: 1px solid var(--line, #d6e1e6); }
.service-related h2 { font-size: clamp(21px, 2vw, 28px); margin: 0 0 16px; }
.service-related ul { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; padding: 0; margin: 0; }
.service-related a { text-decoration: underline; text-underline-offset: 4px; }
.service-related a:hover { color: var(--brand, #125bc1); }