/* Phase 1: layout tokens and functional section structure. */
.creovers-site {
  --agency-width:1328px;
  --agency-gutter:32px;
  --agency-space:88px;
  --agency-card-width:400px;
  --agency-card-height:440px;
  --agency-gap:28px;
  --agency-heading:56px;
  --agency-paper:#f7f8fa;
  --agency-line:#d9dfe5;
}
.creovers-site .shell { width:min(calc(100% - var(--agency-gutter) * 2),var(--agency-width)); }
.creovers-site:not(.over-motion-hero) .site-header { background:#fff; }
.agency-about,.agency-work { padding-block:var(--agency-space); }
.reel-contact { background:#f0f3f7; color:#11191f; border-bottom:1px solid var(--agency-line); }
.reel-contact__inner { min-height:104px; padding-block:22px; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:20px 36px; }
.reel-contact__lead { display:flex; align-items:center; gap:22px; }
.reel-contact__lead strong { font-size:18px; color:#1e4b74; }
.reel-contact__lead p { font-size:14px; color:#596774; margin:0; }
.reel-contact__actions { margin-left:auto; justify-content:flex-end; gap:24px; }
.reel-contact .contact-method { font-size:14px; color:#23384a; white-space:nowrap; }
.reel-contact .contact-method svg { width:18px; height:18px; }
.reel-contact .button { gap:10px; min-height:44px; padding:12px 18px; background:#173e61; }
.reel-contact .button svg { width:18px; height:18px; }
.agency-about { background:var(--agency-paper); }
.about-heading { border:0; padding:0; margin-bottom:44px; }
.about-heading .kicker { color:#173e61; }
.agency-about__grid { grid-template-columns:1.05fr 1fr; gap:64px; }
.creovers-site .about-manifesto h2 { font-size:var(--agency-heading); line-height:1.12; }
.about-manifesto .about-introduction { max-width:530px; margin:28px 0; font-size:18px; line-height:1.65; }
.about-description { color:#4b5965; font-size:17px; line-height:1.8; margin:0 0 32px; max-width:700px; }
.about-manifesto .text-link { gap:14px; color:#173e61; }
.about-manifesto .text-link svg { width:20px; height:20px; }
.about-studio__image { margin:0; aspect-ratio:auto; overflow:visible; }
.about-studio__image img { display:block; height:auto; aspect-ratio:16/10; width:100%; object-fit:cover; object-position:50% 50%; background:#eef1f4; }
.about-studio__image figcaption { padding-top:14px; color:#697682; font-size:13px; }
.about-disciplines { margin:56px 0 0; border-block:1px solid var(--agency-line); gap:24px; }
.about-disciplines>div { padding:24px 0; min-width:0; }
.about-disciplines dt { font-size:15px; font-weight:600; color:#173e61; }
.about-disciplines dd { margin:8px 0 0; font-size:14px; color:#64717d; line-height:1.55; }
.agency-services { --service-surface:#101b27; --service-tint:#90bddb; background:var(--service-surface); transition:background-color 400ms; }
.agency-services[data-active-service="commerce"] { --service-surface:#10232b; --service-tint:#9dcddb; }
.agency-services[data-active-service="graphic"] { --service-surface:#231b29; --service-tint:#cfb6ca; }
.agency-services[data-active-service="packaging"] { --service-surface:#201e32; --service-tint:#bcb4d6; }
.agency-services[data-active-service="seo"] { --service-surface:#15232b; --service-tint:#a5c6cc; }
.agency-services[data-active-service="brand"] { --service-surface:#23252d; --service-tint:#bac7db; }
.services-sticky { padding-block:32px; }
.is-pinned .services-sticky { top:var(--service-header-height,var(--header-height)); display:grid; grid-template-rows:auto auto minmax(0,1fr) auto; gap:0; padding-block:28px; }
.services-top { margin-bottom:24px; }
.services-top .kicker { color:#c7d2dc; }
.services-heading { display:flex; justify-content:space-between; align-items:end; gap:32px; margin-bottom:14px; }
.creovers-site .services-heading h2 { font-size:var(--agency-heading); line-height:1.08; margin:0; }
.services-heading>p { color:#bbc8d3; max-width:430px; font-size:16px; line-height:1.7; margin:0; }
.services-backdrop { inset:180px 0 0; display:grid; align-items:center; text-align:right; }
.services-backdrop span { font-size:144px; padding-right:var(--agency-gutter); -webkit-text-stroke:1px var(--service-tint); opacity:.11; }
.services-backdrop::before { content:""; position:absolute; width:42%; height:64%; right:10%; top:12%; background:var(--service-tint); opacity:.045; transform:skewY(-8deg); }
.services-viewport { position:relative; min-height:0; }
.services-rail { position:relative; gap:var(--agency-gap); padding:28px max(var(--agency-gutter),calc((100vw - var(--agency-width))/2)); align-items:stretch; }
.agency-service-card { width:var(--agency-card-width); height:var(--agency-card-height); min-height:350px; max-height:none; border:1px solid #536271; background:#0e1721; transform:none; border-radius:6px; }
.agency-service-card.is-active { border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.agency-service-card:focus-within { outline:3px solid #c4def0; outline-offset:5px; }
.service-commerce { --accent:#b5cce0; }
.service-seo { --accent:#b6cdd6; }
.service-brand { --accent:#c4c9e1; }
.service-symbol { top:20px; left:24px; }
.service-art { bottom:43%; }
.service-art img { filter:none; transform:none; object-fit:cover; }
.service-packaging .service-art img { object-fit:contain; background:#f3f4f6; }
.card-footer { inset:auto 0 0; min-height:50%; background:#0e1721; padding:24px; }
.card-footer h3 { font-size:24px; line-height:1.25; margin:12px 0; }
.card-footer>span { font-size:12px; }
.card-footer p { font-size:14px; line-height:1.6; color:#c2ccd5; max-width:390px; }
.service-tags { margin-top:18px; gap:18px; }
.service-tags small { font-size:12px; }
.service-detail { display:grid; place-items:center; width:38px; height:38px; position:absolute; right:20px; top:20px; border:1px solid #5c7183; border-radius:4px; color:#fff; background:#142330; }
.service-detail svg { width:19px; height:19px; }
.service-detail:hover { background:#315675; }
.services-finale { display:flex; flex-direction:column; justify-content:center; align-items:flex-start; flex:0 0 var(--agency-card-width); width:var(--agency-card-width); height:var(--agency-card-height); padding:32px; border-left:1px solid #627589; scroll-snap-align:center; }
.services-finale .kicker { color:#b9cddd; }
.services-finale h3 { font-size:36px; line-height:1.18; margin:22px 0; max-width:400px; font-weight:600; }
.services-finale>p:not(.kicker) { font-size:15px; color:#c2ccd5; line-height:1.7; max-width:370px; margin:0 0 30px; }
.services-finale .button { min-height:48px; gap:16px; font-size:14px; }
.services-finale svg { width:20px; height:20px; }
.services-finale .text-link { color:#e0e8ee; border-color:#7d91a0; margin-top:20px; }
.services-bottom { gap:32px; padding-bottom:0; align-items:center; }
.services-bottom>p { color:#d0dbe4; margin:0; font-size:13px; min-width:240px; }
.services-progress { background:#415565; }
.services-actions .reel-control { width:44px; height:44px; border-color:#8495a3; background:transparent; }
.services-actions .reel-control:hover { background:#315675; }
.services-actions .reel-control:disabled { opacity:.45; }
.agency-work { background:#f7f8fa; color:#18232e; border:0; }
.agency-work .kicker { color:#173e61; }
.agency-work .agency-section-heading h2 { font-size:var(--agency-heading); }
.agency-work .agency-section-heading>p { color:#63717e; }
.portfolio-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--agency-gap); }
.portfolio-item { min-width:0; }
.portfolio-image { aspect-ratio:4/3; overflow:hidden; background:#e4ebf0; border-radius:6px; }
.portfolio-image img { display:block; width:100%; height:100%; object-fit:cover; }
.portfolio-web .portfolio-image img { object-position:50% 25%; }
.portfolio-print .portfolio-image { background:#e8e5ee; }
.portfolio-packaging .portfolio-image { background:#f3f4f6; }
.portfolio-packaging .portfolio-image img { object-fit:contain; }
.portfolio-meta { position:relative; padding:24px 56px 24px 0; border-bottom:1px solid #ccd6df; }
.portfolio-meta>span { font-size:12px; color:#667783; }
.portfolio-meta h3 { font-size:22px; line-height:1.35; margin:12px 0; font-weight:600; }
.portfolio-meta p { font-size:14px; color:#61707d; margin:0; line-height:1.6; }
.portfolio-open { position:absolute; top:28px; right:0; display:grid; place-items:center; width:40px; height:40px; border:1px solid #a8b9c6; border-radius:4px; background:transparent; color:#173e61; }
.portfolio-open svg { width:20px; height:20px; }
.portfolio-open:hover { background:#dce9f2; }
.portfolio-note { color:#6c7a86; font-size:12px; margin:24px 0 0; }
.agency-scroll { padding:0; background:#101e2b; width:44px; height:44px; border-radius:50%; display:grid; place-items:center; bottom:88px; right:20px; }
.agency-scroll>span { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.agency-scroll:hover { background:#315675; }
.site-nav,.site-nav__list,.agency-section-heading,.reel-contact__actions { min-width:0; }
@media(min-width:1600px) {
  .creovers-site { --agency-width:1512px; --agency-gutter:48px; --agency-space:104px; --agency-card-width:440px; --agency-card-height:470px; --agency-heading:64px; }
}
@media(min-width:1850px) {
  .creovers-site { --agency-width:1720px; --agency-gutter:64px; --agency-space:112px; --agency-card-width:480px; --agency-card-height:520px; --agency-gap:32px; --agency-heading:72px; }
  .site-nav__list a { font-size:16px; }
  .about-description { font-size:19px; }
  .about-manifesto .about-introduction { font-size:20px; }
  .card-footer h3 { font-size:28px; }
  .card-footer p,.portfolio-meta p { font-size:16px; }
  .portfolio-meta h3 { font-size:26px; }
}
@media(min-width:2400px) {
  .creovers-site { --agency-width:2128px; --agency-gutter:80px; --agency-space:136px; --agency-card-width:560px; --agency-card-height:600px; --agency-gap:40px; --agency-heading:80px; }
  .agency-about__grid { gap:112px; }
  .about-description { max-width:850px; }
  .about-manifesto .about-introduction { max-width:700px; }
  .about-disciplines dt { font-size:18px; }
  .about-disciplines dd { font-size:16px; }
  .services-heading>p { max-width:540px; font-size:19px; }
  .card-footer { padding:32px; }
  .card-footer h3 { font-size:32px; }
  .card-footer p { font-size:18px; }
  .services-finale { padding:44px; }
  .services-finale h3 { font-size:44px; }
  .services-finale>p:not(.kicker) { font-size:18px; }
  .portfolio-meta h3 { font-size:30px; }
  .portfolio-meta p { font-size:18px; }
}
@media(max-height:850px) and (min-width:901px) {
  .creovers-site { --agency-card-height:360px; }
  .is-pinned .services-sticky { padding-block:20px; }
  .services-top { margin-bottom:16px; }
  .creovers-site .services-heading h2 { font-size:48px; }
  .services-rail { padding-block:20px; }
  .card-footer { padding:18px 24px; }
  .card-footer h3 { font-size:22px; margin:8px 0; }
  .service-tags { margin-top:12px; }
  .services-finale { padding:20px 28px; }
  .services-finale h3 { font-size:30px; margin:14px 0; }
  .services-finale>p:not(.kicker) { font-size:14px; margin-bottom:18px; }
  .services-finale .button { min-height:44px; }
  .services-finale .text-link { margin-top:12px; }
}
@media(max-width:1200px) {
  .creovers-site { --agency-width:1120px; --agency-gutter:28px; --agency-card-width:360px; --agency-heading:48px; }
  .reel-contact__lead { gap:18px; }
  .reel-contact__actions { gap:20px; }
  .agency-about__grid { gap:40px; }
}
@media(max-width:900px) {
  .creovers-site { --agency-card-width:360px; --agency-card-height:470px; --agency-space:72px; --agency-heading:44px; }
  .reel-contact__actions { margin-left:0; justify-content:flex-start; flex-wrap:wrap; }
  .agency-about__grid { grid-template-columns:1fr; }
  .about-description { max-width:100%; }
  .about-studio__image img { aspect-ratio:16/9; }
  .services-heading { align-items:flex-start; flex-direction:column; gap:18px; margin-bottom:12px; }
  .agency-services .services-sticky { padding-block:40px; }
  .services-bottom>p { min-width:0; flex:1; }
  .services-bottom .services-progress { display:none; }
  .portfolio-grid { grid-template-columns:1fr; gap:40px; }
  .portfolio-image { aspect-ratio:16/9; }
  .portfolio-packaging .portfolio-image { aspect-ratio:4/3; }
}
@media(max-width:700px) {
  .creovers-site { --agency-gutter:20px; --agency-card-width:calc(100vw - 64px); --agency-card-height:450px; --agency-gap:18px; --agency-space:56px; --agency-heading:36px; }
  .reel-contact__inner { padding-block:24px; gap:22px; }
  .reel-contact__lead { flex-direction:column; align-items:flex-start; gap:6px; }
  .reel-contact__actions { display:grid; grid-template-columns:1fr; width:100%; gap:16px; }
  .reel-contact .button { width:100%; font-size:14px; }
  .about-heading { margin-bottom:32px; gap:14px; }
  .about-heading>span { font-size:11px; }
  .about-manifesto .about-introduction,.about-description { font-size:16px; }
  .about-manifesto .about-introduction { margin-block:24px; }
  .about-disciplines { margin-top:36px; grid-template-columns:1fr 1fr; gap:0 24px; }
  .about-disciplines>div { padding:20px 0; }
  .about-disciplines dt { font-size:14px; }
  .about-disciplines dd { font-size:12px; }
  .services-top { margin-bottom:24px; }
  .services-top .kicker { font-size:11px; }
  .services-heading>p { font-size:14px; }
  .services-rail { padding-block:24px; }
  .card-footer { padding:22px; }
  .card-footer h3 { font-size:22px; }
  .service-symbol { top:18px; left:20px; width:38px; height:38px; }
  .service-detail { top:18px; right:18px; }
  .services-finale { padding:24px; }
  .services-finale h3 { font-size:32px; }
  .services-bottom { gap:16px; }
  .services-bottom>p { font-size:12px; max-width:190px; }
  .services-actions { gap:8px; }
  .services-actions .reel-control { width:40px; height:40px; }
  .portfolio-image { aspect-ratio:4/3; }
  .portfolio-meta { padding-top:22px; }
  .portfolio-meta h3 { font-size:21px; }
  .portfolio-meta p { font-size:14px; }
  .agency-work .agency-section-heading { margin-bottom:32px; }
  .agency-scroll { width:40px; height:40px; right:10px; bottom:88px; }
}
@media(prefers-reduced-motion:reduce) {
  .agency-services { transition:none; }
}