/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--cw-navy: #12233f;
	--cw-orange: #f39c35;
	--cw-green: #7cc242;
	--cw-blue: #3fa9dc;
	--cw-text: #1c1c1c;
	--cw-text-light: #3f4854;
	--cw-bg-light: #f5f7fa;

	/* Service page accent set — a more vivid/saturated version of the
	   brand colors, used for the SERVICE section's rule, icons, and
	   card corners (measured from the service.png mock). */
	--cw-service-orange: #fe6e07;
	--cw-service-blue: #0b4dc4;
	--cw-service-green: #448626;
	--cw-service-purple: #79237e;

	/* WORKS page accent set — measured from the WORKS.png mock. Coffee
	   uses a deep blue here (not the site's usual orange) and dental
	   uses a muted olive-green, intentionally distinct per that mock. */
	--cw-works-blue: #0d55a3;
	--cw-works-cyan: #0984bb;
	--cw-works-green: #a3ba68;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

#about,
#service,
#strength,
#works,
#company,
#contact {
	scroll-margin-top: 1.5em;
}

body {
	margin: 0;
	color: var(--cw-text);
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif;
	line-height: 1.7;
}

.cw-nav__en,
.cw-fv__tagline,
.cw-fv__icon-label,
.cw-about__label,
.cw-header__logo-text-en,
.cw-service__label-en,
.cw-works__label-en,
.cw-works__category-title,
.cw-works__stat-number,
.cw-works__trust-label,
.cw-works__client-logo {
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1.8em;
	font-weight: bold;
	border-radius: 4px;
	border: 1px solid var(--cw-navy);
}

.cw-btn--primary {
	background: var(--cw-navy);
	color: #fff;
}

.cw-btn--outline {
	background: #fff;
	color: var(--cw-navy);
}

/* ==========================================================================
   Particles — circuit/network decoration shared across sections
   (FV / ABOUT / SERVICE / STRENGTH / WORKS). Each section gets one small
   "circuit trace" (two nodes joined by a real connecting line — the line
   is an SVG <line> in a 0–100 viewBox stretched to fill the section, so
   it always reaches its two endpoints exactly, at any viewport width)
   plus one solo "signal" node elsewhere, and FV additionally gets a
   4-line ring around the mark logo. Positioning is via inline custom
   properties so a handful of classes cover every section without
   per-section CSS. Instances stay inside each section's own top/bottom
   padding band (its visual "entrance"/whitespace) or the margin around
   the FV mark — never inside the text/photo columns — and are always
   z-index:0 with an explicit z-index:1 on the section's real content, so
   they sit behind it regardless of that content's own positioning.
   ========================================================================== */
.cw-particles {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.cw-particles__node {
	position: absolute;
	top: var(--cw-p-top, 50%);
	left: var(--cw-p-left, 50%);
	width: var(--cw-p-size, 5px);
	height: var(--cw-p-size, 5px);
	border-radius: 50%;
	background: var(--cw-p-color, rgba(18, 35, 63, 0.4));
	animation: cw-particle-node var(--cw-p-duration, 9s) ease-in-out infinite;
	animation-delay: var(--cw-p-delay, 0s);
}

.cw-particles__wires {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
}

.cw-particles__wires line {
	fill: none;
	stroke: var(--cw-p-color, rgba(18, 35, 63, 0.5));
	stroke-width: var(--cw-p-stroke, 1.4);
	stroke-linecap: round;
	stroke-dasharray: 100;
	vector-effect: non-scaling-stroke;
	animation: cw-wire-draw var(--cw-p-duration, 10s) ease-in-out infinite;
	animation-delay: var(--cw-p-delay, 0s);
}

.cw-particles__pulse {
	position: absolute;
	top: var(--cw-p-top, 50%);
	left: var(--cw-p-left, 50%);
	width: var(--cw-p-size, 5px);
	height: var(--cw-p-size, 5px);
	border-radius: 50%;
	background: var(--cw-p-color, rgba(127, 169, 216, 0.7));
	animation: cw-particle-travel var(--cw-p-duration, 8s) ease-in-out infinite;
	animation-delay: var(--cw-p-delay, 0s);
}

@keyframes cw-particle-node {
	0%, 100% {
		opacity: var(--cw-p-op-min, 0.4);
		transform: translate(0, 0);
	}
	50% {
		opacity: var(--cw-p-op-max, 0.85);
		transform: translate(var(--cw-p-dx, 10px), var(--cw-p-dy, -8px));
	}
}

/* Line "draws" itself in from one end and recedes, rather than just
   fading — reads as a deliberate circuit trace instead of noise.
   pathLength="100" on each <line> normalizes this to any line length. */
@keyframes cw-wire-draw {
	0%, 100% {
		stroke-dashoffset: 100;
		opacity: var(--cw-p-op-min, 0.4);
	}
	50% {
		stroke-dashoffset: 0;
		opacity: var(--cw-p-op-max, 0.9);
	}
}

/* Sits idle at its start point briefly, then makes a clearly visible
   trip along its line and fades back out — a signal passing through the
   circuit often, not a constantly orbiting particle. */
@keyframes cw-particle-travel {
	0%, 8% {
		opacity: 0;
		transform: translate(0, 0);
	}
	18%, 82% {
		opacity: 1;
	}
	92% {
		transform: translate(var(--cw-p-dx, 0), var(--cw-p-dy, 40px));
	}
	100% {
		opacity: 0;
		transform: translate(var(--cw-p-dx, 0), var(--cw-p-dy, 40px));
	}
}

/* FV logo + left copy — ease in together on load instead of appearing
   instantly; the logo also scales in slightly for a bit of weight. */
.cw-fv__visual-mark,
.cw-fv__content {
	opacity: 0;
	animation-duration: 2.4s;
	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
	animation-delay: 0.2s;
	animation-fill-mode: forwards;
}

.cw-fv__visual-mark {
	animation-name: cw-logo-reveal;
}

.cw-fv__content {
	animation-name: cw-content-reveal;
}

@keyframes cw-logo-reveal {
	0% {
		opacity: 0;
		transform: scale(0.85) translateY(16px);
	}
	100% {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

@keyframes cw-content-reveal {
	0% {
		opacity: 0;
		transform: translateY(22px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}

/* ==========================================================================
   Scroll reveal — content blocks fade + rise into place the first time
   they enter the viewport (site/js/main.js toggles .is-visible via
   IntersectionObserver). Applied across every section below FV, whose
   own load-in animation is handled separately above.
   ========================================================================== */
.cw-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.cw-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.cw-particles__node,
	.cw-particles__wires line,
	.cw-particles__pulse {
		animation: none;
	}

	.cw-particles__node {
		opacity: 0.3;
	}

	.cw-particles__wires line {
		opacity: 0.4;
		stroke-dashoffset: 0;
	}

	.cw-particles__pulse {
		opacity: 0.35;
	}

	.cw-particles--hero .cw-particles__node {
		opacity: 0.45;
	}

	.cw-particles--hero .cw-particles__pulse {
		opacity: 0.5;
	}

	.cw-fv__visual-mark,
	.cw-fv__content,
	.cw-fv__icon-item,
	.cw-fv__icon-item .cw-fv__icon {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.cw-fv__band {
		opacity: 1;
		animation: none;
		transform: translateY(-50%) rotate(45deg);
	}

	.cw-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* Mobile: hide the desktop circuit trace everywhere — every section's
   own .cw-deco layer (see main.css's dedicated block, and each
   section's markup) is what actually shows on mobile now. */
@media (max-width: 767px) {
	.cw-particles__node,
	.cw-particles__wires,
	.cw-particles__pulse {
		display: none;
	}
}

/* ==========================================================================
   Header
   ========================================================================== */
.cw-header {
	border-bottom: 1px solid #e6e8eb;
	/* Scales the logo, nav, and CTA together (padding/gaps/font-sizes
	   are a mix of em/rem/px, so a single font-size bump wouldn't reach
	   all of them — zoom scales everything uniformly in one line). */
	zoom: 1.15;
}

.cw-header__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 1em 1.5em;
}

.cw-header__logo {
	display: flex;
	align-items: center;
	gap: 0.6em;
	flex-shrink: 0;
}

.cw-header__logo-img {
	display: block;
	height: 40px;
	width: auto;
}

.cw-header__logo-text {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
}

.cw-header__logo-text-en {
	font-weight: bold;
	font-size: 1.2rem;
	letter-spacing: 0.05em;
	color: var(--cw-navy);
}

.cw-header__logo-text-jp {
	font-size: 0.7rem;
	color: var(--cw-text-light);
}

.cw-header__nav ul {
	display: flex;
	gap: 1.8em;
}

.cw-header__nav a {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--cw-navy);
}

.cw-nav__jp {
	font-size: 0.7rem;
	font-weight: normal;
	color: var(--cw-text-light);
}

.cw-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	flex-shrink: 0;
	padding: 0.8em 1.5em;
	background: var(--cw-navy);
	color: #fff;
	font-weight: bold;
	border-radius: 4px;
}

.cw-header__panel {
	display: contents;
}

.cw-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0;
	border: none;
	background: none;
	flex-shrink: 0;
	cursor: pointer;
}

.cw-header__toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--cw-navy);
}

/* ==========================================================================
   FV (First View)
   ========================================================================== */
.cw-fv {
	position: relative;
	overflow: hidden;
	background: #fff;
}

.cw-fv__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	gap: 2em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 4em 1.5em;
}

.cw-fv__heading {
	font-size: 3.432rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0 0 0.6em;
}

.cw-fv__lead {
	font-size: 1.2rem;
	color: #000000;
	margin: 0 0 1.6em;
}

.cw-fv__buttons {
	display: flex;
	gap: 1em;
}

.cw-fv__visual {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 420px;
}

.cw-fv__visual-mark {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 506px;
}

.cw-fv__visual-mark img {
	display: block;
	width: 100%;
	height: auto;
}

.cw-fv__tagline {
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	margin: 0;
	text-align: right;
	font-size: 0.9rem;
	font-weight: bold;
	color: var(--cw-navy);
	line-height: 1.4;
}

.cw-fv__icons {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	gap: 3em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em 3em;
}

.cw-fv__icon-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
	animation: cw-icon-fade-in 0.6s ease-out both;
}

/* Icons "sprout" up from their own baseline, left to right, 0.4s apart —
   the fade is on the whole item (so the label arrives with it) while the
   grow-from-bottom scale is on the icon graphic only, so the label text
   never gets squashed. */
.cw-fv__icon-item .cw-fv__icon {
	transform-origin: bottom center;
	animation: cw-icon-sprout 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.cw-fv__icon-item:nth-child(1),
.cw-fv__icon-item:nth-child(1) .cw-fv__icon {
	animation-delay: 0.9s;
}

.cw-fv__icon-item:nth-child(2),
.cw-fv__icon-item:nth-child(2) .cw-fv__icon {
	animation-delay: 1.3s;
}

.cw-fv__icon-item:nth-child(3),
.cw-fv__icon-item:nth-child(3) .cw-fv__icon {
	animation-delay: 1.7s;
}

.cw-fv__icon-item:nth-child(4),
.cw-fv__icon-item:nth-child(4) .cw-fv__icon {
	animation-delay: 2.1s;
}

@keyframes cw-icon-fade-in {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes cw-icon-sprout {
	0% {
		transform: scaleY(0.2) translateY(8px);
	}
	100% {
		transform: scaleY(1) translateY(0);
	}
}

.cw-fv__icon-item--coffee {
	color: var(--cw-orange);
}

.cw-fv__icon-item--water {
	color: var(--cw-blue);
}

.cw-fv__icon-item--dental {
	color: var(--cw-green);
}

.cw-fv__icon-item--maintenance {
	color: var(--cw-navy);
}

.cw-fv__icon {
	display: flex;
}

.cw-fv__icon-label {
	font-size: 0.75rem;
	font-weight: bold;
	color: inherit;
	letter-spacing: 0.05em;
}

/* ==========================================================================
   FV — bottom-right color bands: 2 plain constant-width rectangles,
   rotated ~45° and stretched far past every edge of the section (top,
   bottom, right). No taper, no point, no clip-path — .cw-fv's own
   overflow: hidden is what shapes them; only a "window" onto the middle
   of each long diagonal bar is ever visible, like looking at a stripe
   through a frame. Positioned relative to the same 1280px content
   container as the rest of .cw-fv__inner, with each bar's near (leading)
   edge sitting on a line that stays ≥15px clear of the mark's
   bottom-right corner.
   ========================================================================== */
.cw-fv__bands {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 1280px;
	max-width: 100%;
	transform: translateX(-50%);
	z-index: 0;
	pointer-events: none;
}

.cw-fv__band {
	position: absolute;
	height: 250%;
	opacity: 0;
	animation: cw-band-reveal 1.1s cubic-bezier(0.16, 1, 0.3, 1) 2.3s forwards;
}

.cw-fv__band--green {
	top: 65.3%;
	right: -91px;
	width: 116px;
	/* Orange is the lead color on THIS bar — stays orange→green (the
	   sky-blue belongs on the other bar, not here). Stops sit close
	   together in the middle of the visible window (local 32%–84%) so
	   both colors show solid rather than a muddy mid-blend. */
	background: linear-gradient(to top, var(--cw-orange) 55%, var(--cw-green) 61%);
}

.cw-fv__band--blue {
	top: 82.4%;
	right: -200px;
	width: 108px;
	/* This is the bar that gets the "mizu-iro" treatment: pale sky-blue
	   fading to the deeper brand blue, replacing the green that was
	   reading as yellow-green here. Slightly less saturated than the
	   earlier #6cd4e8 per feedback that it ran too vivid. Window is
	   local 41%–93%; stops sit close together mid-window for the same
	   solid-color-not-mid-blend reason as the other bar. */
	background: linear-gradient(to top, #5ec0d6 64%, var(--cw-service-blue) 70%);
}

/* Bands ease in last (after the logo/copy/icons). Rotation stays fixed
   across the keyframe so only opacity/scale animate. */
@keyframes cw-band-reveal {
	0% {
		opacity: 0;
		transform: translateY(-50%) rotate(45deg) scale(0.7);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) rotate(45deg) scale(1);
	}
}

/* ==========================================================================
   FV — circuit-board motif, boosted for visibility. Same node/wire/pulse
   system as ABOUT/SERVICE/STRENGTH/WORKS below, but --hero raises the
   baseline stroke-width and adds a glow so the motion reads clearly at a
   glance here specifically, without changing the calmer look elsewhere.
   ========================================================================== */
.cw-particles--hero .cw-particles__wires line {
	stroke-width: var(--cw-p-stroke, 2.4);
}

.cw-particles--hero .cw-particles__node,
.cw-particles--hero .cw-particles__pulse {
	filter: drop-shadow(0 0 3px rgba(18, 35, 63, 0.4));
}

/* ==========================================================================
   Sitewide mobile decoration system ("technical-drawing" motif) — hidden
   everywhere except ≤767px (one shared show-rule in that breakpoint's own
   block, since every section reuses this same .cw-deco container class).
   Third rework of the FV-only background: the brief expanded this from
   "FV background" to "one visual system for every section", so the
   vocabulary moved out of the cw-fv__ namespace into a plain cw-deco-*
   one any section can drop instances of into its own markup. Five shape
   types only (a thin fading line, a short line ending in a solid dot, a
   small cross, a ring, and a dot-grid tile) — deliberately no soft color
   glow this time; a blurred multi-color wash reads as "gradient art",
   not "technical drawing", and fights the navy/blue-only color rule.
   Every instance sets its own color as a full rgba() string (matching
   how .cw-particles already does it elsewhere in this file) so the rare
   brand-color accent piece is just a different rgba, not a new class. */
.cw-deco {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	display: none;
}

/* Fades in from nothing, peaks at its own midpoint, fades back to
   nothing — no visible start or end point, so a long diagonal reads as
   an atmospheric line instead of a drawn stroke with two cut ends.
   transform-origin stays left-center so --d-top/--d-left mark a stable
   anchor rather than a rotated bounding-box corner. */
.cw-deco-line {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	width: var(--d-len, 140px);
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--d-color, rgba(18, 35, 63, 0.1)) 50%, transparent);
	transform-origin: left center;
	transform: rotate(var(--d-rot, -34deg));
}

/* The "short line + node" piece — a solid (not fading) hairline with a
   small filled dot at its far end, like one measurement tick on a
   blueprint. */
.cw-deco-pin {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	width: var(--d-len, 26px);
	height: 1px;
	background: var(--d-color, rgba(18, 35, 63, 0.12));
	transform-origin: left center;
	transform: rotate(var(--d-rot, -34deg));
}

.cw-deco-pin::after {
	content: "";
	position: absolute;
	right: -2.5px;
	top: 50%;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--d-color, rgba(18, 35, 63, 0.12));
	transform: translateY(-50%);
}

.cw-deco-cross {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	width: var(--d-size, 12px);
	height: var(--d-size, 12px);
}

.cw-deco-cross::before,
.cw-deco-cross::after {
	content: "";
	position: absolute;
	background: var(--d-color, rgba(18, 35, 63, 0.12));
}

.cw-deco-cross::before {
	top: 50%;
	left: 0;
	width: 100%;
	height: 1px;
	transform: translateY(-50%);
}

.cw-deco-cross::after {
	top: 0;
	left: 50%;
	width: 1px;
	height: 100%;
	transform: translateX(-50%);
}

.cw-deco-ring {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	width: var(--d-size, 60px);
	height: var(--d-size, 60px);
	border-radius: 50%;
	border: 1px solid var(--d-color, rgba(18, 35, 63, 0.1));
}

.cw-deco-grid {
	position: absolute;
	top: var(--d-top, 50%);
	left: var(--d-left, 50%);
	width: var(--d-size, 60px);
	height: var(--d-size, 60px);
	background-image: radial-gradient(var(--d-color, rgba(18, 35, 63, 0.15)) 1px, transparent 1.4px);
	background-size: var(--d-gap, 14px) var(--d-gap, 14px);
}

/* ==========================================================================
   ABOUT
   ========================================================================== */
.cw-about {
	position: relative;
	overflow: hidden;
	background: var(--cw-bg-light);
	padding: 5em 0;
}

.cw-about__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1.35fr;
	align-items: center;
	gap: 3em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-about__label {
	position: relative;
	display: inline-block;
	margin: 0 0 1em;
	padding-bottom: 0.5em;
	color: var(--cw-orange);
	font-weight: bold;
	letter-spacing: 0.1em;
}

.cw-about__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2.5em;
	height: 3px;
	background: var(--cw-orange);
}

.cw-about__heading {
	font-size: 2.2rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0 0 1em;
}

.cw-about__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0 0 1.2em;
}

.cw-about__photos {
	display: flex;
	align-items: flex-start;
	/* No gap — the three photos cascade edge-to-edge via clip-path
	   trapezoids + negative margins (same technique as .cw-works__photo-item),
	   so the diagonal cut is a shared seam between neighbours, matching the
	   mock's trapezoid-edged trio rather than plain rectangles in a row. */
}

.cw-about__photo {
	position: relative;
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.1em;
}

/* Equal thirds — an earlier version varied flex-grow per panel to avoid a
   "mechanical" look, but that made coffee read as cramped and dental as
   oversized. Equal widths read fine once the seams line up cleanly. */

/* Defines the panel's box (taller-than-wide for a portrait key-visual feel).
   Each panel gets its own independent shape and its own accent line, not a
   shared strip between neighbours. */
.cw-about__photo-frame {
	position: relative;
	z-index: 1;
	width: 100%;
	aspect-ratio: 3 / 4.4;
}

.cw-about__photo-media {
	position: absolute;
	inset: 0;
	overflow: hidden;
	background: #e3e7ed;
}

/* Left/right seams cut the same way as before; the bottom-right corner is
   now pulled up to the same 80% height on all three panels, so the bottom
   edge reads as one consistent diagonal cut repeated across the trio —
   the unequal flex-grow above (not the cut angle) is what keeps them from
   looking like three identical tiles. */
.cw-about__photo--coffee .cw-about__photo-media {
	clip-path: polygon(34px 0, 100% 0, calc(100% - 34px) 80%, 0 100%);
}

.cw-about__photo--water .cw-about__photo-media {
	clip-path: polygon(34px 0, 100% 0, calc(100% - 34px) 80%, 0 100%);
}

.cw-about__photo--dental .cw-about__photo-media {
	clip-path: polygon(34px 0, 100% 0, 100% 80%, 0 100%);
}

/* align-self:flex-start is required here — the parent li is a column flex
   container with align-items:center, which centers each child's margin box
   in the cross axis. Since this margin-left shrinks the frame's margin box
   below 100%, that centering was splitting the -34px shift in half (only
   -17px landed), leaving a gap at the seam. flex-start makes the frame
   ignore that centering so the full -34px overlap applies. */
.cw-about__photo--water .cw-about__photo-frame,
.cw-about__photo--dental .cw-about__photo-frame {
	align-self: flex-start;
}

.cw-about__photo--water .cw-about__photo-frame {
	margin-left: -34px;
}

/* Dental sits after water, which is itself already shifted -34px from its
   own li — overlapping dental against water's actual (shifted) edge, not
   water's unshifted li position, takes a cumulative -68px, not -34px.
   (Water only had to clear one shift, so -34px was enough for that seam.)
   No width compensation here on purpose: widening dental to reclaim the
   trio's right edge made it visibly bigger than the other two panels.
   Three equal-size panels reads better than a flush right edge, so the
   68px simply comes off the group's total width instead. */
.cw-about__photo--dental .cw-about__photo-frame {
	margin-left: -68px;
}

.cw-about__photo-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* A sharp wedge — not a parallel bar — that sprouts from the frame's own
   bottom-left corner: its point touches that corner exactly (no gap at the
   tip), and it thickens as it runs away from the photo. Traced with the
   exact same coordinates as the media's clip-path diagonal above (0/100%
   corner, the shared 80% cut height, and the same right-edge inset) rather
   than a rotated+trigonometry-matched rectangle, so the wedge's top edge is
   pixel-identical to the photo's cut edge — no overshoot past it, no gap at
   the corner — at any frame size. Only the endpoint x and the color differ
   per panel. */
.cw-about__photo-accent {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.cw-about__photo--coffee .cw-about__photo-accent,
.cw-about__photo--water .cw-about__photo-accent {
	clip-path: polygon(0 100%, calc(100% - 34px) 80%, calc(100% - 34px) calc(80% + 12px));
}

.cw-about__photo--dental .cw-about__photo-accent {
	clip-path: polygon(0 100%, 100% 80%, 100% calc(80% + 12px));
}

.cw-about__photo--coffee .cw-about__photo-accent {
	background: var(--cw-orange);
}

.cw-about__photo--water .cw-about__photo-accent {
	background: var(--cw-blue);
}

.cw-about__photo--dental .cw-about__photo-accent {
	background: var(--cw-green);
}

.cw-about__photo--coffee img {
	object-position: 61% center;
}

.cw-about__photo--water img {
	object-position: 67% center;
}

.cw-about__photo--dental img {
	object-position: 20% center;
}

.cw-about__photo-label {
	font-size: 0.85rem;
	font-weight: bold;
}

.cw-about__photo--coffee .cw-about__photo-label {
	color: var(--cw-orange);
}

.cw-about__photo--water .cw-about__photo-label {
	color: var(--cw-blue);
}

.cw-about__photo--dental .cw-about__photo-label {
	color: var(--cw-green);
}

.cw-about__stats {
	position: relative;
	z-index: 1;
	display: flex;
	max-width: 1280px;
	margin: 4em auto 0;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 40px rgba(18, 35, 63, 0.08);
}

.cw-about__stat {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 1.2em;
	padding: 2em 1.8em;
	border-left: 1px solid #e6e8eb;
}

.cw-about__stat:first-child {
	border-left: none;
}

.cw-about__stat-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 72px;
	height: 72px;
	border-radius: 50%;
}

.cw-about__stat--orange .cw-about__stat-icon {
	background: rgba(243, 156, 53, 0.12);
	color: var(--cw-orange);
}

.cw-about__stat--blue .cw-about__stat-icon {
	background: rgba(63, 169, 220, 0.12);
	color: var(--cw-blue);
}

.cw-about__stat--green .cw-about__stat-icon {
	background: rgba(124, 194, 66, 0.12);
	color: var(--cw-green);
}

.cw-about__stat-label {
	position: relative;
	display: inline-block;
	margin: 0 0 0.7em;
	padding-bottom: 0.4em;
	font-weight: bold;
	font-size: 0.9rem;
}

.cw-about__stat-label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 2em;
	height: 2px;
}

.cw-about__stat--orange .cw-about__stat-label {
	color: var(--cw-orange);
}
.cw-about__stat--orange .cw-about__stat-label::after {
	background: var(--cw-orange);
}

.cw-about__stat--blue .cw-about__stat-label {
	color: var(--cw-blue);
}
.cw-about__stat--blue .cw-about__stat-label::after {
	background: var(--cw-blue);
}

.cw-about__stat--green .cw-about__stat-label {
	color: var(--cw-green);
}
.cw-about__stat--green .cw-about__stat-label::after {
	background: var(--cw-green);
}

.cw-about__stat-list {
	margin: 0;
	color: var(--cw-text-light);
	font-size: 0.9rem;
	line-height: 1.9;
}

.cw-about__stat-list li::before {
	content: "・";
}

.cw-about__stat-number {
	margin: 0;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 2.2rem;
	font-weight: bold;
	color: var(--cw-navy);
}

.cw-about__stat-unit {
	margin-left: 0.3em;
	font-size: 1rem;
	font-weight: bold;
	color: var(--cw-text-light);
}

.cw-about__stat-area {
	margin: 0;
	font-size: 1.6rem;
	font-weight: bold;
	color: var(--cw-navy);
}

.cw-about__stat-note {
	margin: 0.4em 0 0;
	color: var(--cw-text-light);
	font-size: 0.85rem;
	line-height: 1.6;
}

/* ==========================================================================
   SERVICE
   ========================================================================== */
.cw-service {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 5em 0;
}

.cw-service__intro {
	display: flex;
	align-items: center;
	gap: 3em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-service__intro-text {
	flex: 1 1 42%;
}

.cw-service__intro-photo {
	position: relative;
	flex: 1 1 58%;
	align-self: stretch;
	min-height: 480px;
	overflow: hidden;
	background: #e3e7ed;
}

.cw-service__intro-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cw-service__label {
	display: flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0 0 1em;
}

.cw-service__label-en {
	font-weight: bold;
	color: var(--cw-service-blue);
	letter-spacing: 0.08em;
}

.cw-service__label-jp {
	font-size: 0.9rem;
	color: var(--cw-text-light);
}

.cw-service__heading {
	font-size: 2.1rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0;
}

.cw-service__rule {
	display: flex;
	gap: 0.5em;
	margin: 1.3em 0 1.5em;
}

.cw-service__rule span {
	display: block;
	width: 2.4em;
	height: 3px;
	border-radius: 2px;
}

.cw-service__rule span:nth-child(1) { background: var(--cw-service-orange); }
.cw-service__rule span:nth-child(2) { background: var(--cw-service-blue); }
.cw-service__rule span:nth-child(3) { background: var(--cw-service-green); }
.cw-service__rule span:nth-child(4) { background: var(--cw-service-purple); }

.cw-service__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0 0 1.4em;
}

.cw-service__lead {
	font-weight: bold;
	color: var(--cw-navy);
	font-size: 0.9rem;
	margin: 0;
}

.cw-service__cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5em;
	max-width: 1280px;
	margin: 3.5em auto 0;
	padding: 0 1.5em;
}

.cw-service__card {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #e6e8eb;
	border-radius: 12px;
	padding: 2.2em 1.5em 1.8em;
	text-align: center;
}

.cw-service__card-icon {
	display: block;
	width: 74px;
	height: 74px;
	margin: 0 auto 1.2em;
}

.cw-service__card-title {
	position: relative;
	display: inline-block;
	font-weight: bold;
	margin: 0 0 1.1em;
	padding-bottom: 0.6em;
}

.cw-service__card-title::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 2.4em;
	height: 2px;
	background: currentColor;
	transform: translateX(-50%);
}

.cw-service__card-desc {
	color: var(--cw-text-light);
	font-size: 0.85rem;
	margin: 0;
}

.cw-service__card::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	width: 26px;
	height: 26px;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	background: currentColor;
}

.cw-service__card--orange { color: var(--cw-service-orange); }
.cw-service__card--blue { color: var(--cw-service-blue); }
.cw-service__card--green { color: var(--cw-service-green); }
.cw-service__card--purple { color: var(--cw-service-purple); }

.cw-service__panel {
	display: grid;
	grid-template-columns: 2.3fr 1fr;
	align-items: stretch;
	max-width: 1280px;
	margin: 4em auto 0;
	padding: 0 1.5em;
}

.cw-service__panel-image,
.cw-service__panel-area {
	border: 1px solid var(--cw-navy);
}

.cw-service__panel-image {
	position: relative;
	overflow: hidden;
	border-right: none;
	border-radius: 16px 0 0 16px;
}

.cw-service__panel-image picture,
.cw-service__panel-image img {
	display: block;
	width: 100%;
	height: 100%;
}

.cw-service__panel-image img {
	object-fit: cover;
}

.cw-service__panel-area {
	border-left: none;
	border-radius: 0 16px 16px 0;
	padding: 1.8em;
	display: flex;
	flex-direction: column;
	background: var(--cw-bg-light);
}

.cw-service__area-badge {
	display: inline-flex;
	align-self: flex-start;
	background: var(--cw-navy);
	color: #fff;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.35em 0.9em;
	border-radius: 4px;
	margin-bottom: 0.9em;
}

.cw-service__area-heading {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--cw-navy);
	margin: 0 0 0.3em;
}

.cw-service__area-note {
	color: var(--cw-text-light);
	font-size: 0.85rem;
	margin: 0 0 1.2em;
}

.cw-service__area-map {
	position: relative;
	flex: 1;
	min-height: 160px;
}

.cw-service__area-map picture,
.cw-service__area-map img {
	display: block;
	width: 100%;
	height: 100%;
}

.cw-service__area-map img {
	object-fit: contain;
}

/* ==========================================================================
   STRENGTH
   ========================================================================== */
.cw-strength {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 5em 0 4em;
}

.cw-strength__deco {
	position: absolute;
	top: -4em;
	right: -2em;
	z-index: 0;
	width: 480px;
	opacity: 0.07;
	pointer-events: none;
}

.cw-strength__deco img {
	display: block;
	width: 100%;
	height: auto;
}

.cw-strength__intro {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-strength__heading {
	font-size: 2.1rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0;
}

.cw-strength__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0;
}

.cw-strength__rows {
	position: relative;
	z-index: 1;
	max-width: 1280px;
	margin: 3em auto 0;
}

.cw-strength__row {
	position: relative;
	display: flex;
	align-items: stretch;
	overflow: hidden;
}

.cw-strength__row-text {
	position: relative;
	flex: 1 1 45%;
	display: flex;
	align-items: center;
	gap: 1.2em;
	padding: 3em 3em 3em 4em;
}

/* row 2 has its text on the right, so the wider (outer) padding
   moves to the right edge, small padding stays on the photo side */
.cw-strength__row--blue .cw-strength__row-text {
	padding: 3em 4em 3em 3em;
}

/* Accent line: one edge is pinned flush to the photo's own edge (0%)
   at both top and bottom, so there is never a gap between the line
   and the image — only the outer edge is diagonal, giving a wedge
   that thickens from top to bottom instead of a strip that drifts
   away from the photo. Top/bottom are 0%/100% of the box by
   construction, so it always spans the full photo height exactly,
   on every row, regardless of that row's actual height. */
.cw-strength__row-accent {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 34px;
	clip-path: polygon(0 0, 18% 0, 85% 100%, 0 100%);
}

.cw-strength__row--blue .cw-strength__row-accent {
	left: auto;
	right: 0;
	clip-path: polygon(100% 0, 82% 0, 15% 100%, 100% 100%);
}

.cw-strength__row--orange .cw-strength__row-accent { background: var(--cw-orange); }
.cw-strength__row--blue .cw-strength__row-accent { background: var(--cw-blue); }
.cw-strength__row--green .cw-strength__row-accent { background: var(--cw-green); }

.cw-strength__row-number {
	font-family: "Anton", "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 5rem;
	font-weight: normal;
	color: var(--cw-navy);
	line-height: 1;
	margin: 0;
}

.cw-strength__row-title {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: bold;
	font-size: 1.15rem;
	color: var(--cw-navy);
	margin: 0 0 0.8em;
}

.cw-strength__row-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 34px;
	height: 34px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.cw-strength__row--orange .cw-strength__row-icon { color: var(--cw-orange); }
.cw-strength__row--blue .cw-strength__row-icon { color: var(--cw-blue); }
.cw-strength__row--green .cw-strength__row-icon { color: var(--cw-green); }

.cw-strength__row-desc {
	color: var(--cw-text-light);
	font-size: 0.9rem;
	margin: 0;
}

.cw-strength__row-photo {
	position: relative;
	flex: 1 1 55%;
	min-height: 440px;
	overflow: hidden;
	background: #fff;
}

.cw-strength__row-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Notch out a diagonal sliver on the text-facing edge, using the
	   exact same outline as the accent wedge's outer edge (a sibling,
	   not an ancestor, so it isn't clipped along with the image), so
	   the colored wedge fills the cut perfectly with no gap or overlap. */
	clip-path: polygon(6px 0, 100% 0, 100% 100%, 29px 100%);
}

.cw-strength__row--blue .cw-strength__row-photo img {
	clip-path: polygon(0 0, calc(100% - 6px) 0, calc(100% - 29px) 100%, 0 100%);
}

.cw-strength__closing {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	max-width: 1280px;
	margin: 3em auto 0;
	padding: 0 1.5em;
	color: var(--cw-navy);
	font-weight: bold;
	text-align: center;
}

.cw-strength__closing-logo {
	display: block;
	width: 40px;
	height: auto;
	flex-shrink: 0;
}

/* ==========================================================================
   WORKS
   ========================================================================== */
.cw-works {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 5em 0 0;
}

.cw-works__deco {
	position: absolute;
	top: -0.3em;
	left: 1.5em;
	z-index: 0;
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 7rem;
	color: var(--cw-navy);
	opacity: 0.04;
	white-space: nowrap;
	pointer-events: none;
}

.cw-works__intro {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 2.5em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-works__intro-main {
	flex: 1;
}

.cw-works__label {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 0.9em;
	margin: 0 0 0.9em;
	padding-bottom: 0.6em;
}

.cw-works__label::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 3em;
	height: 3px;
	background: var(--cw-works-blue);
}

.cw-works__label-en {
	font-weight: bold;
	font-size: 1.5rem;
	letter-spacing: 0.03em;
	color: var(--cw-navy);
}

.cw-works__label-jp {
	font-size: 0.9rem;
	color: var(--cw-text-light);
}

.cw-works__intro-row {
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 0.8em 2.5em;
}

.cw-works__heading {
	font-size: 1.9rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0;
}

.cw-works__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0;
}

.cw-works__stat {
	flex-shrink: 0;
	border-left: 1px solid #dde1e6;
	padding-left: 2.5em;
	text-align: center;
}

.cw-works__stat-number {
	font-size: 3.2rem;
	font-weight: bold;
	color: var(--cw-works-blue);
	line-height: 1;
	margin: 0;
}

.cw-works__stat-plus {
	font-size: 0.7em;
}

.cw-works__stat-label {
	font-weight: bold;
	color: var(--cw-navy);
	margin: 0.5em 0 0.2em;
}

.cw-works__stat-note {
	font-size: 0.75rem;
	color: var(--cw-text-light);
	margin: 0;
}

.cw-works__categories {
	position: relative;
	z-index: 1;
	margin: 3em 0 0;
}

.cw-works__photos {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

.cw-works__photo-item {
	position: relative;
	flex: 1;
	min-height: 380px;
	overflow: hidden;
	background: #e3e7ed;
}

.cw-works__photo-item--coffee {
	clip-path: polygon(0 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
}

.cw-works__photo-item--water {
	clip-path: polygon(40px 0, 100% 0, calc(100% - 40px) 100%, 0 100%);
	margin-left: -40px;
}

.cw-works__photo-item--dental {
	clip-path: polygon(40px 0, 100% 0, 100% 100%, 0 100%);
	margin-left: -40px;
}

.cw-works__photo-item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cw-works__photo-placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cw-text-light);
	font-size: 0.85rem;
}

.cw-works__category-list {
	display: flex;
	list-style: none;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-works__category {
	position: relative;
	flex: 1;
	padding: 36px 1.5em 1.6em;
	border-top: 4px solid;
}

.cw-works__category--coffee { border-top-color: var(--cw-works-blue); }
.cw-works__category--water { border-top-color: var(--cw-works-cyan); }
.cw-works__category--dental { border-top-color: var(--cw-works-green); }

/* The icon is taken out of flow and pinned to straddle the colored
   border on its own — the title stays in normal flow underneath it
   so the border/icon never crosses through the text. */
.cw-works__category-head {
	padding-left: 68px;
	min-height: 32px;
	display: flex;
	align-items: center;
	margin: 0 0 0.9em;
}

.cw-works__category-icon {
	position: absolute;
	top: -28px;
	left: 1.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	color: #fff;
}

.cw-works__category--coffee .cw-works__category-icon { background: var(--cw-works-blue); }
.cw-works__category--water .cw-works__category-icon { background: var(--cw-works-cyan); }
.cw-works__category--dental .cw-works__category-icon { background: var(--cw-works-green); }

.cw-works__category-title {
	font-weight: bold;
	font-size: 1rem;
	letter-spacing: 0.02em;
	margin: 0;
}

.cw-works__category--coffee .cw-works__category-title { color: var(--cw-works-blue); }
.cw-works__category--water .cw-works__category-title { color: var(--cw-works-cyan); }
.cw-works__category--dental .cw-works__category-title { color: var(--cw-works-green); }

.cw-works__category-desc {
	color: var(--cw-text-light);
	font-size: 0.85rem;
	margin: 0;
}

.cw-works__notice {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1em 2em;
	max-width: 1280px;
	margin: 2.5em auto 0;
	padding: 1.4em 1.8em;
	border: 1px solid var(--cw-orange);
	border-radius: 10px;
	background: #fffaf3;
}

.cw-works__notice-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: var(--cw-orange);
}

.cw-works__notice-title {
	font-weight: bold;
	color: var(--cw-navy);
	margin: 0;
	flex-shrink: 0;
}

.cw-works__notice-body {
	color: var(--cw-text-light);
	font-size: 0.85rem;
	margin: 0;
	flex: 1 1 400px;
}

.cw-works__trust {
	position: relative;
	z-index: 1;
	margin-top: 3em;
	padding: 3em 1.5em 2.5em;
	background: var(--cw-navy);
	color: #fff;
	text-align: center;
}

.cw-works__trust-label {
	font-weight: bold;
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	color: var(--cw-works-cyan);
	margin: 0 0 0.5em;
}

.cw-works__trust-heading {
	font-size: 1.5rem;
	font-weight: bold;
	margin: 0 0 2em;
}

.cw-works__clients {
	display: flex;
	align-items: center;
	justify-content: center;
	list-style: none;
	max-width: 1000px;
	margin: 0 auto;
	padding: 0;
}

.cw-works__client {
	display: flex;
	align-items: center;
	gap: 0.8em;
	flex: 1;
	justify-content: center;
	padding: 0 1.5em;
	border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.cw-works__client:first-child {
	border-left: none;
}

.cw-works__client-icon {
	display: flex;
	flex-shrink: 0;
}

.cw-works__client-logo {
	flex-shrink: 0;
	font-weight: 800;
	font-size: 1.3rem;
	letter-spacing: 0.02em;
}

.cw-works__client-name {
	font-size: 0.9rem;
	text-align: left;
}

.cw-works__trust-closing {
	margin: 2.5em 0 0;
	padding-top: 1.6em;
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	font-weight: bold;
	letter-spacing: 0.2em;
	font-size: 0.95rem;
}

/* ==========================================================================
   COMPANY
   ========================================================================== */
.cw-company {
	position: relative;
	overflow: hidden;
}

.cw-company__top {
	display: flex;
	align-items: flex-start;
	gap: 3em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 5em 1.5em 3em;
}

.cw-company__intro {
	flex: 1 1 45%;
}

.cw-company__heading {
	font-size: 2rem;
	line-height: 1.4;
	color: var(--cw-navy);
	margin: 0 0 1em;
}

.cw-company__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0 0 1.2em;
}

.cw-company__photo {
	position: relative;
	aspect-ratio: 3 / 4;
	max-width: 420px;
	margin-top: 1.6em;
	overflow: hidden;
	background: #e3e7ed;
}

.cw-company__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: left center;
}

.cw-company__table-wrap {
	flex: 1 1 55%;
	padding-left: 3em;
	border-left: 1px solid #e3e6ea;
}

.cw-company__table {
	margin: 0;
}

.cw-company__row {
	display: flex;
	gap: 2em;
	padding: 1.1em 0;
	border-bottom: 1px solid #e3e6ea;
}

.cw-company__row:first-child {
	padding-top: 0;
}

.cw-company__row dt {
	flex: 0 0 8em;
	font-weight: bold;
	color: var(--cw-navy);
}

.cw-company__row dd {
	flex: 1;
	margin: 0;
	color: var(--cw-text);
	line-height: 1.8;
}

.cw-company__note {
	margin: 1.2em 0 0;
	color: var(--cw-text-light);
	font-size: 0.75rem;
}

.cw-company__cta {
	position: relative;
	background: var(--cw-navy);
	color: #fff;
}

.cw-company__cta-inner {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2em 4em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 3.5em 1.5em;
}

.cw-company__cta-main {
	flex: 1 1 380px;
}

.cw-company__cta-heading {
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-weight: bold;
	font-size: 2.2rem;
	line-height: 1.3;
	margin: 0;
}

.cw-company__cta-rule {
	display: block;
	width: 3em;
	height: 3px;
	margin: 0.8em 0;
	background: var(--cw-orange);
}

.cw-company__cta-sub {
	font-weight: bold;
	margin: 0;
}

.cw-company__cta-body {
	flex: 1 1 380px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* ==========================================================================
   CONTACT
   ========================================================================== */
.cw-contact {
	position: relative;
	overflow: hidden;
	background: #fff;
	padding: 5em 0;
}

.cw-contact__deco {
	position: absolute;
	bottom: -2em;
	left: -3em;
	z-index: 0;
	width: 280px;
	opacity: 0.05;
	pointer-events: none;
}

.cw-contact__deco img {
	display: block;
	width: 100%;
	height: auto;
}

.cw-contact__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: 3em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 1.5em;
}

.cw-contact__intro {
	flex: 1 1 42%;
}

.cw-contact__label {
	font-family: "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 2.6rem;
	font-weight: bold;
	color: var(--cw-navy);
	line-height: 1;
	margin: 0;
}

.cw-contact__label-jp {
	color: var(--cw-text-light);
	font-size: 0.95rem;
	margin: 0.4em 0 0;
}

.cw-contact__stripes {
	display: flex;
	gap: 0.4em;
	margin: 1.6em 0;
}

.cw-contact__stripes span {
	display: block;
	width: 14px;
	height: 26px;
	clip-path: polygon(35% 0, 100% 0, 65% 100%, 0 100%);
}

.cw-contact__stripes span:nth-child(1) { background: var(--cw-orange); }
.cw-contact__stripes span:nth-child(2) { background: var(--cw-green); }
.cw-contact__stripes span:nth-child(3) { background: var(--cw-blue); }

.cw-contact__heading {
	font-size: 1.7rem;
	line-height: 1.5;
	color: var(--cw-navy);
	margin: 0 0 0.8em;
}

.cw-contact__body {
	color: #000000;
	font-size: 0.9rem;
	margin: 0 0 2em;
}

/* Reproduction of the CONTACT mockup's numbered category list —
   replaces the old .cw-contact__features 3-column card layout
   sitewide. Sized for desktop by default; scaled down ≤767px below. */
.cw-contact__categories {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-contact__category {
	display: flex;
	align-items: flex-start;
	gap: 1.3em;
	padding: 1.4em 0;
	border-bottom: 1px solid #e3e7ed;
}

.cw-contact__category:first-child {
	padding-top: 0;
}

.cw-contact__category:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.cw-contact__category-number {
	flex-shrink: 0;
	font-family: "Anton", "Montserrat", "Noto Sans JP", sans-serif;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 1;
	color: var(--cw-navy);
}

.cw-contact__category-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 64px;
	height: 64px;
	border: 1.5px solid currentColor;
	border-radius: 50%;
}

.cw-contact__category-icon svg {
	width: 30px;
	height: 30px;
}

.cw-contact__category--orange .cw-contact__category-icon { color: var(--cw-orange); }
.cw-contact__category--blue .cw-contact__category-icon { color: var(--cw-blue); }
.cw-contact__category--green .cw-contact__category-icon { color: var(--cw-green); }

.cw-contact__category-label {
	font-weight: bold;
	font-size: 0.75rem;
	letter-spacing: 0.05em;
	margin: 0 0 0.3em;
}

.cw-contact__category--orange .cw-contact__category-label { color: var(--cw-orange); }
.cw-contact__category--blue .cw-contact__category-label { color: var(--cw-blue); }
.cw-contact__category--green .cw-contact__category-label { color: var(--cw-green); }

.cw-contact__category-title {
	font-weight: bold;
	font-size: 1.1rem;
	color: var(--cw-navy);
	margin: 0 0 0.4em;
}

.cw-contact__category-desc {
	color: #333333;
	font-size: 0.85rem;
	line-height: 1.6;
	margin: 0;
}

.cw-contact__form-wrap {
	flex: 1 1 58%;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 20px 50px rgba(18, 35, 63, 0.1);
	padding: 2.5em;
}

.cw-contact__field {
	margin-bottom: 1.6em;
}

.cw-contact__field label {
	display: flex;
	align-items: center;
	gap: 0.6em;
	font-weight: bold;
	color: var(--cw-navy);
	margin-bottom: 0.6em;
}

.cw-contact__badge {
	display: inline-block;
	font-size: 0.7rem;
	font-weight: bold;
	padding: 0.15em 0.6em;
	border-radius: 4px;
}

.cw-contact__badge--required {
	background: var(--cw-navy);
	color: #fff;
}

.cw-contact__badge--optional {
	background: #eceff2;
	color: var(--cw-text-light);
}

.cw-contact__field input,
.cw-contact__field select,
.cw-contact__field textarea {
	width: 100%;
	font: inherit;
	color: var(--cw-text);
	padding: 0.85em 1em;
	border: 1px solid #dcdfe4;
	border-radius: 8px;
	background: #fff;
}

.cw-contact__field textarea {
	resize: vertical;
}

.cw-contact__field input:focus,
.cw-contact__field select:focus,
.cw-contact__field textarea:focus {
	outline: none;
	border-color: var(--cw-navy);
}

.cw-contact__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6em;
	width: 100%;
	font: inherit;
	font-weight: bold;
	color: #fff;
	background: var(--cw-navy);
	border: none;
	border-radius: 8px;
	padding: 1em;
	cursor: pointer;
}

.cw-contact__privacy {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	color: var(--cw-text-light);
	font-size: 0.78rem;
	margin: 1em 0 0;
	text-align: center;
}

.cw-contact__footnote {
	position: relative;
	z-index: 1;
	text-align: center;
	color: var(--cw-text-light);
	font-size: 0.9rem;
	margin: 2em 0 0;
}

/* ==========================================================================
   Footer
   ========================================================================== */
.cw-footer {
	background: var(--cw-navy);
	color: #fff;
}

.cw-footer__top {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.6em 2.5em;
	max-width: 1280px;
	margin: 0 auto;
	padding: 3em 1.5em;
}

.cw-footer__brand {
	display: flex;
	align-items: center;
	gap: 1em;
	flex: 1 1 320px;
}

.cw-footer__logo {
	display: block;
	width: 48px;
	height: auto;
	flex-shrink: 0;
}

.cw-footer__brand-name {
	font-weight: bold;
	margin: 0 0 0.3em;
}

.cw-footer__brand-tagline {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0;
}

.cw-footer__contact {
	display: flex;
	align-items: center;
	gap: 0.8em;
	flex: 1 1 300px;
	padding-left: 2.5em;
	border-left: 1px solid rgba(255, 255, 255, 0.2);
}

.cw-footer__email a {
	font-weight: bold;
	font-size: 1.05rem;
	margin: 0;
}

.cw-footer__contact-note {
	font-size: 0.78rem;
	color: rgba(255, 255, 255, 0.7);
	margin: 0.2em 0 0;
}

.cw-footer__nav ul {
	display: flex;
	gap: 1.8em;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cw-footer__nav a {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, 0.85);
}

.cw-footer__totop {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	margin-left: auto;
	color: #fff;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 50%;
	cursor: pointer;
}

.cw-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 1.5em;
	text-align: center;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   Responsive — Tablet (768px–1024px)
   PC layout (2 columns) is kept; ratios, sizes and the color bands are
   scaled down so the heading, logo and bands stop crowding each other.
   ========================================================================== */
@media (max-width: 1024px) {
	.cw-header__inner {
		padding: 0.8em 1.2em;
		gap: 1em;
	}

	.cw-header__logo-img {
		height: 32px;
	}

	/* Tablet (768-1024px) can't fit the full horizontal nav + CTA next to
	   the logo — the 5 nav items plus button ran wider than the viewport
	   and forced a horizontal scrollbar (confirmed: CTA right edge landed
	   ~125px past the viewport at 768px). Switching to the same
	   hamburger/dropdown panel used below 767px removes that row entirely
	   instead of trying to shrink it further. */
	.cw-header__toggle {
		display: flex;
	}

	.cw-header__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1.2em;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		background: #fff;
		border-bottom: 1px solid #e6e8eb;
		padding: 1.2em 1.25em 1.5em;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.25s ease, opacity 0.2s ease;
	}

	.cw-header.is-nav-open .cw-header__panel {
		max-height: 480px;
		opacity: 1;
		visibility: visible;
	}

	.cw-header__nav ul {
		flex-direction: column;
		gap: 0.9em;
	}

	.cw-header__nav a {
		flex-direction: row;
		justify-content: space-between;
		font-size: 1rem;
	}

	.cw-nav__jp {
		display: inline;
		font-size: 0.75rem;
	}

	.cw-header__cta {
		width: 100%;
		justify-content: center;
		padding: 0.9em 1.5em;
	}

	.cw-fv__inner {
		grid-template-columns: 1.15fr 0.85fr;
		gap: 1.5em;
		padding: 3em 1.5em;
	}

	.cw-fv__heading {
		font-size: 2.1rem;
	}

	.cw-fv__visual {
		min-height: 300px;
	}

	.cw-fv__visual-mark {
		max-width: 280px;
	}

	.cw-fv__tagline {
		font-size: 0.8rem;
	}

	.cw-fv__icons {
		flex-wrap: wrap;
		gap: 1.5em 2em;
	}

	/* The hero circuit trace is positioned (top %) against the FV
	   section's own height, which stops scaling proportionally with width
	   once the lead paragraph wraps to a 3rd line at tablet widths (this
	   bit the coffee-cup version that briefly lived here — confirmed via
	   rect overlap around 820px, not eyeballed). Same fix as
	   .cw-about__deco etc.: drop the decoration rather than chase a
	   position that only holds at one width. */
	.cw-particles--hero {
		display: none;
	}

	.cw-about {
		padding: 4em 0;
	}

	.cw-about__inner {
		grid-template-columns: 1fr;
		gap: 2em;
	}

	.cw-about__heading {
		font-size: 1.9rem;
	}

	.cw-about__stats {
		flex-wrap: wrap;
	}

	.cw-about__stat {
		flex: 1 1 50%;
		border-left: none;
		border-top: 1px solid #e6e8eb;
	}

	.cw-about__stat:first-child {
		border-top: none;
	}

	.cw-service__heading {
		font-size: 1.8rem;
	}

	.cw-service__cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.cw-service__panel {
		grid-template-columns: 1fr;
	}

	.cw-service__panel-image,
	.cw-service__panel-area {
		border-radius: 0;
		border: 1px solid var(--cw-navy);
		border-top: none;
	}

	.cw-service__panel-image {
		border-top: 1px solid var(--cw-navy);
		border-radius: 16px 16px 0 0;
		min-height: 260px;
	}

	.cw-service__panel-area {
		border-radius: 0 0 16px 16px;
	}

	.cw-strength__heading {
		font-size: 1.8rem;
	}

	.cw-strength__row-text {
		padding: 2.2em 2em 2.2em 3em;
	}

	.cw-strength__row-number {
		font-size: 3.4rem;
	}

	.cw-strength__row-photo {
		min-height: 340px;
	}

	.cw-works__intro {
		flex-direction: column;
		align-items: stretch;
		gap: 1.5em;
	}

	.cw-works__stat {
		border-left: none;
		border-top: 1px solid #dde1e6;
		padding-left: 0;
		padding-top: 1.5em;
		text-align: left;
	}

	.cw-works__photo-item {
		min-height: 300px;
	}

	.cw-works__notice {
		flex-direction: column;
		align-items: flex-start;
	}

	.cw-company__top {
		flex-direction: column;
	}

	.cw-company__table-wrap {
		padding-left: 0;
		padding-top: 2em;
		border-left: none;
		border-top: 1px solid #e3e6ea;
		width: 100%;
	}

	.cw-company__photo {
		max-width: 340px;
	}

	.cw-company__cta-heading {
		font-size: 1.8rem;
	}

	.cw-contact__inner {
		flex-direction: column;
	}

	.cw-contact__form-wrap {
		width: 100%;
	}
}

/* ==========================================================================
   Responsive — SP (base: 375px, general max-width: 767px)
   2 columns collapse to a single stacked column. Existing DOM order
   (heading -> lead -> buttons -> visual -> icons) already matches the
   requested reading order, so only presentation changes here.
   ========================================================================== */
@media (max-width: 767px) {
	/* Desktop-tuned manual line breaks are too long for the mobile column
	   width and cause a second, unintended auto-wrap partway through each
	   segment (e.g. a lone "の" or "す。" stranded on its own line) —
	   hiding them lets the browser wrap the full sentence naturally. */
	.cw-br-pc {
		display: none;
	}

	/* The desktop 1.15 zoom (see .cw-header's comment) leaves too little
	   margin at narrow phone widths: at 320px wide, the zoomed logo + the
	   hamburger button together render wider than the viewport itself,
	   pushing the toggle button ~14px past the right edge and forcing a
	   horizontal scrollbar. Dropping to unzoomed at this breakpoint —
	   sizes here are already hand-tuned in real px/em anyway — removes
	   that inflation. */
	.cw-header {
		zoom: 1;
	}

	.cw-header__inner {
		padding: 0.7em 1.1em;
	}

	.cw-header__logo-img {
		height: 28px;
	}

	.cw-header__toggle {
		display: flex;
	}

	.cw-header__panel {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		gap: 1.2em;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		background: #fff;
		border-bottom: 1px solid #e6e8eb;
		padding: 1.2em 1.25em 1.5em;
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		visibility: hidden;
		transition: max-height 0.25s ease, opacity 0.2s ease;
	}

	.cw-header.is-nav-open .cw-header__panel {
		max-height: 480px;
		opacity: 1;
		visibility: visible;
	}

	.cw-header__nav ul {
		flex-direction: column;
		gap: 0.9em;
	}

	.cw-header__nav a {
		flex-direction: row;
		justify-content: space-between;
		font-size: 1rem;
	}

	.cw-nav__jp {
		display: inline;
		font-size: 0.75rem;
	}

	.cw-header__cta {
		width: 100%;
		justify-content: center;
		padding: 0.9em 1.5em;
	}

	/* FV stays a 2-column layout at mobile widths too (per mockup/FV-sp.png)
	   — text column left, CW mark + tagline column right, both columns
	   top-aligned so the mark/tagline sit level with the heading instead
	   of dropping below a full-width stacked text block. Icons then run
	   as a single tight row directly under both columns. */

	/* One rule for every section — .cw-deco is the same shared container
	   class everywhere (FV, ABOUT, SERVICE, STRENGTH, WORKS, COMPANY,
	   CONTACT), so this single override is enough for the whole site's
	   decoration layer. .cw-particles--hero (the desktop circuit trace)
	   stays hidden — it's a separate sibling element, untouched here. */
	.cw-deco {
		display: block;
	}

	.cw-fv__inner {
		grid-template-columns: 44% 1fr;
		align-items: start;
		gap: 0.75em;
		padding: 2.2em 1.1em 1.5em;
	}

	.cw-fv__heading {
		font-size: clamp(1rem, 5.2vw, 1.9rem);
		margin-bottom: 0.8em;
	}

	.cw-fv__lead {
		font-size: 14px;
		line-height: 1.8;
		font-weight: 400;
	}

	.cw-fv__buttons {
		flex-direction: column;
		gap: 0.6em;
	}

	.cw-btn {
		width: 100%;
		justify-content: center;
		padding: 0.7em 0.6em;
		font-size: clamp(0.68rem, 3.2vw, 0.85rem);
		gap: 0.35em;
	}

	/* translate lives here, on the plain (unanimated) wrapper, rather than
	   on .cw-fv__visual-mark itself — that element has its own load-in
	   keyframe (cw-logo-reveal) ending on an explicit `transform: scale(1)
	   translateY(0)`, which would simply overwrite a transform set
	   directly on it once the animation finishes. */
	.cw-fv__visual {
		min-height: 0;
		align-items: flex-start;
		transform: translate(10px, 8px);
	}

	.cw-fv__visual-mark {
		max-width: 100%;
	}

	/* Mobile visual has no centering slack above the mark (.cw-fv__visual
	   goes min-height:0/align-items:flex-start here), so the tagline's
	   own top:0 sits flush with the mark's top edge — its 3-line block
	   then runs straight down into the accent-stripe icon baked into the
	   mark image. Measured the stripe's real position by sampling the
	   image onto a canvas (its top starts ~18.6% down the image): pulling
	   the tagline up by 22px clears it with a few px to spare, still well
	   short of the header above. */
	.cw-fv__tagline {
		font-size: 0.6rem;
		top: -28px;
	}

	.cw-fv__icons {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		gap: 0.4em;
		padding: 1.4em 1.1em 1.8em;
	}

	.cw-fv__icon-item {
		flex: 1 1 0;
		min-width: 0;
		gap: 0.5em;
	}

	.cw-fv__icon-item .cw-fv__icon svg {
		width: 40px;
		height: 40px;
	}

	.cw-fv__icon-label {
		font-size: 0.64rem;
		text-align: center;
		letter-spacing: 0;
	}

	/* color bands: back to desktop's own mechanism — 2 constant-width
	   rectangles rotated 45° with height:250% so the visible slice is
	   always the true, unbroken middle of an endless stripe (never a
	   tapered end). A clip-path attempt at the same look kept coming out
	   as a wobbly quadrilateral or a floating diamond; reusing the actual
	   rotated-rectangle technique gets the clean constant-width edges for
	   free. Only top/right/width are re-tuned for the mobile section (own
	   values, not the desktop numbers scaled) so the visible window sits
	   in the gap between the mark's bottom and the icon row's top. */
	.cw-fv__bands {
		top: 0;
		bottom: auto;
		height: 67%;
		left: 0;
		width: 100%;
		overflow: hidden;
		transform: none;
	}

	/* Thinner than the first pass, and shifted further right so the
	   diagonal clears the outline button's right edge (measured: button
	   sits at y 55–64% of the section, right edge at x 44.6%) instead of
	   cutting across its corner. Wider, more gradual gradient stops (vs.
	   desktop's tight 55–61%/64–70% "mostly solid" stops) so the visible
	   slice actually shows a blend rather than reading as one flat color. */
	.cw-fv__band--green {
		top: 33%;
		right: -18vw;
		width: 6.5vw;
		background: linear-gradient(to top, var(--cw-orange) 15%, var(--cw-green) 85%);
	}

	.cw-fv__band--blue {
		top: 39%;
		right: -26vw;
		width: 6vw;
		background: linear-gradient(to top, #5ec0d6 15%, var(--cw-service-blue) 85%);
	}

	/* the rotated-rectangle math doesn't scale perfectly linearly against
	   the icon row's position at the very narrow end (measured: icons sit
	   at roughly the same %-down-the-section across 320–767px, but the
	   band's own visible window drifts lower at narrow widths) — nudged
	   up for the smallest phones so it still clears the icon row there. */
	@media (max-width: 360px) {
		.cw-fv__band--green {
			top: -6%;
			right: -32vw;
			width: 3.7vw;
		}

		.cw-fv__band--blue {
			top: -3%;
			right: -40vw;
			width: 3.3vw;
		}

		.cw-about__stat-number {
			font-size: 1.15rem;
		}
	}

	.cw-about {
		padding: 3em 0;
	}

	.cw-about__inner {
		gap: 2em;
		padding: 0 1.25em;
	}

	.cw-about__heading {
		font-size: 1.7rem;
	}

	.cw-about__body {
		font-size: 14px;
		line-height: 1.8;
		font-weight: 400;
	}

	/* mockup/FV-sp.png keeps the diagonal-cut trio as a row even on phones
	   (not stacked rectangles) — reuse the desktop cascade (clip-path
	   trapezoids + negative margins) and just scale its constants down for
	   a much narrower panel: 34px/68px cuts and offsets swallow most of a
	   ~120px mobile column, so mobile gets its own 14px/28px versions
	   instead of the desktop numbers. Bleeds edge-to-edge past
	   .cw-about__inner's side padding via a canceling negative margin,
	   matching the mock's full-width trio. */
	.cw-about__photos {
		margin: 0 -1.25em;
	}

	.cw-about__photo {
		gap: 0.6em;
	}

	.cw-about__photo-frame {
		aspect-ratio: 3 / 5;
	}

	.cw-about__photo--coffee .cw-about__photo-media,
	.cw-about__photo--water .cw-about__photo-media {
		clip-path: polygon(14px 0, 100% 0, calc(100% - 14px) 80%, 0 100%);
	}

	.cw-about__photo--dental .cw-about__photo-media {
		clip-path: polygon(14px 0, 100% 0, 100% 80%, 0 100%);
	}

	.cw-about__photo--water .cw-about__photo-frame {
		margin-left: -12px;
	}

	.cw-about__photo--dental .cw-about__photo-frame {
		margin-left: -24px;
	}

	.cw-about__photo--coffee .cw-about__photo-accent,
	.cw-about__photo--water .cw-about__photo-accent {
		clip-path: polygon(0 100%, calc(100% - 14px) 80%, calc(100% - 14px) calc(80% + 6px));
	}

	.cw-about__photo--dental .cw-about__photo-accent {
		clip-path: polygon(0 100%, 100% 80%, 100% calc(80% + 6px));
	}

	.cw-about__photo-label {
		font-size: 0.68rem;
	}

	/* Stat bar stays one row of three (mock shows vertical dividers, not
	   stacked cards) — the desktop icon-beside-text row just doesn't fit
	   three across a phone width, so each stat flips to icon-above-text,
	   centered, with everything scaled down. The 1024px breakpoint's own
	   2-per-row wrap (flex-wrap:wrap, flex:1 1 50%, border-top) still
	   applies at this width too since max-width ranges overlap — flex-wrap,
	   flex-basis and the border side all have to be re-stated here to win
	   back a plain 3-across row with vertical dividers. */
	.cw-about__stats {
		flex-wrap: nowrap;
		margin-top: 2em;
	}

	.cw-about__stat {
		flex: 1 1 0%;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5em;
		padding: 1em 0.5em;
		border-left: 1px solid #e6e8eb;
		border-top: none;
	}

	.cw-about__stat:first-child {
		border-left: none;
	}

	.cw-about__stat-icon {
		width: 44px;
		height: 44px;
	}

	.cw-about__stat-icon svg {
		width: 20px;
		height: 20px;
	}

	.cw-about__stat-label {
		font-size: 12px;
	}

	.cw-about__stat-list {
		text-align: left;
		font-size: 11px;
		line-height: 1.6;
		word-break: keep-all;
		overflow-wrap: break-word;
	}

	.cw-about__stat-number {
		font-size: 20px;
		word-break: keep-all;
	}

	.cw-about__stat-unit {
		font-size: 0.65rem;
		white-space: nowrap;
	}

	.cw-about__stat-area {
		font-size: 20px;
		white-space: nowrap;
	}

	.cw-about__stat-note {
		font-size: 11px;
	}

	.cw-service {
		padding: 3.5em 0 2.5em;
	}

	.cw-service__intro {
		flex-direction: column;
		align-items: stretch;
		padding: 0 1.25em;
	}

	.cw-service__intro-photo {
		order: -1;
		/* The desktop flex-basis (58%, from the inherited "flex"
		   shorthand) resolves against an indefinite column-flex height
		   as "content", so the box was hugging the img's natural aspect
		   ratio instead of taking the height below — reset flex-basis
		   to auto (and min-height, which otherwise wins as a floor) so
		   the explicit height actually applies and gives the img's
		   height:100% something definite to resolve against. */
		flex: 0 0 auto;
		min-height: 0;
		height: 260px;
	}

	.cw-service__heading {
		font-size: 1.6rem;
	}

	.cw-service__cards {
		grid-template-columns: 1fr;
		padding: 0 1.25em;
	}

	.cw-service__panel {
		padding: 0 1.25em;
		margin-top: 2em;
	}

	/* service-car-sp.png is a purpose-built portrait (1024x1536) SP
	   hero graphic — match its own aspect ratio so object-fit:cover has
	   nothing to crop; the whole composition (heading, icon row, van)
	   shows exactly as designed. Kept inset (not full-bleed) and on the
	   shared border/radius from the ≤1024px card rule above, so it
	   reads as one continuous bordered card with .cw-service__panel-area
	   below instead of a floating, borderless photo. */
	.cw-service__panel-image {
		aspect-ratio: 1024 / 1536;
		height: auto;
	}

	.cw-service__panel-image img {
		object-position: center center;
	}

	.cw-service__area-map {
		min-height: 260px;
	}

	.cw-strength {
		padding: 3.5em 0 3em;
	}

	.cw-strength__deco {
		width: 280px;
	}

	.cw-strength__heading {
		font-size: 1.6rem;
	}

	.cw-strength__row {
		flex-direction: column;
	}

	.cw-strength__row--blue {
		flex-direction: column-reverse;
	}

	.cw-strength__row-text {
		padding: 2em 1.5em 2em 2.5em;
	}

	.cw-strength__row-number {
		font-size: 2.8rem;
	}

	.cw-strength__row-photo {
		/* Same fix as .cw-service__intro-photo above: min-height alone
		   doesn't give a definite height for the child img's
		   height:100% to resolve against, so the image was rendering at
		   its natural aspect ratio (207px) inside a 240px box, leaving
		   a white gap between the image's bottom edge and the
		   full-height colored accent stripe (.cw-strength__row-accent)
		   next to it — an explicit height closes that gap. */
		flex: 0 0 auto;
		min-height: 0;
		height: 240px;
	}

	.cw-strength__closing {
		font-size: 0.9rem;
		text-align: left;
	}

	.cw-works__deco {
		font-size: 4rem;
	}

	.cw-works__heading {
		font-size: 1.5rem;
	}

	.cw-works__intro-row {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.6em;
	}

	.cw-works__photos {
		flex-direction: column;
	}

	.cw-works__photo-item--coffee,
	.cw-works__photo-item--water,
	.cw-works__photo-item--dental {
		clip-path: none;
		margin-left: 0;
	}

	.cw-works__photo-item {
		min-height: 220px;
	}

	.cw-works__category-list {
		flex-direction: column;
	}

	.cw-works__category {
		padding: 1.2em 0 1.6em;
	}

	.cw-works__category-head {
		padding-left: 0;
		gap: 0.7em;
	}

	.cw-works__category-icon {
		position: static;
		flex-shrink: 0;
	}

	.cw-works__notice-title {
		flex-shrink: initial;
	}

	.cw-works__clients {
		flex-direction: column;
		gap: 1.5em;
	}

	.cw-works__client {
		border-left: none;
		padding: 0;
		justify-content: flex-start;
		width: 100%;
	}

	.cw-works__trust-closing {
		letter-spacing: 0.05em;
	}

	.cw-company__top {
		padding: 3.5em 1.25em 2em;
		gap: 2em;
	}

	.cw-company__heading {
		font-size: 1.6rem;
	}

	.cw-company__photo {
		max-width: none;
	}

	.cw-company__row {
		flex-direction: column;
		gap: 0.3em;
	}

	.cw-company__row dt {
		flex: none;
	}

	.cw-company__cta-inner {
		padding: 2.5em 1.25em;
	}

	.cw-company__cta-heading {
		font-size: 1.5rem;
	}

	.cw-contact {
		padding: 3.5em 0;
	}

	.cw-contact__label {
		font-size: 2.1rem;
	}

	.cw-contact__heading {
		font-size: 1.4rem;
	}

	.cw-contact__category {
		gap: 0.9em;
		padding: 1.1em 0;
	}

	.cw-contact__category-number {
		font-size: 1.8rem;
	}

	.cw-contact__category-icon {
		width: 44px;
		height: 44px;
	}

	.cw-contact__category-icon svg {
		width: 26px;
		height: 26px;
	}

	.cw-contact__category-label {
		font-size: 0.7rem;
	}

	.cw-contact__category-title {
		font-size: 1rem;
	}

	.cw-contact__category-desc {
		font-size: 0.8rem;
	}

	.cw-contact__form-wrap {
		padding: 1.6em;
	}

	.cw-footer__top {
		flex-direction: column;
		align-items: flex-start;
	}

	.cw-footer__contact {
		padding-left: 0;
		border-left: none;
		border-top: 1px solid rgba(255, 255, 255, 0.2);
		padding-top: 1.4em;
	}

	.cw-footer__nav ul {
		flex-wrap: wrap;
		gap: 1em 1.6em;
	}

	.cw-footer__totop {
		margin-left: 0;
	}
}