/*
 * YAQO Group
 * Steel-blue night, chalk type, one helm. Amber appears only when someone hovers or focuses.
 * Phone first: the base styles are sized on an iPhone 16 Pro (402px wide); the
 * min-width block near the end adds the wider layout.
 */
:root {
	--steel-night: #141a21; /* page */
	--steel-panel: #1e2630; /* rules, hover wash, fields */
	--steel-line: #2a3440;  /* field borders */
	--chalk: #ebe7de;       /* text, emblem */
	--steel: #8e99a6;       /* secondary text, labels */
	--amber: #f0a23b;       /* interaction only */
	--good: #7bc59a;
	--bad: #f08a7a;

	--font: "Manrope", "Segoe UI", system-ui, -apple-system, Arial, sans-serif;

	--gutter: clamp(20px, 5.5vw, 40px);
	--max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--steel-night);
	color: var(--chalk);
	font: 400 1rem/1.6 var(--font);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2 { margin: 0; font-weight: inherit; }
:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

.wrap { width: min(var(--max), 100% - 2 * var(--gutter)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--gutter); z-index: 10; background: var(--chalk); color: var(--steel-night); padding: 8px 14px; }

/* Section labels share one look: small, spaced capitals */
.verb, .contact-title {
	font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
	color: var(--steel);
}

/* Header */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; flex-shrink: 0; }
.brand-emblem { width: 28px; transition: transform .6s cubic-bezier(.16, 1, .3, 1); }
.brand-word { width: 80px; }
.brand:hover .brand-emblem { transform: rotate(90deg); }
.top-cta {
	display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px;
	border: 1px solid var(--steel-line); border-radius: 999px;
	font-size: .875rem; font-weight: 600; white-space: nowrap;
	transition: border-color .25s, color .25s;
}
.top-cta:hover { border-color: var(--amber); color: var(--amber); }

/* Hero: helm above the heading on phones, beside it on wide screens */
.hero { display: flex; flex-direction: column; padding-block: 20px 56px; }
.helm { order: -1; }
.helm img { width: 92px; margin-bottom: 28px; animation: take-helm 1.8s cubic-bezier(.16, 1, .3, 1) .15s both; }
.hero h1 {
	font-size: clamp(2.125rem, 9.2vw, 4.75rem);
	font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
	text-wrap: balance;
}
.hero-sub { margin: 18px 0 0; font-size: 1.0625rem; color: var(--steel); }
@keyframes take-helm {
	from { transform: rotate(-90deg); opacity: 0; }
	30%  { opacity: 1; }
	to   { transform: rotate(0); opacity: 1; }
}

/* Businesses, filed under the verbs from the heading */
.groups { padding-bottom: 40px; }
.group { padding-top: 22px; border-top: 1px solid var(--steel-panel); }
.group + .group { margin-top: 10px; }
.verb { margin-bottom: 2px; }
.biz-list { list-style: none; margin: 0; padding: 0; }
.biz-list li + li { border-top: 1px solid var(--steel-panel); }
.biz { display: grid; row-gap: 6px; padding-block: 16px; }
.biz-name { font-size: 1.375rem; font-weight: 750; line-height: 1.2; letter-spacing: -0.02em; transition: color .25s; }
.biz-text { color: var(--steel); font-size: .9375rem; line-height: 1.55; max-width: 52ch; }
.biz-link {
	justify-self: start; margin-top: 6px;
	display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0 12px;
	border: 1px solid var(--steel-line); border-radius: 999px;
	font-size: .8125rem; font-weight: 600; white-space: nowrap;
}
a.biz .biz-link::after { content: "\2197"; font-size: .9em; }
.biz.is-soon .biz-link { color: var(--steel); border-style: dashed; }
a.biz:hover .biz-name { color: var(--amber); }
a.biz:hover .biz-link { border-color: var(--amber); color: var(--amber); }

/* Contact form */
.contact { padding-top: 26px; padding-bottom: 64px; border-top: 1px solid var(--steel-panel); }
.contact-intro { margin: 8px 0 22px; font-size: 1.375rem; font-weight: 700; line-height: 1.3; letter-spacing: -0.02em; max-width: 26ch; }
.contact-form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; min-width: 0; }
.field label { font-size: .875rem; font-weight: 600; }
.optional { color: var(--steel); font-weight: 400; }
.field input, .field select, .field textarea {
	width: 100%; min-height: 50px; padding: 12px 14px;
	background: var(--steel-panel); color: var(--chalk);
	border: 1px solid var(--steel-line); border-radius: 12px;
	font: 400 1rem/1.4 var(--font); /* 16px+ stops iPhone zooming into the field */
	transition: border-color .2s, box-shadow .2s;
}
.field textarea { min-height: 140px; resize: vertical; }
.field select {
	appearance: none; padding-right: 40px; cursor: pointer;
	background-image: linear-gradient(45deg, transparent 50%, var(--steel) 50%), linear-gradient(135deg, var(--steel) 50%, transparent 50%);
	background-position: right 20px center, right 14px center;
	background-size: 6px 6px; background-repeat: no-repeat;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 162, 59, .18); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.send {
	justify-self: stretch; min-height: 54px; padding: 0 28px; margin-top: 4px;
	background: var(--chalk); color: var(--steel-night);
	border: 0; border-radius: 999px; cursor: pointer;
	font: 700 1rem/1 var(--font);
	transition: background-color .25s;
}
.send:hover { background: var(--amber); }
.notice { margin: 0; padding: 14px 16px; border-radius: 12px; font-weight: 600; }
.notice-ok { background: rgba(123, 197, 154, .12); color: var(--good); }
.notice-error { background: rgba(240, 138, 122, .12); color: var(--bad); }

/* Footer */
.foot { padding-block: 24px 32px; border-top: 1px solid var(--steel-panel); font-size: .8125rem; color: var(--steel); }

/* Fallback pages */
.page { padding-block: 48px 96px; min-height: 50vh; }
.page h1 { font-size: clamp(2rem, 8vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; margin-bottom: .5em; }
.page a { color: var(--amber); }
.page-body { max-width: 68ch; }

/* Very small phones: keep the header on one line */
@media (max-width: 350px) {
	.brand-word { display: none; }
}

/* Tablets and desktops */
@media (min-width: 761px) {
	.top { padding-block: 28px; }
	.brand { gap: 12px; }
	.brand-emblem { width: 34px; }
	.brand-word { width: 98px; }

	.hero {
		display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
		align-items: center; gap: clamp(24px, 5vw, 72px);
		padding-block: clamp(48px, 10vh, 120px) clamp(72px, 14vh, 160px);
	}
	.helm { order: 0; }
	.helm img { width: 100%; max-width: 420px; margin: 0 0 0 auto; }
	.hero h1 { font-size: clamp(2.75rem, 5.4vw, 4.75rem); line-height: 1.02; }
	.hero-sub { margin-top: 1.5em; font-size: clamp(1.0625rem, 1.6vw, 1.3125rem); }

	.groups { padding-bottom: clamp(40px, 8vh, 96px); }
	.group {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.4fr); gap: 24px;
		padding-block: 28px 8px; margin-top: 0;
	}
	.verb {
		margin: 0; font-size: clamp(2.5rem, 5.6vw, 5rem); font-weight: 300;
		letter-spacing: -0.035em; text-transform: none; line-height: 1;
	}
	.biz { grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; row-gap: 4px; padding: 18px 12px; margin-inline: -12px; border-radius: 12px; transition: background-color .25s; }
	.biz-name { font-size: clamp(1.375rem, 2.3vw, 1.75rem); }
	.biz-text { grid-column: 1; font-size: 1rem; }
	.biz-link { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-top: 0; }
	a.biz:hover { background: var(--steel-panel); }

	.contact {
		display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: clamp(24px, 5vw, 72px);
		padding-block: clamp(40px, 8vh, 96px) clamp(64px, 10vh, 120px);
	}
	.contact-intro { font-size: clamp(1.75rem, 3vw, 2.5rem); line-height: 1.15; letter-spacing: -0.03em; }
	.contact-form { grid-template-columns: 1fr 1fr; gap: 18px 20px; }
	.field-wide, .notice { grid-column: 1 / -1; }
	.send { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.helm img { animation: none; }
	.brand-emblem, .biz, .biz-name, .top-cta, .send, .field input, .field select, .field textarea { transition: none; }
}