Framer Agent vs Claude Design

Design and build a complete responsive website for “SYSTEMS OFFICE,” a creative technology agency that designs digital products, interactive identities and web experiences. The website must attract design-led startups, cultural institutions and global brands. Important asset constraint: Do not use photography, video, 3D objects, image-generation assets, stock imagery or external illustrations. Build the complete identity using: - Typography - Geometric shapes - Color - Grid systems - Interface fragments - Inline SVG - Project diagrams - Motion - Interactive states The website should demonstrate that an agency can create a memorable identity without depending on a cinematic showreel. Visual direction: Use black, soft grey, white and one acidic yellow-green accent. Create a highly typographic identity with a visible modular grid. Mix oversized statements with small technical metadata. The tone should feel confident and intelligent rather than playful or chaotic. Avoid: - Generic agency templates - “We create digital experiences” as the main headline - Decorative blobs - Fake project photography - Identical case-study cards - Excessive rounded containers - Awards and fake client logos Required sections: 1. Hero Create a strong typographic opening around: “Designing systems for unpredictable screens.” Include: - Systems Office - Independent creative technology practice - Copenhagen / Prague / Remote - View selected work - Start a project - Current availability Create an interactive native graphic that responds to pointer movement. It might be a changing grid, cursor field, modular identity system or typographic composition. 2. Selected projects Create four fictional but believable projects: - Relay — AI operations platform - Tidal — Cultural broadcasting network - Common Ground — Urban planning platform - Index 24 — Digital design archive Do not use image placeholders. Represent each project through its own native visual system using typography, color, interface fragments, shapes and motion. Each project needs: - Client - Industry - Scope - Year - Short outcome - Project index - Open case study action 3. Featured case study Expand “Relay” into a detailed homepage case study. Include: - Business challenge - Strategic idea - Identity system - Product interface - Interaction model - Measured outcome Design all demonstrations directly within the page. 4. Capabilities Include: - Digital strategy - Brand systems - Product design - Creative development - Motion systems - Prototyping Organize these as a flexible system rather than a conventional service-card grid. 5. Working model Explain four stages: Frame → Prototype → Build → Extend Create an interactive process visualization showing how an initial idea becomes a reusable system. 6. Principles Use three statements: “Systems before screens.” “Motion with a reason.” “Every identity must survive real use.” Give each principle a distinct typographic composition. 7. Agency information Include team size, locations, typical project duration, engagement models and project range. Use realistic demonstration values without presenting them as universal promises. 8. Enquiry form Include: - Name - Company - Email - Project type - Approximate budget - Desired start - Project description Make the form feel like part of the identity. 9. Footer Create a distinctive typographic footer with contact details, navigation, social links and availability. Motion: Use grid transformations, typographic transitions, cursor response and project-specific interface motion. Avoid animating every paragraph. Interaction should demonstrate the agency’s capability. Responsive behavior: On mobile, reorganize complex grids into strong vertical compositions. Replace pointer interactions with touch or automatic states. Respect prefers-reduced-motion. The final result should feel like a real agency website that could win clients—not an experimental poster with unusable navigation.

# Recreate the Complete SkyElite Private Aviation Landing Page Recreate a complete responsive private-aviation landing page for SkyElite. Match the specified visual hierarchy, geometry, typography, colors, section order, motion, component states, and responsive behavior closely. The direction is restrained editorial luxury: cinematic aircraft footage, monumental Inter typography, precise information architecture, muted warm neutrals, deep aviation blue, thin hairlines, and large controlled areas of negative space. Avoid gold, glossy luxury clichés, aircraft icons, excessive glass effects, generic cards, or additional content not specified below. ## Preflight Before building: 1. Confirm that Inter is available with weights 400, 500, 600, and 700. 2. Confirm that this exact MP4 can be used as a trusted video asset: https://pub-d459366d41774d6fbae1cf6382c0cb38.r2.dev/websites/SkyAlto/the-camera-moves-back-revealing-the-whole-plane-in%20(1).mp4 3. Inspect the video before positioning it. The important aircraft body and engine must remain visible across Desktop, Tablet, and Phone crops. 4. If the external MP4 cannot be used, pause and request the uploaded video file. Do not replace it with unrelated aviation media. ## Global styles Use Inter throughout. Create reusable color styles: - Aviation Ink: #202A36 - Aviation Ink Hover: #1A2229 - Warm White: #F5F4EF - Light Warm Grey: #ECEBE5 - Mid Warm Grey: #D8D8D2 - Hero Loading Grey: #D9D8D1 - Pale Card Grey: #D9DAD6 - Muted Card Grey: #BFC1BD - White 58%: rgba(245,244,239,0.58) - White 46%: rgba(245,244,239,0.46) - Ink 82%: rgba(32,42,54,0.82) - Ink 70%: rgba(32,42,54,0.70) - Ink 62%: rgba(32,42,54,0.62) - Ink 58%: rgba(32,42,54,0.58) - Ink 22% hairline: rgba(32,42,54,0.22) - White 22% hairline: rgba(245,244,239,0.22) Use three responsive references: - Desktop: 1440px canvas - Tablet: 810px canvas - Phone: 390px canvas Most sections use a centered content frame with a maximum width of 1280px. Section horizontal padding: - Desktop: 32px - Tablet: 24px - Phone: 18px Use Inter Regular for all large display typography. Display text should use very tight tracking between -0.06em and -0.09em and line heights between 0.78 and 0.96 depending on the section. Small section labels use uppercase Inter Medium, 8–10px, with tracking around 0.12em–0.14em. ## Page structure Build the page in this exact order: 1. Full-viewport video hero 2. Story manifesto 3. Journey process 4. Rates and route-planning console 5. Benefits grid 6. FAQ 7. Dark conversion finale and footer Navigation anchors: - Start → hero - Story → Story manifesto - Rates → Rates section - Benefits → Benefits section - FAQ → FAQ section Use smooth anchor scrolling. ## 1. Full-viewport video hero Create a section exactly 100vh tall with a minimum height of 680px and clipped overflow. Use a vertical stack with three normal-flow foreground regions: 1. Navigation at the top 2. Main content filling the remaining middle space 3. Information rail at the bottom Behind this foreground stack, use the supplied video as an absolute full-bleed layer with Cover behavior, autoplay, loop, muted audio, inline mobile playback, and hidden controls. Video focal positions: - Desktop: approximately 50% horizontal / 50% vertical - Tablet: approximately 52% / 50% - Phone: approximately 56% / 50% Add a neutral #D9D8D1 background behind the video for its loading state. ### Hero overlays Place these above the video and below all content: 1. Radial warm-white wash: - Desktop/Tablet: ellipse about 58% wide and 46% tall - Center at 50% horizontal and 42% vertical - Approximately 62% warm white at the center - Approximately 28% at the middle - Approximately 6% at the edges 2. Vertical warm-white gradient: - 30% opacity at the top - approximately 4% around 34% height - approximately 2% around 62% height - 42% opacity at the bottom 3. Very subtle monochrome grain at roughly 2.8% opacity with soft-light blending. If a native grain effect is unavailable, omit only this grain rather than introducing another texture. On Phone, widen the radial wash to approximately 85% of the viewport width and keep it centered around 40% viewport height. ### Navigation Place the navigation at the top inside the centered 1280px frame. Padding: - Desktop: 32px horizontal, 24px vertical - Tablet: 24px horizontal, 20px vertical - Phone: 18px on all sides Use a horizontal stack with centered vertical alignment and Space Between distribution. Brand: - Copy: SkyElite - Inter Semi Bold - Desktop/Tablet: 24px - Phone: 21px - Tracking: -0.04em - Color: Aviation Ink Desktop and Tablet navigation: - Start - Story - Rates - Benefits - FAQ Use a 32px horizontal gap, 13px Inter Medium, and Ink 82%. Start has a 16px-wide, 1px active hairline centered beneath it. On hover, links move to full Aviation Ink over approximately 180–200ms. Phone navigation: - Hide the horizontal links. - Show a 42px circular menu button with a 1px Ink 18% border and translucent Warm White fill. - Closed state uses a 19px Menu icon. - Open state uses a 19px X icon. - Create Closed and Open component variants. Open dropdown: - Positioned below the navigation row and aligned right - Width: viewport minus 36px - Warm White fill at 94% opacity - 18px background blur - 16px radius - 1px Ink 10% border - Shadow approximately 0 18px 50px rgba(18,27,36,0.14) - 10px vertical padding - Five stacked links, each 48px tall with 18px horizontal padding Animate the dropdown between variants using opacity, 8px vertical movement, and scale from 0.98 to 1 over about 300ms. Selecting a link closes it. ### Main hero content The middle hero region fills the space between the navigation and information rail. Center the copy horizontally and vertically within this filled middle region, then position its visual center above the viewport midpoint: - Desktop: about 42% from the top of the viewport - Tablet: about 42–43% - Phone: about 40% Maximum content widths: - Desktop: 1040px - Tablet: 760px - Phone: 355px Eyebrow: PRIVATE JETS / MEMBERSHIP 001 - 11px Desktop/Tablet - 10px Phone - Inter Semi Bold - Uppercase - Tracking: 0.18em - Ink at 66% - Bottom spacing: 18px Desktop/Tablet, 14px Phone Headline consists of two separate text layers: Premium. Accessible. Both lines: - Inter Regular - Line height: 0.82 - Tracking: -0.075em Responsive sizes: - Desktop: 124px - Tablet: 86px - Phone: 58px Premium. uses Ink at 46%. Accessible. uses full Aviation Ink. Pull the second line upward: - Desktop: 13px overlap - Tablet: 9px overlap - Phone: 5px overlap Supporting copy: Your dedication deserves recognition. - Desktop: 18px - Tablet: 17px - Phone: 15px - Line height: 1.4 - Ink at 70% - Maximum width: 560px - Top spacing: 28px Desktop/Tablet, 22px Phone Actions: Create one reusable pill-button component with Primary and Secondary variants, plus Default, Hover, and Pressed states. Shared sizing: - Desktop/Tablet height: 50px - Phone height: 48px - Horizontal padding: 24px Desktop/Tablet, 20px Phone - Inter Medium, 14px - Full radius - 10px gap between buttons - 24px top spacing Discover: - Links to Story - Warm White 58% fill - 1px Ink 16% border - Subtle background blur - Aviation Ink text - Hover fill becomes approximately 78% opaque Book Now: - Links to mailto:concierge@skyelite.example - Aviation Ink fill - White text - Hover fill: #1A2229 - Hover scale: 1.015 - Pressed scale: 0.98 On Phone, keep both buttons on one row and let them share the available width equally. ### Bottom information rail Keep this rail as a separate bottom sibling, not part of the hero-copy group. Use the same 1280px centered width and responsive side padding. Add a 1px Ink 20% top border. Create three equal-width items: 1. 01 — ON-DEMAND CHARTER 2. 02 — GLOBAL ROUTES 3. 03 — PERSONAL CONCIERGE Rail heights: - Desktop: 68px - Tablet: 60px - Phone: 58px Desktop/Tablet: - Three equal columns - Subtle vertical dividers - Index and label aligned horizontally Phone: - Keep all three items in one row - Remove vertical dividers - Labels may wrap to two lines Index: 9–10px, Ink at 50%. Label: 8px Phone, 11px Desktop, uppercase Inter Semi Bold, line height 1.2, Ink at 78%. ## 2. Story manifesto Section background: Aviation Ink. Text: Warm White. Section padding: - Desktop: 160px vertical - Tablet: 128px vertical - Phone: 96px vertical Add a section kicker across the 1280px frame: - Left: 01 / STORY - Right: PRIVATE AVIATION, RECONSIDERED - 1px White 22% top border - 14px top padding - 10px uppercase tracking - White at 52% Main headline: The only luxury that cannot be replaced is time. - Inter Regular - Desktop maximum width: 1080px - Desktop size: up to 142px - Tablet: fluid reduction - Phone: 58px - Line height: 0.84 - Tracking: -0.08em - Top spacing: 80px Set only time. in Warm White at 38%; all other words use full Warm White. Decorative orbit: - Position absolutely on the right - Desktop: top 15%, right -15vw, width up to 760px or 52vw - Phone: top 24%, right -42vw, width 92vw - Three concentric circular 1px rings using White at 12–16% - Add tiny orbit copy: TIME / RETURNED - Rotate the entire orbit continuously over 28 seconds, linear Below the headline, add a two-part editorial row with a White 22% top border: Left utility statement: NOT A LOUDER WAY TO TRAVEL. A MORE CONSIDERED RELATIONSHIP WITH DISTANCE. - Maximum width: 33 characters - 13px uppercase - Line height: 1.6 - Tracking: 0.12em - White at 52% Right body statement: SkyElite removes the timetable from the center of the journey. The destination, the reason, and the people travelling become the starting point instead. - Desktop: 32px - Phone: 22px - Line height: 1.35 - Tracking: -0.035em - Maximum width: 680px Desktop layout uses a 12-column grid: - Left copy spans 3 columns - Right copy spans 7 columns beginning at column 6 Phone stacks the two paragraphs vertically. Finish with three equal-width statement blocks: 1. No shared schedule 2. No fixed route 3. No fragmented contact Each block: - Approximately 190px high Desktop, 150px Phone - White 22% top and bottom hairlines - Small index at the top - 28px statement near the bottom Desktop uses three columns with vertical dividers. Phone uses one stacked column. ## 3. Journey process Background: #ECEBE5. Section vertical padding: - Desktop: 160px - Tablet: 128px - Phone: 96px Desktop layout uses a centered 1280px, 12-column grid: - Left introduction spans 4 columns - Right card stack spans 7 columns beginning at column 6 - 32px main grid gap The left introduction remains sticky near 40px from the top while the three cards pass beside it. Kicker: - Left: 02 / JOURNEY - Right: ONE CONTINUOUS CONTACT - Ink 22% top border - Ink at 54% Heading: From request to runway. - Desktop: up to 94px - Phone: 52px - Maximum width: 8 characters - Line height: 0.86 - Tracking: -0.075em - 48px top spacing Supporting copy: The service is designed as one calm sequence. The complexity stays behind the interface. - 15px - Line height: 1.6 - Ink at 62% - Maximum width: 34 characters - 32px top spacing Create three process cards in a vertical stack with 20px gaps. All three cards must have exactly the same width and left alignment. Do not offset or narrow the middle card. Card sizing: - Desktop minimum height: 440px - Phone minimum height: 360px - Desktop radius: 30px - Phone radius: 24px - Padding: fluid from 24px to 48px - 1px Ink 16% border - Vertical layout with the index at the top and headline/body at the bottom Card 01: - Background: #F5F4EF - Index: 01 / 03 - Heading: Tell us where. - Body: Share the route, timing, guest count, and the details that matter. One concise request starts the journey. Card 02: - Background: #D9DAD6 - Index: 02 / 03 - Heading: We shape the flight. - Body: We align aircraft, airport, crew, and ground requirements into one considered itinerary. Card 03: - Background: Aviation Ink - Warm White text - Index: 03 / 03 - Heading: You simply move. - Body: A personal contact stays with the journey from first confirmation to arrival. Each card has a small 14px outlined circle in the upper-right. Card heading: - Desktop: 58px - Phone: 38px - Line height: 0.9 - Tracking: -0.065em Card body: - 14–15px - Line height: 1.65 - Maximum width: 44 characters ## 4. Rates and route-planning console Section background: Warm White. Use the same 1280px centered frame and section padding. Kicker: - Left: 03 / RATES - Right: CLARITY BEFORE COMMITMENT Heading: A rate should explain itself. - Up to 112px Desktop - 54px Phone - Maximum width: 9 characters - Line height: 0.84 - Tracking: -0.08em Supporting copy: No invented headline price. Every journey is quoted against the aircraft and operating reality behind it. - 15px - Line height: 1.6 - Ink at 62% - Maximum width: 38 characters Desktop heading layout: - Heading spans 8 of 12 columns - Supporting copy spans 3 columns aligned on the right Phone stacks them. ### Dark route console Place the console 80–112px below the section introduction. Surface: - Aviation Ink fill - Warm White text - Desktop radius: 36px - Phone radius: 28px - Clipped overflow Desktop console uses a 12-column grid: - Route controls: 7 columns - Quote explanation: 5 columns - 1px White 18% vertical divider Phone stacks the two panels with a horizontal divider. Route-panel padding: - Desktop: 48px - Tablet: 40px - Phone: 24px Top metadata: - Left: SAMPLE ROUTE - Right: active route code - 10px uppercase tracking - White at 46% Route selector options: - PRG / LON - PAR / NCE - NYC / MIA Create a segmented pill component with selected and unselected variants. Selected: - Warm White fill - Aviation Ink text - Warm White border Unselected: - Transparent fill - White 22% border - White at 68% Route display: - Three-column horizontal composition: From / connecting line / To - Left city is left-aligned - Right city is right-aligned - City names range from 30px Phone to 68px Desktop - Line height: 1 - Tracking: -0.065em - Connecting line has a 1px White 26% rule and a centered 7px outlined point Route mappings: - PRG / LON → Prague / London - PAR / NCE → Paris / Nice - NYC / MIA → New York / Miami Passenger control: - 1px White 18% top border - Label: GUESTS - Default display: 4 passengers - Two 40px circular minus/plus controls - 1px White 24% border - Minimum: 1 - Maximum: 14 Quote panel: - Label: PRIVATE QUOTE - Heading: Built around the actual journey. - Heading: 52px Desktop, 38px Phone - Line height: 0.94 - Tracking: -0.06em - Body: Aircraft, crew, airport, and positioning are considered together before a rate is confirmed. CTA: - Copy: Request this route - Height: 54px - Full-radius Warm White fill - Aviation Ink text - Arrow-up-right icon - Distributed text/icon alignment For the exact route switching, passenger count, and dynamically generated mailto subject/body, create one self-contained route-planner code component only if the current Framer Agent supports code-component creation. It must expose editable properties for the three route pairs, default passenger count, minimum, maximum, and destination email. If code-component creation is unavailable, build the complete visual console natively using three route variants, show the default count of 4, preserve the button visuals, and report that the counter and dynamic mailto remain a visual approximation. ### Rate factors Below the console, create four equal-width cells: 1. Aircraft class — Cabin, range and baggage requirements 2. Flight time — The route and operating time 3. Airports — Handling, access and local requirements 4. Positioning — Where the right aircraft begins its journey Desktop: - Four columns - Minimum height: 230px - Thin Ink hairlines between cells Tablet: - Two columns Phone: - One column - Minimum height: 190px Each cell contains a small index at the top, 20px title near the lower area, and 13px supporting copy beneath it. ## 5. Benefits grid Background: #D8D8D2. Use the same section padding and 1280px content frame. Kicker: - Left: 04 / BENEFITS - Right: THE QUIET ADVANTAGES Heading: More control. Less friction. - Up to 108px Desktop - 54px Phone - Maximum width: 9 characters - Line height: 0.84 - Tracking: -0.08em Supporting copy: The premium is not just the cabin. It is everything the journey no longer asks you to manage. - 14px - Line height: 1.6 - Ink at 58% - Maximum width: 34 characters ### Asymmetric Desktop grid Use a 12-column, two-row grid with 14px gaps. Each row is at least 330px. Card positions: - Card 01: columns 1–8, row 1 - Card 02: columns 9–12, spanning rows 1 and 2 - Card 03: columns 1–4, row 2 - Card 04: columns 5–8, row 2 Tablet uses two equal columns. Phone uses one vertical column. All cards: - 1px Ink 14% border - Desktop radius: 28px - Phone radius: 24px - Padding: 24–42px - Vertical layout with index at the top and content at the bottom - Minimum height: 330px Desktop, 310px Phone Card 01: - Background: #ECEBE5 - Heading: Your schedule remains yours. - Body: Departure is arranged around the reason you are travelling—not a published timetable. Card 02: - Background: #BFC1BD - Heading: Closer to the destination. - Body: A wider airport network can reduce the distance between landing and arrival. Card 03: - Background: #ECEBE5 - Heading: One point of contact. - Body: The journey is coordinated through one personal channel from request to return. Card 04: - Background: Aviation Ink - Warm White text - Heading: Privacy, by design. - Body: Fewer transitions, controlled access, and space to work or switch off in transit. Card headings: - Fluid from 31px Phone to 56px Desktop - Maximum width: 12 characters - Line height: 0.96 - Tracking: -0.06em Body: - 14px - Line height: 1.65 - Maximum width: 36 characters ## 6. FAQ Background: Warm White. Desktop uses a 12-column grid: - Left introduction spans 4 columns - Accordion spans 7 columns beginning at column 6 Phone stacks the introduction above the accordion with a 64px gap. Kicker: - Left: 05 / FAQ - Right: BEFORE DEPARTURE Heading: Clear answers. No theatre. - Up to 92px Desktop - 52px Phone - Maximum width: 7 characters - Line height: 0.86 - Tracking: -0.075em Create a reusable FAQ-item component with Closed and Open variants. Each item: - Ink 24% bottom border - 27–36px vertical padding - Question aligned left - 40px circular plus/minus control aligned right - Question: 19px Phone, 25px Desktop - Tracking: -0.035em Open-state answer: - Maximum width: 62 characters - 14px Phone, 15px Desktop - Line height: 1.7 - Ink at 60% - 32–40px bottom padding Animate the content frame height and opacity between variants over approximately 500ms. Only one item should be open at a time. The first item is open by default. Questions and answers: 1. How quickly can a journey be arranged? Timing depends on route, aircraft availability, airport requirements, and crew positioning. Send the request as early as possible; urgent journeys can still be reviewed individually. 2. Is SkyElite a membership or pay-per-flight service? This concept supports both direct charter requests and a more continuous concierge relationship. The final commercial model can be connected to the appropriate enquiry flow before launch. 3. What determines the final rate? The quote is shaped by aircraft class, operating time, airport and handling requirements, and where the selected aircraft must position from. 4. Can the ground journey be coordinated too? Yes. Ground transfers and arrival requirements can be added to the same journey brief so the experience is considered beyond the flight itself. ## 7. Conversion finale Background: Aviation Ink. Text: Warm White. Section padding: - Desktop: 160px top, 40px bottom - Tablet: 128px top, 40px bottom - Phone: 96px top, 32px bottom Add two absolute decorative outlined rings behind the content: Desktop: - Large ring: up to 900px or 62vw, top -12vw, right -12vw - Small ring: up to 420px or 28vw, top 8vw, right 8vw Phone: - Large ring: 120vw, top 16%, right -48vw - Small ring: 62vw, top 28%, right -8vw Use 1px White 12% borders. Kicker: - Left: READY / WHEN YOU ARE - Right: SKYELITE PRIVATE AVIATION Main heading: Move when it matters. - Desktop: up to 158px - Phone: 66px - Maximum width: 8 characters - Line height: 0.78 - Tracking: -0.09em Desktop uses a 12-column row: - Heading spans 9 columns - Circular CTA spans 3 columns and aligns to the lower-right Phone stacks the CTA beneath the headline and aligns it right. Circular CTA: - Copy: BEGIN A JOURNEY - Mail link: concierge@skyelite.example - Desktop width: 210px - Phone width: 170px - 1px White 44% border - Arrow-up-right icon - Hover: rotate 8 degrees, fill Warm White, switch text to Aviation Ink - Transition: approximately 500ms Footer: - 1px White 22% top border - Desktop top spacing: 160px - Phone top spacing: 112px - 24px top padding - Three columns Desktop, one column Phone - 10px uppercase tracking - White at 52% Footer copy: - SkyElite® / 2026 - Global private aviation - Back to start ↑ ## Motion Hero entrance sequence: 1. Navigation fades in over 700ms. 2. Eyebrow fades in and rises 12px over 700ms with a 150ms delay. 3. Premium. fades in and rises 26px over 1000ms with a 220ms delay. 4. Accessible. fades in and rises 26px over 1000ms with a 320ms delay. 5. Supporting copy and buttons fade in and rise 14px over 700ms with a 480ms delay. 6. Information rail fades in over 700ms with a 650ms delay. Use easing close to cubic-bezier(0.16, 1, 0.3, 1). Animate the hero video from scale 1.035 to scale 1 over 8 seconds with the same easing. For every major section heading, body statement, Journey card, Benefits card, rate-factor row, FAQ block, and finale CTA: - Trigger when the element enters the viewport - Start at opacity 0 and 42px lower - Animate to opacity 1 and final position - Duration: 900ms - Easing close to cubic-bezier(0.16, 1, 0.3, 1) - Play once Use Framer in-view appear effects for these reveals. Honor reduced-motion preferences by removing continuous orbit rotation, video scaling, and entrance offsets while keeping all content visible. ## Components to create Create reusable components for: - Primary/Secondary pill button - Desktop navigation link - Mobile menu with Closed/Open variants - Section kicker - Journey card - Route option pill with Selected/Unselected variants - Benefit card - FAQ item with Closed/Open variants - Circular finale CTA Do not move the fixed editorial groups into CMS. They are a small, deliberate, page-specific composition. ## Final verification Verify the following at Desktop 1440px, Tablet 810px, and Phone 390px: 1. The supplied video plays full-bleed and retains the aircraft and engine as intentional focal points. 2. Hero content stays above the viewport center and the information rail remains at the bottom. 3. The Phone hero has no collision between navigation, headline, actions, and rail at 680px minimum height. 4. All three Journey cards have equal width and identical left alignment. 5. The route console stacks cleanly on Phone without horizontal overflow. 6. The Benefits grid uses the exact 12-column arrangement on Desktop and one column on Phone. 7. The mobile navigation and FAQ variants open and close correctly. 8. The page has no horizontal overflow at 390px. 9. All specified copy, punctuation, colors, and section order are preserved. 10. Any limitation in video hosting, dynamic route logic, or mailto generation is reported explicitly rather than silently substituted. Do not add testimonials, logos, fleet cards, statistics, booking forms, stock images, gold accents, or new sections.