:root {
  --brand-50: rgb(230 247 248);
  --brand-400: rgb(26 187 196);
  --brand-500: rgb(0 168 178);
  --brand-600: rgb(0 135 144);
  --brand-700: rgb(0 101 108);
  --ink: #273142;
  --muted: #667085;
  --surface: #fff;
  --header-height: 56px;
  --section-space: 56px;
  --container: 1280px;
  --radius-card: 16px;
  --shadow: 0 10px 30px rgb(0 101 108 / .1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--surface); font: 400 16px/1.5 ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; }
h1, h2, h3, h4, p, figure { margin: 0; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid #ffcc33; outline-offset: 3px; }
.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 10px 16px; color: #fff; background: var(--brand-700); transform: translateY(-160%); }
.skip-link:focus { transform: none; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: 16px; }
.section { padding-block: var(--section-space); }
.section--soft { background: var(--brand-50); }
.eyebrow { margin: 0 0 8px; color: var(--brand-500); font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.section-title, .page-title { margin: 0; color: var(--brand-500); font-size: 30px; line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; }
.section-lead { margin: 6px 0 0; color: var(--muted); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.button { display: inline-flex; min-height: 52px; align-items: center; justify-content: center; gap: 8px; padding: 14px 30px; border: 0; border-radius: 999px; color: #fff; background: var(--brand-500); font-weight: 700; box-shadow: var(--shadow); transition: background-color .15s cubic-bezier(.4,0,.2,1); }
.button--outline { color: var(--brand-700); background: #fff; border: 2px solid var(--brand-500); }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; height: var(--header-height); color: #fff; background: var(--brand-400); animation: header-in .5s ease both; }
.site-header__inner { display: flex; height: 100%; align-items: center; justify-content: space-between; }
.site-logo { font-size: 18px; line-height: 28px; font-weight: 700; letter-spacing: .1em; }
.desktop-nav { display: none; }
.desktop-nav ul, .mobile-nav ul, .footer-nav { margin: 0; padding: 0; list-style: none; }
.desktop-nav ul { display: flex; align-items: center; gap: 28px; }
.desktop-nav a { display:inline-block; color:rgb(255 255 255 / .85); font-size:14px; line-height:20px; font-weight:500; letter-spacing:.025em; }
.desktop-nav a[aria-current="page"] { padding-bottom: 2px; color: #fff; border-bottom: 2px solid #fff; }
.menu-button { display: grid; width: 40px; height: 40px; place-content: center; padding: 0; color: #fff; background: transparent; border: 0; }
.menu-button svg { display:block; width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.menu-button svg.menu-button__close { display:none; }
.menu-button[aria-expanded="true"] .menu-button__open { display:none; }
.menu-button[aria-expanded="true"] svg.menu-button__close { display:block; }
.mobile-nav { position:fixed; z-index:99; inset:var(--header-height) 0 auto; overflow:hidden; padding:0 16px 16px; color:#fff; background:var(--brand-500); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a { display:block; padding-block:12px; color:#fff; border-bottom:1px solid rgb(26 187 196 / .5); font-size:14px; line-height:20px; font-weight:500; }

main { display: block; }
.hero { position:relative; display:flex; min-height:100svh; align-items:center; overflow:hidden; }
.hero__content { position:relative; z-index:1; }
.hero__company { color:var(--brand-700); font-weight:800; }
.hero h1 { margin: 0 0 16px; color: #273142; font-size: 30px; line-height: 37.5px; }
.hero__sub { font-weight:700; }
.message { max-width: 860px; text-align: center; }
.message h2 { margin: 0 0 20px; color: var(--brand-700); font-size: clamp(24px, 4vw, 36px); line-height: 1.45; }
.message p { margin: 0 0 28px; color: #475467; }

.products { height: auto; overflow: hidden; padding-block: 40px; background: var(--brand-50); }
.marquee { position: relative; height: 144px; overflow: visible; }
.marquee__track { display:flex; width:max-content; animation:marquee-source 42s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track { animation-play-state: paused; }
.product { position:relative; flex:none; width:144px; height:144px; margin:0; overflow:hidden; border:2px solid #fff; border-radius:24px; background:#fff; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); text-align:center; }
@keyframes marquee-source { from { transform:translateX(var(--initial-offset,0)); } to { transform:translateX(calc(var(--initial-offset,0px) - 33.333%)); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .marquee__track { animation: none; } * { transition-duration: .01ms !important; } }

.works-list { display: grid; gap: 28px; }
.work-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow); }
.work-card__media { aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--brand-50), #fff); }
.work-card__media img { width: 100%; height: 100%; object-fit: cover; }
.work-card__body { padding: 28px; }
.work-card h3 { margin: 0 0 14px; color: var(--brand-700); font-size: 24px; line-height: 1.375; }
.work-card p { margin: 0 0 18px; color: #475467; }
.text-link { color: var(--brand-700); font-weight: 800; }

.page-hero { padding: calc(var(--header-height) + 64px) 0 54px; text-align: center; background: var(--brand-50); }
.page-hero p { margin: 8px 0 0; color: var(--muted); }
.content-narrow { max-width: 920px; }
.prose p, .prose li { color: #475467; }
.topics-grid, .creative-grid { display: grid; gap: 24px; }
.topics-card { overflow: hidden; border: 1px solid #e5e7eb; border-radius: var(--radius-card); background: #fff; }
.topics-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; background: var(--brand-50); }
.field { display: grid; gap: 7px; }
.field label { font-weight: 800; }
.field input, .field textarea, .field select { width: 100%; padding: 12px 14px; border: 1px solid #98a2b3; border-radius: 8px; background: #fff; }
.field textarea { min-height: 180px; resize: vertical; }
.thanks-section { overflow:hidden; padding:96px 0; background:#f9fafb; }
.thanks-content { max-width:512px; text-align:center; }
.thanks-content .thanks-icon { display:block; width:64px; height:64px; margin:0 auto 24px; overflow:hidden; color:transparent; background:var(--brand-500); font-size:0; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m9 12 2 2 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m9 12 2 2 4-4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.thanks-content h1 { margin-bottom:16px; color:#111827; font-size:24px; line-height:32px; }
.thanks-content p { margin:0 0 8px; color:#4b5563; font-size:14px; line-height:22.75px; }
.thanks-content p:nth-of-type(3) { margin-bottom:32px; }
.thanks-content .button { min-height:48px; padding:14px 32px; font-size:14px; line-height:20px; font-weight:600; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.desktop-break { display:none; }

.site-footer { padding-block: 32px; color: #fff; background: var(--brand-500); }
.site-footer__grid { display: grid; gap: 24px; }
.site-footer .footer-logo { margin:0 0 8px; font-size:20px; line-height:28px; font-weight:700; letter-spacing:.1em; }
.site-footer p { margin: 0; }
.site-footer__grid > div > p { font-size:14px; line-height:20px; font-weight:600; }
.footer-nav { display:grid; width:max-content; grid-template-columns:repeat(3,auto); gap:4px 8px; }
.footer-nav li { display:flex; align-items:center; gap:8px; }
.footer-nav li:not(:nth-child(3n + 1))::before { color:rgb(255 255 255/.4); font-size:12px; content:"/"; }
.footer-nav a { color:rgb(255 255 255/.9); font-size:14px; line-height:20px; font-weight:600; }
.site-footer .copyright { margin-top:20px; padding-top:24px; border-top:1px solid rgb(255 255 255/.3); color:rgb(255 255 255/.8); font-size:14px; line-height:20px; font-weight:600; opacity:1; }

@media (min-width: 640px) {
  :root { --section-space: 80px; }
  .container { padding-inline: 24px; }
  .section-title, .page-title { font-size: 36px; line-height: 40px; }
  .hero h1 { margin-bottom: 24px; font-size: 36px; line-height: 45px; }
  .work-card { flex-direction: row-reverse; }
  .work-card:nth-child(even) { flex-direction: row; }
  .work-card__media, .work-card__body { width: 50%; }
  .topics-grid, .creative-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .desktop-break { display:block; }
}
@media (min-width: 768px) {
  .hero h1 { font-size: 48px; line-height: 60px; }
  .site-footer__grid { grid-template-columns: 1fr auto; align-items: start; }
}
@media (min-width: 1024px) {
  .container { padding-inline: 32px; }
  .desktop-nav { display: block; }
  .menu-button, .mobile-nav { display: none !important; }
  .topics-grid, .creative-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Top page: values measured from the current Figma Make preview. */
.home-page .hero { min-height: 100svh; height: 100svh; justify-content: center; padding-top: 0; text-align: center; }
.home-page .hero::before { display: none; }
.hero__image { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__veil { position:absolute; z-index:1; inset:0; }
.home-page .hero__content { z-index: 2; width: min(100% - 48px, 576px); margin: 0 auto; padding-inline: 24px; }
.home-page .hero__company { margin-bottom:12px; color:#008790; font-size:18px; line-height:25.7143px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.home-page .hero h1 { margin-bottom:24px; color:#1f2937; }
.home-page .hero__sub { color:#364153; font-size:16px; line-height:24px; font-weight:400; letter-spacing:.025em; }
.home-about { position:relative; display:grid; place-items:center; overflow:hidden; background:#fff; }
.home-about .message { display:flex; max-width:768px; flex-direction:column; align-items:center; }
.home-copy-mobile { display:none; }
.home-about .message h2 { margin-bottom: 20px; color: var(--brand-500); font-size: 24px; line-height: 1.625; }
.home-about .message p { margin-bottom:32px; color:#4b5563; font-size:14px; line-height:1.625; }
.home-about .button { min-height:0; padding:14px 28px; font-size:14px; line-height:20px; font-weight:600; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.products__title { margin: 0 0 24px; color: var(--brand-400); font-size: 12px; line-height: 16px; font-weight: 700; letter-spacing: .4em; text-align: center; }
.marquee__track, .marquee__set { display:flex; width:max-content; }
.home-topics .section-head { display:block; position:relative; margin-bottom:40px; text-align:center; }
.more-link { color: var(--brand-500); font-size: 14px; font-weight: 600; }
.topic-cards { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.topic-card img { width: 100%; aspect-ratio: 16/9; object-fit: cover; overflow: hidden; border-radius: 12px; }
.topic-card__label { display:inline-block; width:max-content; margin-top:12px; margin-bottom:6px; padding:2px 8px; border-radius:999px; color:var(--brand-700); background:#b3e8eb; font-size:12px; line-height:16px; font-weight:500; }
.topic-card h3 { display:-webkit-box; overflow:hidden; margin:0; color:#1f2937; font-size:14px; line-height:19.25px; font-weight:600; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.home-works .section-head { display:block; margin-bottom:56px; text-align:center; }
.home-works .works-list { gap:32px; }
.home-works article { margin: 0; }
.home-works .work-card { width: 100%; min-height: 252px; align-items:stretch; flex-direction: row; }
.home-works .work-card--reverse { flex-direction: row-reverse; }
.home-works .work-card__media { position:relative; width:40%; margin:0; display:grid; place-items:center; overflow:hidden; background:#fff; }
.home-works .work-card__media picture { display:block; width:100%; height:100%; }
.home-works .work-card__media img { display:block; width:100%; height:100%; object-fit:contain; }
.home-works .work-card__body { width: 60%; padding: 40px; align-self: center; }
.home-works .work-card h3 { font-size: 30px; line-height: 41.25px; font-weight: 900; }
.home-works .text-link { display:inline-flex; align-items:center; gap:8px; color:var(--brand-500); font-size:14px; line-height:20px; font-weight:600; }
.icon-arrow { display:inline-block; width:16px; height:16px; flex:none; background:currentColor; -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14M12 5l7 7-7 7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat; }
.home-works__more { margin: 40px 0 0; text-align: center; }
.home-works__more .button { min-width:0; min-height:0; padding:16px 32px; font-size:14px; line-height:20px; box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }

@media (min-width: 640px) {
  .home-about .message h2 { font-size: 30px; }
  .home-about .message p { font-size: 16px; }
  .home-about .button { font-size:16px; line-height:24px; }
  .home-about .message h2,.home-about .message p { white-space:nowrap; }
  .topic-cards { grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; }
}
@media (min-width: 768px) {
  .home-about .message h2 { font-size: 36px; line-height: 58.5px; }
  .home-about .message p { font-size: 18px; line-height: 29.25px; }
  .site-footer nav { display:flex; width:100%; flex-direction:column; align-items:flex-end; justify-self:stretch; }
  .footer-nav { margin-left:auto; justify-content:end; }
  .footer-nav li { justify-self:end; }
}
@media (min-width: 1024px) {
  .home-page .hero__content { width:min(100% - 48px,672px); }
  .home-page .hero h1 { white-space:nowrap; }
}
@media (max-width: 639px) {
  .home-copy-mobile { display:flex; flex-direction:column; align-items:center; }
  .home-copy-desktop { display:none; }
  .home-page .hero__image { object-position:64% center; }
  .home-page .hero__company { font-size:14px; line-height:20px; }
  .home-page .hero__sub { font-size:14px; line-height:20px; }
  .home-page .hero__content { width:min(100% - 24px,576px); padding-inline:0; }
  .home-about .message h2 { font-size: 24px; line-height: 1.6; }
  .products { height: 264px; }
  .home-topics .section-head { align-items:end; margin-bottom:32px; }
  .home-topics .more-link { position:static; margin-top:12px; }
  .topic-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .topic-card h3 { font-size:12px; line-height:16.5px; }
  .home-works .works-list { gap:24px; }
  .home-works .work-card__media { aspect-ratio:16/9; }
  .home-works .work-card h3 { line-height:33px; }
  .home-works .section-head { margin-bottom:40px; }
}

/* Figma Make source parity (source TSX is the visual authority). */
.home-page .hero__veil { background: rgb(255 255 255 / .55); }
.marquee::before,.marquee::after { position:absolute; z-index:2; inset-block:0; width:64px; content:""; pointer-events:none; }
.marquee::before { left:0; background:linear-gradient(90deg,var(--brand-50),transparent); }
.marquee::after { right:0; background:linear-gradient(270deg,var(--brand-50),transparent); }
.marquee__track,.marquee__set { gap:16px; }
.marquee__set { padding-right:0; }
.product img { width:100%; height:100%; object-fit:cover; }
.product figcaption { position:absolute; inset:auto 0 0; margin:0; padding:4px 8px; overflow:hidden; color:var(--brand-700); background:rgb(255 255 255/.8); font-size:10px; font-weight:700; text-align:center; text-overflow:ellipsis; white-space:nowrap; backdrop-filter:blur(4px); }
.home-topics,.home-works,.home-about { height:auto; min-height:0; }
.home-topics .container,.home-works .container { max-width:1024px; }
.home-topics .section-title,.home-works .section-title { letter-spacing:.1em; }
.home-topics .section-lead,.home-works .section-lead { margin-top:4px; color:#6b7280; font-size:14px; line-height:20px; }
.home-topics .more-link { display:inline-flex; align-items:center; gap:6px; line-height:20px; }
.home-works .work-card { min-height:0; border-radius:16px; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.home-works .work-card__media { width:40%; background:#b3e8eb; }
.home-works .work-card__media::after { position:absolute; inset:0; background:rgb(0 34 36/.1); content:""; pointer-events:none; }
.home-works .work-card__body { display:flex; width:60%; padding:40px; flex-direction:column; justify-content:center; background:var(--brand-50); border:1px solid #b3e8eb; }
.home-works .work-card h3 { margin-bottom:16px; color:var(--brand-700); font-size:30px; line-height:1.375; }
.home-works .work-card p { margin-bottom:24px; color:#4b5563; font-size:14px; line-height:1.625; }
@keyframes header-in { from { transform:translateY(-100%); } }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .6s ease,transform .6s ease; }
.reveal.is-visible { opacity:1; transform:none; }
.home-works .work-card.reveal { transform:translateY(30px); }
.home-works .work-card.reveal.is-visible { transform:none; }
@media (min-width:640px) {
  .home-topics .container,.home-works .container { padding-inline:24px; }
  .home-topics .more-link { position:absolute; right:0; bottom:0; margin:0; }
  .product { width:176px; height:176px; }
  .marquee { height:176px; }
  .home-works__more .button { min-width:200px; min-height:56px; font-size:16px; line-height:24px; }
}
@media (min-width:1024px) {
  .home-topics .container,.home-works .container { padding-inline:32px; }
  .home-works .container { max-width:960px; }
  .home-works .work-card__media { width:43.7%; }
  .home-works .work-card__body { width:56.3%; padding:24px 40px; }
  .home-works .work-card__body { align-self:stretch; }
  .site-footer__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .site-footer nav { justify-self:stretch; }
  .footer-nav { column-gap:8px; }
}
@media (min-width:640px) and (max-width:1023px) {
  .home-works .work-card,.home-works .work-card--reverse { flex-direction:column; }
  .home-works .work-card__media,.home-works .work-card__body { width:100%; }
}
@media (max-width:639px) {
  .home-works .work-card,.home-works .work-card--reverse { flex-direction:column; }
  .home-works .work-card__media,.home-works .work-card__body { width:100%; }
  .home-works .work-card__body { padding:28px; }
  .home-works .work-card h3 { font-size:24px; }
  .home-page .hero h1 { min-height:112.5px; margin-bottom:16px; }
  .home-about .message h2 { line-height:1.625; }
  .site-footer { padding-block:24px; }
  .site-footer__grid { gap:16px; }
  .site-footer .footer-logo { font-size:18px; letter-spacing:.1em; }
  .site-footer .copyright { font-size:12px; line-height:16px; }
}
.sub-main { min-height:0; padding-top:56px; }
.back-row { display:flex; height:40px; align-items:center; max-width:66%; margin-left:0; color:#9ca3af; font-size:14px; }
.privacy-page { padding:64px 0; background:#f9fafb; }
.privacy-page .content-narrow { max-width:768px; }
.privacy-page .center-head { margin-bottom:48px; }
.privacy-card { padding:32px; border-radius:16px; color:#374151; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.05); font-size:14px; line-height:22.75px; }
.privacy-card>p { margin-bottom:40px; }
.privacy-card>section+section { margin-top:40px; }
.privacy-card h2 { margin:0 0 16px; padding-bottom:8px; border-bottom:1px solid #e5e7eb; color:#111827; font-size:16px; line-height:24px; }
.privacy-card h3 { margin:0 0 4px; color:#111827; font-size:14px; line-height:20px; }
.privacy-policy-list,.privacy-purpose { margin:0; padding:0; list-style:none; }
.privacy-policy-list { display:grid; gap:16px; }
.privacy-policy-list li { display:flex; gap:12px; }
.privacy-policy-list b { flex:none; color:var(--brand-500); }
.privacy-policy-list p,.privacy-block p { margin:0; }
.privacy-block { margin-bottom:32px; }
.privacy-block:last-child { margin-bottom:0; }
.privacy-block>h3 { margin-bottom:12px; }
.privacy-block>p { margin-bottom:12px; }
.privacy-purpose { display:grid; gap:8px; counter-reset:privacy-purpose; }
.privacy-purpose li { display:flex; gap:12px; counter-increment:privacy-purpose; }
.privacy-purpose li::before { flex:none; color:var(--brand-500); font-weight:700; content:"(" counter(privacy-purpose) ")"; }
.works-page { background:#f9fafb; }
.center-head { margin-bottom:40px; text-align:center; }
.center-head p { margin:8px 0 0; color:#6b7280; font-size:14px; }
.service-heading { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; margin-bottom:24px; }
.service-heading h2 { margin:0; font-size:24px; }
.service-heading p { margin:0; color:#6b7280; font-size:14px; }
.ec-grid { display:grid; gap:32px; grid-template-columns:repeat(2,minmax(0,1fr)); margin-bottom:24px; }
.service-card { overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 4px 6px rgb(0 0 0/.1); }
.service-card img { width:100%; object-fit:contain; background:#b3e8eb; }
.service-card a>div { padding:16px 20px; }
.service-card span { display:inline-block; padding:2px 10px; border-radius:999px; color:var(--brand-700); background:#b3e8eb; font-size:12px; font-weight:700; }
.service-card h3 { margin:8px 0; font-size:18px; line-height:1.375; }
.service-card p { margin:0 0 12px; color:#6b7280; font-size:13px; line-height:1.625; }
.service-card b { display:block; width:max-content; margin-left:auto; padding:12px 24px; border-radius:999px; color:#fff; background:var(--brand-500); font-size:14px; }
.shops { padding:20px; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgb(0 0 0/.08); }
.shops h2 { margin:0 0 16px; font-size:14px; letter-spacing:.15em; text-align:center; }
.shop-list { display:flex; flex-direction:column; gap:12px; }
.shop-list a { display:flex; min-height:56px; align-items:center; justify-content:center; border:1px solid #f3f4f6; border-radius:12px; }
.shop-list img { width:auto; max-width:120px; max-height:44px; }
.socials { margin:56px 0 128px; text-align:center; }
.socials h2 { margin:0 0 20px; font-size:14px; letter-spacing:.1em; }
.socials div { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 12px; }
.socials a { padding:8px 20px; border:1px solid #e5e7eb; border-radius:999px; background:#fff; box-shadow:0 1px 2px rgb(0 0 0/.06); font-size:14px; font-weight:600; }
.creative-heading { margin-top:128px; }
.creative-card { display:grid; grid-template-columns:3fr 2fr; overflow:hidden; border-radius:16px; background:#fff; box-shadow:0 4px 6px rgb(0 0 0/.1); }
.creative-card>div { padding:24px 32px; background:var(--brand-50); }
.creative-card h3 { margin:0 0 8px; color:var(--brand-700); font-size:20px; }
.creative-card>img { width:100%; height:100%; object-fit:cover; }
.creative-card__media { display:block; min-width:0; line-height:0; }
.creative-card__media img { display:block; width:100%; height:100%; object-fit:cover; }
.creative-card footer { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:16px 32px; background:var(--brand-50); }
.creative-card footer p { margin:0; color:#6b7280; font-size:14px; }
@media(max-width:639px){.ec-grid{grid-template-columns:1fr;gap:24px}.service-heading h2{font-size:20px}.creative-heading{margin-top:96px}.creative-card{grid-template-columns:1fr}.creative-card>img{aspect-ratio:4/3}.creative-card footer{flex-direction:column;align-items:flex-start;padding:16px 24px}}
@media(max-width:639px){.works-page .service-card b,.works-page .creative-card footer .button{margin-inline:auto;align-self:center}}
.about-message { padding:56px 0 96px; background:#f9fafb; }
.about-message .content-narrow { max-width:768px; }
.about-copy { display:grid; gap:20px; color:#374151; font-size:16px; line-height:2; }
.about-copy p,.signature p { margin:0; }
.signature { margin-top:48px; text-align:right; }
.signature p { color:#6b7280; font-size:14px; }
.signature strong { display:block; margin-top:4px; font-size:18px; }
.principles article { border-bottom:1px solid #f3f4f6; }
.principles article:nth-child(2) { background:#f9fafb; }
.principle { display:grid; grid-template-columns:200px 1fr; gap:40px; align-items:start; padding-block:80px; }
.principle h2 { margin:0; color:#111827; font-size:30px; line-height:1.25; letter-spacing:.1em; text-transform:uppercase; }
.principle h2::after { display:block; width:40px; height:2px; margin-top:16px; background:var(--brand-400); content:""; }
.principle>p { margin:0; color:#111827; font-size:30px; line-height:1.625; font-weight:700; }
.principles article:first-child .principle>p { color:var(--brand-500); }
.principle>p span { color:var(--brand-500); }
.principle ol { margin:0; padding:0; list-style:none; counter-reset:value; }
.principle li { display:flex; gap:20px; align-items:center; padding:16px 0; border-bottom:1px solid #f3f4f6; color:#374151; line-height:1.625; counter-increment:value; }
.principle li::before { width:24px; flex:none; color:var(--brand-500); font-size:18px; font-weight:900; text-align:center; content:counter(value); }
.company-page { background:#fff; }
.source-table { overflow:hidden; margin:0 0 24px; border:1px solid #f3f4f6; border-radius:16px; background:#f9fafb; }
.source-table div { display:grid; grid-template-columns:112px 1fr; gap:16px; padding:16px 32px; border-bottom:1px solid #f3f4f6; }
.source-table div:last-child { border:0; }
.source-table dt { color:var(--brand-500); font-size:14px; font-weight:600; }
.source-table dd { margin:0; color:#1f2937; }
.history-head { margin-top:56px; margin-bottom:24px; }
.history-table div { grid-template-columns:144px 1fr; align-items:start; }
.group-notice { display:flex; align-items:center; gap:16px; margin-top:24px; padding:20px 24px; border:1px solid #b3e8eb; border-radius:16px; background:var(--brand-50); }
.group-notice p { flex:1; margin:0; color:#374151; font-size:14px; line-height:1.625; }
.group-logo { display:flex; flex:none; align-items:center; justify-content:center; padding:8px 12px; border-radius:8px; background:#fff; box-shadow:0 1px 3px rgb(0 0 0/.08); }
.group-logo img { width:auto; height:28px; object-fit:contain; }
@media(max-width:767px){.principle{grid-template-columns:1fr;text-align:center}.principle h2::after{margin-inline:auto}.principle>p{font-size:24px}.principle li{text-align:left}.about-message{padding:56px 0}.source-table div,.history-table div{grid-template-columns:1fr;gap:4px;padding:16px 20px}.group-notice{align-items:stretch;flex-direction:column}}
.recruit-page { padding:56px 0 96px; background:#f9fafb; }
.recruit-card { display:flex; width:min(100%,672px); min-height:320px; margin:0 auto 64px; padding:64px; flex-direction:column; align-items:center; justify-content:center; border:1px solid #b3e8eb; border-radius:16px; background:var(--brand-50); text-align:center; }
.recruit-card p { margin:0 0 24px; color:var(--brand-400); font-size:12px; font-weight:600; letter-spacing:.3em; text-transform:uppercase; }
.recruit-card h2 { margin:0; color:var(--brand-700); font-size:24px; }
.recruit-contact { margin:0; text-align:center; }
@media(max-width:639px){.recruit-page{padding:56px 0}.recruit-card{min-height:240px;margin-bottom:40px;padding:40px}}
@media(min-width:640px){.recruit-page{padding-top:96px}.recruit-page .center-head{margin-bottom:64px}}
.contact-page { padding:80px 0; background:#f9fafb; }
.contact-wrap { max-width:672px; }
.contact-wrap>p { color:#4b5563; font-size:14px; line-height:1.625; }
.contact-wrap>.required-note { margin:32px 0 16px; text-align:right; font-size:12px; }
.required-note span,.source-form label span { color:#ef4444; }
.source-form { display:grid; gap:20px; padding:32px; border-radius:16px; background:#fff; box-shadow:0 4px 6px rgb(0 0 0/.1); }
.source-form label { color:#374151; font-size:14px; font-weight:500; }
.source-form label span { margin-left:4px; font-size:12px; }
.source-form input,.source-form select,.source-form textarea { border-color:#e5e7eb; }
.source-form textarea { min-height:120px; resize:none; }
.consent { padding:16px; border:1px solid #e5e7eb; border-radius:8px; background:#f9fafb; }
.consent p { margin:0 0 8px; color:#4b5563; font-size:14px; }
.consent>a { display:block; margin-bottom:16px; color:var(--brand-500); font-size:14px; font-weight:600; text-decoration:underline; }
.consent label { display:flex; gap:8px; align-items:flex-start; }
.source-form .consent input { width:16px; height:16px; padding:0; line-height:normal; }
.consent b { padding:2px 6px; border-radius:4px; color:#fff; background:#ef4444; font-size:12px; }
.form-submit { width:100%; padding:12px; border:0; border-radius:8px; color:#fff; background:var(--brand-500); font-weight:600; opacity:.4; }
.form-submit:enabled { cursor:pointer; opacity:1; }
.form-status { display:none; margin:0; color:#b42318; font-size:14px; line-height:20px; text-align:center; }
.form-status:target { display:block; }
.hp-field { position:absolute!important; left:-10000px!important; width:1px!important; height:1px!important; overflow:hidden!important; }
.topics-page .topics-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:48px; }
.topics-page .topics-card { overflow:visible; border:0; border-radius:0; }
.topics-page .topics-card img { width:100%; aspect-ratio:16/9; border-radius:12px; object-fit:cover; }
.topics-page .topics-card h2 { display:-webkit-box; overflow:hidden; margin:6px 0 0; color:#111827; font-size:14px; line-height:1.375; text-align:justify; -webkit-box-orient:vertical; -webkit-line-clamp:3; }
.topics-actions { display:flex; justify-content:center; gap:12px; margin-top:32px; }
@media(max-width:1023px){.topics-page .topics-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:639px){.topics-page .topics-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}.topics-page .topics-card h2{font-size:12px}.topics-actions{align-items:center;flex-direction:column}.topics-actions .button{width:256px}}

/* Topics page parity */
.topics-page { padding-block:56px; overflow:hidden; background:#fff; }
.topics-page .container { max-width:1280px; }
.topics-page .center-head { margin-bottom:40px; }
.topics-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.topics-page .center-head p { margin:0; color:oklch(.551 .027 264.364); font-size:14px; line-height:20px; }
.topics-page .topics-card .topic-card__label { margin-top:12px; margin-bottom:6px; }
.topics-page .topics-card h2 { margin:0; font-size:12px; line-height:16.5px; font-weight:600; color:oklch(.21 .034 264.665); }
.topics-actions .button { width:256px; min-height:0; padding:12px 24px; font-size:14px; line-height:20px; font-weight:600; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
@media(min-width:320px){
  .topics-actions .button { width:288px; white-space:nowrap; }
}
@media(min-width:640px){
  .topics-page { padding-block:80px; }
  .topics-page .center-head { margin-bottom:64px; }
  .topics-page .page-title { font-size:36px; line-height:40px; }
  .topics-page .topics-card h2 { font-size:14px; line-height:19.25px; }
  .topics-actions { flex-direction:row; }
  .topics-actions .button { width:288px; white-space:nowrap; }
}

/* Lower pages: exact translations of the source React/Tailwind utilities. */
.works-page { padding-block:56px; overflow:hidden; }
.works-page>.container { max-width:1280px; }
.works-page .center-head { margin-bottom:40px; }
.works-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.works-page .center-head p { margin:0; color:#6b7280; font-size:14px; line-height:20px; }
.works-page .service-heading { gap:8px; margin-bottom:20px; }
.works-page .service-heading h2 { font-size:20px; line-height:28px; }
.works-page .service-heading p { font-size:12px; line-height:16px; }
.works-page .ec-grid { grid-template-columns:1fr; gap:24px; margin-bottom:16px; }
.works-page .service-card { box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.works-page .service-card>a { display:flex; height:100%; flex-direction:column; }
.works-page .service-card a>div { display:flex; overflow:hidden; padding:16px 20px; flex:1; flex-direction:column; }
.works-page .service-card span { width:100%; margin-bottom:8px; }
.works-page .service-card h3 { margin:0 0 8px; font-size:16px; }
.works-page .service-card p { flex:1; line-height:21.125px; }
.works-page .service-card b { margin-top:auto; font-weight:500; line-height:20px; }
.works-page .shops { box-shadow:0 1px 2px 0 rgb(0 0 0/.05); }
.works-page .shops h2 { letter-spacing:.1em; }
.works-page .shop-list a { overflow:hidden; min-height:0; justify-content:center; padding:12px 40px 12px 16px; }
.works-page .shop-list img { width:100%; max-width:120px; }
.works-page .socials { margin:40px 0 96px; }
.works-page .socials div { gap:8px; }
.works-page .socials a { padding:8px 14px; line-height:20px; box-shadow:0 1px 2px 0 rgb(0 0 0/.05); }
.works-page .creative-heading { margin-top:40px; }
.works-page .creative-card { display:block; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.works-page .creative-card>div { padding:20px 24px; }
.works-page .creative-card .eyebrow { margin-bottom:4px; color:var(--brand-400); font-size:12px; line-height:16px; font-weight:600; letter-spacing:.1em; }
.works-page .creative-card h3 { margin-bottom:8px; font-size:20px; line-height:28px; }
.works-page .creative-card>div>p:last-child { color:#4b5563; font-size:14px; line-height:22.75px; }
.works-page .creative-card>img { height:auto; aspect-ratio:16/9; object-fit:contain; }
.works-page .creative-card footer { display:flex; padding:16px 24px; flex-direction:column; align-items:flex-start; gap:12px; }
.works-page .creative-card footer p { font-size:14px; line-height:20px; }
.works-page .creative-card footer .button { min-height:0; padding:12px 24px; font-size:14px; line-height:20px; font-weight:500; box-shadow:none; }

.company-page { padding-block:56px; overflow:hidden; }
.company-page>.content-narrow { max-width:896px; }
.company-page .center-head { margin-bottom:40px; }
.company-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.company-page .center-head p { margin:0; line-height:20px; }
.company-page .source-table { margin-bottom:24px; }
.company-page .source-table div { display:flex; padding:16px 20px; flex-direction:column; gap:4px; }
.company-page .source-table dt { width:100%; flex:none; line-height:20px; }
.company-page .source-table dd { font-size:14px; line-height:20px; }
.company-page .history-head { margin:40px 0 24px; }
.company-page .history-head .page-title { font-size:20px; line-height:28px; margin-bottom:4px; }
.company-page .history-table dd { line-height:22.75px; }
.company-page .group-notice { align-items:flex-start; margin-top:0; padding:20px; flex-direction:column; }
.company-page .group-logo img { height:24px; }
.company-page .group-notice .button { width:100%; min-height:0; padding:8px 16px; font-size:14px; line-height:20px; font-weight:400; box-shadow:none; }

.about-message { padding:56px 0; overflow:hidden; }
.about-message .center-head { margin-bottom:40px; }
.about-message .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.about-message .center-head p { margin:0; line-height:20px; }
.about-copy { gap:20px; font-size:14px; line-height:26.6px; }
.signature { margin-top:40px; }
.signature strong { font-size:16px; line-height:24px; font-weight:600; }
.principle { grid-template-columns:1fr; gap:40px; padding-block:80px; text-align:center; }
.principle h2 { line-height:37.5px; font-weight:900; }
.principle h2::after { margin-inline:auto; }
.principle>p { padding-top:4px; font-size:24px; line-height:39px; }
.principle li { text-align:left; }

.creative-main { padding-top:80px; }
.creative-hero { padding-block:64px; }
.creative-hero h1 { font-size:36px; line-height:40px; }
.creative-section { padding-block:64px; }
.creative-work-card { min-height:0; padding:28px; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.creative-work-card h2 { margin-bottom:16px; line-height:16px; font-weight:600; }
.creative-contact .button { min-height:0; padding:16px 32px; box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1); }

/* ContactThanksPage.tsx parity. */
.thanks-section { padding-block:96px; }
.thanks-content { max-width:512px; }
.thanks-content h1 { margin-bottom:16px; font-size:24px; line-height:32px; }
.thanks-content p { font-size:14px; line-height:22.75px; }
.thanks-content .button { min-height:0; padding:14px 32px; }
@media(max-width:639px){
  html:has(.thanks-section) { background:var(--brand-500); }
}
@media(min-width:640px){
  .thanks-content h1 { font-size:30px; line-height:36px; }
}

/* Source icon and CTA parity. */
.source-icon { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.source-icon--sm { width:14px; height:14px; }
.source-icon--lg { width:20px; height:20px; }
.back-row a { display:inline-flex; align-items:center; gap:8px; }
.topics-actions .button--outline { color:#fff; background:var(--brand-500); border:0; }
.works-page .shop-list a { position:relative; padding:0; }
.works-page .shop-logo-wrap { display:flex; flex:1; align-items:center; justify-content:center; padding:12px 16px; }
.works-page .shop-external { position:absolute; top:0; right:0; bottom:0; display:flex; width:40px; align-items:center; justify-content:center; color:#9ca3af; }
.works-page .shop-external svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.works-page .service-card b { display:inline-flex; align-items:center; gap:8px; }
.works-page .creative-card footer .button { display:inline-flex; align-items:center; gap:8px; }
.works-page .socials a { display:inline-flex; align-items:center; gap:8px; }
.works-page .socials svg { width:16px; height:16px; flex:none; fill:currentColor; }
.consent>a { display:inline-flex; align-items:center; gap:4px; }
.consent label>input { margin:2px 0 0; flex:none; }
.consent label>span { display:inline-flex; min-width:0; flex:1; align-items:center; color:#374151; font-size:14px; line-height:20px; font-weight:500; }
.consent label>span>b { display:inline-block; flex:none; margin-left:8px; vertical-align:middle; }

/* Works page: final Figma-screen parity for shop rows. */
.works-page .shop-list {
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.works-page .shop-list a { height:72px; min-height:0; align-items:center; }
.works-page .shop-logo-wrap { height:100%; padding:10px 44px; }
.works-page .shop-list img {
  width:auto;
  max-width:150px;
  height:auto;
  max-height:36px;
  object-fit:contain;
}
@media(min-width:640px) {
  .works-page .shop-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(min-width:1024px) {
  .works-page .shop-list { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

.contact-page { padding-block:80px; overflow:hidden; }
.contact-page .center-head { margin-bottom:0; }
.contact-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.contact-page .center-head p { margin:0 0 24px; }
.contact-wrap>p { margin:0 0 20px; }
.contact-wrap>p:nth-of-type(2) { margin-bottom:0; }
.contact-wrap>p:nth-of-type(2) .button { min-height:0; padding:12px 24px; font-size:14px; line-height:20px; font-weight:600; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.contact-wrap>.required-note { margin:32px 0 16px; }
.source-form { gap:20px; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
.source-form>* { min-width:0; }
.source-form .field { min-width:0; gap:4px; }
.source-form .field label { font-weight:500; line-height:20px; }
.source-form input,.source-form select,.source-form textarea { max-width:100%; padding:12px 16px; font-size:14px; line-height:20px; }
.source-form textarea { min-height:120px; }
.consent label { gap:8px; }

.privacy-page { padding-block:64px; }
.privacy-page .center-head { margin-bottom:48px; }
.privacy-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.privacy-page .center-head p { margin:0; line-height:20px; }
.privacy-card { padding:32px; line-height:22.75px; }
.identity-note { line-height:19.5px; }

.recruit-page { padding-block:56px; overflow:hidden; }
.recruit-page .center-head { margin-bottom:40px; }
.recruit-page .page-title { margin-bottom:8px; font-size:30px; line-height:36px; letter-spacing:.1em; }
.recruit-page .center-head p { margin:0; line-height:20px; }
.recruit-card { min-height:240px; margin-bottom:40px; padding:40px; }
.recruit-card h2 { font-weight:900; line-height:30px; }
.recruit-contact .button { min-height:0; padding:16px 32px; box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }

@media(min-width:640px){
  .works-page { padding-block:80px; }
  .works-page .center-head { margin-bottom:64px; }
  .works-page .page-title { font-size:36px; line-height:40px; }
  .works-page .service-heading { gap:12px; margin-bottom:24px; }
  .works-page .service-heading h2 { font-size:24px; line-height:32px; }
  .works-page .service-heading p { font-size:14px; line-height:20px; }
  .works-page .ec-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; margin-bottom:24px; }
  .works-page .service-card h3 { font-size:18px; line-height:24.75px; }
  .works-page .socials { margin:56px 0 128px; }
  .works-page .socials a { padding:10px 20px; }
  .works-page .creative-heading { margin-top:64px; }
  .works-page .creative-card { display:grid; grid-template-columns:3fr 2fr; }
  .works-page .creative-card>div { display:flex; flex-direction:column; justify-content:center; padding:24px 32px; }
  .works-page .creative-card>img { height:100%; aspect-ratio:auto; object-fit:cover; }
  .works-page .creative-card__media { height:100%; }
  .works-page .creative-card__media img { height:100%; object-fit:cover; }
  .works-page .creative-card footer { grid-column:1/-1; padding:20px 32px; flex-direction:row; align-items:center; }
  .company-page { padding-block:80px; }
  .company-page .center-head { margin-bottom:56px; }
  .company-page .page-title { font-size:36px; line-height:40px; }
  .company-page .source-table div { padding:16px 32px; flex-direction:row; align-items:center; gap:16px; }
  .company-page .source-table dt { width:112px; }
  .company-page .source-table dd { font-size:16px; line-height:24px; }
  .company-page .history-head { margin-top:56px; }
  .company-page .history-head .page-title { font-size:24px; line-height:32px; }
  .company-page .history-table div { align-items:flex-start; }
  .company-page .history-table dt { width:144px; }
  .company-page .group-notice { padding:24px; flex-direction:row; align-items:center; }
  .company-page .group-logo img { height:28px; }
  .company-page .group-notice .button { width:auto; }
  .about-message { padding-block:96px; }
  .about-message .center-head { margin-bottom:48px; }
  .about-message .page-title { font-size:36px; line-height:40px; }
  .about-copy { gap:24px; font-size:16px; line-height:32px; }
  .signature { margin-top:48px; }
  .signature strong { font-size:18px; line-height:28px; }
  .privacy-page { padding-block:96px; }
  .privacy-card { padding:40px; }
  .recruit-page { padding-block:96px; }
  .recruit-page .center-head { margin-bottom:64px; }
  .recruit-page .page-title { font-size:36px; line-height:40px; }
  .recruit-card { min-height:320px; margin-bottom:64px; padding:64px; }
  .contact-page .page-title { font-size:36px; line-height:40px; }
}
@media(min-width:768px){
  .principle { grid-template-columns:200px 1fr; text-align:left; }
  .principle h2::after { margin-left:0; }
  .principle>p { font-size:30px; line-height:48.75px; text-align:left; }
}
@media(max-width:767px){
  .principle-copy__line { display:block; white-space:nowrap; }
}
@media(max-width:359px){
  .principles article:nth-child(-n+2) .principle>p { width:calc(100% + 32px); margin-inline:-16px; font-size:22px; line-height:1.625; }
}
.page-hero+article.section { background:#f9fafb; }
.page-hero+article.section .prose { padding:32px 40px; border-radius:16px; background:#fff; box-shadow:0 1px 3px rgb(0 0 0/.08); font-size:14px; line-height:1.625; }
.page-hero+article.section .content-narrow { max-width:768px; }
.page-hero+article.section .prose h2 { margin:32px 0 16px; padding-bottom:8px; border-bottom:1px solid #e5e7eb; color:#111827; font-size:16px; }
.page-hero+article.section .prose h3 { margin:20px 0 8px; color:#111827; font-size:14px; }
.page-hero+article.section .prose p { color:#374151; }
.identity-note { margin-top:12px; padding:16px; border-radius:8px; background:#f9fafb; font-size:12px; }
.identity-note p { margin:8px 0 0; }
.identity-note a { color:var(--brand-500); text-decoration:underline; }
@media(max-width:639px){.page-hero+article.section .prose{padding:32px}}
@media(min-width:640px){
  .privacy-page { padding:96px 0; }
  .privacy-card { padding:40px; }
  .thanks-content h1 { font-size:30px; line-height:36px; }
  .section--soft { padding-bottom:65px; }
}

/* Hover states ported from the published React/Tailwind components. */
.desktop-nav a,
.footer-nav a,
.back-row a,
.more-link,
.topic-card h3,
.topics-card h2,
.consent > a,
.identity-note a { transition:color .15s cubic-bezier(.4,0,.2,1); }
.topic-card img,
.topics-card img { transition:transform .3s cubic-bezier(.4,0,.2,1); }
.work-card,
.service-card,
.shop-list a { transition:transform .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1),box-shadow .15s cubic-bezier(.4,0,.2,1); }
.work-card__media img,
.service-card img { transition:transform .5s cubic-bezier(.4,0,.2,1); }
.home-works .text-link { transition:gap .15s cubic-bezier(.4,0,.2,1); }
.works-page .shop-logo-wrap img { transition:transform .3s cubic-bezier(.4,0,.2,1); }
.works-page .shop-external { transition:color .15s cubic-bezier(.4,0,.2,1); }
.works-page .socials a { transition:background-color .15s cubic-bezier(.4,0,.2,1),border-color .15s cubic-bezier(.4,0,.2,1); }

@media (hover:hover) and (pointer:fine) {
  .button:hover,
  .form-submit:enabled:hover { background-color:var(--brand-600); }
  .desktop-nav a:hover,
  .footer-nav a:hover { color:#fff; }
  .back-row a:hover { color:#4b5563; }
  .more-link:hover,
  .consent > a:hover,
  .identity-note a:hover { color:var(--brand-600); }
  .topic-card a:hover img,
  .topics-card a:hover img { transform:scale(1.05); }
  .topic-card a:hover h3,
  .topics-card a:hover h2 { color:var(--brand-600); }
  .home-works .work-card:hover,
  .works-page .service-card:hover { box-shadow:0 20px 25px -5px rgb(0 0 0/.1),0 8px 10px -6px rgb(0 0 0/.1); }
  .home-works .work-card:hover .work-card__media img,
  .works-page .service-card:hover img { transform:scale(1.05); }
  .home-works .work-card:hover .text-link { gap:12px; }
  .works-page .shop-list a:hover { border-color:#d1d5db; box-shadow:0 4px 6px -1px rgb(0 0 0/.1),0 2px 4px -2px rgb(0 0 0/.1); }
  .works-page .shop-list a:hover .shop-logo-wrap img { transform:scale(1.05); }
  .works-page .shop-list a:hover .shop-external { color:#4b5563; }
  .works-page .socials a:hover { border-color:#9ca3af; background-color:#f9fafb; }
}

/* Creative gallery. Scoped to the creative page only. */
.creative-main {
  min-height:100vh;
  padding-top:var(--header-height);
  color:#1f2937;
  background:#f9fafb;
}
.creative-main .container { padding-inline:32px; }
.creative-main .creative-hero {
  padding:56px 0 0;
  color:#1f2937;
  background:transparent;
}
.creative-main .creative-back { background:#fff; }
.creative-main .creative-hero p {
  margin:0 0 8px;
  color:var(--brand-500);
  font-size:14px;
  line-height:20px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
}
.creative-main .creative-hero h1 {
  margin:0;
  color:#1f2937;
  font-size:36px;
  line-height:40px;
  font-weight:700;
}
.creative-main .creative-hero .creative-description {
  margin:12px 0 0;
  color:#6b7280;
  font-size:16px;
  line-height:24px;
  font-weight:400;
  letter-spacing:normal;
  text-transform:none;
}
.creative-main .creative-section {
  padding:96px 0 64px;
}
.creative-main .creative-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
  align-items:start;
}
.creative-main .creative-grid.is-masonry {
  position:relative;
  display:block;
}
.creative-main .creative-work-card {
  display:contents;
}
.creative-main .creative-work-card h2 {
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  overflow:hidden;
  padding:0;
  clip:rect(0 0 0 0);
  white-space:nowrap;
}
.creative-main .creative-gallery {
  display:contents;
}
.creative-main .creative-item {
  display:flex;
  min-width:0;
  width:100%;
  margin:0;
  overflow:hidden;
  flex-direction:column;
  break-inside:avoid;
  page-break-inside:avoid;
  border:1px solid #e5e7eb;
  border-radius:10px;
  background:#fff;
  box-shadow:0 3px 8px rgb(15 23 42/.08);
}
.creative-main .creative-grid.is-masonry .creative-item { position:absolute; }
.creative-main .creative-item::before {
  content:var(--creative-category);
  align-self:flex-start;
  width:max-content;
  max-width:calc(100% - 32px);
  margin:12px 16px;
  padding:4px 10px;
  border-radius:999px;
  color:var(--brand-700);
  background:#b3e8eb;
  font-size:12px;
  line-height:16px;
  font-weight:600;
}
.creative-main .creative-work-card:nth-child(1) { --creative-category:"名刺"; }
.creative-main .creative-work-card:nth-child(2) { --creative-category:"チラシ"; }
.creative-main .creative-work-card:nth-child(3) { --creative-category:"パンフレット"; }
.creative-main .creative-work-card:nth-child(4) { --creative-category:"封筒"; }
.creative-main .creative-work-card:nth-child(5) { --creative-category:"その他"; }
.creative-main .creative-work-card:nth-child(6) { --creative-category:"各種OEM"; }
.creative-main .creative-item__media {
  position:relative;
  width:100%;
  aspect-ratio:auto;
  overflow:hidden;
  background:#f6f7f7;
}
.creative-main .creative-item__media--multi {
  display:grid;
  grid-template-columns:minmax(0,2fr) minmax(0,1fr);
  gap:8px;
  padding:16px;
  align-items:center;
}
.creative-main .creative-item__media--multi-2 { grid-template-rows:minmax(0,1fr) auto minmax(0,1fr); }
.creative-main .creative-item__media--multi-3 { grid-template-rows:minmax(0,1fr) auto auto minmax(0,1fr); }
.creative-main .creative-item__media--multi .creative-gallery__button {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
  border:0;
  border-radius:0;
  background:transparent;
}
.creative-main .creative-item__media--multi .creative-gallery__button:first-child {
  grid-column:1;
  grid-row:1 / -1;
}
.creative-main .creative-item__media--multi .creative-gallery__button:not(:first-child) { grid-column:2; }
.creative-main .creative-item__media--multi .creative-gallery__button:not(:first-child) {
  width:100%;
  height:auto;
}
.creative-main .creative-item__media--multi-2 .creative-gallery__button:nth-child(2) { grid-row:2; }
.creative-main .creative-item__media--multi-3 .creative-gallery__button:nth-child(2) { grid-row:2; }
.creative-main .creative-item__media--multi-3 .creative-gallery__button:nth-child(3) { grid-row:3; }
.creative-main .creative-item__media--multi .creative-gallery__button img,
.creative-main .creative-item__media--multi .creative-gallery__button img.creative-image--portrait {
  position:static;
  inset:auto;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:300px;
  margin:auto;
  object-fit:contain;
}
.creative-main .creative-item__media--multi .creative-gallery__button:not(:first-child) img {
  max-height:120px;
}
.creative-main .creative-gallery__button {
  position:absolute;
  inset:16px;
  display:grid;
  flex:none;
  width:auto;
  height:auto;
  min-height:0;
  margin:0;
  overflow:hidden;
  padding:0;
  place-items:center;
  border:0;
  color:inherit;
  background:transparent;
  cursor:zoom-in;
}
.creative-main .creative-gallery__button img {
  position:absolute;
  inset:0;
  display:block;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  margin:auto;
  box-sizing:border-box;
  object-fit:contain;
  object-position:center;
  transition:opacity .15s cubic-bezier(.4,0,.2,1),transform .15s cubic-bezier(.4,0,.2,1);
}
.creative-main .creative-gallery > img.creative-image--portrait,
.creative-main .creative-gallery__button img.creative-image--portrait {
  position:absolute;
  inset:0;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:100%;
  margin:auto;
  object-fit:contain;
}
.creative-main .creative-item:not(.creative-item--multi) .creative-item__media {
  aspect-ratio:auto;
  padding:16px;
}
.creative-main .creative-item:not(.creative-item--multi) .creative-gallery__button {
  position:relative;
  inset:auto;
  width:100%;
  height:auto;
}
.creative-main .creative-item:not(.creative-item--multi) .creative-gallery__button img,
.creative-main .creative-item:not(.creative-item--multi) .creative-gallery__button img.creative-image--portrait {
  position:static;
  inset:auto;
  width:auto;
  max-width:100%;
  height:auto;
  max-height:300px;
  margin:auto;
  object-fit:contain;
}
.creative-main .creative-item figcaption {
  display:flex;
  min-height:104px;
  padding:12px 16px 13px;
  flex-direction:column;
  align-items:flex-start;
  border-top:1px solid #e5e7eb;
}
.creative-main .creative-item figcaption span,
.creative-main .creative-item figcaption strong {
  display:block;
  width:100%;
}
.creative-main .creative-item__client {
  order:2;
  margin-top:3px;
  color:#667085;
  font-size:12px;
  line-height:17px;
  font-weight:400;
}
.creative-main .creative-item figcaption strong {
  order:1;
  color:#273142;
  font-size:16px;
  line-height:22px;
  font-weight:700;
}
.creative-main .creative-item figcaption strong + span {
  order:3;
  margin-top:8px;
  padding-top:6px;
  border-top:1px solid #eef1f4;
  color:#98a2b3;
  font-size:10px;
  line-height:14px;
  font-weight:400;
  letter-spacing:.08em;
}
.creative-modal[hidden] { display:none; }
.creative-modal {
  position:fixed;
  z-index:1100;
  inset:0;
  display:grid;
  padding:32px 72px;
  place-items:center;
  background:rgb(0 0 0/.82);
  opacity:0;
  transition:opacity .18s ease;
}
.creative-modal.is-open { opacity:1; }
.creative-modal__image {
  display:block;
  width:auto;
  max-width:calc(100vw - 144px);
  height:auto;
  max-height:calc(100vh - 64px);
  max-height:calc(100dvh - 64px);
  object-fit:contain;
  opacity:0;
  transform:scale(.97);
  transition:opacity .18s ease,transform .18s ease;
}
.creative-modal.is-open .creative-modal__image { opacity:1; transform:scale(1); }
.creative-modal__close,
.creative-modal__previous,
.creative-modal__next {
  position:absolute;
  display:grid;
  width:48px;
  height:48px;
  padding:0;
  place-items:center;
  border:1px solid rgb(255 255 255/.35);
  border-radius:999px;
  color:#fff;
  background:rgb(0 0 0/.35);
  cursor:pointer;
}
.creative-modal__close { top:16px; right:16px; }
.creative-modal__previous { top:50%; left:16px; transform:translateY(-50%); }
.creative-modal__next { top:50%; right:16px; transform:translateY(-50%); }
.creative-modal__close svg,
.creative-modal__previous svg,
.creative-modal__next svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
body.creative-modal-open { overflow:hidden; }
.creative-main .creative-contact {
  margin-top:64px;
  text-align:center;
}
.creative-main .creative-contact p {
  margin:0 0 24px;
  color:#6b7280;
  font-size:14px;
  line-height:20px;
}
.creative-main .creative-contact .button {
  min-height:0;
  padding:16px 32px;
  box-shadow:0 10px 15px -3px rgb(0 0 0/.1),0 4px 6px -4px rgb(0 0 0/.1);
}
@media (hover:hover) and (pointer:fine) {
  .creative-main .creative-gallery__button:hover img { opacity:.88; }
}
@media (max-width:1023px) {
  .creative-main .container { padding-inline:24px; }
  .creative-main .creative-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:639px) {
  .creative-main .container { padding-inline:16px; }
  .creative-main .creative-hero h1 { font-size:36px; line-height:40px; }
  .creative-main .creative-description { font-size:16px; line-height:24px; }
  .creative-main .creative-section { padding:56px 0; }
  .creative-main .creative-grid { grid-template-columns:1fr; gap:16px; }
  .creative-main .creative-gallery__button { inset:14px; }
  .creative-main .creative-item__media--multi { gap:6px; padding:16px; }
  .creative-main .creative-item__media--multi .creative-gallery__button { inset:auto; }
  .creative-main .creative-contact { margin-top:56px; }
  .creative-modal { padding:64px 16px 72px; }
  .creative-modal__image { max-width:calc(100vw - 32px); max-height:calc(100vh - 136px); max-height:calc(100dvh - 136px); }
  .creative-modal__previous { top:auto; bottom:12px; left:calc(50% - 60px); transform:none; }
  .creative-modal__next { top:auto; right:calc(50% - 60px); bottom:12px; transform:none; }
}
@media (prefers-reduced-motion:reduce) {
  .creative-main .creative-gallery__button img,
  .creative-modal,
  .creative-modal__image { transition:none; }
}