/* v9: photographic campaign collages, approved desktop + mobile direction. */
:root { --paper:#f8faff; --lavender:#edf1ff; --blue:#4052ff; --lime:#c5fa73; --ink:#111521; }
:root { --ink:#4d6075; }
body { background:var(--paper); }
.home-page main { overflow:clip; }
.hero:after,.service-copy:before,.footer:before,.members-hero:before,.profile-header:before,.about-hero-art:after,.build-visual:before { content:none; }
.header { border-bottom:1px solid #e9edf7; }
.hero .pill { min-width:250px; }
.photo { border-radius:0; }
.movie { position:relative; padding-top:80px; padding-bottom:10px; }
.movie-title { position:relative; z-index:2; margin:12px 0 24px; font-size:clamp(1.75rem,3vw,2.75rem); letter-spacing:.01em; }
.movie .eyebrow { position:relative; z-index:2; }
.movie-cover { z-index:1; }
.play { background:var(--lime); color:var(--ink); box-shadow:none; width:76px; height:76px; top:50%; }
.movie-label { clip:auto; width:auto; height:auto; overflow:visible; margin:0; padding:0; background:transparent; left:50%; top:calc(50% + 52px); transform:translateX(-50%); white-space:nowrap; font-size:.875rem; text-shadow:0 1px 5px #1118; }
.caption { font-size:1rem; letter-spacing:.015em; line-height:1.8; margin-top:18px; }
.collage { position:absolute; pointer-events:none; user-select:none; z-index:2; overflow:hidden; }
.collage img { width:100%; height:100%; object-fit:cover; max-width:none; }
.product-detail { width:230px; height:310px; }
.product-detail img { position:absolute; width:230%; height:auto; left:-9%; top:-8%; }
.services { position:relative; padding:48px 0 28px; }
.section-heading h2 { font-size:clamp(2.6rem,4vw,3.75rem); font-weight:800; }
.section-heading>p { font-size:1.125rem; letter-spacing:.01em; }
.service-card { position:relative; margin-top:32px; }
.service-card+.service-card { margin-top:36px; }
.service-copy { width:71%; margin-top:-66px; padding:28px 24px 27px; border:0; border-radius:0; background:var(--lavender); box-shadow:none; overflow:visible; min-height:0; }
.service-copy h3 { font-size:clamp(1.35rem,2vw,1.9rem); line-height:1.5; }
.service-copy>p:not(.service-number) { font-size:1rem; }
.service-tags { font-size:.875rem!important; max-width:550px; margin-inline:auto; }
.service-copy .text-link { min-height:44px; }
.service-collage { right:-105px; bottom:62px; width:180px; height:240px; transform:rotate(7deg); }
.editorial-note { position:absolute; pointer-events:none; user-select:none; width:135px; z-index:2; color:#829bf5; font-family:"Segoe Print","Bradley Hand",cursive; font-size:1.5rem; line-height:1.2; font-style:italic; transform:rotate(-9deg); text-align:left; }
.service-note { left:-45px; bottom:42px; }
.video-creative { left:-56px; bottom:20px; width:190px; height:270px; transform:rotate(-5deg); z-index:2; }
.video-creative img { object-fit:contain; }
.influencer-note { right:-44px; bottom:78px; font-size:1.4rem; width:160px; }
.about { position:relative; isolation:isolate; overflow:hidden; display:grid; place-items:center; border:0; min-height:360px; padding:48px 26px; margin:0; background:var(--blue); color:#fff; }
.about-content { position:relative; z-index:2; width:min(680px,65%); }
.about .small-label { color:#fff; text-transform:none; font-size:.875rem; letter-spacing:.04em; }
.about h2 { color:#fff; font-size:clamp(2rem,3.7vw,3.5rem); line-height:1.45; margin:20px 0; font-weight:800; }
.about h2>span { color:#fff; }
.about-content>p:not(.small-label) { color:#fff; font-size:1rem; line-height:1.9; }
.about .light-link { color:#fff; border-bottom:1px solid #ffffff80; margin-top:21px; min-height:44px; }
.about .light-link:hover { color:#fff; border-color:#fff; }
.about a:focus-visible { outline-color:var(--lime); }
.about-collage { position:absolute; pointer-events:none; width:310px; height:480px; top:50%; transform:translateY(-50%) rotate(10deg); left:-110px; opacity:.78; overflow:hidden; }
.about-collage img { height:100%; width:100%; object-fit:cover; }
.about-collage-right { left:auto; right:-100px; transform:translateY(-50%) rotate(-12deg); }
.about-collage-right img { object-position:right bottom; }
.careers { position:relative; padding:46px 0 36px; }
.careers-photo { width:80%; margin:26px auto 20px; }
.careers>p { font-size:1rem; color:#555c6b; }
.careers .text-link { min-height:44px; }
.notebook-collage { right:-125px; top:150px; width:230px; height:270px; transform:rotate(-11deg); }
.careers-note { left:-38px; top:210px; font-family:Arial,sans-serif; font-style:normal; transform:none; font-size:.8125rem; text-transform:uppercase; letter-spacing:.17em; line-height:2; width:110px; }
.contact { position:relative; isolation:isolate; overflow:hidden; width:100%; margin:0; border:0; border-radius:0; min-height:300px; padding:44px 24px; background:var(--lime); text-align:center; }
.contact-content { position:relative; z-index:2; max-width:680px; margin:auto; }
.contact .small-label { color:var(--ink); text-transform:none; letter-spacing:.03em; font-size:.875rem; }
.contact h2 { font-size:clamp(1.65rem,2.4vw,2.4rem); line-height:1.5; margin:13px 0; font-weight:800; }
.contact-content>p:not(.small-label) { max-width:540px; margin-inline:auto; color:#384728; font-size:1rem; line-height:1.8; }
.contact .pill { min-width:280px; justify-content:center; min-height:56px; padding:14px 28px; margin-top:22px; box-shadow:none; gap:18px; }
.contact .pill>span[aria-hidden] { background:none; color:#fff; width:auto; height:auto; flex:none; font-size:1.5rem; }
.contact-art { right:3%; top:auto; bottom:-70px; height:370px; width:280px; z-index:1; }
.contact-art img { height:100%; width:100%; object-fit:contain; }
.contact-art:after { content:none; }
.contact:before { content:""; position:absolute; inset:-60px auto -100px -100px; width:330px; background:url("assets/campaign-v9.png") 25% 5% / 850px auto no-repeat; opacity:.32; filter:blur(9px); mask-image:linear-gradient(90deg,#000,transparent); }
.contact-note { left:7%; bottom:42px; color:#496837; }
.footer { padding-block:32px 24px; }
.footer-bottom { font-size:.875rem; }
.home-page .section-heading>p .mobile-only,.mobile-only { display:none; }
@media(max-width:1150px) and (min-width:701px) {
 .service-collage { right:-45px; width:135px; height:200px; }
 .video-creative { left:-40px; width:150px; height:235px; }
 .service-note,.influencer-note,.careers-note { display:none; }
 .notebook-collage { right:-65px; width:180px; height:210px; }
 .about-collage { left:-155px; }
 .about-collage-right { left:auto; right:-155px; }
 .contact-art { right:-4%; width:220px; height:300px; bottom:-50px; }
 .contact-content { max-width:60%; }
 .contact-note { left:4%; font-size:1.2rem; width:110px; }
}
@media(max-width:700px) {
 .home-page .section-width { width:92%; }
 .home-page .hero { min-height:720px; }
 .home-page .hero-copy { padding-top:128px; }
 .home-page .hero-art { height:45%; }
 .home-page .hero h1 { font-size:clamp(1.8rem,7.5vw,2.7rem); }
 .movie { padding-top:52px; }
 .movie .eyebrow { text-align:left; margin-left:4px; font-size:.875rem; }
 .movie-title { text-align:left; font-size:clamp(1.7rem,7.3vw,2.15rem); line-height:1.5; letter-spacing:0; margin:16px 0 24px; max-width:100%; }
 .mobile-only,.home-page .section-heading>p .mobile-only { display:initial; }
 .movie-photo { aspect-ratio:1.5; }
 .movie-photo img { width:182%; left:-42%; }
 .play { width:58px; height:58px; font-size:20px; }
 .movie-label { top:calc(50% + 37px); font-size:.875rem; }
 .caption { font-size:.875rem; line-height:1.8; margin-top:15px; }
 .services { padding-top:38px; padding-bottom:28px; }
 .section-heading h2 { font-size:2.5rem; }
 .section-heading>p { font-size:1.125rem; line-height:1.7; letter-spacing:0; }
 .service-card { margin-top:28px; }
 .service-card+.service-card { margin-top:24px; }
 .offline-photo,.influencer-photo { aspect-ratio:2.05; }
 .offline-photo img,.influencer-photo img { width:230%; left:-65%; }
 .influencer-photo img { left:-71%; }
 .service-copy { width:97%; margin-top:-10px; padding:22px 16px 20px; border-radius:0; }
 .service-copy h3 { font-size:clamp(1.15rem,5.05vw,1.4rem); line-height:1.5; }
 .service-number { font-size:1.0625rem; margin-bottom:8px; }
 .service-copy>p:not(.service-number) { font-size:1rem; letter-spacing:0; line-height:1.85; }
 .service-copy .service-tags { font-size:.875rem!important; }
 .service-collage { width:66px; height:98px; right:-5px; bottom:auto; top:75px; transform:rotate(6deg); }
 .service-note,.influencer-note { display:none; }
 .video-creative { width:88px; height:162px; left:-5px; bottom:auto; top:45px; transform:rotate(-5deg); }
 .about { min-height:445px; padding:60px 20px; }
 .about-content { width:100%; max-width:350px; }
 .about h2 { font-size:clamp(1.65rem,7.2vw,2.1rem); line-height:1.5; margin:20px 0; }
 .about-title-desktop { display:none; }
 .about-title-mobile { display:block; }
 .about-content>p:not(.small-label) { max-width:285px; margin:auto; font-size:1rem; text-wrap:balance; }
 .about-collage { width:112px; height:175px; left:-55px; top:auto; bottom:-54px; transform:rotate(10deg); opacity:.65; }
 .about-collage-right { left:auto; right:-32px; top:-64px; bottom:auto; transform:rotate(-12deg); }
 .careers { padding:36px 0 28px; }
 .careers-photo { width:100%; margin:24px auto 20px; aspect-ratio:1.75; }
 .careers-photo img { width:320%; left:-110%; }
 .careers>p { font-size:1rem; line-height:1.85; max-width:330px; margin:auto; text-wrap:balance; }
 .notebook-collage { width:105px; height:128px; right:-8px; top:210px; transform:rotate(-8deg); }
 .careers-note { display:none; }
 .contact { min-height:420px; padding:36px 6% 62px; }
 .contact-content { max-width:360px; }
 .contact h2 { font-size:clamp(1.55rem,6.7vw,2rem); line-height:1.5; margin:15px 0; }
 .contact-content>p:not(.small-label) { font-size:1rem; max-width:260px; line-height:1.85; text-wrap:balance; }
 .contact .pill { min-width:0; width:min(100%,300px); min-height:56px; margin-top:24px; padding:15px 24px; position:relative; z-index:2; }
 .contact-art { right:-12px; bottom:-28px; width:148px; height:205px; opacity:.92; }
 .contact:before { width:170px; opacity:.23; }
 .contact-note { left:5%; bottom:28px; width:95px; font-size:1.1rem; }
 .footer nav { font-size:.875rem; gap:12px 18px; }
 .footer-bottom { font-size:.8125rem; }
}
@media(min-width:701px) { .about-title-mobile { display:none; } }
@media(prefers-reduced-motion:no-preference) {
 .collage { transition:transform .35s ease; }
 .service-card:hover .service-collage { transform:rotate(3deg) translateY(-3px); }
}

/* v20: influencer campaigns in one complete visual, without a hand cutout. */
.service-card[aria-labelledby="influencer-title"] .influencer-photo {aspect-ratio:16/9;--offset:0%;background:#edf3ff}
.service-card[aria-labelledby="influencer-title"] .influencer-photo img {position:static;display:block;width:100%;height:100%;max-width:100%;object-fit:contain;transform:none}
.service-card[aria-labelledby="influencer-title"] .service-copy {margin-top:0}

/* v23: a brighter event photograph, with no floating product decoration. */
#offline-service .offline-photo img { filter:brightness(1.14) contrast(.94) saturate(1.04); }

/* v24: news replaces the recruitment section. */
.news { position:relative; display:grid; grid-template-columns:1fr 1.4fr; gap:64px; padding-block:88px; text-align:left; scroll-margin-top:90px; }
.news-legacy-anchor { position:absolute; top:0; scroll-margin-top:90px; }
.news-heading h2 { margin:0; font-size:clamp(3rem,6vw,5.5rem); font-weight:800; line-height:1; letter-spacing:-.055em; }
.news-heading h2 span { color:var(--blue); }
.news-heading p { margin:18px 0 0; font-size:.9375rem; font-weight:700; letter-spacing:.08em; }
.news-intro { margin:0 0 28px; color:#555c6b; font-size:1rem; line-height:1.9; }
.news-link { display:flex; justify-content:space-between; align-items:center; gap:32px; width:fit-content; min-height:52px; margin-top:26px; border-bottom:1px solid #8e9bcb; font-weight:700; text-decoration:none; color:var(--ink); }
.news-arrow { color:var(--blue); font-size:1.25rem; }
.news-link:hover { color:var(--blue); border-color:var(--blue); }
.news-link:focus-visible { outline:2px solid var(--blue); outline-offset:5px; }
@media(max-width:700px) {
 .news { grid-template-columns:1fr; gap:32px; padding:54px 8px 58px; }
 .news-heading h2 { font-size:3.5rem; }
 .news-heading p { margin-top:12px; }
 .news-intro { font-size:.9375rem; margin-bottom:24px; }
 .news-link { min-height:48px; font-size:.9375rem; margin-top:20px; }
}

/* v27: show news headlines before the archive link. */
.news-intro {margin-bottom:24px}
.news-list {list-style:none;margin:0;padding:0;border-top:1px solid #dce2ef}
.news-item {padding:23px 0 25px;border-bottom:1px solid #dce2ef}
.news-meta {display:flex;align-items:center;gap:16px;font-size:12px;margin-bottom:11px}
.news-date {color:#697183;font-variant-numeric:tabular-nums;letter-spacing:.03em}
.news-category {color:#4052ff;font-size:11px;font-weight:700}
.news-item h3 {font-size:17px;font-weight:650;line-height:1.75;letter-spacing:0;margin:0;color:#141926}
.news-preview-note {font-size:11px;color:#697183;margin:0 0 12px}
@media(max-width:700px){.news-item{padding:21px 0}.news-item h3{font-size:16px;line-height:1.8}.news-meta{gap:14px;margin-bottom:8px}.news-intro{margin-bottom:22px}}
/* v32: clear type hierarchy, unified blue, restrained lime surfaces. */
:root { --ink:#344153; --blue:#4056df; --paper:#f8fafc; --lavender:#eef2fa; --body-text:#596477; --lime:#e3f1c8; }
body { color:var(--body-text); }
.wordmark {color:var(--ink);font-weight:600;letter-spacing:-.055em}
h1,h2,h3 {color:var(--ink);font-weight:500}
.hero h1 {font-weight:600;letter-spacing:-.025em}
.hero-copy p {font-weight:400}
.header nav {font-weight:500}
.movie-title,.service-copy h3,.contact h2,.about h2 {font-weight:600}
.section-heading>p {font-weight:500}
.section-heading h2 {font-weight:500;letter-spacing:-.04em}
.news-heading h2 {font-weight:500;letter-spacing:-.045em}
.news-heading p,.text-link,.news-link,.member-link,.profile-link {font-weight:500}
.news-item h3 {color:var(--ink);font-weight:500}
.news-category {color:var(--blue)}
.pill {font-weight:600}
.pill:hover {background:#3348c5}
.news-intro,.caption,.movie .caption,.service-copy .service-tags {color:var(--body-text)}
.about h2,.about h2>span {color:#fff}
.about-content>p:not(.small-label),.about .light-link {color:#fff}
.contact h2,.contact .small-label {color:var(--ink)}
.contact-content>p:not(.small-label) {color:#536247}
.member-copy h2,.profile-copy h1,.about-hero h1,.about-section h2 {font-weight:600}
.members-heading p,.member-role,.profile-role {font-weight:500}
body.offline-page {color:var(--body-text);background:var(--paper)}
.offline-page .off-hero h1,.offline-page .off-hero-copy .off-lead,
.offline-page .off-heading h2,.offline-page .off-card h3,
.offline-page .off-network h2,.offline-page .off-event h3 {font-weight:600}
.offline-page .off-process h2,.offline-page .off-process h3 {color:#fff}
.offline-page .off-faq-item summary {font-weight:500}
@media(max-width:700px) {
 .header .wordmark {font-size:1.7rem}
 .section-heading h2 {font-size:2.4rem}
 .news-heading h2 {font-size:3rem}
}

/* 2026-10-06: stable, full-width navigation across all page templates. */
body:is(.home-page,.inner-page) > header.header {
  position: relative; inset: auto; width: 100%; max-width: none; margin: 0;
  height: 76px; min-height: 76px; padding: 15px clamp(24px, 3.9vw, 96px);
  gap: 24px; box-sizing: border-box; background: #fff;
}
body:is(.home-page,.inner-page) > header.header > .wordmark {
  font-size: 28px; line-height: 1; color: var(--ink); flex-shrink: 0;
}
body:is(.home-page,.inner-page) > header.header > nav {
  gap: clamp(20px, 2vw, 32px); font-size: 16px; font-weight: 500; color: var(--ink);
}
body:is(.home-page,.inner-page) > header.header > nav > a:any-link {
  padding: 10px 0; min-height: 44px; border-radius: 0; background: transparent;
  color: inherit; white-space: nowrap;
}
body:is(.home-page,.inner-page) > header.header > nav > a:any-link:hover,
body:is(.home-page,.inner-page) > header.header > nav > a:any-link[aria-current="page"] { color: var(--blue); }
@media (min-width: 701px) and (max-width: 1000px) {
  body:is(.home-page,.inner-page) > header.header > nav { gap: 18px; font-size: 14px; }
}
@media (max-width: 700px) {
  body:is(.home-page,.inner-page) > header.header {
    height: 64px; min-height: 64px; padding: 10px 6%; gap: 16px;
  }
  body:is(.home-page,.inner-page) > header.header > .wordmark { font-size: 27.2px; }
  body:is(.home-page,.inner-page) > header.header > nav {
    inset: 100% 16px auto; padding: 16px 20px; gap: 5px; background: #fff; z-index: 8;
    font-size: 16px;
  }
  body:is(.home-page,.inner-page) > header.header > nav > a:any-link { padding: 14px 8px; }
}

/* Shared actions: decorative arrows are absent at every viewport width. */
.pill > span[aria-hidden="true"],
.sf-button > span[aria-hidden="true"],
.text-link > span[aria-hidden="true"],
.news-link > span[aria-hidden="true"] { display: none !important; }
.contact .pill, .hero .pill, .news-link { justify-content: center; }

/* The header now occupies document flow; mobile hero spacing starts below it. */
@media (max-width: 900px) {
  .home-page .hero {
    display: flex; flex-direction: column; height: auto; min-height: 0; max-height: none;
  }
  .home-page .hero::before { content: none; }
  .home-page .hero-copy {
    position: relative; inset: auto; order: 1; width: 100%; max-width: none;
    margin: 0; padding: 32px 6% 28px; transform: none;
  }
  .home-page .hero h1 { font-size: clamp(24px, 7.5vw, 32px); line-height: 1.5; }
  .home-page .hero-copy p {
    font-size: 16px; line-height: 1.85; margin: 20px 0 24px; max-width: none;
  }
  .home-page .hero-copy .desktop-break { display: none; }
  .home-page .hero .pill { min-width: 216px; min-height: 54px; padding: 14px 24px; }
  .home-page .hero-art {
    position: relative; inset: auto; order: 2; z-index: 0; display: block;
    width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: center;
  }
  .home-page .section-width { width: 88%; }
  .home-page .home-service-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .home-page .service-card, .home-page .service-card + .service-card { margin: 0; min-width: 0; }
  .home-page .service-card .service-copy {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; margin: 0; padding: 24px 20px; text-align: center;
  }
  .home-page .service-card .service-copy h3 {
    font-size: clamp(18px, 4.8vw, 24px); line-height: 1.5; letter-spacing: 0;
  }
  .home-page .service-card .service-copy > p:not(.service-number) { font-size: 16px; line-height: 1.85; }
  .home-page .service-card .service-copy .service-tags { max-width: none; }
  .home-page .home-service-grid { margin-top: 28px; }
  .home-page .service-card .photo { width: 100%; margin: 0; }
  .home-page .news { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 48px 0; }
  .home-page .news-heading, .home-page .news-intro { text-align: center; }
  .home-page .news-intro br { display: none; }
  .home-page .news-list { text-align: left; }
  .home-page .news .section-action { display: flex; width: fit-content; margin-inline: auto; }

  /* A full text column and stable phrase breaks, shared by all Contact sections. */
  body:is(.home-page,.inner-page) .contact {
    width: 100%; margin: 0; border-radius: 0; min-height: 0; padding: 36px 6% 24px;
  }
  body:is(.home-page,.inner-page) .contact .contact-content {
    width: 100%; max-width: 560px; margin-inline: auto; text-align: center;
  }
  body:is(.home-page,.inner-page) .contact h2 {
    font-size: clamp(24px, 6.7vw, 28px); line-height: 1.5; letter-spacing: 0; margin: 18px 0;
  }
  body:is(.home-page,.inner-page) .contact h2 > span { display: block !important; }
  body:is(.home-page,.inner-page) .contact h2 br { display: none; }
  body:is(.home-page,.inner-page) .contact .contact-content > p:not(.small-label) {
    max-width: 34em; margin-inline: auto; font-size: 16px; line-height: 1.85; text-wrap: wrap;
  }
  body:is(.home-page,.inner-page) .contact .pill {
    width: min(280px, 100%); min-width: 0; min-height: 54px; padding: 14px 24px; justify-content: center; margin-top: 24px;
  }
  body:is(.home-page,.inner-page) .contact .small-label { font-size: 24px; line-height: 1.3; }
}
@media (min-width: 701px) and (max-width: 900px) {
  body:is(.home-page,.inner-page) > header.header > .menu-toggle {
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    gap: 6px; width: 44px; height: 44px; background: #fff; z-index: 7;
  }
  .menu-toggle span { width: 22px; height: 2px; background: var(--ink); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
  body:is(.home-page,.inner-page) > header.header > nav {
    display: none; position: absolute; inset: 100% 16px auto; padding: 16px 20px;
    flex-direction: column; align-items: stretch; gap: 5px; background: #fff; z-index: 8;
    box-shadow: 0 12px 28px #12162512; font-size: 16px;
  }
  body:is(.home-page,.inner-page) > header.header > nav.is-open { display: flex; }
  body:is(.home-page,.inner-page) > header.header > nav > a:any-link { padding: 14px 8px; }
}

/* News entries keep their complete clickable area without repeated arrow marks. */
.news-entry .entry-arrow { display: none !important; }
.news-entry:has(.entry-arrow) { padding-right: 0; }
@media (max-width: 900px) {
  .home-page .mobile-copy-phrase,
  .inner-page .contact .mobile-copy-phrase { display: inline-block; }
  .contact .mobile-copy-phrase:first-child { display: block; }
}

@media (max-width: 900px) {
  .news-item h3 { text-wrap: balance; }
}