/* AVRIO website: shared layout and components.
   Built on tokens.css (AVRIO Design System 1.0). Page-specific layout stays inline in each page. */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; background: #FFFFFF; }
body { font-family: var(--font-sans); color: #0C2E49; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
a { color: #166992; }
a:hover { color: #0C2E49; }
button, input, select, textarea { font-family: inherit; }
svg { flex: none; }
[hidden] { display: none !important; }

@media (max-width: 600px) { :root { --margin: 20px; } }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 12px 16px; border-radius: 999px; background: #011E3C; color: #FFFFFF; font: 500 14px/1 var(--font-sans); text-decoration: none; }
.skip-link:focus { top: 12px; color: #FFFFFF; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- layout ---------- */
.wrap { max-width: 1390px; margin: 0 auto; padding-left: var(--margin); padding-right: var(--margin); }
.line { height: 3px; background: #1D91C2; }
.hide-scroll { scrollbar-width: none; }
.hide-scroll::-webkit-scrollbar { display: none; }

/* ---------- type ---------- */
.t-display { margin: 0; font: 500 clamp(44px, 5.4vw, 80px)/1 var(--font-sans); letter-spacing: -.028em; color: #011E3C; }
.t-h2 { margin: 0; font: 500 clamp(32px, 3.6vw, 52px)/1.06 var(--font-sans); letter-spacing: -.022em; color: #011E3C; text-wrap: balance; }
.t-h2s { margin: 0; font: 500 clamp(30px, 3.2vw, 46px)/1.08 var(--font-sans); letter-spacing: -.02em; color: #011E3C; text-wrap: balance; }
.t-h3s { margin: 0; font: 500 clamp(26px, 2.6vw, 36px)/1.12 var(--font-sans); letter-spacing: -.018em; color: #011E3C; }
.t-lead { margin: 0; font: 400 18px/1.55 var(--font-sans); color: #3D586D; text-wrap: pretty; }
.t-eyebrow { font: 500 12px/1 var(--font-sans); letter-spacing: .12em; text-transform: uppercase; color: #77BDDA; }
.t-label { font: 500 12px/1 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #3D586D; }
.on-dark { color: #FFFFFF; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: 10px; font: 500 15px/1 var(--font-sans); letter-spacing: .04em; text-transform: uppercase; border-radius: var(--r-pill); padding: 15px 24px; border: 1px solid transparent; cursor: pointer; text-decoration: none; white-space: nowrap; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.btn--sm { font-size: 12px; padding: 10px 16px; }
.btn--primary { background: var(--accent); color: var(--on-accent); }
.btn--primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn--solid { background: var(--fg-strong); color: var(--bg); }
.btn--solid:hover { background: var(--fg-muted); color: var(--bg); }
.btn--white { background: #FFFFFF; color: #011E3C; }
.btn--white:hover { background: #ECECEC; color: #011E3C; }
.btn--outline { background: transparent; color: var(--fg-strong); border-color: var(--line-strong); }
.btn--outline:hover { border-color: var(--fg-strong); color: var(--fg-strong); }
.btn--ghost { background: transparent; color: var(--link); letter-spacing: 0; text-transform: none; padding: 15px 6px; text-underline-offset: 4px; }
.btn--ghost.btn--sm { padding: 10px 6px; }
.btn--ghost:hover { color: var(--link); text-decoration: underline; }
.btn[disabled] { background: var(--surface-2); color: var(--fg-muted); border-color: var(--line); cursor: not-allowed; }

/* ---------- chips & pills ---------- */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chips > * { flex: none; }
.chip { font: 500 13px/1 var(--font-sans); padding: 9px 14px; border-radius: var(--r-pill); border: 1px solid var(--line-strong); background: transparent; color: var(--fg); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; white-space: nowrap; transition: background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.chip:hover { border-color: var(--fg-strong); }
.chip[aria-pressed="true"] { border-color: var(--fg-strong); background: var(--fg-strong); color: var(--bg); }
.pill { font: 500 14px/1 var(--font-sans); color: #0C2E49; text-decoration: none; padding: 11px 16px; border: 1px solid #9EABB6; border-radius: 999px; white-space: nowrap; transition: border-color 160ms var(--ease); }
.pill:hover { border-color: #011E3C; color: #011E3C; }
.pill--soft { padding: 10px 14px; border-color: #CED5DB; }
.pill--soft:hover { border-color: #0C2E49; color: #0C2E49; }
.pill--dark { color: #FFFFFF; border-color: #3D586D; }
.pill--dark:hover { color: #FFFFFF; border-color: #FFFFFF; }

/* ---------- asset slots (image / video placeholders) ---------- */
.slot { position: absolute; inset: 0; overflow: hidden; }
.slot__bg { position: absolute; inset: 0; transition: transform 700ms var(--ease); }
.slot__bg > img, .slot__bg > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slot--studio .slot__bg { background: radial-gradient(42% 7% at 50% 86%, rgba(12,46,73,.13), transparent 70%), radial-gradient(120% 95% at 50% 30%, #FFFFFF 0%, #EEF1F4 48%, #DCE2E7 100%); }
.slot--interior .slot__bg { background: radial-gradient(70% 80% at 85% 10%, rgba(255,255,255,.75), transparent 60%), linear-gradient(165deg, #E7ECEF 0%, #D2DBE2 55%, #BCC8D2 100%); }
.slot--pale .slot__bg { background: radial-gradient(70% 80% at 80% 15%, rgba(255,255,255,.8), transparent 60%), linear-gradient(160deg, #EFF7FB 0%, #D2E9F3 100%); }
.slot--dark .slot__bg { background: radial-gradient(60% 70% at 78% 28%, rgba(29,145,194,.30), transparent 62%), linear-gradient(180deg, #0C2E49 0%, #011E3C 100%); }
.slot--hero .slot__bg { background: radial-gradient(48% 70% at 82% 22%, rgba(236,236,236,.26), transparent 62%), radial-gradient(55% 60% at 12% 100%, rgba(29,145,194,.28), transparent 65%), linear-gradient(168deg, #3D586D 0%, #24435B 30%, #0C2E49 65%, #011E3C 100%); }
.slot__cap { position: absolute; display: grid; gap: 3px; max-width: min(78%, 420px); font: 500 10.5px/1.45 var(--font-mono); letter-spacing: .02em; color: #3D586D; text-wrap: pretty; pointer-events: none; }
.slot__cap > span:first-child { opacity: .9; }
.slot__cap > span + span { opacity: .75; }
.slot--dark .slot__cap, .slot--hero .slot__cap { color: #9EABB6; }
.slot__cap--bl { left: 16px; bottom: 14px; }
.slot__cap--br { right: 16px; bottom: 14px; text-align: right; }
.slot__cap--tr { right: 20px; top: 96px; text-align: right; }
.slot__cap--tl { left: 16px; top: 14px; }
.slot.has-media .slot__cap { display: none; }

/* ---------- card hover (pointer devices only) ---------- */
[data-arrow] { display: inline-block; transition: transform 240ms var(--ease); }
[data-hl] { transition: color 160ms var(--ease); }
@media (hover: hover) and (pointer: fine) {
  [data-card]:hover .slot__bg { transform: scale(1.035); }
  [data-card]:hover [data-arrow] { transform: translateX(4px); }
  [data-card]:hover [data-hl] { color: var(--accent-hover); }
}
.arrow-dot { position: absolute; right: 20px; bottom: 20px; width: 44px; height: 44px; border-radius: 999px; background: #FFFFFF; display: grid !important; place-items: center; }
.arrow-dot--lg { right: 24px; bottom: 24px; width: 52px; height: 52px; }
.arrow-dot svg { fill: none; stroke: #0C2E49; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- breadcrumbs ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font: 400 14px/1.3 var(--font-sans); color: #3D586D; }
.crumbs a { color: #3D586D; text-decoration: none; }
.crumbs a:hover { color: #011E3C; }
.crumbs [aria-current] { color: #011E3C; }
.crumbs--dark, .crumbs--dark a { color: #9EABB6; }
.crumbs--dark a:hover, .crumbs--dark [aria-current] { color: #FFFFFF; }

/* ---------- product cards ---------- */
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 22vw, 280px), 1fr)); gap: 32px 25px; }
.pcard { display: grid; gap: 16px; align-content: start; text-decoration: none; color: #011E3C; }
.pcard:hover { color: #011E3C; }
.pcard__media { position: relative; aspect-ratio: 4/5; border-radius: 18px; overflow: hidden; background: #FFFFFF; }
.pcard__body { display: grid; gap: 6px; }
.pcard__sub { font: 500 12px/1.2 var(--font-sans); letter-spacing: .06em; text-transform: uppercase; color: #3D586D; }
.pcard__name { font: 500 18px/1.25 var(--font-sans); letter-spacing: -.005em; }
.pcard__key { font: 400 14px/1.45 var(--font-sans); color: #3D586D; }
.pcard__more { display: flex; align-items: center; gap: 6px; margin-top: 6px; font: 500 14px/1 var(--font-sans); color: #166992; }

/* ---------- news cards ---------- */
.meta { display: flex; gap: 12px; font: 500 13px/1 var(--font-sans); color: #3D586D; }
.meta > :first-child { color: #166992; }
.ncard { display: grid; gap: 14px; align-content: start; text-decoration: none; color: #011E3C; }
.ncard:hover { color: #011E3C; }
.ncard__media { position: relative; aspect-ratio: 3/2; border-radius: 18px; overflow: hidden; }
.ncard__title { font: 500 20px/1.3 var(--font-sans); letter-spacing: -.008em; text-wrap: pretty; }
.ngrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 40px 25px; }

/* ---------- link lists ---------- */
.boxgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.boxlink { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 24px; border: 1px solid #CED5DB; border-radius: 18px; background: #FFFFFF; text-decoration: none; color: #011E3C; transition: border-color 160ms var(--ease); }
.boxlink:hover { border-color: #9EABB6; color: #011E3C; }
.boxlink__t { font: 500 18px/1.25 var(--font-sans); }
.boxlink__d { font: 400 14px/1.45 var(--font-sans); color: #3D586D; }
.boxlink [data-arrow] { flex: none; color: #166992; }
.rowlink { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 4px; border-top: 1px solid #CED5DB; text-decoration: none; color: #011E3C; }
.rowlink:hover { color: #011E3C; }
.rowlink:last-child { border-bottom: 1px solid #CED5DB; }

/* ---------- feature lists ---------- */
.feats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; }
.feat { display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid #9EABB6; }
.feat__t { font: 500 19px/1.3 var(--font-sans); color: #011E3C; }
.feat__b { font: 400 15px/1.55 var(--font-sans); color: #3D586D; text-wrap: pretty; }
.inverse .feat { border-top-color: #3D586D; }
.inverse .feat__t { color: #FFFFFF; }
.inverse .feat__b { color: #CED5DB; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 32px 25px; }
.steps li { display: grid; gap: 10px; align-content: start; }
.steps__n { font: 300 44px/1 var(--font-sans); letter-spacing: -.02em; color: #1D91C2; }
.steps__t { font: 500 19px/1.3 var(--font-sans); color: #011E3C; }
.steps__b { font: 400 15px/1.55 var(--font-sans); color: #3D586D; }

/* ---------- forms ---------- */
.form-card { border-radius: 18px; border: 1px solid #CED5DB; background: #FFFFFF; padding: clamp(24px, 3vw, 40px); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; min-width: 0; align-content: start; }
.field label { font: 500 13px/1.3 var(--font-sans); color: var(--fg-strong); }
.field input, .field textarea, .field select { font: 400 16px/1.2 var(--font-sans); color: var(--fg-strong); background: var(--surface); border-radius: var(--r-md); padding: 13px 14px; width: 100%; min-width: 0; outline: none; border: 1px solid var(--line-strong); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease); resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--brand-line); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-line) 25%, transparent); }
.field select { appearance: none; -webkit-appearance: none; padding-right: 40px; }
.field__sel { position: relative; }
.field__sel svg { position: absolute; right: 16px; top: 50%; margin-top: -6px; pointer-events: none; color: var(--fg-muted); }
.field__hint { font: 400 12px/1.4 var(--font-sans); color: var(--fg-muted); }
.field.is-error input { border-color: var(--err-text); box-shadow: none; }
.field.is-error .field__hint { color: var(--err-text); }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; }
.form-note { font: 400 13px/1.5 var(--font-sans); color: #3D586D; max-width: 46ch; }
.form-done { display: grid; gap: 16px; justify-items: start; padding: 12px 0; }
.form-done__icon { width: 44px; height: 44px; border-radius: 999px; background: #EFF7FB; display: grid; place-items: center; }

/* ---------- empty states ---------- */
.empty { display: grid; justify-items: start; gap: 16px; padding: clamp(48px, 6vw, 96px) clamp(24px, 4vw, 56px); border-radius: 18px; background: #F3F5F6; }
.empty__t { font: 500 24px/1.2 var(--font-sans); color: #011E3C; }
.empty__b { font: 400 16px/1.5 var(--font-sans); color: #3D586D; max-width: 56ch; }

/* ---------- header ---------- */
.hdr { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: 72px; color: #0C2E49; background: rgba(255,255,255,.92); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); box-shadow: inset 0 -1px 0 #CED5DB; transition: background-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease); }
.hdr.is-clear { color: #FFFFFF; background: rgba(255,255,255,0); -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 -1px 0 rgba(255,255,255,0); }
.hdr a, .hdr a:hover { color: inherit; }
.hdr__in { max-width: 1390px; height: 100%; margin: 0 auto; padding: 0 var(--margin); display: flex; align-items: center; gap: 40px; }
.hdr__logo { display: flex; align-items: center; flex: none; }
.hdr__nav { display: flex; align-items: center; gap: 30px; flex: 1; min-width: 0; }
.hdr__nav a { position: relative; font: 500 15px/1 var(--font-sans); text-decoration: none; padding: 28px 0; white-space: nowrap; opacity: .82; transition: opacity 160ms var(--ease); }
.hdr__nav a:hover, .hdr__nav a[aria-current] { opacity: 1; }
.hdr__nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 20px; height: 2px; background: #1D91C2; transform-origin: left; transform: scaleX(0); transition: transform 240ms var(--ease); }
.hdr__nav a[aria-current]::after { transform: scaleX(1); }
.hdr__tools { display: flex; align-items: center; gap: 6px; flex: none; margin-left: auto; }
.icon-btn { width: 44px; height: 44px; border: 0; background: transparent; color: inherit; cursor: pointer; display: grid; place-items: center; border-radius: 999px; padding: 0; transition: background-color 160ms var(--ease); }
.icon-btn:hover { background: #F3F5F6; }
.hdr.is-clear .icon-btn:hover { background: rgba(255,255,255,.12); }
.icon-btn svg, .ico { fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.hdr__lang { display: flex; align-items: center; gap: 2px; margin-left: 6px; padding-left: 14px; box-shadow: inset 1px 0 0 #CED5DB; }
.hdr.is-clear .hdr__lang { box-shadow: inset 1px 0 0 rgba(255,255,255,.3); }
.hdr__lang button { border: 0; background: transparent; color: inherit; font: 500 13px/1 var(--font-sans); letter-spacing: .04em; padding: 10px 7px; cursor: pointer; opacity: .6; }
.hdr__lang button[aria-pressed="true"] { opacity: 1; }
.hdr__burger { display: none !important; }
@media (max-width: 1079px) {
  .hdr__nav, .hdr__lang { display: none; }
  .hdr__burger { display: grid !important; }
}

/* search overlay */
.search { position: fixed; inset: 0; z-index: 60; }
.search__scrim { position: absolute; inset: 0; background: rgba(1,30,60,.45); }
.search__panel { position: absolute; top: 0; left: 0; right: 0; box-shadow: var(--shadow-overlay); }
.search__form { max-width: 1390px; margin: 0 auto; padding: 28px var(--margin) 36px; display: grid; gap: 24px; }
.search__bar { display: flex; align-items: center; gap: 16px; border-bottom: 1px solid #9EABB6; padding-bottom: 12px; }
.search__bar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: 400 clamp(20px, 2.4vw, 30px)/1.2 var(--font-sans); color: #011E3C; padding: 8px 0; }
.search .icon-btn { color: #0C2E49; }

/* mobile menu */
.menu { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; overflow: auto; }
.menu__top { height: 72px; flex: none; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--margin); }
.menu a, .menu a:hover { color: #FFFFFF; }
.menu .icon-btn { color: #FFFFFF; }
.menu .icon-btn:hover { background: rgba(255,255,255,.12); }
.menu__nav { display: grid; padding: 16px var(--margin); }
.menu__nav a { display: flex; align-items: center; justify-content: space-between; font: 500 28px/1.1 var(--font-sans); letter-spacing: -.01em; text-decoration: none; padding: 18px 0; border-bottom: 1px solid #24435B; }
.menu__nav svg { stroke: #4AA7CE; }
.menu__foot { margin-top: auto; padding: 24px var(--margin) 32px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.menu__lang { display: flex; gap: 4px; }
.menu__lang button { min-width: 44px; height: 44px; border: 1px solid #3D586D; border-radius: 999px; background: transparent; color: #FFFFFF; font: 500 13px/1 var(--font-sans); cursor: pointer; }
.menu__lang button[aria-pressed="true"] { border-color: #FFFFFF; }

/* ---------- footer ---------- */
.ftr { background: #011E3C; color: #CED5DB; }
.ftr__in { max-width: 1390px; margin: 0 auto; padding: 72px var(--margin) 32px; display: grid; gap: 56px; }
.ftr__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 40px 25px; }
.ftr__col { display: grid; gap: 14px; align-content: start; }
.ftr__h { font: 500 12px/1 var(--font-sans); letter-spacing: .08em; text-transform: uppercase; color: #6D8292; }
.ftr__col a { font: 400 15px/1.3 var(--font-sans); color: #ECECEC; text-decoration: none; }
.ftr__col a:hover { color: #4AA7CE; }
.ftr__col .ftr__tel { font: 500 18px/1.2 var(--font-sans); color: #FFFFFF; }
.ftr__muted { font: 400 15px/1.45 var(--font-sans); color: #9EABB6; margin: 0; }
.ftr__rule { height: 1px; background: #24435B; }
.ftr__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; }
.ftr__legal { display: flex; flex-wrap: wrap; align-items: center; gap: 22px; font: 400 14px/1 var(--font-sans); color: #9EABB6; }
.ftr__legal a { color: #9EABB6; text-decoration: none; }
.ftr__legal a:hover { color: #FFFFFF; }
.social { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.social a { width: 40px; height: 40px; border-radius: 999px; border: 1px solid #3D586D; display: grid; place-items: center; color: #ECECEC; text-decoration: none; transition: border-color 160ms var(--ease); }
.social a:hover { border-color: #4AA7CE; color: #ECECEC; }
.social svg { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.social__handle { margin-left: 6px; font: 500 15px/1 var(--font-sans); color: #ECECEC; }
.social--light a { border-color: #CED5DB; color: #011E3C; }
.social--light a:hover { border-color: #011E3C; color: #011E3C; }
.social--light .social__handle { color: #011E3C; }

/* ---------- FAQ ---------- */
.faq { display: grid; border-top: 1px solid #9EABB6; }
.faq__item { border-bottom: 1px solid #9EABB6; }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border: 0; background: transparent; cursor: pointer; text-align: left; font: 500 19px/1.35 var(--font-sans); color: #011E3C; }
.faq__icon { flex: none; width: 32px; height: 32px; border-radius: 999px; border: 1px solid #9EABB6; display: grid; place-items: center; transition: transform 240ms var(--ease); }
.faq__icon svg { fill: none; stroke: #0C2E49; stroke-width: 2; stroke-linecap: round; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease); }
.faq__a > div { overflow: hidden; }
.faq__a p { margin: 0; padding: 0 56px 24px 0; font: 400 16px/1.6 var(--font-sans); color: #3D586D; opacity: 0; transition: opacity 200ms var(--ease); }
.faq__item.is-open .faq__icon { transform: rotate(45deg); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
.faq__item.is-open .faq__a p { opacity: 1; }