/* ==========================================================================
   Takara Color — main stylesheet
   Structural reference: rgf-professional.jp
     - persistent sticky left sidebar nav (light/dark per section)
     - full-bleed sections alternating light/black backgrounds
     - large display headline, numbered flow, stat cards, tag pills
   Visual identity: original — CMYK "ink" blend animation replaces
   the reference site's photo mosaic / WebGL sphere (see hero).
   Content source: existing takara-gp.jp site.
   ========================================================================== */

:root {
	--ink-cyan: #00aeef;
	--ink-magenta: #ec008c;
	--ink-yellow: #ffd400;
	--ink-key: #1a1a1a;

	--color-navy: #10233d;
	--color-accent: #d9333f;

	--sidebar-w: 280px;

	--light-bg: #ffffff;
	--light-bg-alt: #f4f6f9;
	--light-text: #1c2434;
	--light-text-soft: #5b6478;
	--light-border: #e3e7ee;

	--dark-bg: #0a0a0c;
	--dark-bg-alt: #131316;
	--dark-text: #f3f4f6;
	--dark-text-soft: #9aa0ac;
	--dark-border: rgba(255, 255, 255, 0.1);

	--font-body: "Yu Gothic", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", sans-serif;
	--font-display: "Helvetica Neue", Arial, var(--font-body);

	--shadow-md: 0 16px 40px rgba(10, 15, 30, 0.14);

	--hero-progress: 0;
}

* , *::before, *::after { box-sizing: border-box; }
/* overflow-x: clip (not hidden) on html/body — "hidden" forces the other
   axis to compute as "auto", turning body into its own scroll container
   and breaking position:sticky for the sidebar. "clip" suppresses the
   horizontal overflow without that side effect. */
html { scroll-behavior: smooth; overflow-x: clip; }

body {
	margin: 0;
	overflow-x: clip;
	font-family: var(--font-body);
	color: var(--light-text);
	background: var(--light-bg);
	line-height: 1.9;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; }
button { font: inherit; border: none; background: none; cursor: pointer; }

.screen-reader-text {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px);
}

.u-only-sp { display: none; }

.wrap { max-width: 760px; margin: 0 auto; }

/* ==========================================================================
   First-visit intro loader — four CMYK dots hopping, shown once per
   browser session (see the inline script in header.php and the
   sessionStorage guard in main.js).
   ========================================================================== */
.page-loader {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--light-bg);
	opacity: 1;
	visibility: visible;
	transition: opacity .5s ease, visibility .5s ease;
}
.page-loader.is-hidden { opacity: 0; visibility: hidden; pointer-events: none; }
html.no-loader .page-loader { display: none; }

.page-loader__dots { display: flex; align-items: flex-end; gap: 20px; }
.page-loader__dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	animation: page-loader-hop .9s ease-in-out infinite;
}
.page-loader__dot--c { background: var(--ink-cyan); animation-delay: 0s; }
.page-loader__dot--m { background: var(--ink-magenta); animation-delay: .12s; }
.page-loader__dot--y { background: var(--ink-yellow); animation-delay: .24s; }
.page-loader__dot--k { background: var(--ink-key); animation-delay: .36s; }

@keyframes page-loader-hop {
	0%, 60%, 100% { transform: translateY(0); }
	30% { transform: translateY(-22px); }
}

@media (prefers-reduced-motion: reduce) {
	.page-loader__dot { animation: none; }
}

/* ==========================================================================
   App shell / sticky sidebar
   ========================================================================== */

/* No background here on purpose: it must stay transparent so the
   fixed ink layer (a body-level sibling, painted behind this whole
   wrapper) shows through wherever a section's own background is
   transparent (the hero). Each later section supplies its own
   opaque background and covers the ink normally. */
.site-content {
	position: relative;
	z-index: 1;
}

.app-shell {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
}

.main-content {
	grid-column: 1;
	grid-row: 1;
	min-width: 0;
}

.sidebar-column {
	grid-column: 1;
	grid-row: 1;
	justify-self: start;
	align-self: start;
	position: sticky;
	top: 16px;
	width: var(--sidebar-w);
	height: calc(100dvh - 32px);
	margin: 16px 0 16px 16px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 100;
}

.sidebar {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	padding: 30px 24px;
	border-radius: 24px;
	background: rgba(255, 255, 255, .4);
	backdrop-filter: blur(22px) saturate(160%);
	-webkit-backdrop-filter: blur(22px) saturate(160%);
	border: 1px solid rgba(255, 255, 255, .5);
	color: var(--light-text);
	box-shadow: 0 8px 30px rgba(16, 35, 61, .10);
	transition: background-color .5s ease, color .5s ease, border-color .5s ease;
}

.sidebar-column.theme-dark .sidebar {
	background: rgba(10, 10, 12, .4);
	border-color: rgba(255, 255, 255, .08);
	color: var(--dark-text);
	box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

.sidebar__top {
	margin-bottom: 20px;
}
.sidebar__logo { display: flex; align-items: center; }

/* The text-inclusive logo (logo-black.png / logo-white.png) is the
   whole brand lockup by itself, so it's shown at full size with no
   extra badge/name text around it. Both color variants are always in
   the DOM; only one is ever displayed, swapped by .theme-dark — the
   same class main.js already toggles on the sidebar as the page
   scrolls past light/dark sections, so the logo tracks whichever
   background is currently showing through the frosted glass.
   Sized to fill the sidebar's full width rather than capped by
   height, so it reads as a real banner, not a small icon. */
.sidebar__logo-img { width: 100%; height: auto; }
.sidebar__logo-img--dark { display: none; }
.sidebar-column.theme-dark .sidebar__logo-img--light { display: none; }
.sidebar-column.theme-dark .sidebar__logo-img--dark { display: block; }

/* Fallback-only styling, used when neither logo file is present. */
.sidebar__logo-badge {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border-radius: 18px;
	background:
		radial-gradient(circle at 28% 24%, rgba(0, 174, 239, .18), transparent 60%),
		radial-gradient(circle at 76% 78%, rgba(236, 0, 140, .16), transparent 60%),
		#fff;
	box-shadow: 0 8px 20px rgba(16, 35, 61, .12), inset 0 0 0 1px rgba(16, 35, 61, .06);
}
.sidebar__logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 40px; height: 40px; border-radius: 10px;
	background: var(--color-accent); color: #fff;
	font-weight: 800; font-size: 18px;
}
.sidebar__logo-text { display: flex; flex-direction: column; gap: 4px; line-height: 1.35; }
.sidebar__logo-eyebrow {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--color-accent);
	margin-bottom: 2px;
}
.sidebar__logo-text strong { font-size: 14px; font-weight: 800; letter-spacing: .02em; color: var(--light-text); }
.sidebar-column.theme-dark .sidebar__logo-text strong { color: var(--dark-text); }
.sidebar__logo-text small { font-size: 10px; color: var(--light-text-soft); }
.sidebar-column.theme-dark .sidebar__logo-text small { color: var(--dark-text-soft); }

.sidebar__nav ul { display: flex; flex-direction: column; gap: 0; }
.sidebar__nav a {
	display: flex; align-items: center; gap: 8px;
	font-size: 13.5px; font-weight: 600;
	padding: 13px 12px;
	margin: 0 -12px;
	border-radius: 10px;
	color: inherit; opacity: .68;
	transition: opacity .2s ease, background-color .2s ease;
}
.sidebar__nav li:first-child { border-top: 1px solid var(--light-border); }
.sidebar-column.theme-dark .sidebar__nav li:first-child { border-color: var(--dark-border); }
.sidebar__nav li { border-bottom: 1px solid var(--light-border); }
.sidebar-column.theme-dark .sidebar__nav li { border-color: var(--dark-border); }
.sidebar__nav a:hover { opacity: 1; background: rgba(255, 255, 255, .9); }
.sidebar-column.theme-dark .sidebar__nav a:hover { background: rgba(255, 255, 255, .14); }
.sidebar__nav li.is-current a { opacity: 1; }
.sidebar__nav .dot {
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--color-accent); display: inline-block;
}

.sidebar__more { margin-top: 4px; }
.sidebar__more-toggle {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	list-style: none;
	cursor: pointer;
	padding: 13px 12px;
	margin: 0 -12px;
	border-radius: 10px;
	font-size: 12.5px; font-weight: 700;
	color: inherit; opacity: .55;
	transition: opacity .2s ease, background-color .2s ease;
}
.sidebar__more-toggle::-webkit-details-marker { display: none; }
.sidebar__more-toggle:hover { opacity: 1; background: rgba(255, 255, 255, .9); }
.sidebar-column.theme-dark .sidebar__more-toggle:hover { background: rgba(255, 255, 255, .14); }
.sidebar__more-arrow {
	flex-shrink: 0;
	width: 8px; height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.sidebar__more[open] .sidebar__more-arrow { transform: rotate(-135deg); }
.sidebar__more ul { margin-top: 2px; }

.sidebar-ctas {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.pill {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 18px; border-radius: 999px;
	font-size: 13px; font-weight: 700;
	transition: transform .15s ease, background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.pill__icon { width: 15px; height: 15px; flex-shrink: 0; }

.pill--outline {
	background: rgba(255, 255, 255, .55);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(16, 35, 61, .22);
	color: var(--light-text);
}
.sidebar-column.theme-dark .pill--outline { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: var(--dark-text); }
.pill--outline:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }

.pill--solid {
	background: var(--light-text);
	color: #fff;
}
.sidebar-column.theme-dark .pill--solid { background: #fff; color: #0a0a0c; }
.pill--solid:hover { transform: translateY(-2px); }

.pill--large { padding: 15px 26px; font-size: 14.5px; }

/* Mobile-only persistent header bar: logo left, Menu button right.
   Hidden on desktop (the sidebar itself carries the logo there);
   shown only under the 880px breakpoint alongside .sidebar-toggle. */
.mobile-header {
	display: none;
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 200;
	align-items: center;
	justify-content: space-between;
	height: 64px;
	padding: 0 20px;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(16px) saturate(160%);
	-webkit-backdrop-filter: blur(16px) saturate(160%);
	border-bottom: 1px solid var(--light-border);
}
.mobile-header__logo { display: flex; align-items: center; gap: 8px; }
.mobile-header__logo-img { max-height: 32px; width: auto; }
.mobile-header__logo-mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 30px; height: 30px; border-radius: 8px;
	background: var(--color-accent); color: #fff;
	font-weight: 800; font-size: 14px;
}
.mobile-header__logo-text { font-size: 13px; font-weight: 800; letter-spacing: .03em; color: var(--light-text); }

.sidebar-toggle {
	display: none;
	align-items: center;
	gap: 8px;
	padding: 9px 14px 9px 10px;
	border-radius: 999px;
	background: var(--light-text);
	border: none;
	box-shadow: var(--shadow-md);
}
.sidebar-toggle__bars { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 16px; }
.sidebar-toggle__bar { width: 16px; height: 1.5px; background: #fff; transition: transform .2s ease, opacity .2s ease; }
.sidebar-toggle__label { font-size: 12.5px; font-weight: 700; color: #fff; }
.sidebar-toggle.is-active .sidebar-toggle__bars .sidebar-toggle__bar:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.sidebar-toggle.is-active .sidebar-toggle__bars .sidebar-toggle__bar:nth-child(2) { opacity: 0; }
.sidebar-toggle.is-active .sidebar-toggle__bars .sidebar-toggle__bar:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* ==========================================================================
   Buttons / small components shared across sections
   ========================================================================== */

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 15px 30px; border-radius: 999px;
	font-weight: 700; font-size: 15px;
	transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
.btn--primary { background: var(--color-accent); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); }
.btn--outline { background: var(--light-bg); border: 1.5px solid var(--light-text); color: var(--light-text); }
.btn--outline:hover { transform: translateY(-2px); }

/* ---------- Shared button hover: rainbow bloom confined to the right ~third + label pop ---------- */

.pill, .btn, .cta-bar, .search-bar, .vision-cta {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

.pill::before, .btn::before, .cta-bar::before, .search-bar::before, .vision-cta::before {
	content: "";
	position: absolute;
	top: -60%;
	bottom: -60%;
	right: -8%;
	width: 65%;
	background: conic-gradient(from 200deg at 100% 50%,
		var(--ink-cyan), var(--ink-magenta), var(--ink-yellow), var(--ink-cyan));
	filter: blur(28px);
	opacity: 0;
	-webkit-mask-image: linear-gradient(to left, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 55%, transparent 100%);
	mask-image: linear-gradient(to left, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 55%, transparent 100%);
	transform: translateX(18%) scale(.7);
	transition: opacity .6s ease, transform .6s ease;
	z-index: 0;
	pointer-events: none;
}

.pill:hover::before, .btn:hover::before, .cta-bar:hover::before, .search-bar:hover::before, .vision-cta:hover::before {
	opacity: .65;
	transform: translateX(0%) scale(1);
}

.pill > *, .btn > *, .cta-bar > *, .search-bar > *, .vision-cta > * { position: relative; z-index: 1; }

.btn-label { display: inline-block; transition: transform .3s ease; }
.pill:hover .btn-label,
.btn:hover .btn-label,
.cta-bar:hover .btn-label,
.search-bar:hover .btn-label {
	transform: translateX(4px);
}

.vision-cta {
	margin-top: 40px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 22px 26px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .5);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	max-width: 400px;
	font-family: var(--font-display);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--color-navy);
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.vision-cta:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); background: rgba(255, 255, 255, .7); }
.vision-cta__arrow {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background-color .2s ease;
}
.vision-cta__arrow svg { width: 18px; height: 18px; }
.vision-cta:hover .vision-cta__arrow { background: var(--color-accent); transform: translateX(3px); }

/* ==========================================================================
   Section shells
   ========================================================================== */

.section { padding: 110px 64px 110px calc(var(--sidebar-w) + 96px); }

.section--why, .section--stats { background: var(--dark-bg); color: var(--dark-text); }

/* Services + Flow share ONE continuous background image across both
   sections' combined height (via this wrapper), instead of each
   section painting its own copy — which produced a visible seam at
   the section boundary at some viewport sizes. */
.services-flow-bg {
	position: relative;
	background-image:
		linear-gradient(to bottom, rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
		url('https://takara-gp.tecnect.com/wp-content/uploads/2026/07/bg-cr.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.section--services, .section--flow { color: var(--light-text); }

/* Vision stays transparent on purpose: the hero's fixed ink layer
   should keep showing through (and animating) all the way up to
   the first dark section, not just behind the hero itself. Its
   text gets a soft white glow instead for legibility. */
.section--vision { background: transparent; color: var(--light-text); }

.section__eyebrow {
	font-size: 12.5px; font-weight: 700; letter-spacing: .12em;
	color: var(--color-accent); margin-bottom: 14px;
}
.section__title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-display);
	font-size: clamp(28px, 3.4vw, 42px);
	font-weight: 800;
	letter-spacing: -.01em;
}

/* Small round CMYK mark that sits before every section heading —
   a modern, dot-based nod to the print swatches on the original
   site (which used squares). Purely decorative. */
.cmyk-dots {
	display: inline-grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 3px;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
}
.cmyk-dots__dot { border-radius: 50%; }
.cmyk-dots__dot--c { background: var(--ink-cyan); }
.cmyk-dots__dot--m { background: var(--ink-magenta); }
.cmyk-dots__dot--y { background: var(--ink-yellow); }
.cmyk-dots__dot--k { background: var(--ink-key); }

/* ---------- Hero ---------- */

.hero {
	position: relative;
	min-height: 94vh;
	display: flex;
	align-items: flex-end;
	padding: 72px 64px 96px calc(var(--sidebar-w) + 96px);
	background: transparent;
}

/* Background photo + its reveal cover — see header.php for why
   these live as fixed, viewport-covering siblings of .ink-stage
   rather than inside .hero: it keeps them strictly *behind* the ink
   in paint order, so the ink itself is never dimmed or covered by
   anything here. The mouse-driven "burn hole" cover is desktop/mouse
   only — touch devices have no persistent hover to drive it, so on
   touch the photo is simply left fully visible (no cover) with the
   ink animating on top of it, instead of hiding the photo away. */
.hero-bg {
	position: fixed;
	inset: 0;
	background-image: url('https://takara-gp.tecnect.com/wp-content/uploads/2026/08/top-bg.webp');
	background-size: cover;
	background-position: center;
	filter: saturate(.75) brightness(.94);
	pointer-events: none;
}

.hero-bg-cover {
	position: fixed;
	inset: 0;
	pointer-events: none;
}

@media not all and (hover: hover) {
	.hero-bg-cover { display: none; }
	/* No mouse to reveal it gradually, so the photo sits fully
	   visible the whole time — fade it down hard so the hero copy
	   stays readable on top of it. */
	.hero-bg { opacity: .22; filter: saturate(.55) brightness(1.2); }
}

/* Ink background: fixed to the viewport (see header.php) instead of
   living inside .hero, so it stays put while the page scrolls past
   it — each later section's own opaque background covers it once
   scrolled underneath. --hero-progress (0 → 1, set on <html> by
   main.js) drives an additional scale + fade as the hero scrolls
   away, distinct from the blobs' own perpetual travel animation. */
.ink-stage {
	position: fixed;
	inset: 0;
	isolation: isolate;
	will-change: transform, opacity;
	transition: opacity .1s linear;
}

.ink-stage--back {
	filter: url(#ink-goo-soft);
	opacity: calc(.6 * (1 - var(--hero-progress, 0)));
	transform: translateY(calc(var(--hero-progress, 0) * 60px)) scale(calc(1 - var(--hero-progress, 0) * .15));
}

.ink-stage--front {
	filter: url(#ink-goo);
	opacity: calc(1 - var(--hero-progress, 0));
	transform: translateY(calc(var(--hero-progress, 0) * -70px)) scale(calc(1 + var(--hero-progress, 0) * .3));
}

.ink-blob {
	position: absolute;
	top: 0;
	left: 0;
	border-radius: 50%;
	mix-blend-mode: multiply;
	will-change: transform, border-radius, offset-distance;
}

/* Hero (front layer): blobs travel along sweeping brush-stroke paths
   (CSS motion path), elongating and morphing shape as they move,
   instead of just drifting in place — reads as flowing ink rather
   than bouncing circles. Each travel animation gets a negative
   animation-delay of half its own duration, so on first paint /
   reload every blob starts already mid-path (near the middle of the
   hero) instead of at the path's off-screen starting corner. */
.ink-stage--front .ink-blob--c {
	width: 40vw; height: 40vw; max-width: 560px; max-height: 560px;
	background: var(--ink-cyan); opacity: .8;
	offset-path: path("M -120,80 C 180,320 480,-60 760,220 S 1120,480 1300,180");
	offset-rotate: auto;
	animation: ink-travel-c 26s ease-in-out infinite alternate, ink-morph-a 8s ease-in-out infinite;
	animation-delay: -13s, 0s;
}
.ink-stage--front .ink-blob--m {
	width: 32vw; height: 32vw; max-width: 460px; max-height: 460px;
	background: var(--ink-magenta); opacity: .78;
	offset-path: path("M 1320,60 C 1000,260 820,-40 620,210 S 200,420 -60,240");
	offset-rotate: auto;
	animation: ink-travel-m 22s ease-in-out infinite alternate, ink-morph-b 6.5s ease-in-out infinite;
	animation-delay: -11s, 0s;
}
.ink-stage--front .ink-blob--y {
	width: 28vw; height: 28vw; max-width: 400px; max-height: 400px;
	background: var(--ink-yellow); opacity: .85;
	offset-path: path("M -60,620 C 260,420 520,660 800,460 S 1160,300 1360,520");
	offset-rotate: auto;
	animation: ink-travel-y 30s ease-in-out infinite alternate, ink-morph-a 9.5s ease-in-out infinite;
	animation-delay: -15s, 0s;
}
.ink-stage--front .ink-blob--k {
	width: 22vw; height: 22vw; max-width: 320px; max-height: 320px;
	background: var(--ink-key); opacity: .48;
	offset-path: path("M 1280,600 C 960,400 760,600 520,440 S 160,300 -60,470");
	offset-rotate: auto;
	animation: ink-travel-k 18s ease-in-out infinite alternate, ink-morph-b 5.5s ease-in-out infinite;
	animation-delay: -9s, 0s;
}

/* Hero (back layer): many small, faint, slow-moving blobs — reads
   as ink pooled further away, adding depth behind the front brush
   strokes without ever competing with them for attention. */
.ink-stage--back .ink-blob--bg1 {
	width: 16vw; height: 16vw; max-width: 220px; max-height: 220px;
	background: var(--ink-cyan); opacity: .22;
	offset-path: path("M -80,220 C 160,80 380,360 640,180 S 900,40 1000,220");
	offset-rotate: auto;
	animation: ink-travel-bg1 46s ease-in-out infinite alternate, ink-morph-a 14s ease-in-out infinite;
	animation-delay: -23s, 0s;
}
.ink-stage--back .ink-blob--bg2 {
	width: 13vw; height: 13vw; max-width: 180px; max-height: 180px;
	background: var(--ink-yellow); opacity: .2;
	offset-path: path("M 1020,380 C 760,180 520,440 260,260 S -60,120 -100,320");
	offset-rotate: auto;
	animation: ink-travel-bg2 52s ease-in-out infinite alternate, ink-morph-b 16s ease-in-out infinite;
	animation-delay: -26s, 0s;
}
.ink-stage--back .ink-blob--bg3 {
	width: 14vw; height: 14vw; max-width: 200px; max-height: 200px;
	background: var(--ink-magenta); opacity: .18;
	offset-path: path("M -60,480 C 220,340 460,560 740,380 S 1000,280 1080,480");
	offset-rotate: auto;
	animation: ink-travel-bg3 40s ease-in-out infinite alternate, ink-morph-a 12s ease-in-out infinite;
	animation-delay: -20s, 0s;
}
.ink-stage--back .ink-blob--bg4 {
	width: 11vw; height: 11vw; max-width: 150px; max-height: 150px;
	background: var(--ink-key); opacity: .14;
	offset-path: path("M 960,-40 C 680,100 460,-80 200,100 S -60,240 -100,20");
	offset-rotate: auto;
	animation: ink-travel-bg4 34s ease-in-out infinite alternate, ink-morph-b 10s ease-in-out infinite;
	animation-delay: -17s, 0s;
}
.ink-stage--back .ink-blob--bg5 {
	width: 10vw; height: 10vw; max-width: 140px; max-height: 140px;
	background: var(--ink-cyan); opacity: .16;
	offset-path: path("M 1120,140 C 860,300 620,60 380,240 S 40,380 -40,180");
	offset-rotate: auto;
	animation: ink-travel-bg5 38s ease-in-out infinite alternate, ink-morph-a 11s ease-in-out infinite;
	animation-delay: -19s, 0s;
}
.ink-stage--back .ink-blob--bg6 {
	width: 12vw; height: 12vw; max-width: 165px; max-height: 165px;
	background: var(--ink-magenta); opacity: .15;
	offset-path: path("M -60,60 C 220,220 480,-20 760,160 S 1040,300 1100,80");
	offset-rotate: auto;
	animation: ink-travel-bg6 44s ease-in-out infinite alternate, ink-morph-b 13s ease-in-out infinite;
	animation-delay: -22s, 0s;
}

@keyframes ink-travel-c { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes ink-travel-m { 0% { offset-distance: 4%; } 100% { offset-distance: 96%; } }
@keyframes ink-travel-y { 0% { offset-distance: 8%; } 100% { offset-distance: 100%; } }
@keyframes ink-travel-k { 0% { offset-distance: 0%; } 100% { offset-distance: 92%; } }
@keyframes ink-travel-bg1 { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
@keyframes ink-travel-bg2 { 0% { offset-distance: 6%; } 100% { offset-distance: 98%; } }
@keyframes ink-travel-bg3 { 0% { offset-distance: 0%; } 100% { offset-distance: 94%; } }
@keyframes ink-travel-bg4 { 0% { offset-distance: 10%; } 100% { offset-distance: 100%; } }
@keyframes ink-travel-bg5 { 0% { offset-distance: 3%; } 100% { offset-distance: 97%; } }
@keyframes ink-travel-bg6 { 0% { offset-distance: 12%; } 100% { offset-distance: 100%; } }

/* Organic "brush" morph: elongates along its direction of travel then
   relaxes back, as if ink is being pulled and released. */
@keyframes ink-morph-a {
	0%, 100% { border-radius: 58% 42% 62% 38% / 44% 58% 42% 56%; transform: scale(1, 1) rotate(0deg); }
	50%      { border-radius: 40% 60% 35% 65% / 62% 38% 66% 34%; transform: scale(1.28, .8) rotate(6deg); }
}
@keyframes ink-morph-b {
	0%, 100% { border-radius: 46% 54% 58% 42% / 58% 46% 54% 42%; transform: scale(1, 1) rotate(0deg); }
	50%      { border-radius: 62% 38% 44% 56% / 40% 62% 38% 60%; transform: scale(.82, 1.3) rotate(-8deg); }
}

/* Final CTA card: a calmer, self-contained pulse (small stage, no motion path).
   Scoped under .final-cta__ink (not .ink-stage), so color/size are set
   independently from the hero's blob variants. */
.final-cta__ink .ink-blob--c,
.final-cta__ink .ink-blob--m,
.final-cta__ink .ink-blob--y {
	offset-path: none;
	animation: ink-pulse 16s ease-in-out infinite;
}
.final-cta__ink .ink-blob--c { background: var(--ink-cyan); }
.final-cta__ink .ink-blob--m { background: var(--ink-magenta); animation-delay: -5s; }
.final-cta__ink .ink-blob--y { background: var(--ink-yellow); animation-delay: -10s; }

@keyframes ink-pulse {
	0%, 100% { transform: translate(0, 0) scale(1); border-radius: 55% 45% 60% 40% / 45% 55% 40% 60%; }
	50% { transform: translate(4%, -4%) scale(1.15); border-radius: 42% 58% 45% 55% / 58% 42% 60% 40%; }
}

.hero__inner {
	position: relative;
	z-index: 2;
	max-width: 620px;
	transform: translateY(calc(var(--hero-progress, 0) * -70px));
	opacity: calc(1 - (var(--hero-progress, 0) * .85));
}

.hero__eyebrow {
	display: inline-block;
	font-size: 13px; font-weight: 700; letter-spacing: .1em;
	color: var(--color-accent);
	background: rgba(217, 51, 63, .12);
	padding: 6px 16px; border-radius: 999px;
	margin-bottom: 22px;
	backdrop-filter: blur(6px);
}

.hero__title {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	font-family: var(--font-display);
	font-size: clamp(40px, 6.2vw, 78px);
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: 1.02;
	color: var(--color-navy);
	text-shadow: 0 2px 30px rgba(255, 255, 255, .9), 0 1px 2px rgba(255, 255, 255, .6);
}
.hero__title .cmyk-dots { width: 26px; height: 26px; gap: 4px; margin-top: 12px; }

.hero__lead {
	margin-top: 26px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--light-text);
	max-width: 480px;
	text-shadow: 0 1px 16px rgba(255, 255, 255, .9);
}

.hero__actions { margin-top: 38px; display: flex; gap: 16px; }
.hero__actions .btn { flex: 1; }

.hero__tagline {
	position: absolute;
	top: 48px;
	right: 6%;
	z-index: 2;
	text-align: right;
	max-width: 300px;
}
.hero__tagline-main {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--light-text);
	text-shadow: 0 1px 10px rgba(255, 255, 255, .9);
}
.hero__tagline-rule {
	width: 32px;
	height: 1px;
	background: currentColor;
	opacity: .5;
}
.hero__tagline-sub {
	margin-top: 8px;
	font-size: 12px;
	color: var(--light-text-soft);
	text-shadow: 0 1px 10px rgba(255, 255, 255, .9);
}

/* ---------- Hero: paper grain + cursor ink-reveal ---------- */

.page-grain {
	position: fixed;
	inset: 0;
	filter: url(#paper-grain);
	opacity: .05;
	mix-blend-mode: multiply;
	pointer-events: none;
}

/* ---------- Vision ---------- */

.section--vision {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 60px;
	align-items: center;
}

.vision__title {
	display: flex;
	align-items: center;
	gap: 16px;
	font-family: var(--font-display);
	font-size: clamp(26px, 3vw, 38px);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: -.01em;
	text-shadow: 0 2px 24px rgba(255, 255, 255, .9), 0 1px 2px rgba(255, 255, 255, .7);
}
.vision__title .cmyk-dots { margin-top: 6px; }

.vision__body {
	margin-top: 26px;
	font-size: 15px;
	font-weight: 500;
	color: var(--light-text);
	max-width: 560px;
	text-shadow: 0 1px 16px rgba(255, 255, 255, .9);
}

.vision__graphic { display: flex; align-items: center; justify-content: center; }

.color-wheel {
	position: relative;
	width: 260px; height: 260px;
	border-radius: 50%;
	animation: wheel-spin 50s linear infinite;
}
.color-wheel::before {
	content: "";
	position: absolute; inset: 18px;
	border-radius: 50%;
	border: 1px dashed var(--light-border);
}
.chip {
	position: absolute;
	width: 46px; height: 46px;
	border-radius: 50%;
	top: 50%; left: 50%;
	margin: -23px 0 0 -23px;
	box-shadow: 0 8px 20px rgba(10, 15, 30, .12);
}
.chip--c  { background: var(--ink-cyan);    transform: rotate(0deg)   translate(110px) rotate(0deg); }
.chip--m  { background: var(--ink-magenta); transform: rotate(45deg)  translate(110px) rotate(-45deg); }
.chip--y  { background: var(--ink-yellow);  transform: rotate(90deg)  translate(110px) rotate(-90deg); }
.chip--k  { background: var(--ink-key);     transform: rotate(135deg) translate(110px) rotate(-135deg); }
.chip--c2 { background: var(--ink-cyan);    opacity: .5; transform: rotate(180deg) translate(110px) rotate(-180deg); }
.chip--m2 { background: var(--ink-magenta); opacity: .5; transform: rotate(225deg) translate(110px) rotate(-225deg); }
.chip--y2 { background: var(--ink-yellow);  opacity: .5; transform: rotate(270deg) translate(110px) rotate(-270deg); }
.chip--k2 { background: var(--ink-key);     opacity: .5; transform: rotate(315deg) translate(110px) rotate(-315deg); }

@keyframes wheel-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* ---------- News teaser ---------- */
/* Deliberately opaque (unlike hero/vision): a clean, full-width
   white break where the mouse-hover ink/photo reveal stops showing
   through, right before the first dark section. */

.news-strip {
	background: var(--light-bg);
	padding: 0;
}
.news-strip__inner {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	display: flex;
	align-items: center;
	gap: 22px;
	width: 100%;
	padding: 40px 64px 40px calc(var(--sidebar-w) + 96px);
}

/* Same rainbow-bloom hover language as the buttons, but emerging
   from the bottom edge instead of the right, and spanning the
   *entire* strip — this is one full-width hoverable area, not a
   smaller banner floating inside it. */
.news-strip__inner::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -10%;
	height: 75%;
	background: conic-gradient(from 110deg at 50% 100%,
		var(--ink-cyan), var(--ink-magenta), var(--ink-yellow), var(--ink-cyan));
	filter: blur(28px);
	opacity: 0;
	-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 55%, transparent 100%);
	mask-image: linear-gradient(to top, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35) 55%, transparent 100%);
	transform: translateY(18%) scale(.7);
	transition: opacity .6s ease, transform .6s ease;
	z-index: 0;
	pointer-events: none;
}
.news-strip__inner:hover::before {
	opacity: .55;
	transform: translateY(0%) scale(1);
}

.news-strip__label,
.news-strip__date,
.news-strip__title,
.news-strip__arrow {
	position: relative;
	z-index: 1;
}

.news-strip__label {
	flex-shrink: 0;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .1em;
	color: var(--color-accent);
}
.news-strip__date {
	flex-shrink: 0;
	font-size: 13px;
	color: var(--light-text-soft);
}
.news-strip__title {
	flex: 1;
	font-size: 15px;
	font-weight: 700;
	color: var(--light-text);
	transition: transform .3s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.news-strip__arrow {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-navy);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform .2s ease, background-color .2s ease;
}
.news-strip__arrow svg { width: 18px; height: 18px; }
.news-strip__inner:hover .news-strip__arrow { background: var(--color-accent); transform: translateX(3px); }
.news-strip__inner:hover .news-strip__title { transform: translateX(4px); }

/* ---------- Why ---------- */

.section--why {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	align-items: center;
}

.why__tagline {
	margin-top: 30px;
	font-family: var(--font-display);
	font-size: clamp(20px, 2.4vw, 28px);
	font-weight: 800;
}
.why__tagline span { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--dark-text-soft); margin-top: 10px; }

.why__graphic {
	position: relative;
	height: 340px;
}
.node-glow {
	position: absolute;
	width: 220px; height: 220px;
	border-radius: 50%;
	filter: blur(50px);
	opacity: .55;
	animation: glow-drift 15s ease-in-out infinite;
}
.node-glow--c { background: var(--ink-cyan); top: 8%; left: 8%; --drift-x: -18px; --drift-y: 14px; animation-duration: 13s; }
.node-glow--m { background: var(--ink-magenta); top: 6%; right: 8%; --drift-x: 16px; --drift-y: -12px; animation-duration: 17s; animation-delay: -5s; }
.node-glow--y { background: var(--ink-yellow); bottom: -4%; left: 28%; opacity: .45; --drift-x: 10px; --drift-y: 18px; animation-duration: 19s; animation-delay: -9s; }

@keyframes glow-drift {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(var(--drift-x, 0), var(--drift-y, 0)) scale(1.06); }
}

.node-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.node-lines line { stroke: rgba(255,255,255,.25); stroke-width: 1.5; }

.node {
	position: absolute;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	width: 108px; height: 108px;
	border-radius: 50%;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.16);
	backdrop-filter: blur(6px);
	text-align: center;
	animation: node-drift 9s ease-in-out infinite;
}
.node span { font-size: 15px; font-weight: 800; }
.node small { font-size: 10.5px; color: var(--dark-text-soft); margin-top: 3px; }
.node--a { top: 8%; left: 12%; --drift-x: 10px; --drift-y: -12px; animation-duration: 8s; }
.node--b { top: 6%; right: 6%; --drift-x: -12px; --drift-y: 10px; animation-duration: 10.5s; animation-delay: -3.2s; }
.node--c { bottom: 4%; left: 34%; --drift-x: 8px; --drift-y: 12px; animation-duration: 12s; animation-delay: -6.4s; }

@keyframes node-drift {
	0%, 100% { transform: translate(0, 0); }
	50% { transform: translate(var(--drift-x, 0), var(--drift-y, 0)); }
}

@media (prefers-reduced-motion: reduce) {
	.node-glow, .node { animation: none; }
}

/* ---------- Stats ---------- */

.section--stats .section__title { margin-bottom: 50px; }

.stats__grid {
	display: grid;
	grid-template-columns: 1fr repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
	gap: 20px;
}

.stats__photo {
	grid-row: span 2;
	border-radius: 20px;
	min-height: 260px;
	background:
		radial-gradient(circle at 30% 30%, rgba(0,174,239,.35), transparent 60%),
		radial-gradient(circle at 70% 70%, rgba(236,0,140,.3), transparent 60%),
		url('https://takara-gp.tecnect.com/wp-content/themes/takara-color/assets/images/stats__photo.jpg') center/cover no-repeat,
		var(--dark-bg-alt);
	border: 1px solid var(--dark-border);
}

.stat-card {
	background: var(--dark-bg-alt);
	border: 1px solid var(--dark-border);
	border-radius: 20px;
	padding: 30px 26px;
}
.stat-card__num { font-family: var(--font-display); font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; color: var(--ink-yellow); }
.stat-card__num span { font-size: 14px; font-weight: 600; color: var(--dark-text); margin-left: 4px; }
.stat-card__label { margin-top: 8px; font-size: 12.5px; color: var(--dark-text-soft); }

.stats__footnote { margin-top: 22px; font-size: 11.5px; color: var(--dark-text-soft); }

/* ---------- Services ---------- */

.section--services {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: 60px;
	align-items: center;
}

.tag-group { margin-top: 30px; }
.tag-group__label { font-size: 12.5px; font-weight: 700; color: var(--light-text-soft); margin-bottom: 12px; }
.tag-list { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
	display: inline-flex; align-items: center;
	padding: 9px 18px; border-radius: 999px;
	border: 1px solid var(--light-border);
	font-size: 13px; font-weight: 600;
}

.cta-bar {
	margin-top: 38px;
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 26px;
	border-radius: 999px;
	background: var(--light-text);
	color: #fff;
	font-weight: 700; font-size: 15px;
	transition: background-color .2s ease, transform .2s ease;
}
.cta-bar:hover { transform: translateY(-2px); }
.cta-bar__dot {
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(255,255,255,.16);
	display: flex; align-items: center; justify-content: center;
}
.services__intro { margin-top: 18px; font-size: 14.5px; color: var(--light-text-soft); max-width: 460px; }

.services__note { margin-top: 14px; font-size: 12px; color: var(--light-text-soft); }

.services__cards { position: relative; height: 380px; }
.service-card {
	position: absolute;
	width: 250px;
	padding: 26px;
	border-radius: 18px;
	background: #fff;
	border: 1px solid var(--light-border);
	box-shadow: var(--shadow-md);
	animation: card-float 7s ease-in-out infinite;
}
.service-card--back { top: 0; right: 0; background: var(--light-bg-alt); --tilt: 4deg; animation-delay: -1s; }
.service-card--mid { top: 95px; right: 145px; --tilt: 2deg; z-index: 1; animation-delay: -3.5s; }
.service-card--front { top: 175px; right: 20px; --tilt: -3deg; z-index: 2; animation-delay: -5.5s; }
.service-card__tag { font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--color-accent); }
.service-card__title { margin-top: 10px; font-size: 16px; font-weight: 800; }
.service-card__meta { margin-top: 8px; font-size: 12.5px; color: var(--light-text-soft); }

@keyframes card-float {
	0%, 100% { transform: translateY(0) rotate(var(--tilt, 0deg)); }
	50% { transform: translateY(-12px) rotate(var(--tilt, 0deg)); }
}
@media (prefers-reduced-motion: reduce) {
	.service-card { animation: none; }
}

/* ---------- Flow ---------- */

.flow__label {
	margin-bottom: 44px;
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 14px;
}

.flow__body {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: 60px;
}

.flow-steps { position: relative; padding-left: 8px; }
.flow-steps__item {
	position: relative;
	display: flex; gap: 22px;
	padding: 0 0 44px 0;
}
.flow-steps__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 22px; top: 46px; bottom: 0;
	width: 1px;
	background: var(--light-border);
}
.flow-steps__num {
	flex-shrink: 0;
	width: 44px; height: 44px;
	border-radius: 10px;
	background: var(--light-text);
	color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-weight: 800; font-size: 14px;
}
.flow-steps__item h3 { font-size: 16.5px; font-weight: 800; margin-bottom: 8px; }
.flow-steps__item p { font-size: 13.5px; color: var(--light-text-soft); max-width: 420px; }

/* Staggered top-to-bottom reveal, gated the same "safe by default"
   way as .reveal-heading: fully visible unless JS adds
   .stagger-pending (see main.js), so a JS failure never hides
   content — only ever animates it in when JS is confirmed running. */
.flow-steps.stagger-pending .flow-steps__item {
	opacity: 0;
	transform: translateY(22px);
}
.flow-steps.stagger-pending.is-visible .flow-steps__item {
	opacity: 1;
	transform: translateY(0);
	transition: opacity .55s ease, transform .55s ease;
}
.flow-steps.stagger-pending.is-visible .flow-steps__item:nth-child(1) { transition-delay: 0s; }
.flow-steps.stagger-pending.is-visible .flow-steps__item:nth-child(2) { transition-delay: .12s; }
.flow-steps.stagger-pending.is-visible .flow-steps__item:nth-child(3) { transition-delay: .24s; }
.flow-steps.stagger-pending.is-visible .flow-steps__item:nth-child(4) { transition-delay: .36s; }
.flow-steps.stagger-pending.is-visible .flow-steps__item:nth-child(5) { transition-delay: .48s; }

.flow__graphic { display: flex; align-items: center; justify-content: center; min-height: 280px; }

/* A large ring of rotating color, transparent in the middle so the
   section's own background shows through — same device as the RGF
   reference (rgf-professional.jp): only the rim glows, not a filled
   disc. The conic-gradient carries a gap so the glow reads as an
   arc/crescent sweeping around rather than a uniform halo, and a
   radial-gradient mask punches out the transparent center + fades
   the outer edge for a soft (not hard-edged) ring. */
.flow-orb {
	position: relative;
	flex-shrink: 0;
	width: 560px;
	height: 560px;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.flow-orb__glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg,
		var(--ink-cyan) 0deg,
		var(--ink-magenta) 100deg,
		var(--ink-yellow) 200deg,
		transparent 260deg,
		transparent 340deg,
		var(--ink-cyan) 360deg);
	filter: blur(34px);
	-webkit-mask-image: radial-gradient(circle, transparent 64%, #000 73%, #000 77%, transparent 88%);
	mask-image: radial-gradient(circle, transparent 64%, #000 73%, #000 77%, transparent 88%);
	animation: flow-orb-spin 11s linear infinite;
}
@keyframes flow-orb-spin {
	to { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
	.flow-orb__glow { animation: none; }
}

/* CMYK dots linked by a single flowing path — reads as "color moving
   through the process", matching the section's actual subject
   (a sequence of steps) rather than an aimless orbit. */
.flow-chain { position: relative; width: 260px; height: 260px; overflow: visible; }
.flow-chain__path {
	stroke: rgba(10, 10, 12, .3);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 7 11;
	animation: flow-chain-dash 2.4s linear infinite;
}
@keyframes flow-chain-dash {
	to { stroke-dashoffset: -36; }
}

.flow-chain__dot { animation: flow-chain-pulse 3.2s ease-in-out infinite; }
.flow-chain__dot--c { fill: var(--ink-cyan); animation-delay: 0s; }
.flow-chain__dot--m { fill: var(--ink-magenta); animation-delay: .3s; }
.flow-chain__dot--y { fill: var(--ink-yellow); animation-delay: .6s; }
.flow-chain__dot--k { fill: var(--color-navy); animation-delay: .9s; }
@keyframes flow-chain-pulse {
	0%, 100% { r: 11; opacity: .85; }
	50% { r: 15; opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.flow-chain__path, .flow-chain__dot { animation: none; }
}

.flow__ctas {
	margin-top: 40px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}
.search-bar {
	display: flex; align-items: center; justify-content: space-between;
	padding: 20px 26px;
	border-radius: 999px;
	border: 1px solid var(--light-border);
	font-size: 14.5px; font-weight: 600;
	transition: border-color .2s ease, transform .2s ease;
}
.search-bar svg { width: 20px; height: 20px; color: var(--light-text-soft); }
.search-bar:hover { transform: translateY(-2px); }

/* ---------- Final CTA + footer (outside shell, full width) ---------- */

.final-cta { padding: 90px 64px; background: var(--dark-bg); }
.final-cta__card {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	padding: 64px;
	background: var(--dark-bg-alt);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 30px;
}
.final-cta__ink { position: absolute; inset: 0; filter: url(#ink-goo); isolation: isolate; opacity: .5; }
.final-cta__ink .ink-blob--c { width: 320px; height: 320px; top: -20%; left: -6%; animation-duration: 24s; }
.final-cta__ink .ink-blob--m { width: 260px; height: 260px; bottom: -18%; right: 6%; animation-duration: 28s; }
.final-cta__ink .ink-blob--y { width: 220px; height: 220px; top: 20%; right: 30%; animation-duration: 20s; }
.final-cta__content { position: relative; z-index: 2; max-width: 480px; }
.final-cta__title { font-family: var(--font-display); font-size: clamp(24px, 2.8vw, 32px); font-weight: 800; color: #fff; }
.final-cta__text { margin-top: 14px; font-size: 14px; color: var(--dark-text-soft); }
.final-cta__actions {
	position: relative; z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 14px;
	width: 100%;
	max-width: 320px;
}
.final-cta__actions .pill { width: 100%; }
.final-cta .pill--outline { background: transparent; border-color: rgba(255, 255, 255, .35); color: #fff; }
.final-cta .pill--solid { background: #fff; color: #0a0a0c; }

.site-footer { background: var(--dark-bg); color: var(--dark-text-soft); position: relative; overflow: hidden; }

/* Big faint "TAKARA" wordmark bleeding off the bottom-left corner —
   purely decorative texture behind the real footer content. */
.site-footer__watermark {
	position: absolute;
	left: -.04em;
	bottom: -.14em;
	z-index: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(72px, 13vw, 200px);
	line-height: 1;
	letter-spacing: -.02em;
	color: rgba(255, 255, 255, .06);
	white-space: nowrap;
	pointer-events: none;
	user-select: none;
}

.site-footer__top {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 40px;
	padding: 60px 64px 40px;
	border-top: 1px solid var(--dark-border);
}
.site-footer__logo { font-size: 17px; font-weight: 800; color: #fff; }
.site-footer__logo-sub { font-size: 17px; font-weight: 800; margin-top: 4px; color: #fff; }
/* A soft light halo behind the mark — the dark navy/red logo art
   otherwise loses its edges against the near-black footer. */
.site-footer__logo-img {
	max-height: 100px;
	width: auto;
	margin-bottom: 14px;
	filter:
		drop-shadow(0 0 10px rgba(255, 255, 255, .35))
		drop-shadow(0 0 26px rgba(255, 255, 255, .18));
}
.site-footer__nav { display: flex; gap: 60px; flex-wrap: wrap; }
.site-footer__nav ul { display: grid; gap: 12px; }
.site-footer__nav a { font-size: 13px; }
.site-footer__nav a:hover { color: #fff; }

.site-footer__bottom {
	position: relative;
	z-index: 1;
	display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px;
	padding: 20px 64px 30px;
	font-size: 11.5px;
	border-top: 1px solid var(--dark-border);
}

/* ==========================================================================
   Content pages (色校正 / CTP出力 / 設備案内 etc.) — a simpler,
   text-first layout reusing the homepage's visual language: the
   sidebar-clearing padding, CMYK dot + reveal-heading treatment on
   headings, and a transparent page-header so the ink still shows
   through at the very top, settling into plain opaque white for the
   long-form reading sections below.
   ========================================================================== */

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	color: var(--light-text-soft);
	text-shadow: 0 1px 10px rgba(255, 255, 255, .9);
	margin-bottom: 22px;
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb__sep { opacity: .5; }

.page-header {
	position: relative;
	overflow: hidden;
	background: transparent;
	padding: 100px 64px 56px calc(var(--sidebar-w) + 96px);
}
/* Frosted glass over the ink: it keeps animating underneath (as
   requested) but stays legible-first here, unlike the homepage hero
   where the ink itself is the point. */
.page-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: rgba(255, 255, 255, .68);
	backdrop-filter: blur(26px) saturate(120%);
	-webkit-backdrop-filter: blur(26px) saturate(120%);
}
.page-header > * {
	position: relative;
	z-index: 1;
}
.page-header__eyebrow {
	display: block;
	width: fit-content;
	font-size: 13px; font-weight: 700; letter-spacing: .1em;
	color: var(--color-accent);
	background: rgba(217, 51, 63, .12);
	padding: 6px 16px; border-radius: 999px;
	margin-bottom: 0;
	backdrop-filter: blur(6px);
}
.page-header__title {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-family: var(--font-display);
	font-size: clamp(30px, 4vw, 48px);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--color-navy);
}
.page-header__lead {
	margin-top: 22px;
	max-width: 640px;
	font-size: 15px;
	font-weight: 500;
	color: var(--light-text);
	text-shadow: 0 1px 14px rgba(255, 255, 255, .9);
}

.page-section {
	background: var(--light-bg);
	padding: 56px 64px 56px calc(var(--sidebar-w) + 96px);
	border-top: 1px solid var(--light-border);
}
.page-section__title {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-size: clamp(22px, 2.6vw, 30px);
	font-weight: 800;
	color: var(--color-navy);
	margin-bottom: 24px;
}
.page-section__title .cmyk-dots { width: 18px; height: 18px; gap: 3px; }
.page-section__title .heading-underline { margin-top: 4px; }

/* Underline that draws in (left → right) the first time its heading
   scrolls into view — tracked by the same scroll-based visibility
   check as .reveal-heading (see main.js), and sharing the same
   "colorful while appearing, settles to a solid ink color" language:
   a registered custom-property pair lets the browser interpolate the
   gradient stops smoothly. The gradient always fades to transparent
   past its midpoint, regardless of the color phase, so the line
   thins out to the right rather than ending in a hard edge.
   flex-basis:100% drops it onto its own line while flex-wrap keeps
   its width tied to the heading's own (shrink-to-fit) box, not the
   full section width. */
@property --underline-1 { syntax: '<color>'; inherits: false; initial-value: #3fb6e8; }
@property --underline-2 { syntax: '<color>'; inherits: false; initial-value: #d94f97; }

.heading-underline {
	flex-basis: 100%;
	height: 1.5px;
	--underline-1: #3fb6e8;
	--underline-2: #d94f97;
	background: linear-gradient(90deg, var(--underline-1) 0%, var(--underline-2) 45%, transparent 90%);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 1s cubic-bezier(.22, .9, .32, 1);
}
.heading-underline.is-visible {
	animation:
		underline-draw 1s cubic-bezier(.22, .9, .32, 1) forwards,
		underline-color 1.6s ease forwards .1s;
}
@keyframes underline-draw {
	0% { transform: scaleX(0); }
	100% { transform: scaleX(1); }
}
@keyframes underline-color {
	0%, 30% { --underline-1: #3fb6e8; --underline-2: #d94f97; }
	100% { --underline-1: var(--light-text); --underline-2: var(--light-text); }
}

.prose { max-width: 760px; font-size: 15px; color: var(--light-text-soft); }
.prose p { margin-top: 1.4em; }
.prose p:first-child { margin-top: 0; }
.prose strong { color: var(--light-text); }
.page-section h4 {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 2em;
	font-family: var(--font-display);
	font-size: 17px;
	font-weight: 800;
	color: var(--color-navy);
}
.page-section h4::before {
	content: "";
	flex-shrink: 0;
	width: 18px;
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(90deg, var(--ink-cyan), var(--ink-magenta));
}
.prose h4 + p { margin-top: .8em; }

.spec-block {
	margin-top: 28px;
	padding-top: 24px;
	border-top: 1px dashed var(--light-border);
}
.spec-block__label {
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
	color: var(--color-accent); margin-bottom: 10px;
}
.spec-block__text { font-size: 14.5px; color: var(--light-text-soft); }

.equipment-list { max-width: 640px; display: grid; }
.equipment-list__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	padding: 13px 0;
	border-bottom: 1px dashed var(--light-border);
	font-size: 14.5px;
}
.equipment-list__name { color: var(--light-text); }
.equipment-list__qty { flex-shrink: 0; font-weight: 700; color: var(--color-navy); }

/* Plain closing note — only single.php's "back to home" link uses
   this now. */
.page-contact-note {
	margin-top: 40px;
	padding-top: 20px;
	border-top: 1px solid var(--light-border);
	font-size: 14px;
	color: var(--light-text-soft);
}
.page-contact-note a { color: var(--color-accent); font-weight: 700; }
.page-contact-note a:hover { text-decoration: underline; }

/* ---------- Contact note ----------
   A readable boxed card (not a competing dark CTA — footer.php's own
   "final-cta" band already handles that job right after this on every
   page). The color comes from a soft, slowly-shifting CMYK gradient
   wash behind a near-opaque white layer — a printing-plate/holographic-
   foil texture rather than literal glitch/RGB-split, and no cmyk-dots
   icon here since that mark is already reserved for section headings. */
.contact-note {
	margin-top: 44px;
	padding: 26px 30px;
	border-radius: 18px;
	position: relative;
	overflow: hidden;
	background:
		linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .88)),
		linear-gradient(115deg,
			var(--ink-cyan) 0%,
			var(--ink-magenta) 28%,
			var(--ink-yellow) 55%,
			var(--color-navy) 80%,
			var(--ink-cyan) 100%);
	background-size: 100% 100%, 260% 260%;
	background-position: 0 0, 0% 50%;
	animation: contact-note-shift 16s ease-in-out infinite alternate;
	box-shadow: 0 10px 26px rgba(16, 35, 61, .08);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.85;
	color: var(--light-text);
}
.contact-note a { color: var(--color-accent); font-weight: 800; }
.contact-note a:hover { text-decoration: underline; }

@keyframes contact-note-shift {
	0%   { background-position: 0 0, 0% 50%; }
	100% { background-position: 0 0, 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
	.contact-note { animation: none; }
}

.info-table { max-width: 700px; }
.info-table__row {
	display: grid;
	grid-template-columns: 130px 1fr;
	gap: 20px;
	padding: 16px 0;
	border-bottom: 1px dashed var(--light-border);
}
.info-table__label { font-size: 13px; font-weight: 700; color: var(--color-navy); }
.info-table__value { font-size: 14.5px; color: var(--light-text-soft); }
.info-table__value p { margin: 0 0 4px; }
.info-table__value p:last-child { margin-bottom: 0; }
.info-table__value a:hover { color: var(--color-accent); }

@media (max-width: 560px) {
	.info-table__row { grid-template-columns: 1fr; gap: 4px; }
}

/* ---------- Timeline (沿革 / company history) ----------
   A vertical connector line + CMYK-cycled dot markers, echoing the
   same visual language as .flow-steps, instead of a plain
   label/value table. */

.timeline { position: relative; max-width: 700px; }
.timeline__item {
	position: relative;
	display: flex;
	gap: 24px;
	padding: 0 0 32px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item:not(:last-child)::before {
	content: "";
	position: absolute;
	left: 5px; top: 22px; bottom: 0;
	width: 1px;
	background: var(--light-border);
}
.timeline__marker {
	flex-shrink: 0;
	width: 11px; height: 11px;
	margin-top: 4px;
	border-radius: 50%;
}
.timeline__marker--c { background: var(--ink-cyan); box-shadow: 0 0 0 4px rgba(0, 174, 239, .15); }
.timeline__marker--m { background: var(--ink-magenta); box-shadow: 0 0 0 4px rgba(236, 0, 140, .15); }
.timeline__marker--y { background: var(--ink-yellow); box-shadow: 0 0 0 4px rgba(255, 212, 0, .18); }
.timeline__marker--k { background: var(--color-navy); box-shadow: 0 0 0 4px rgba(16, 35, 61, .12); }
.timeline__content { flex: 1; }
.timeline__date {
	display: block;
	margin-bottom: 6px;
	font-family: var(--font-display);
	font-size: 13px;
	font-weight: 800;
	color: var(--color-navy);
}
.timeline__value p { margin: 0 0 3px; font-size: 14.5px; color: var(--light-text-soft); }
.timeline__value p:last-child { margin-bottom: 0; }

/* ---------- FAQ accordion ---------- */

.faq-list { max-width: 780px; }

.faq-item {
	border-bottom: 1px dashed var(--light-border);
}
.faq-item:first-child { border-top: 1px dashed var(--light-border); }

.faq-item__q {
	list-style: none;
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 20px 4px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--light-text);
	transition: color .2s ease;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q::marker { content: ''; }
.faq-item__q:hover { color: var(--color-accent); }

.faq-item__q-mark {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--ink-cyan), var(--ink-magenta));
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	font-family: var(--font-display);
}
.faq-item__q-text { flex: 1; padding-top: 3px; }

.faq-item__q-toggle {
	flex-shrink: 0;
	position: relative;
	width: 20px;
	height: 20px;
	margin-top: 5px;
}
.faq-item__q-toggle::before,
.faq-item__q-toggle::after {
	content: '';
	position: absolute;
	background: var(--color-accent);
	transition: transform .25s ease, opacity .25s ease;
}
.faq-item__q-toggle::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.faq-item__q-toggle::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.faq-item[open] .faq-item__q-toggle::after { opacity: 0; transform: translateX(-50%) rotate(90deg); }

.faq-item__a {
	display: flex;
	gap: 16px;
	padding: 0 4px 22px;
	font-size: 14.5px;
	color: var(--light-text-soft);
	line-height: 1.85;
}
.faq-item__a-mark {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	font-size: 12.5px;
	font-weight: 800;
	font-family: var(--font-display);
	color: var(--color-accent);
}
.faq-item__a-text { flex: 1; }
.faq-item__a-text p { margin: 0 0 .7em; }
.faq-item__a-text p:last-child { margin-bottom: 0; }

/* ---------- Data tables (paper / rpnos / size specs) ---------- */

.data-table-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 32px;
	max-width: 780px;
}
.data-table-block__label {
	font-size: 12px; font-weight: 700; letter-spacing: .08em;
	color: var(--color-accent); margin-bottom: 10px;
}
.data-table-wrap { overflow-x: auto; max-width: 780px; margin-top: 4px; }
.data-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.data-table th, .data-table td {
	padding: 11px 14px;
	border-bottom: 1px solid var(--light-border);
	text-align: left;
	white-space: nowrap;
}
.data-table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
	color: var(--color-navy);
	background: var(--light-bg-alt);
}
.data-table td { color: var(--light-text-soft); }
.data-table tr:last-child td { border-bottom: none; }
.data-table--matrix th,
.data-table--matrix td { text-align: center; white-space: normal; }
.data-table--matrix th:first-child,
.data-table--matrix td:first-child {
	text-align: left;
	font-weight: 700;
	color: var(--light-text);
	white-space: nowrap;
}

.map-embed {
	max-width: 780px;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--light-border);
}
.map-embed iframe { display: block; }

/* ---------- Contact form (Contact Form 7) ---------- */

.contact-form { max-width: 640px; }
.contact-form .wpcf7-form { display: flex; flex-direction: column; gap: 22px; }
.contact-form .wpcf7-form p { margin: 0; }
.contact-form .wpcf7-form label {
	display: block;
	font-size: 13.5px;
	font-weight: 700;
	color: var(--light-text);
}
.contact-form .wpcf7-form .wpcf7-form-required {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 9px;
	border-radius: 999px;
	background: rgba(217, 51, 63, .1);
	color: var(--color-accent);
	font-size: 10.5px;
	font-weight: 700;
	vertical-align: middle;
}
.contact-form .wpcf7-form-control-wrap {
	position: relative;
	display: block;
	margin-top: 9px;
}
.contact-form .wpcf7-form input[type="text"],
.contact-form .wpcf7-form input[type="email"],
.contact-form .wpcf7-form input[type="tel"],
.contact-form .wpcf7-form input[type="number"],
.contact-form .wpcf7-form select,
.contact-form .wpcf7-form textarea {
	width: 100%;
	padding: 13px 16px;
	border: 1.5px solid var(--light-border);
	border-radius: 12px;
	background: var(--light-bg);
	font-family: inherit;
	font-size: 14.5px;
	font-weight: 400;
	color: var(--light-text);
	transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-form .wpcf7-form textarea { min-height: 160px; resize: vertical; }
.contact-form .wpcf7-form input:focus,
.contact-form .wpcf7-form select:focus,
.contact-form .wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--color-accent);
	box-shadow: 0 0 0 3px rgba(217, 51, 63, .12);
}
.contact-form .wpcf7-form input[type="submit"] {
	align-self: flex-start;
	margin-top: 4px;
	padding: 15px 34px;
	border: none;
	border-radius: 999px;
	background: var(--color-accent);
	color: #fff;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
}
.contact-form .wpcf7-form input[type="submit"]:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.contact-form .wpcf7-form input[type="submit"]:disabled { opacity: .6; cursor: default; transform: none; }

.contact-form .wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}
/* CF7 nests the checkbox and its text as siblings inside <label>
   (the checkbox is not inside .wpcf7-list-item-label), so the flex
   layout has to go on the <label> itself for the two to line up. */
.contact-form .wpcf7-acceptance .wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	cursor: pointer;
}
.contact-form .wpcf7-acceptance .wpcf7-list-item-label {
	font-size: 14px;
	font-weight: 400;
	color: var(--light-text-soft);
}
.contact-form .wpcf7-acceptance input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin-top: 2px;
	accent-color: var(--color-accent);
	flex-shrink: 0;
}
.contact-form .wpcf7-acceptance a { color: var(--color-accent); text-decoration: underline; }

.contact-form .wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-size: 12.5px;
	font-weight: 400;
	color: var(--color-accent);
}
.contact-form .wpcf7-response-output {
	margin: 0;
	padding: 16px 20px;
	border-radius: 12px;
	border: 1px solid var(--light-border);
	background: var(--light-bg-alt);
	font-size: 14px;
	color: var(--light-text);
}
.contact-form .wpcf7-form.sent .wpcf7-response-output { border-color: #2e9e5b; color: #1d7a44; }
.contact-form .wpcf7-form.invalid .wpcf7-response-output,
.contact-form .wpcf7-form.unaccepted .wpcf7-response-output { border-color: var(--color-accent); color: var(--color-accent); }
.contact-form .wpcf7-spinner { margin-left: 12px; }

/* ---------- Sitemap ---------- */

.sitemap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 40px 32px;
	max-width: 900px;
}
.sitemap-group__list { display: grid; gap: 10px; }
.sitemap-group__list a {
	font-size: 14.5px;
	color: var(--light-text-soft);
	transition: color .2s ease;
}
.sitemap-group__list a:hover { color: var(--color-accent); }

/* ---------- Image placeholder ----------
   A stand-in for a real photo that hasn't been supplied yet. Text
   inside states what should go there so it's obvious what to shoot /
   upload; swap the whole <div> for an <img> (or a WP featured-image
   call) once real photography exists — same pattern already used
   for the hero background (wp-admin > Customize > background image). */

.image-placeholder {
	position: relative;
	overflow: hidden;
	margin: 32px 0;
	max-width: 640px;
	height: 220px;
	border-radius: 20px;
	border: 1px solid var(--dark-border);
	background:
		radial-gradient(circle at 25% 30%, rgba(0, 174, 239, .4), transparent 55%),
		radial-gradient(circle at 75% 70%, rgba(236, 0, 140, .35), transparent 55%),
		var(--dark-bg-alt);
}
.image-placeholder__icon { display: none; }
.image-placeholder__text {
	position: absolute;
	left: 20px;
	bottom: 16px;
	z-index: 1;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	color: rgba(255, 255, 255, .85);
	max-width: calc(100% - 40px);
}

/* Image (left, larger) + text (right) pairing — used to give each
   .image-placeholder some breathing room next to the paragraph it
   illustrates, instead of stacking full-width above/below it. */
.media-row {
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
	max-width: 760px;
	margin: 32px 0;
}
.media-row .image-placeholder { margin: 0; max-width: none; width: 100%; height: 280px; }
.media-row__text { font-size: 14.5px; color: var(--light-text-soft); }
.media-row__text p { margin-top: 1.2em; }
.media-row__text p:first-child { margin-top: 0; }
.media-row__text strong { color: var(--light-text); }

@media (max-width: 780px) {
	.media-row { grid-template-columns: 1fr; }
	.media-row .image-placeholder { height: 220px; }
}

/* ---------- Blog list (index.php) ---------- */

.post-card:first-child { border-top: 1px solid var(--light-border); }
.post-card { padding: 24px 0; border-bottom: 1px solid var(--light-border); }
.post-card__date { font-size: 12px; font-weight: 700; color: var(--color-accent); margin-bottom: 8px; }
.post-card__title { font-size: 18px; margin-bottom: 10px; }
.post-card__title a:hover { color: var(--color-accent); }
.post-card__excerpt { color: var(--light-text-soft); font-size: 14px; }

.pagination { margin-top: 30px; }
.pagination .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 36px; height: 36px;
	margin-right: 6px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 13px; font-weight: 600;
	color: var(--light-text-soft);
}
.pagination .page-numbers.current { background: var(--color-navy); color: #fff; }
.pagination a.page-numbers:hover { background: var(--light-bg-alt); color: var(--light-text); }

/* ==========================================================================
   Heading reveal — appears from the left as an ink gradient, then
   softly settles to a solid color.

   Safe-by-default: headings render normally (fully visible, solid
   color) with no JS at all. main.js adds .reveal-pending right
   before it starts watching each heading's scroll position — only
   THEN do they hide themselves, so a script error or JS being
   unavailable never leaves a heading permanently invisible. Once
   scrolled into view, .is-visible plays the reveal: the text
   materializes out of a soft blur (like smoke clearing) instead of
   a hard-edged wipe, using a muted two-color gradient that settles
   to a solid color. Registered custom properties let the browser
   interpolate the gradient stop colors smoothly toward the resting
   color. text-shadow is deliberately NOT used here — it double-
   renders badly against background-clip:text — filter:drop-shadow
   is used instead, since it correctly follows the clipped glyph
   shapes.
   ========================================================================== */

@property --reveal-1 { syntax: '<color>'; inherits: false; initial-value: #3fb6e8; }
@property --reveal-2 { syntax: '<color>'; inherits: false; initial-value: #d94f97; }

.reveal-heading {
	--reveal-1: #3fb6e8;
	--reveal-2: #d94f97;
	--reveal-end: var(--color-navy);
}

.reveal-heading--on-dark { --reveal-end: #ffffff; }

.reveal-heading.reveal-pending {
	display: inline-block;
	background-image: linear-gradient(90deg, var(--reveal-1), var(--reveal-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	text-shadow: none;
	opacity: 0;
	filter: blur(18px) drop-shadow(0 2px 20px rgba(255, 255, 255, .85));
	transform: translateX(-18px);
}

.reveal-heading.reveal-pending.is-visible {
	animation:
		reveal-smoke 1s cubic-bezier(.22, .9, .32, 1) forwards,
		reveal-color 1.5s ease forwards .1s;
}

@keyframes reveal-smoke {
	0%   { opacity: 0; filter: blur(18px) drop-shadow(0 2px 20px rgba(255, 255, 255, .85)); transform: translateX(-18px); }
	100% { opacity: 1; filter: blur(0px)  drop-shadow(0 2px 20px rgba(255, 255, 255, .85)); transform: translateX(0); }
}

@keyframes reveal-color {
	0%, 30% { --reveal-1: #3fb6e8; --reveal-2: #d94f97; }
	100% { --reveal-1: var(--reveal-end); --reveal-2: var(--reveal-end); }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.section--vision, .section--why, .section--services { grid-template-columns: 1fr; }
	.vision__graphic, .why__graphic, .services__cards { margin-top: 40px; }
	.flow__body { grid-template-columns: 1fr; }
	.flow__graphic { margin-top: 40px; min-height: 200px; }
	.flow-orb { width: 340px; height: 340px; }
	.flow__ctas { grid-template-columns: 1fr; }
	.stats__grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
	.stats__photo { grid-row: auto; grid-column: 1 / -1; min-height: 190px; }
}

@media (max-width: 880px) {
	.app-shell { display: block; }
	.sidebar-column {
		position: fixed;
		top: 0; left: 0; bottom: 0;
		height: 100dvh;
		width: 82vw;
		max-width: 320px;
		margin: 0;
		opacity: 0;
		visibility: hidden;
		transform: scale(.98);
		transition: opacity .35s ease, transform .35s ease, visibility 0s linear .35s;
		z-index: 150;
	}
	.sidebar-column.is-open {
		opacity: 1;
		visibility: visible;
		transform: scale(1);
		transition: opacity .35s ease, transform .35s ease;
	}
	.sidebar {
		background: rgba(255, 255, 255, .98);
		box-shadow: var(--shadow-md);
	}
	.sidebar-column.theme-dark .sidebar { background: rgba(10, 10, 12, .98); }
	.mobile-header {
		top: 12px; left: 12px; right: 12px;
		border-radius: 18px;
		border-bottom: none;
		box-shadow: var(--shadow-md);
		display: flex;
	}
	.mobile-header__logo-img { max-height: 40px; }
	.sidebar-toggle { display: flex; }

	/* The fixed mobile header sits on top of the slide-out side menu,
	   so the sidebar's own logo would land right underneath/behind
	   the header's logo — drop it here, the menu items are enough. */
	.sidebar__top { display: none; }

	.site-footer__logo-img { max-height: 60px; }

	.hero { min-height: auto; align-items: flex-start; padding: 480px 24px 60px; }
	.hero__tagline { display: none; }
	.hero__actions { flex-direction: column; }

	/* The front ink blobs' offset-path coordinates are hand-tuned for a
	   ~1400px-wide desktop canvas and don't rescale with viewport width
	   (offset-path is a fixed coordinate string, not percentage-based).
	   Reused unchanged on a narrow phone screen they'd wander across the
	   whole page, including straight over the hero text. Below, mobile
	   gets its own paths confined to a compact "visual band" (roughly
	   y: -40 to 380) that sits entirely above where the hero copy now
	   starts (.hero padding-top: 480px) — so the ink reads as a deliberate
	   art panel above the headline, like a photo would on other sites,
	   instead of a stray blotch drifting behind the text. */
	.ink-stage--front .ink-blob--c {
		width: 62vw; height: 62vw; max-width: 260px; max-height: 260px;
		opacity: .55;
		offset-path: path("M 380,-40 C 240,80 340,200 220,340 S 60,400 160,380");
	}
	.ink-stage--front .ink-blob--m {
		width: 56vw; height: 56vw; max-width: 230px; max-height: 230px;
		opacity: .5;
		offset-path: path("M -40,20 C 140,120 60,260 220,300 S 380,360 260,340");
	}
	.ink-stage--front .ink-blob--y {
		width: 48vw; height: 48vw; max-width: 200px; max-height: 200px;
		opacity: .55;
		offset-path: path("M 360,220 C 220,280 300,340 160,360 S 20,340 120,280");
	}
	.ink-stage--front .ink-blob--k {
		width: 40vw; height: 40vw; max-width: 170px; max-height: 170px;
		opacity: .32;
		offset-path: path("M -40,300 C 140,280 200,360 320,340 S 400,380 260,360");
	}

	/* SVG filters (feGaussianBlur + feColorMatrix, re-applied every
	   frame to a continuously-animating subtree) are one of the more
	   expensive things a phone GPU/CPU can be asked to do, and are a
	   prime contributor to scroll jank. Mobile drops the "goo" merge
	   effect and half the faint background blobs — the front blobs'
	   own border-radius morph animation already keeps them organic
	   without it. */
	.ink-stage--front, .ink-stage--back { filter: none; }
	.ink-stage--back .ink-blob--bg4,
	.ink-stage--back .ink-blob--bg5,
	.ink-stage--back .ink-blob--bg6 { display: none; }
	.section { padding: 64px 24px; }
	.news-strip__inner { padding: 28px 24px; flex-wrap: wrap; }
	.page-header { padding: 100px 24px 40px; }
	.page-section { padding: 40px 24px; }
	.news-strip__title { white-space: normal; }
	.final-cta { padding: 60px 24px; }
	.final-cta__card { padding: 36px; }
	.site-footer__top, .site-footer__bottom { padding-left: 24px; padding-right: 24px; }
}