.graphic-design-page .hero-bottom > p { max-width:470px }
.graphic-design-page .hero-composition h1 .hero-middle { margin-block:-55px }
.design-collection { display:grid; grid-template-columns:minmax(0, .92fr) minmax(0,1.7fr); gap:8px; margin-block:clamp(54px,7vw,96px); padding:8px; background:color-mix(in srgb,var(--surface),var(--text) 5%); border-radius:20px }
.design-service { min-width:0; scroll-margin-top:6rem; border-radius:13px; background:var(--surface); display:grid; grid-template-columns:1fr .85fr; gap:18px; align-items:center; padding:clamp(22px,2.6vw,42px) }
.design-service h2 { font-size:clamp(23px,2.1vw,34px);line-height:1.08;letter-spacing:-.05em;font-weight:520;margin:18px 0 0 }
.service-symbol { display:grid;place-items:center;background:var(--accent);color:var(--bg);width:36px;height:36px;border-radius:10px }
.service-symbol svg {width:21px;height:21px}
.design-service .section-note { max-width:32ch; margin:9px 0 18px; color:var(--muted); font-size:16px; line-height:1.42 }
.design-service .text-link { display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px;border:0;border-radius:30px;background:color-mix(in srgb,var(--surface),var(--text) 9%);color:var(--text);font-size:14px;text-decoration:none }
.design-service .text-link:hover,.design-service .text-link:focus-visible {background:var(--text);color:var(--bg)}
.design-service figure { width:100%;max-width:320px;justify-self:center;margin:0;container-type:inline-size;min-width:0 }
.design-service figure * { box-sizing:border-box }
.design-service figure strong { font-weight:560;letter-spacing:-.065em;line-height:.94 }
.design-service figure small,.design-service figure span {font-size:clamp(10px,3.8cqw,14px)}
#branding.design-service {grid-row:span 2;grid-template-columns:1fr;align-content:space-between;gap:38px}
#documents.design-service {grid-column:1/-1;grid-template-columns:1fr minmax(220px,40%);}
#documents.design-service .section-note {max-width:44ch}
.logo-study {
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
  background-image: radial-gradient(circle, var(--line) 1px, transparent 1px);
  background-size: 5cqw 5cqw;
  mask-image: radial-gradient(ellipse, black 53%, transparent 80%);
}
.logo-guides {
  position: relative;
  width: 70%;
  aspect-ratio: 558 / 294;
  outline: 1px solid color-mix(in srgb, var(--muted) 38%, transparent);
}
.logo-guides::before, .logo-guides::after {
  content: "";
  position: absolute;
  inset: -12% 0;
  border-inline: 1px solid var(--muted);
}
.logo-guides::after {
  inset: 0 -8%;
  border-inline: 0;
  border-block: 1px solid var(--muted);
}
.logo-outline, .logo-outline i, .logo-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.logo-outline {
  filter: drop-shadow(1px 0 var(--text)) drop-shadow(-1px 0 var(--text)) drop-shadow(0 1px var(--text)) drop-shadow(0 -1px var(--text));
}
.logo-outline i {
  background: var(--surface);
  mask: url('/images/brand/mark-primary.png') center / contain no-repeat;
}
.logo-fill { animation: logo-ink 9s ease-in-out infinite; }
@keyframes logo-ink {
  0%, 100% { clip-path: inset(0 0 0 0); }
  46%, 56% { clip-path: inset(0 100% 0 0); }
  82% { clip-path: inset(0 0 0 0); }
}
.deck-spread,.campaign-spread {height:69cqw;position:relative;isolation:isolate}
.deck-front,.deck-back,.print-poster,.social-print {position:absolute;overflow:hidden;border-radius:6px;display:flex;flex-direction:column;justify-content:space-between;padding:4cqw;box-shadow:0 12px 28px #0005}
.deck-back {inset:3% 4% 28% 22%;background:var(--text);color:var(--bg);transform:rotate(6deg);align-items:end}
.deck-back i {height:1px;width:65%;background:var(--muted)}
.deck-front {inset:18% 13% 7% 2%;background:var(--accent);color:var(--bg);transform:rotate(-3deg)}
.deck-front strong {font-size:10cqw;position:relative;z-index:1}
.deck-rings {position:absolute;width:40%;aspect-ratio:1;bottom:-12%;right:-8%;border-radius:50%;background:repeating-radial-gradient(circle,var(--bg) 0 2%,transparent 2.5% 9%);animation:print-shift 7s ease-in-out infinite alternate}
.print-poster,.social-print {background:linear-gradient(0deg,#000a,transparent 75%),url('/images/contact-meadow.png') center/cover;color:var(--text);justify-content:end}
.print-poster {inset:0 37% 0 7%;transform:rotate(-4deg)}
.print-poster strong {font-size:12cqw}
.social-print {width:38%;aspect-ratio:1;right:4%;bottom:4%;background-position:70% center;transform:rotate(5deg);animation:paper-lift 8s ease-in-out infinite alternate}
.social-print strong {font-size:5cqw}
.report-spread {display:grid;grid-template-columns:.95fr 1.05fr;transform:rotate(-2deg);padding:3cqw}
.report-cover,.report-page {min-height:54cqw;padding:4cqw;display:flex;flex-direction:column;justify-content:space-between}
.report-cover {background:var(--surface);color:var(--text);border-radius:6px 0 0 6px;border-left:1cqw solid var(--accent)}
.report-cover strong {font-size:9cqw}
.report-page {color:var(--bg);background:linear-gradient(90deg,#ccc 0,var(--text) 7%);border-radius:0 6px 6px 0}
.report-page strong {font-size:5cqw}
.report-bars div {display:grid;grid-template-columns:1fr auto;gap:.7cqw;font-size:clamp(12px,2.4cqw,16px);margin:2cqw 0}
.report-bars i {grid-column:span 2;height:1.4cqw;background:var(--bg);transform-origin:left;animation:ink-draw 8s ease both infinite}
.report-bars div:nth-child(2) i {width:66.67%;animation-delay:.18s}.report-bars div:last-child i {width:33.33%;animation-delay:.36s}
@keyframes print-shift { to {transform:translate(-7%, -4%)} }
@keyframes paper-lift { to {transform:translateY(-1cqw) rotate(3deg)} }
@keyframes ink-draw {0%,100%{transform:scaleX(.96)}12%,88%{transform:scaleX(1)}}
.design-service figure:not(.scene-in-view) *, .design-service figure:not(.scene-in-view) *::after,.service-details-paused .design-service figure *, .service-details-paused .design-service figure *::after {animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.design-service figure *, .design-service figure *::after {animation:none!important}}
@media(max-width:900px){.design-collection{grid-template-columns:repeat(2,minmax(0,1fr))} .design-service,#branding.design-service,#documents.design-service{grid-column:auto;grid-row:auto;grid-template-columns:1fr;align-content:space-between;gap:24px}}
@media(max-width:600px){.graphic-design-page .hero-composition h1 .hero-middle{margin-block:-16px}.design-collection{grid-template-columns:minmax(0,1fr)}.design-service figure{max-width:245px}.design-service .section-note{max-width:38ch}}