/* Homepage only: one introduction, then colour at the points of choice.
   Original letter animation and visible-only background motion are preserved. */
/* Open at the very top; smoked glass on the first scroll. The orange-tipped
   keyline stays, and the flow can still reach the top of the opening canvas. */
.home-page #nav.studio-navigation {
  background: transparent !important; border-bottom: 0 !important;
  box-shadow: none;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  transition: background-color .18s ease,box-shadow .18s ease;
}
.home-page #nav.studio-navigation:is(.is-scrolled,.is-past-hero,.menu-open) {
  background: var(--studio-nav-surface) !important;
  box-shadow: var(--studio-nav-shadow);
  backdrop-filter: var(--studio-nav-filter) !important; -webkit-backdrop-filter: var(--studio-nav-filter) !important;
}
@media (prefers-reduced-transparency:reduce) {
  .home-page #nav.studio-navigation { background: var(--studio-nav-surface) !important; }
}
.home-page .home-flow-hero {
  min-height: var(--flow-hero-height); padding: 148px clamp(24px,5.5vw,88px) 88px;
  display: flex; align-items: center;
}
.home-page .home-flow-inner { width: min(1280px,100%); max-width: none; margin: 0 auto; }
.home-page .home-flow-title { position: relative; width: 100%; max-width: none; margin: 0; }
.home-page .home-flow-detail {
  display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr);
  align-items: start; gap: clamp(36px,6vw,88px);
  width: 90%; max-width: none; margin: 16px auto 0; padding-top: 28px;
  border-top: 1px solid #ffffff30;
}
.home-page .studio-hero-summary { width: 100%; max-width: 470px; margin: 0; text-align: left; justify-self: start; }
.home-page .studio-hero-summary p { margin: 0; max-width: none; color: #cbd1dc; font: 400 clamp(14px,1.25vw,17px)/1.7 var(--studio-body); text-wrap: pretty; }
.home-page .studio-hero-summary p strong { display: block; margin: 0 0 8px; color: #fffaf3; font: 600 clamp(21px,2vw,28px)/1.25 var(--studio-type); letter-spacing: -.035em; }
.home-page .home-flow-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 14px 26px; margin-top: 24px; }
.home-page .home-flow-primary { min-height: 48px; padding: 14px 21px; gap: 14px; border-radius: 6px; }
.home-page .home-flow-secondary { font-size: 12px; padding: 12px 0; }
.hero-disciplines { list-style: none; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px 22px; padding: 0; margin: 0; }
.hero-disciplines li { min-width: 0; }
.hero-disciplines a {
  --hero-icon-colour: #8bc1ff;
  display: flex; align-items: center; gap: 12px; min-height: 57px;
  color: #e4e8f0; text-decoration: none; font: 500 12px/1.5 var(--studio-body);
  transition: color .2s ease;
}
.hero-disciplines svg { display: block; flex: 0 0 28px; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.hero-disciplines .hero-icon-accent { stroke: var(--hero-icon-colour); }
.hero-disciplines .hero-discipline-brand { --hero-icon-colour: #ffe28a; }
.hero-disciplines .hero-discipline-campaign { --hero-icon-colour: #ff9a5b; }
.hero-disciplines .hero-discipline-tools { --hero-icon-colour: #44e8a4; }
.hero-disciplines a:is(:hover,:focus-visible) { color: var(--hero-icon-colour); }
/* Contact is a direct destination, not a long animated tour of every section. */
html.is-contact-jump { scroll-behavior: auto !important; }
.home-page #contact { scroll-margin-top: calc(var(--site-header-offset) + 16px); }
.home-page #studioContactTitle:focus { outline: none; }

/* Stable discipline identities survive hosting pretty-URL rewriting.
   Slanted light bars reveal the destination colour on hover or keyboard focus. */
.home-page .studio-service-row {
  --service-glow: #8997b34d;
  --service-field: linear-gradient(120deg,#474d5a,#c4ccd9,#515968);
  position: relative; isolation: isolate; overflow: hidden;
  grid-template-columns: 45px minmax(0,1fr) minmax(0,.9fr) 28px;
  min-height: 132px;
}
.home-page .studio-service-row[data-discipline="web"] { --service-glow: #086aff66; --service-field: var(--discipline-web-field); }
.home-page .studio-service-row[data-discipline="campaigns"] { --service-glow: #ff660a66; --service-field: var(--discipline-campaign-field); }
.home-page .studio-service-row[data-discipline="tools"] { --service-glow: #00c67a66; --service-field: var(--discipline-tools-field); }
.home-page .studio-service-row[data-discipline="logos"] { --service-glow: #ffd23f66; --service-field: var(--discipline-logo-field); }
.home-page .studio-service-row > p { padding-right: 48px; }
.home-page .studio-service-row:focus-visible { outline-offset: 4px; }
.studio-service-beam {
  position: absolute; top: -20px; bottom: -20px; right: 68px; width: 20px;
  overflow: hidden; pointer-events: none; transform: skewX(-19deg);
  background: linear-gradient(90deg,#17192005,#17192022 45%,#ffffffd9 51%,#17192012);
  border-inline: 1px solid #17192018;
  box-shadow: 0 0 20px transparent; transition: box-shadow .24s ease;
}
.studio-service-beam::before {
  content: ''; position: absolute; inset: 0; background: var(--service-field);
  box-shadow: inset 2px 0 0 #ffffff80,inset -2px 0 0 #00000025;
  opacity: 0; transition: opacity .24s ease;
}
.studio-service-beam::after {
  content: ''; position: absolute; inset: -100% 0 0; height: 100%;
  background: linear-gradient(180deg,transparent 15%,#ffffffb3 50%,transparent 85%);
  transform: translateY(0); transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.home-page .studio-service-row:is(:hover,:focus-visible) .studio-service-beam::before { opacity: 1; }
.home-page .studio-service-row:is(:hover,:focus-visible) .studio-service-beam { box-shadow: 0 0 20px var(--service-glow); }
.home-page .studio-service-row:is(:hover,:focus-visible) .studio-service-beam::after { transform: translateY(200%); }
.home-page .studio-service-row:is(:hover,:focus-visible) { background: #ffffff85; }
.home-page .studio-service-row > .studio-service-arrow { justify-self: end; }

/* Warm paper, strong ink and a single orange moving word. The statement
   has its own light stage after the dark comparison section. */
.home-page .why {
  padding: 80px clamp(20px,5vw,80px) 48px;
  background: #f8f5f0; color: #191c23;
}
.home-page .why-inner {
  max-width: 1180px; padding: clamp(56px,7vw,94px) clamp(20px,4vw,60px);
  overflow: hidden; isolation: isolate; border-radius: 28px 28px 6px 28px;
  background: radial-gradient(ellipse at 90% 0%,#f1d2b670 0%,transparent 60%),linear-gradient(135deg,#fffaf3,#f3ebe0 70%,#e9dccb);
  box-shadow: inset 0 0 0 1px #b9a58f40,inset 0 1px #ffffffc9;
}
.home-page .why-inner::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  inset: -20% -15% -20% 76%; transform: skewX(-19deg);
  border-left: 1px solid #bca48938; background: #fffaf326;
}
.home-page .why-lbl { color: #6c5746; font-size: 10px; letter-spacing: .18em; margin-bottom: 32px; }
.home-page .why-head { color: #191c23; font-size: clamp(42px,6.2vw,84px); letter-spacing: -.055em; line-height: 1.02; }
.home-page .wy-rot { height: 1.2em; margin-top: .04em; }
.home-page .wy-rot span { color: #d64a0b; }
.home-page .wy-points { margin: 32px 0; grid-template-columns: repeat(3,minmax(0,1fr)); max-width: 820px; margin-inline: auto; gap: 20px; }
.home-page .wy-pt { color: #65574c; font-size: 12px; line-height: 1.6; white-space: normal; padding-top: 14px; border-color: #79634c40; }
.home-page .wy-pt::before { display: none; }
.home-page .why .btn-p { background: #191c23; color: #fffaf3; border: 1px solid #191c23; border-radius: 7px; box-shadow: none; }
.home-page .why .btn-p:hover { background: #ff752b; border-color: #ff752b; color: #191c23; }

/* Three different compositions make the full studio offer visible at a glance. */
.home-page .audience-editorial { padding-bottom: 86px; }
.audience-heading { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px,6vw,100px); align-items: end; margin-bottom: 48px; }
.audience-editorial .audience-eyebrow { margin-bottom: 22px; font: 600 10px/1.5 var(--studio-body); letter-spacing: .14em; text-transform: uppercase; color: #5c5e66; }
.audience-editorial h2 { font-weight: 700; font-size: clamp(44px,5.8vw,80px); letter-spacing: -.055em; line-height: 1.02; }
.audience-heading > p { max-width: 350px; padding-bottom: 4px; color: #545861; font-size: 15px; line-height: 1.8; }
.audience-chapters { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.audience-chapter { min-width: 0; overflow: hidden; border-radius: 5px; background: #eeebe5; }
.audience-chapter-art {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 25px 18px 22px; display: flex; flex-direction: column;
}
.audience-launch .audience-chapter-art { color: #fff9ef; background: var(--discipline-campaign-field); }
.audience-evolve .audience-chapter-art { color: #f5fff8; background: var(--discipline-tools-field); }
.audience-grow .audience-chapter-art { color: #f1f6ff; background: var(--discipline-web-field); }
.audience-chapter-art::before {
  content: ''; position: absolute; top: -45%; bottom: -45%; width: 50%; right: -6%;
  transform: skewX(-19deg); border-left: 1px solid #ffffff38;
  background: linear-gradient(90deg,#ffffff12,#ffffff02); z-index: -1;
}
.audience-chapter-label { display: flex; justify-content: space-between; align-items: center; padding-inline: 8px; font: 500 10px/1.4 var(--studio-body); letter-spacing: .1em; text-transform: uppercase; }
.audience-chapter-label b { font-weight: 500; opacity: .8; }
.capability-scene { position: relative; width: 100%; aspect-ratio: 1.3; margin-top: 18px; }
.audience-chapter-art .capability-piece {
  position: absolute; margin: 0; overflow: hidden; border: 1px solid #ffffff80;
  border-radius: 7px; background: #fffaf4; box-shadow: 0 14px 28px #07182d40;
  transition: translate .4s cubic-bezier(.2,.7,.2,1);
}
.capability-piece img { display: block; width: 100%; height: 100%; object-fit: contain; }
.capability-brand .capability-site { width: 96%; left: 0; top: 31%; aspect-ratio: 1672 / 941; padding: 4px; background: #171920; transform: rotate(-5deg); }
.capability-brand .capability-identity { width: 35%; aspect-ratio: 1; right: 3%; top: 0; padding: 6px; transform: rotate(8deg); }
.capability-campaign .capability-product { width: 45%; height: 85%; left: 5%; top: 3%; padding: 4px; transform: rotate(-9deg); }
.capability-campaign .capability-lifestyle { width: 51%; height: 88%; left: 43%; top: 9%; padding: 4px; transform: rotate(9deg); }
.capability-campaign img { object-fit: cover; }
.capability-note { position: absolute; bottom: 0; left: 8%; z-index: 2; padding: 7px 10px; background: #fff8e9; color: #7d2d0c; font: 600 8px/1.3 var(--studio-body); letter-spacing: .03em; transform: rotate(-3deg); }
.capability-tools .capability-dashboard { width: 89%; aspect-ratio: 4/3; top: 4%; left: 0; border: 4px solid #0b3229; transform: rotate(-4deg); }
.capability-tools .capability-data { width: 62%; aspect-ratio: 828/580; right: -1%; bottom: 0; border: 4px solid #e9fff3; transform: rotate(7deg); }
.audience-chapter-copy { padding: 27px 26px 30px; border: 1px solid #17192012; border-top: 0; }
.audience-chapter-copy h3 { color: #101118; font-size: clamp(23px,2.2vw,30px); font-weight: 600; letter-spacing: -.05em; line-height: 1.15; }
.audience-chapter-copy p { margin-top: 14px; color: #555860; font-size: 13px; line-height: 1.8; }
.audience-outro { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-top: 30px; }
.audience-outro > p { color: #555860; font-size: 12px; line-height: 1.7; }
.audience-outro .studio-text-link { margin: 0; flex-shrink: 0; font-size: 12px; }
@media (hover:hover) and (pointer:fine) {
  .audience-chapter:hover .capability-piece { translate: 0 -4px; }
}
@media (min-width:1500px) {
  .home-page .home-flow-hero { padding-top: 152px; padding-bottom: 104px; }
}
@media (max-width:1000px) {
  .audience-chapters { gap: 12px; }
  .audience-chapter-art { padding: 22px 14px 26px; }
  .audience-chapter-copy { padding: 24px 20px; }
  .audience-chapter-copy h3 { font-size: 23px; }
  .audience-chapter-copy p { font-size: 12px; }
}
@media (max-width:980px) {
  .home-page .home-flow-hero { padding-top: 132px; padding-bottom: 86px; }
  .home-page .home-flow-detail { margin-top: 24px; width: 94%; gap: 28px; }
  .hero-disciplines { gap: 10px; }
  .hero-disciplines a { gap: 9px; font-size: 11px; }
}
@media (max-width:700px) {
  .audience-heading { grid-template-columns: 1fr; gap: 24px; margin-bottom: 30px; }
  .audience-heading > p { max-width: 440px; font-size: 14px; }
  .audience-chapters { grid-template-columns: 1fr; gap: 22px; }
  .audience-chapter-art { min-height: 0; padding: 22px 26px 28px; }
  .capability-scene { max-width: 470px; margin: 18px auto 0; }
  .audience-chapter-copy { padding: 25px 26px 28px; }
  .audience-chapter-copy h3 { font-size: 29px; min-height: 0; }
  .audience-chapter-copy p { font-size: 13px; max-width: 430px; }
  .audience-outro { align-items: flex-start; flex-direction: column; gap: 18px; }
  .home-page .wy-points { grid-template-columns: 1fr; gap: 6px; max-width: 290px; }
  .home-page .wy-pt { padding: 9px 0; }
  .home-page .why-head { font-size: clamp(34px,8vw,54px); }
  .home-page .why-inner { border-radius: 22px 22px 5px 22px; }
  .home-page .why .btn-p { font-size: 12px !important; padding: 14px 18px !important; }
}
@media (max-width:600px) {
  .home-page .home-flow-world { --flow-hero-height: max(660px,100svh); }
  .home-page .home-flow-hero { padding: 124px 22px 78px; min-height: var(--flow-hero-height); align-items: center; }
  .home-page .home-flow-title { width: calc(100% + 16px); margin: 0 -8px; }
  .home-page .home-flow-detail { width: 100%; margin-top: 24px; padding-top: 24px; grid-template-columns: 1fr; gap: 25px; }
  .home-page .studio-hero-summary { display: contents; }
  .home-page .studio-hero-summary p { grid-row: 1; max-width: 350px; margin: 0; font-size: 14px; line-height: 1.7; }
  .home-page .studio-hero-summary p strong { font-size: 22px; }
  .home-page .home-flow-actions { grid-row: 3; margin-top: 0; gap: 14px 20px; }
  .hero-disciplines { grid-row: 2; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 8px; }
  .hero-disciplines a { min-height: 66px; flex-direction: column; align-items: flex-start; gap: 9px; font-size: 10px; }
  .hero-disciplines svg { width: 24px; height: 24px; flex-basis: 24px; }
  .home-page .home-flow-primary { min-height: 46px; padding: 12px 16px; font-size: 11px; }
  .home-page .home-flow-secondary { font-size: 11px; }
  .home-page .studio-service-row { grid-template-columns: 26px minmax(0,1fr) 28px; min-height: 0; gap: 12px; padding-block: 26px; }
  .home-page .studio-service-row > p { grid-column: 2; grid-row: 2; padding-right: 20px; }
  .home-page .studio-service-row > div { padding-right: 24px; }
  .home-page .studio-service-row h3 { font-size: 23px; }
  .home-page .studio-service-row > .studio-service-arrow { grid-column: 3; grid-row: 1 / span 2; width: 28px; height: 28px; }
  .studio-service-beam { width: 12px; right: 40px; }
  .audience-editorial h2 { font-size: clamp(43px,11vw,58px); }
  .home-page .audience-editorial { padding-bottom: 62px; }
}
@media (hover:none) {
  .studio-service-beam::before { opacity: .8; }
  .studio-service-beam::after { display: none; }
}
@media (prefers-reduced-motion:reduce) {
  .home-page #nav.studio-navigation,.hero-disciplines a { transition: none; }
  .studio-service-beam::after { display: none; }
  .studio-service-beam,.studio-service-beam::before,.home-page .studio-service-row,.audience-chapter-art .capability-piece { transition: none; }
  .audience-chapter:hover .capability-piece { translate: none; }
}

/* Small accents follow the service represented by each panel. */
.home-page #studioServicesTitle .section-accent { color: #c74711; }
.audience-grow .audience-chapter-copy h3 { color: #0755d6; }
.audience-launch .audience-chapter-copy h3 { color: #c74711; }
.audience-evolve .audience-chapter-copy h3 { color: #007d50; }