/**
 * ===========================================================================
 * RESPONSIVE DESIGN SYSTEM (GOLDEN RULE — WITH SCALING INTENT)
 * ===========================================================================
 *
 * WHY (Intent)
 * - Desktop (1440px) is the primary design reference
 * - Figma designs may exist ONLY for desktop initially
 * - UI must remain readable and balanced on all devices
 * - Responsive behavior must be predictable, not improvised
 *
 * Responsive design exists to PRESERVE INTENT, not exact sizes.
 *
 *
 * HOW (Strategy & Governance)
 *
 * 1. PRIMARY DESIGN REFERENCE (LOCKED)
 *    - 1440px is the ONLY authoritative design reference
 *    - All sizes (font, spacing, layout) are evaluated here first
 *
 *    Example:
 *    - Desktop heading = 74px
 *    - Desktop spacing = 6rem
 *
 *
 * 2. RESPONSIVE SCALING PHILOSOPHY
 *    - Desktop values define INTENT
 *    - Other devices receive DERIVED values
 *
 *    Derived values must:
 *    - preserve hierarchy
 *    - preserve readability
 *    - avoid visual dominance or crowding
 *
 *    Pixel-perfect matching on non-desktop devices is NOT required.
 *
 *
 * 3. AUTO-SCALING PERMISSION (IMPORTANT)
 *    When Figma designs for tablet/mobile are NOT available:
 *
 *    - Developer/Agent MAY derive responsive values using media queries
 *    - BUT ONLY for:
 *      • font-size
 *      • vertical spacing
 *
 *    - Structural changes are NOT allowed
 *
 *
 * 4. SCALING RULE OF THUMB (INDUSTRY PRACTICE)
 *    - Tablet (≤768px):
 *      • Reduce large text by ~25–30%
 *      • Reduce section spacing by ~30–40%
 *
 *    - Mobile (<576px):
 *      • Reduce large text by ~40–50%
 *      • Reduce section spacing by ~50%
 *
 *    These are GUIDELINES, not strict math.
 *
 *
 * 5. CONFIRMATION RULE (SAFETY VALVE)
 *    - If a responsive adjustment affects:
 *      • visual hierarchy
 *      • brand prominence
 *      • key headings (hero / page title)
 *
 *    → Developer MUST confirm before implementation.
 *
 *
 * WHAT (Implementation Rules)
 *
 * - Desktop values live in style.css
 * - Responsive reductions live ONLY in media.css
 *
 * - media.css MAY:
 *   • reduce font-size
 *   • reduce padding / margin
 *   • hide non-critical elements
 *
 * - media.css MUST NOT:
 *   • increase sizes beyond desktop
 *   • redefine layout structure
 *   • change grid logic
 *
 * - Units:
 *   • rem preferred (allows natural scaling)
 *   • px allowed ONLY when matching Figma exactly on desktop
 *
 *
 * DESIGN REVIEW REFERENCES
 * - Desktop review at 1440px
 * - Tablet sanity check at 768px
 * - Mobile sanity check at 402px
 *
 *
 * GOLDEN RULE (DO NOT BREAK)
 * - Desktop defines intent.
 * - Other devices adapt the intent.
 * - media.css refines, never re-designs.
 * - When in doubt, ASK before scaling.
 * ===========================================================================
 */

/* tablet size */
@media (max-width: 1024px) {
	.hero h1 {
		font-size: 50px;
	}

	.service-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.industry-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.industry-item:nth-child(3) {
		border-right: 0;
	}

	.industry-item:nth-child(n+4) {
		border-top: 1px solid var(--color-gray-200);
	}

	.industry-item:nth-child(4) {
		border-right: 1px solid var(--color-gray-200);
	}

	.industry-item:nth-child(6) {
		border-right: 0;
	}

	.main-nav,
	.nav-cta {
		display: none;
	}

	.menu-toggle {
		display: block;
	}

	.nav-wrap {
		justify-content: space-between;
	}

	.brand {
		margin-right: 0;
	}

	.main-nav.open {
		display: flex;
		position: absolute;
		left: 16px;
		right: 16px;
		top: 70px;
		background: var(--color-white);
		border: 1px solid var(--color-gray-100);
		border-radius: 16px;
		padding: 12px 16px;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		box-shadow: var(--shadow);
	}

	.main-nav.open a {
		padding: 12px 4px;
	}

	.main-nav.open a.active::after {
		display: none;
	}

	.hero-grid {
		grid-template-columns: 1fr;
		gap: 15px;
		padding-top: 30px;
	}

	.hero-copy {
		text-align: center;
		padding: 0;
	}

	.hero-lead {
		margin-left: auto;
		margin-right: auto;
	}

	.feature-points {
		max-width: 530px;
		margin-left: auto;
		margin-right: auto;
		text-align: left;
	}

	.hero-actions {
		justify-content: center;
	}

	.hero-visual {
		min-height: 430px;
	}

	.why-grid {
		grid-template-columns: 1fr;
	}

	.why-copy {
		text-align: center;
	}

	.why-copy > p {
		margin-left: auto;
		margin-right: auto;
	}

	.check-list {
		display: inline-grid;
		text-align: left;
	}

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

/* mobile size */
@media (max-width: 768px) {
	.container {
		width: min(calc(100% - 28px), var(--container-max-width));
	}

	.hero h1 {
		font-size: 38px;
		letter-spacing: -1.5px;
	}

	.hero-lead {
		font-size: 15px;
	}

	.feature-points {
		grid-template-columns: 1fr;
		font-size: 13px;
	}

	.hero-visual {
		min-height: 390px;
	}

	.hero-center {
		width: 170px;
		height: 170px;
	}

	.brand-mark.large {
		width: 52px;
		height: 52px;
	}

	.brand-mark.large::before {
		width: 27px;
		height: 27px;
	}

	.brand-mark.large .brand-mark-core {
		width: 10px;
		height: 10px;
	}

	.center-name {
		font-size: 16px;
	}

	.center-sub {
		font-size: 9px;
	}

	.orbit-1 {
		width: 250px;
		height: 250px;
	}

	.orbit-2 {
		width: 320px;
		height: 320px;
	}

	.hero-card {
		width: 170px;
		padding: 12px;
		border-radius: 13px;
		gap: 8px;
	}

	.hero-card strong {
		font-size: 11px;
	}

	.hero-card small {
		font-size: 8.5px;
	}

	.mini-icon {
		width: 30px;
		height: 30px;
		border-radius: 9px;
	}

	.card-received {
		left: 0;
		top: 6%;
	}

	.card-execute {
		right: 0;
		top: 36%;
	}

	.card-delivered {
		left: 5%;
		bottom: 4%;
	}

	.section-heading h2 {
		font-size: 28px;
	}

	.logo-row {
		grid-template-columns: repeat(2, 1fr);
		gap: 20px 12px;
	}

	.service-grid {
		grid-template-columns: 1fr 1fr;
	}

	.industry-grid {
		grid-template-columns: 1fr 1fr;
	}

	.industry-item:nth-child(3) {
		border-right: 1px solid var(--color-gray-200);
	}

	.industry-item:nth-child(2n) {
		border-right: 0;
	}

	.industry-item:nth-child(n+3) {
		border-top: 1px solid var(--color-gray-200);
	}

	.process-grid {
		grid-template-columns: 1fr;
	}

	.process-grid::before {
		display: none;
	}

	.process-item p {
		max-width: 330px;
	}

	.stats-grid {
		grid-template-columns: 1fr 1fr;
	}

	.stats-grid div:nth-child(2) {
		border-right: 0;
	}

	.stats-grid div:nth-child(n+3) {
		border-top: 1px solid var(--color-gray-100);
	}

	.cta-box {
		align-items: flex-start;
		flex-direction: column;
		padding: 24px;
	}

	.cta-box .btn {
		margin-left: 0;
	}

	.footer-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.footer-bottom {
		flex-direction: column;
		justify-content: center;
		padding: 18px 0;
	}

	.contact-modal-card {
		grid-template-columns: 1fr;
		grid-template-rows: minmax(0, 1fr);
	}

	.contact-modal-intro {
		display: none;
	}

	.contact-modal-row,
	.contact-modal-row-3 {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 480px) {
	.service-grid {
		grid-template-columns: 1fr;
	}

	.industry-grid {
		grid-template-columns: 1fr;
	}

	.industry-item,
	.industry-item:nth-child(2n) {
		border-right: 0;
	}

	.industry-item:nth-child(n+2) {
		border-top: 1px solid var(--color-gray-200);
	}

	.hero-actions .btn {
		width: 100%;
	}

	.contact-modal {
		padding: 12px;
	}

	.contact-modal-card {
		grid-template-columns: 1fr;
		grid-template-rows: auto minmax(0, 1fr);
		height: calc(100vh - 24px);
		padding: 12px;
		gap: 12px;
	}

	.contact-modal-intro {
		padding: 24px 20px 18px;
	}

	.contact-modal-intro h2 {
		font-size: 26px;
	}

	.contact-modal-form-wrap {
		padding: 24px 20px;
	}

	.contact-modal-row,
	.contact-modal-row-3 {
		grid-template-columns: 1fr;
	}
}