/* Phase 2 builds on the foundation without changing its layout tokens. */
.creovers-site {
  --creovers-ease:cubic-bezier(.22,.68,.18,1);
  --creovers-motion:500ms;
  --editorial-heading:68px;
}
.creovers-site .button { transition:background-color 220ms, color 220ms, transform var(--creovers-motion) var(--creovers-ease); }
.creovers-site .button:hover { transform:translateY(-2px); }
.creovers-site .text-link svg,.portfolio-open svg,.service-detail svg { transition:transform var(--creovers-motion) var(--creovers-ease); }
.creovers-site .text-link:hover svg,.portfolio-open:hover svg,.service-detail:hover svg { transform:translate(4px,-4px); }
.creovers-site .text-link { transition:border-color 220ms,color 220ms; }
.creovers-site .text-link:hover { border-color:currentColor; }
.reel-contact { background:#edf1f5; }
.reel-contact__inner { min-height:96px; gap:20px 28px; }
.reel-contact__lead { gap:24px; }
.reel-contact__lead strong { font-size:17px; }
.reel-contact__lead p { border-left:1px solid #becbd6; padding-left:24px; }
.reel-contact__actions { gap:24px; }
.reel-contact__actions .contact-method + .contact-method { border-left:1px solid #becbd6; padding-left:24px; }
.reel-contact .contact-method { gap:10px; font-weight:500; }
.reel-contact .button { font-weight:500; }
.agency-about { background:#f7f8fa; }
.about-heading { margin-bottom:36px; padding-bottom:20px; border-bottom:1px solid #ced7df; }
.about-heading>span { font-size:12px; color:#536573; }
.agency-about__grid { grid-template-columns:1.35fr 1fr; gap:72px; align-items:end; }
.creovers-site .about-manifesto h2 { font-size:var(--editorial-heading); line-height:1.08; margin:0; padding-bottom:8px; }
.about-manifesto h2>br:first-of-type { display:block; }
.about-manifesto h2 em { margin-left:0; }
.about-manifesto .about-introduction { max-width:580px; font-size:17px; line-height:1.7; margin:24px 0 18px; }
.about-description { max-width:560px; font-size:17px; line-height:1.85; margin:0; }
.about-studio { padding-bottom:4px; }
.about-composition { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); align-items:start; gap:0 24px; margin:56px 0 80px; }
.about-visual { margin:0; min-width:0; }
.about-visual__media { overflow:hidden; background:#e9edf1; }
.about-visual img { display:block; width:100%; height:100%; object-fit:cover; transition:transform 650ms var(--creovers-ease); }
.about-visual figcaption { display:flex; justify-content:space-between; gap:12px; font-size:12px; color:#435867; padding-top:14px; line-height:1.5; }
.about-visual figcaption>span:first-child { font-variant-numeric:tabular-nums; font-size:11px; color:#6c7c89; }
.about-visual--web { grid-column:1 / 8; grid-row:1; }
.about-visual--web .about-visual__media { aspect-ratio:16 / 10; }
.about-visual--web img { object-position:50% 30%; }
.about-visual--print { grid-column:9 / 13; grid-row:1; margin-top:56px; }
.about-visual--print .about-visual__media { aspect-ratio:4 / 3; }
.about-visual--product { grid-column:6 / 10; grid-row:1; align-self:end; margin-bottom:-38px; z-index:2; }
.about-visual--product .about-visual__media { aspect-ratio:1; border:8px solid #f7f8fa; background:#f1f2f4; }
.about-visual--product img { object-fit:contain; }
.about-visual--product figcaption { padding-inline:8px; background:#f7f8fa; padding-bottom:8px; }
.about-visual--web figcaption { max-width:70%; }
.about-visual--print figcaption { padding-left:28%; flex-direction:column; gap:2px; }
.has-js .about-visual[data-reveal] { opacity:0; transform:translateY(8px); transition:opacity 650ms var(--creovers-ease),transform 650ms var(--creovers-ease); }
.has-js .about-visual[data-reveal].is-visible { opacity:1; transform:none; }
@supports(clip-path:inset(0)) {
  .has-js .about-visual[data-reveal] .about-visual__media { clip-path:inset(0 0 8%); transition:clip-path 650ms var(--creovers-ease); }
  .has-js .about-visual[data-reveal].is-visible .about-visual__media { clip-path:inset(0); }
}
.about-disciplines { margin:0; gap:0; border-top:1px solid #cad5de; border-bottom:0; }
.about-disciplines>div { padding:26px 24px 0; border-left:1px solid #cad5de; }
.about-disciplines>div:first-child { padding-left:0; border-left:0; }
.about-disciplines dt { display:flex; align-items:center; gap:18px; font-size:17px; font-weight:500; }
.about-disciplines dt span { color:#718494; font-size:11px; padding:0; }
.about-disciplines dd { max-width:230px; font-size:13px; line-height:1.7; margin-top:12px; }
.agency-services { --service-surface:#10171e; --service-tint:#a7c9dd; transition:background-color 600ms var(--creovers-ease); }
.agency-services[data-active-service="commerce"] { --service-surface:#142126; --service-tint:#a0ced5; }
.agency-services[data-active-service="graphic"] { --service-surface:#231d29; --service-tint:#d1bed2; }
.agency-services[data-active-service="packaging"] { --service-surface:#211f30; --service-tint:#c7bddc; }
.agency-services[data-active-service="seo"] { --service-surface:#18232b; --service-tint:#adcfd4; }
.agency-services[data-active-service="brand"] { --service-surface:#24232b; --service-tint:#bdc8dc; }
.services-top { margin-bottom:20px; }
.services-top>span { font-size:11px; color:#acbbc7; }
.services-top .kicker { color:#c8d6e0; font-size:12px; }
.services-heading { margin-bottom:16px; align-items:end; gap:40px; }
.creovers-site .services-heading h2 { font-size:var(--editorial-heading); font-weight:500; line-height:1.08; padding-bottom:8px; flex:1; }
.services-heading>p { max-width:360px; font-size:17px; line-height:1.7; padding-bottom:6px; flex:0 1 360px; }
.services-backdrop { inset:160px 0 0; display:block; z-index:-1; pointer-events:none; }
.services-backdrop::before { content:none; }
.service-scene { position:absolute; right:3%; bottom:4%; height:100%; max-height:850px; width:min(78%,1300px); fill:none; stroke:var(--service-tint); stroke-width:1.2; opacity:0; transform:translateY(6px) scale(.985); transition:opacity 600ms var(--creovers-ease),transform 600ms var(--creovers-ease); }
.scene-dashed { stroke-dasharray:4 8; }
.agency-services[data-active-service="web"] [data-scene="web"],
.agency-services[data-active-service="commerce"] [data-scene="commerce"],
.agency-services[data-active-service="graphic"] [data-scene="graphic"],
.agency-services[data-active-service="packaging"] [data-scene="packaging"],
.agency-services[data-active-service="seo"] [data-scene="seo"],
.agency-services[data-active-service="brand"] [data-scene="brand"] { opacity:.16; transform:none; }
.is-pinned .services-viewport { display:flex; align-items:center; }
.services-rail { flex:0 0 auto; padding-block:24px; }
.agency-service-card { opacity:.9; border-color:#586976; transform:translateY(4px) scale(.985); transform-origin:50% 50%; transition:transform var(--creovers-motion) var(--creovers-ease),opacity var(--creovers-motion) var(--creovers-ease),border-color var(--creovers-motion); }
.agency-service-card.is-active { opacity:1; transform:translateY(-4px) scale(1); border-color:#bdd5e7; box-shadow:none; }
.agency-service-card:focus-within { opacity:1; }
.agency-service-card.is-active .card-footer { background:#16222d; }
.card-footer { background:#111a23; transition:background-color var(--creovers-motion); }
.agency-service-card.is-active .service-art img,.agency-service-card:hover .service-art img { filter:none; }
.service-symbol { width:36px; height:36px; background:#111b25; border-color:#647a8c; color:#c9dbe7; }
.service-symbol svg { width:19px; height:19px; }
.service-detail { width:40px; height:40px; border-color:#8294a3; background:#14202b; }
.services-bottom { min-height:44px; justify-content:space-between; gap:24px; }
.services-bottom>p { color:#d6e0e8; font-size:12px; }
.services-actions { gap:16px; align-items:center; }
.services-actions .reel-control { width:44px; height:44px; border-radius:50%; border-color:#627685; transition:background-color 220ms,border-color 220ms; }
.services-actions .reel-control:hover:not(:disabled) { border-color:#d7e4ed; background:#263b4b; }
.services-count { min-width:68px; text-align:center; font-size:12px; font-variant-numeric:tabular-nums; color:#dae4ed; }
.services-finale { position:relative; border-left-color:#8a9aa7; padding:24px 32px; }
.services-finale .kicker { font-size:10px; color:#c9d5df; }
.services-finale h3 { font-size:34px; line-height:1.13; margin:14px 0; font-weight:500; }
.services-finale>p:not(.kicker) { font-size:14px; line-height:1.65; margin-bottom:18px; }
.services-finale .button { min-height:44px; font-size:13px; }
.services-finale .text-link { font-size:12px; margin-top:14px; }
.agency-services.is-closing { --service-surface:#20232d; }
.agency-scroll.is-over-services { right:20px; bottom:108px; }
.agency-work .agency-section-heading { align-items:start; margin-bottom:64px; }
.agency-work .agency-section-heading h2 { font-size:var(--editorial-heading); line-height:1.05; max-width:980px; }
.agency-work .agency-section-heading>p { max-width:290px; line-height:1.75; padding-top:38px; }
.portfolio-grid { grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr); gap:64px 88px; align-items:start; }
.portfolio-web { grid-column:1; grid-row:1 / span 2; position:sticky; top:calc(var(--header-height) + 32px); }
.portfolio-print { grid-column:2; grid-row:1; margin-top:84px; }
.portfolio-packaging { grid-column:2; grid-row:2; }
.portfolio-image { border-radius:0; background:#e8edf2; }
.portfolio-brand { display:flex; align-items:flex-end; height:100%; padding:28px; font-size:24px; font-weight:600; line-height:1.35; color:var(--color-ink); }
.portfolio-image img { transition:transform 650ms var(--creovers-ease); }
.portfolio-web .portfolio-image { aspect-ratio:16 / 10; }
.portfolio-print .portfolio-image { aspect-ratio:4 / 3; }
.portfolio-packaging .portfolio-image { aspect-ratio:4 / 5; background:#eef0f4; }
.portfolio-meta { padding:24px 0 28px; }
.portfolio-meta>span { display:block; font-size:11px; }
.portfolio-meta h3 { margin:12px 0 8px; font-size:24px; }
.portfolio-meta p { max-width:510px; }
.portfolio-open { position:static; display:inline-flex; align-items:center; justify-content:space-between; gap:24px; width:auto; min-width:104px; height:40px; margin-top:18px; border:0; border-bottom:1px solid #9cacb8; border-radius:0; font-size:13px; padding:0; font-weight:600; }
.portfolio-open:hover { background:none; border-color:#173e61; }
.portfolio-open svg { width:18px; height:18px; }
.portfolio-note { margin-top:40px; }
@media(min-width:1201px) {
  .agency-about>.shell { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.45fr); gap:28px 72px; }
  .about-heading { grid-column:1 / -1; margin-bottom:4px; }
  .agency-about__grid { display:contents; }
  .about-manifesto { grid-column:1; grid-row:2; }
  .about-studio { grid-column:1; grid-row:3; }
  .about-description { font-size:15px; line-height:1.8; }
  .about-manifesto .about-introduction { font-size:16px; max-width:440px; }
  .about-composition { grid-column:2; grid-row:2 / span 2; margin:24px 0 48px; align-self:center; gap:0 16px; }
  .about-visual--web { grid-column:1 / 11; }
  .about-visual--web figcaption { max-width:36%; flex-direction:column; gap:2px; }
  .about-visual--print { grid-column:7 / 13; margin-top:180px; }
  .about-visual--print figcaption { padding-left:38%; }
  .about-visual--product { grid-column:5 / 9; margin-bottom:-32px; }
  .about-visual--product figcaption { flex-direction:column; gap:2px; font-size:11px; }
  .about-disciplines { grid-column:1 / -1; margin-top:36px; }
}
@media(hover:hover) and (pointer:fine) {
  .about-visual:hover img { transform:translateY(-4px) scale(1.01); }
  .portfolio-item:hover .portfolio-image img { transform:scale(1.025); }
  .agency-service-card:not(.is-active):hover { opacity:1; transform:translateY(0) scale(.995); }
}
@media(min-width:1600px) {
  .creovers-site { --editorial-heading:76px; }
  .about-composition { gap:0 32px; margin-block:64px 96px; }
}
@media(min-width:1850px) {
  .creovers-site { --editorial-heading:86px; }
  .about-description,.about-manifesto .about-introduction { font-size:19px; }
  .about-description { max-width:700px; }
  .about-manifesto .about-introduction { max-width:720px; }
  .about-composition { margin-top:72px; }
  .about-visual figcaption { font-size:14px; }
  .about-visual figcaption>span:first-child { font-size:12px; }
  .services-heading>p { font-size:19px; max-width:410px; flex-basis:410px; }
  .services-finale { padding:32px; }
  .services-finale h3 { font-size:38px; }
  .services-finale>p:not(.kicker) { font-size:16px; }
  .portfolio-meta h3 { font-size:28px; }
}
@media(min-width:2400px) {
  .creovers-site { --editorial-heading:96px; }
  .agency-about__grid { gap:144px; }
  .about-description { max-width:760px; font-size:21px; }
  .about-manifesto .about-introduction { font-size:21px; max-width:840px; }
  .about-visual--print { margin-top:88px; }
  .about-visual--product { margin-bottom:-48px; }
  .about-visual figcaption { font-size:16px; }
  .about-disciplines dt { font-size:21px; }
  .about-disciplines dd { max-width:360px; font-size:16px; }
  .services-heading>p { max-width:470px; flex-basis:470px; font-size:21px; }
  .services-bottom>p,.services-count { font-size:15px; }
  .services-finale { padding:40px; }
  .services-finale h3 { font-size:44px; }
  .services-finale>p:not(.kicker) { font-size:18px; }
  .services-finale .button { font-size:16px; }
  .services-finale .text-link { font-size:15px; }
  .portfolio-grid { gap:80px 128px; }
  .portfolio-meta h3 { font-size:32px; }
  .portfolio-open { font-size:16px; }
  .agency-work .agency-section-heading h2 { max-width:1400px; }
  .agency-work .agency-section-heading>p { max-width:390px; font-size:19px; padding-top:48px; }
}
@media(max-height:850px) and (min-width:901px) {
  .creovers-site .services-heading h2 { font-size:52px; }
  .services-top { margin-bottom:12px; }
  .services-heading { margin-bottom:8px; }
  .services-rail { padding-block:16px; }
  .services-finale { padding:18px 24px; }
  .services-finale h3 { font-size:28px; margin:10px 0; }
  .services-finale>p:not(.kicker) { font-size:13px; margin-bottom:12px; }
  .services-finale .text-link { margin-top:10px; }
}
@media(max-width:1200px) {
  .creovers-site { --editorial-heading:56px; }
  .reel-contact__lead,.reel-contact__actions { gap:18px; }
  .reel-contact__lead p,.reel-contact__actions .contact-method + .contact-method { padding-left:18px; }
  .agency-about__grid { gap:40px; }
  .about-manifesto h2>br:first-of-type { display:block; }
  .about-manifesto h2 em { margin-left:0; }
  .about-description { font-size:16px; }
  .about-composition { gap:0 16px; margin-block:40px 72px; }
  .services-heading { gap:24px; }
  .services-heading>p { max-width:280px; flex-basis:280px; font-size:15px; }
  .portfolio-grid { gap:48px 48px; }
  .portfolio-print { margin-top:48px; }
  .portfolio-meta h3 { font-size:21px; }
}
@media(max-width:900px) {
  .creovers-site { --editorial-heading:52px; }
  .reel-contact__inner { align-items:flex-start; }
  .reel-contact__lead p { border:0; padding:0; }
  .reel-contact__actions .contact-method + .contact-method { border:0; padding:0; }
  .agency-about__grid { grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
  .about-description,.about-manifesto .about-introduction { font-size:15px; }
  .creovers-site .about-manifesto h2 { font-size:44px; }
  .about-composition { grid-template-columns:repeat(12,minmax(0,1fr)); }
  .about-visual--web { grid-column:1 / 9; }
  .about-visual--print { grid-column:9 / 13; margin-top:24px; }
  .about-visual--product { grid-column:6 / 10; margin-bottom:-32px; }
  .about-visual figcaption { flex-direction:column; gap:3px; font-size:11px; }
  .about-disciplines>div { padding:20px 16px 0; }
  .about-disciplines dt { font-size:15px; gap:10px; }
  .about-disciplines dd { font-size:12px; }
  .services-heading { flex-direction:column; align-items:flex-start; gap:20px; }
  .services-heading>p { max-width:420px; flex:auto; font-size:14px; }
  .services-top>span { font-size:10px; }
  .services-bottom>p { font-size:12px; }
  .services-actions { gap:12px; }
  .agency-work .agency-section-heading { gap:24px; }
  .agency-work .agency-section-heading>p { max-width:200px; padding-top:26px; font-size:14px; }
  .portfolio-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:36px 32px; }
  .portfolio-web { position:static; }
  .portfolio-meta h3 { font-size:20px; }
  .portfolio-meta p { font-size:13px; }
  .portfolio-image { aspect-ratio:4 / 3; }
}
@media(max-width:700px) {
  .creovers-site { --editorial-heading:36px; }
  .reel-contact__inner { gap:24px; }
  .reel-contact__lead { gap:8px; }
  .reel-contact__lead p { font-size:13px; }
  .about-heading { margin-bottom:28px; padding-bottom:16px; gap:10px; }
  .about-heading>span { font-size:9px; }
  .agency-about__grid { grid-template-columns:1fr; gap:28px; }
  .creovers-site .about-manifesto h2 { font-size:42px; }
  .about-description,.about-manifesto .about-introduction { font-size:15px; }
  .about-manifesto .about-introduction { margin-top:20px; }
  .about-composition { grid-template-columns:1.15fr 1fr; gap:24px 14px; margin-block:32px; }
  .about-visual--web { grid-column:1 / -1; grid-row:1; }
  .about-visual--print { grid-column:1; grid-row:2; margin:0; }
  .about-visual--print .about-visual__media { aspect-ratio:4 / 5; }
  .about-visual--product { grid-column:2; grid-row:2; align-self:start; margin:34px 0 0; }
  .about-visual--product .about-visual__media { border:0; }
  .about-visual--product figcaption { padding-inline:0; }
  .about-visual--web figcaption { max-width:none; }
  .about-visual--print figcaption { padding-left:0; }
  .about-disciplines { grid-template-columns:1fr 1fr; row-gap:24px; }
  .about-disciplines>div { padding:18px 12px 0; }
  .about-disciplines>div:nth-child(odd) { border-left:0; padding-left:0; }
  .about-disciplines>div:nth-child(n+3) { border-top:1px solid #cad5de; }
  .about-disciplines dt { font-size:15px; }
  .about-disciplines dd { margin-top:8px; font-size:12px; }
  .services-top { margin-bottom:24px; }
  .services-top .kicker { font-size:11px; }
  .services-top>span { font-size:9px; }
  .services-heading { flex-direction:column; gap:20px; margin-bottom:18px; }
  .creovers-site .services-heading h2 { font-size:34px; line-height:1.12; flex:auto; }
  .services-heading>p { flex:auto; max-width:310px; font-size:14px; padding:0; }
  .services-backdrop { inset:260px 0 0; }
  .service-scene { width:120%; right:-16%; height:70%; }
  .agency-service-card { transform:none; opacity:.95; }
  .agency-service-card.is-active { transform:none; }
  .services-bottom { flex-direction:column; align-items:flex-start; gap:16px; }
  .services-bottom>p { max-width:none; font-size:12px; }
  .services-actions { justify-content:space-between; width:100%; gap:16px; }
  .services-count { font-size:12px; }
  .services-finale { padding:24px; }
  .services-finale h3 { font-size:30px; }
  .agency-scroll.is-over-services { right:10px; bottom:18px; }
  .agency-work .agency-section-heading { gap:20px; margin-bottom:36px; }
  .agency-work .agency-section-heading h2 { font-size:38px; }
  .agency-work .agency-section-heading>p { padding:0; max-width:300px; }
  .portfolio-grid { grid-template-columns:1fr; gap:48px; }
  .portfolio-web,.portfolio-print,.portfolio-packaging { grid-column:1; grid-row:auto; position:static; margin:0; }
  .portfolio-web .portfolio-image { aspect-ratio:16 / 10; }
  .portfolio-print .portfolio-image { aspect-ratio:4 / 3; width:88%; }
  .portfolio-print .portfolio-meta { width:88%; }
  .portfolio-packaging { width:90%; margin-left:auto; }
  .portfolio-packaging .portfolio-image { aspect-ratio:4 / 5; }
  .portfolio-meta { padding-top:20px; }
  .portfolio-meta h3 { font-size:22px; }
  .portfolio-meta p { font-size:14px; }
  .portfolio-open { font-size:13px; }
}
@media(prefers-reduced-motion:reduce) {
  .creovers-site .button,.creovers-site .text-link svg,.portfolio-open svg,.service-detail svg,
  .about-visual img,.service-scene,.agency-service-card,.portfolio-image img,.agency-services { transition:none; }
  .creovers-site .button:hover,.creovers-site .text-link:hover svg,.portfolio-open:hover svg,.service-detail:hover svg,
  .about-visual:hover img,.portfolio-item:hover .portfolio-image img,.agency-service-card,.agency-service-card.is-active,
  .agency-service-card:not(.is-active):hover { transform:none; }
  .has-js .about-visual[data-reveal] { opacity:1; transform:none; transition:none; }
  .has-js .about-visual[data-reveal] .about-visual__media { clip-path:none; transition:none; }
}
@media(max-width:420px) {
  .creovers-site .services-heading h2 { font-size:30px; }
}