@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap");

:root { font-family: "DM Sans", sans-serif; color: #f8f6f2; background: #171b20; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 3px solid #ffac75; outline-offset: 5px; }
.choice-skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 14px; background: #fff; color: #171b20; }
.choice-skip:focus { top: 12px; }
.choice-shell { min-height: 100svh; padding: 0 clamp(20px, 5vw, 80px) 24px; position: relative; isolation: isolate; overflow: hidden; }
.choice-shell::before { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(circle at 50% 1%, #343b42 0, transparent 42%), linear-gradient(125deg, #171b20, #101418); }
.choice-header { max-width: 1560px; margin: auto; min-height: 86px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border-bottom: 1px solid #ffffff22; }
.choice-parent { display: inline-flex; align-items: center; gap: 11px; font: 800 13px "Manrope", sans-serif; letter-spacing: .13em; white-space: nowrap; }
.choice-parent-mark { width: 13px; height: 13px; border-radius: 50%; background: #ff692f; box-shadow: 0 0 0 5px #ff692f22; }
.choice-header-link { font-size: 12px; font-weight: 700; letter-spacing: .04em; border-bottom: 1px solid #ffffff69; padding: 8px 0; transition: color .2s, border-color .2s; }
.choice-header-link:hover { color: #ffa46f; border-color: #ffa46f; }
.choice-main { max-width: 1560px; margin: 0 auto; }
.choice-intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(230px, 370px); align-items: end; gap: 35px; padding: clamp(36px, 5vw, 72px) 0 clamp(32px, 3vw, 48px); }
.choice-kicker, .choice-card-kicker, .choice-index { font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; }
.choice-kicker { margin: 0 0 18px; color: #ff9060; }
.choice-intro h1 { max-width: 990px; margin: 0; font: 600 clamp(38px, 5.25vw, 82px)/1.06 "Manrope", sans-serif; letter-spacing: -.07em; }
.choice-intro h1 em { color: #ff7540; font-style: normal; }
.choice-intro-copy { margin: 0 0 5px; max-width: 355px; color: #bac0c3; font-size: clamp(14px, 1.25vw, 17px); line-height: 1.65; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 1.7vw, 26px); }
.choice-card { min-height: clamp(420px, 37vw, 560px); border-radius: 16px; overflow: hidden; position: relative; display: flex; flex-direction: column; padding: clamp(26px, 3vw, 48px); border: 1px solid; isolation: isolate; transition: transform .3s ease, box-shadow .3s ease; }
.choice-card:hover { transform: translateY(-5px); box-shadow: 0 26px 70px #0004; }
.choice-card > *:not(.choice-art) { position: relative; z-index: 2; }
.choice-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.choice-arrow { display: inline-grid; place-items: center; width: 39px; height: 39px; border-radius: 50%; font-size: 25px; line-height: 1; transition: transform .3s ease; }
.choice-card:hover .choice-arrow { transform: translate(3px, -3px); }
.choice-card-main { margin-top: auto; max-width: 490px; }
.choice-card-kicker { margin: 0 0 15px; }
.choice-card h2 { margin: 0 0 17px; font: 600 clamp(32px, 3.55vw, 58px)/1.06 "Manrope", sans-serif; letter-spacing: -.07em; }
.choice-card-description { max-width: 480px; margin: 0; font-size: clamp(13px, 1.1vw, 16px); line-height: 1.65; }
.choice-card-bottom { display: flex; justify-content: space-between; align-items: flex-end; gap: 22px; margin-top: clamp(30px, 4vw, 55px); }
.choice-services { max-width: 260px; font-size: 10px; font-weight: 700; line-height: 1.6; letter-spacing: .09em; text-transform: uppercase; }
.choice-cta { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 45px; padding: 0 16px; border-radius: 30px; white-space: nowrap; font-size: 12px; font-weight: 800; }
.choice-aero { background: #14202a; border-color: #40515b; color: #f6f8f7; }
.choice-aero::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 73% 28%, #e05a2428, transparent 34%), linear-gradient(155deg, #23323c, #11191f 68%); }
.choice-aero .choice-index, .choice-aero .choice-card-kicker { color: #ff985f; }
.choice-aero .choice-arrow { border: 1px solid #ffffff62; }
.choice-aero .choice-card-description { color: #c9d1d3; }
.choice-aero .choice-services { color: #aab8bd; }
.choice-aero .choice-cta { background: #f86a32; color: #151c22; }
.choice-aero-logo { width: min(65%, 365px); height: auto; margin: clamp(25px, 3vw, 42px) 0 25px; display: block; }
.choice-aero-art { position: absolute; z-index: 1; right: -5%; top: 14%; width: 53%; aspect-ratio: 1; border: 1px solid #fd87553b; border-radius: 50%; box-shadow: 0 0 0 32px #ef683009, 0 0 0 85px #ef683008; }
.choice-aero-art::before { content: ""; position: absolute; inset: 16%; border: 1px solid #ff82424a; border-radius: 50%; transform: rotate(-25deg) scaleX(.55); }
.choice-aero-art::after { content: ""; position: absolute; left: 7%; top: 29%; width: 9px; height: 9px; background: #ff8242; border-radius: 50%; box-shadow: 0 0 20px #ff8242; }
.choice-web { background: #f7f3eb; border-color: #e9ded1; color: #27242a; }
.choice-web::after { content: ""; position: absolute; z-index: 0; inset: 0; background: radial-gradient(circle at 80% 25%, #ffd7ab 0, transparent 38%), linear-gradient(160deg, #fffaf1 12%, #f3e5d9 100%); }
.choice-web .choice-index, .choice-web .choice-card-kicker { color: #b44920; }
.choice-web .choice-arrow { border: 1px solid #342c3073; }
.choice-web .choice-card-description { color: #665d5a; }
.choice-web .choice-services { color: #81736e; }
.choice-web .choice-cta { background: #f5622d; color: white; }
.choice-web-logo { display: inline-flex; align-items: center; gap: 9px; width: fit-content; margin: clamp(24px, 3vw, 42px) 0 23px; font: 800 clamp(21px, 2.2vw, 34px)/1 "Manrope", sans-serif; letter-spacing: -.07em; }
.choice-web-logo-mark { display: inline-grid; place-items: center; width: 1.18em; height: 1.18em; margin-right: 2px; border-radius: 50%; background: #f5622d; color: #fff6e9; font-style: italic; transform: rotate(-15deg); }
.choice-web-logo sup { font-size: .32em; align-self: flex-start; letter-spacing: 0; }
.choice-web-art { position: absolute; z-index: 1; right: -10%; top: 6%; width: 56%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 37% 31%, #fff5d7 0, #ffb966 20%, #fc783a 57%, #e95b36 73%, #ea673a 100%); box-shadow: inset -18px -22px 30px #9f402441, 0 0 80px #f8aa7540; opacity: .85; }
.choice-web-art::before { content: ""; position: absolute; inset: -6%; border: 2px solid #ffffffa6; border-radius: 50%; transform: rotate(-26deg) scaleY(.35); }
.choice-web-art::after { content: ""; position: absolute; inset: -13%; border: 1px solid #fd7d42a8; border-radius: 50%; transform: rotate(36deg) scaleX(.43); }
.choice-footer { max-width: 1560px; margin: 20px auto 0; display: flex; justify-content: space-between; gap: 20px; color: #acb2b6; font-size: 11px; letter-spacing: .04em; }
.choice-footer a { color: #fff3e8; border-bottom: 1px solid #ffffff70; }
@media (min-width: 851px) and (max-height: 800px) {
  .choice-header { min-height: 70px; }
  .choice-intro { padding: 27px 0 27px; }
  .choice-intro h1 { font-size: clamp(38px, 4.5vw, 68px); }
  .choice-card { min-height: 390px; padding: 29px; }
  .choice-aero-logo, .choice-web-logo { margin-top: 24px; margin-bottom: 16px; }
  .choice-card-bottom { margin-top: 22px; }
}
@media (max-width: 850px) {
  .choice-intro { grid-template-columns: 1fr; gap: 17px; }
  .choice-intro-copy { max-width: 590px; }
  .choice-grid { grid-template-columns: 1fr; }
  .choice-card { min-height: 430px; }
  .choice-card h2 { max-width: 520px; }
  .choice-aero-logo { margin-top: 28px; }
}
@media (max-width: 540px) {
  .choice-shell { padding: 0 16px 23px; }
  .choice-header { min-height: 70px; }
  .choice-parent { font-size: 10px; letter-spacing: .05em; }
  .choice-header-link { font-size: 10px; }
  .choice-intro { padding: 42px 4px 29px; }
  .choice-intro h1 { font-size: clamp(36px, 11vw, 52px); }
  .choice-card { min-height: 440px; padding: 26px; }
  .choice-card h2 { font-size: clamp(32px, 9vw, 44px); }
  .choice-aero-logo { width: min(73%, 310px); }
  .choice-web-logo { font-size: 26px; }
  .choice-card-bottom { align-items: flex-start; flex-direction: column; gap: 14px; margin-top: 28px; }
  .choice-services { max-width: none; }
  .choice-footer { display: block; line-height: 1.7; }
  .choice-footer span { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .choice-card, .choice-arrow, .choice-header-link { transition: none; }
}
