/*
 * ARIADNE by Ozymind (travel.ozymind.com).
 * Same system as ozymind.com/atropos: white ground, hairline rules, square
 * corners, no shadows, a mono index rail per section. Orange text uses
 * --oz-text (AA on white); #eb7546 is kept for fills, rules and the thread.
 * The CSP forbids inline styles and scripts, so everything lives here.
 *
 * Grid: two vertical axes. The wrap edge (rail numbers, hero, top bar) and
 * the content column (92px rail + 48px gap). Every block inside a section
 * runs the full content column; only running text is capped at 720px.
 */

/* ── Tokens (mirrors ozymind.com css/style.css) ────────────── */
:root {
    --oz: #eb7546;
    --oz-text: #a8481a; /* AA orange for text on white (5.4:1+) */
    --t1: #191e23;
    --t2: #4a5260;
    --t3: #6b7280;
    --border: rgba(25,30,35,.08);
    --border-strong: rgba(25,30,35,.14);
    --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --top-h: 68px;
    --measure: 720px;
}

/* ── Base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--top-h) + 16px); -webkit-text-size-adjust: 100%; }
body {
    margin: 0; background: #ffffff; color: var(--t1);
    font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px; line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
h1, h2, h3, h4 { margin: 0; color: var(--t1); }
p { margin: 0 0 16px; color: var(--t2); }
a { color: var(--oz-text); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--t1); }
:focus-visible { outline: 2px solid var(--oz-text); outline-offset: 2px; }
::selection { background: var(--oz); color: var(--t1); }
main:focus { outline: none; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

.skip-link {
    position: absolute; left: 8px; top: -60px; z-index: 100;
    background: #ffffff; color: var(--oz-text);
    padding: 10px 18px; border: 1px solid var(--border-strong);
    font-size: 14px; font-weight: 600;
}
.skip-link:focus { top: 8px; }

/* Prose links are underlined so they never rely on colour alone (WCAG 1.4.1) */
.after a, .cta-alt a, .faq p a { border-bottom: 1px solid currentColor; }

/* Line icons (Lucide, ISC): stroke follows currentColor */
.ico, .agent-ico { flex: 0 0 auto; display: block; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center;
    font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .02em; line-height: 1;
    padding: 16px 26px; border: 1px solid var(--oz); border-radius: 2px;
    background: var(--oz); color: var(--t1); /* dark ink on orange: 5.7:1 */
    transition: background .2s ease, color .2s ease;
}
.btn:hover, .btn:focus-visible { background: #ffffff; color: var(--oz-text); }
.btn-sm { padding: 10px 16px; font-size: 13.5px; }
.link {
    font-size: 15px; font-weight: 600; color: var(--oz-text);
    border-bottom: 1px solid currentColor; padding-bottom: 2px;
}

/* ── Top bar ───────────────────────────────────────────────── */
.top {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.94);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}
.top-in { display: flex; align-items: center; gap: 32px; height: var(--top-h); }
.brand { display: flex; align-items: center; gap: 14px; color: var(--t1); flex: 0 0 auto; }
.brand img { height: 26px; width: auto; }
.brand-sep { width: 1px; height: 22px; background: var(--border-strong); }
.brand-name { font-size: 13px; font-weight: 900; letter-spacing: .32em; color: var(--t1); }
.top-nav { display: flex; gap: 28px; margin-left: auto; }
.top-nav a { font-size: 14px; font-weight: 500; color: var(--t2); }
.top-nav a:hover { color: var(--oz-text); }

/* ── Hero: text column left, photograph right, proof row across ── */
.hero { padding: 88px 0 64px; border-bottom: 1px solid var(--border); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; column-gap: 72px; }
.hero h1 { margin-bottom: 40px; }
.hero-name { display: block; font-size: 88px; font-weight: 900; line-height: 1; letter-spacing: .06em; }
.hero-sub { display: block; font-size: 20px; font-weight: 400; line-height: 1.4; color: var(--t2); margin-top: 16px; }
.hero-lead { font-size: 18px; line-height: 1.7; max-width: var(--measure); margin: 0 0 34px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }

/* The photograph fills the height of the text column, square corners */
.hero-media { position: relative; margin: 0; min-height: 440px; background: #eef0f2; overflow: hidden; }
.hero-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The signature: one thread, four stops, the last one priced */
.thread {
    list-style: none; padding: 0; margin: 0 0 40px;
    display: grid; grid-template-columns: repeat(4, 1fr);
    max-width: 640px; position: relative;
}
.thread::before {
    content: ""; position: absolute; top: 7px; left: 8px; right: calc(25% - 8px);
    height: 2px; background: var(--oz);
}
.thread li {
    position: relative; padding: 32px 12px 0 0;
    font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: var(--t1); line-height: 1.3;
}
.thread li::before {
    content: ""; position: absolute; top: 0; left: 0;
    width: 16px; height: 16px; border-radius: 50%;
    background: #ffffff; border: 2px solid var(--t1);
}
.thread li:last-child::before { background: var(--oz); border-color: var(--oz); }
.thread-step {
    display: block; margin-top: 6px;
    font-family: var(--mono); font-size: 11.5px; font-weight: 400;
    letter-spacing: 0; text-transform: none; color: var(--t3);
}

.proof {
    grid-column: 1 / -1;
    list-style: none; padding: 18px 0 0; margin: 56px 0 0;
    display: flex; flex-wrap: wrap;
    border-top: 1px solid var(--border);
}
.proof li { font-size: 13.5px; color: var(--t3); padding: 0 20px; border-left: 1px solid var(--border-strong); line-height: 1.4; }
.proof li:first-child { padding-left: 0; border-left: 0; }

/* ── Sections: mono index rail left, content right ─────────── */
.sec { padding: 88px 0; border-bottom: 1px solid var(--border); }
.sec-grid { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 48px; }
.no {
    font-family: var(--mono); font-size: 13px; letter-spacing: 1px; color: var(--t3);
    position: relative; padding-top: 16px; align-self: start;
}
.no::before { content: ""; position: absolute; top: 0; left: 0; width: 30px; height: 2px; background: var(--t1); }
.sec h2 { font-size: 34px; font-weight: 900; line-height: 1.15; letter-spacing: -.3px; margin: 0 0 16px; }
.sec-body > p { max-width: var(--measure); }
.intro { font-size: 18px; line-height: 1.7; margin: 0 0 40px; }
.h3 { font-size: 20px; font-weight: 900; margin: 60px 0 18px; }
.after { margin: 28px 0 0; }

/* ── Stats: open, hairline-divided ─────────────────────────── */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 34px; }
.stat { padding: 4px 36px; border-left: 1px solid var(--border); }
.stat:first-child { padding-left: 0; border-left: 0; }
.stat-num { display: block; font-size: 52px; font-weight: 900; line-height: 1.05; color: var(--t1); font-variant-numeric: tabular-nums; }
.stat-label { display: block; font-size: 15px; font-weight: 500; line-height: 1.5; color: var(--t1); margin: 12px 0 6px; }
.stat-src { display: block; font-size: 12.5px; line-height: 1.5; color: var(--t3); }

/* ── The four agents ───────────────────────────────────────────
   Subgrid rows put the icon, title, text and "Your designer" line of every
   card on shared lines, whatever the length of each description. Browsers
   without subgrid fall back to cards that simply stack their own rows. */
.agents {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 44px 32px;
}
.agent {
    display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
    border-top: 2px solid var(--t1); padding-top: 20px;
}
.agent:last-child { border-top-color: var(--oz); }
.agent-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.agent-ico { width: 28px; height: 28px; color: var(--t1); }
.agent:last-child .agent-ico { color: var(--oz-text); }
.agent-no { font-family: var(--mono); font-size: 12px; color: var(--t3); }
.agent h3 { font-size: 22px; font-weight: 900; margin: 0 0 12px; }
.agent p { font-size: 14.5px; line-height: 1.7; margin: 0 0 18px; }
.agent .agent-you {
    align-self: start; margin: 0; padding-top: 12px; border-top: 1px solid var(--border);
    font-size: 13.5px; line-height: 1.6; color: var(--t1);
}
.agent-you strong { color: var(--oz-text); font-weight: 700; }

/* ── The rule ──────────────────────────────────────────────── */
.rule {
    border-top: 2px solid var(--t1); border-bottom: 1px solid var(--border);
    padding: 28px 0 26px; margin: 28px 0 40px;
}
.rule-label {
    display: block; margin-bottom: 14px;
    font-size: 11px; font-weight: 700; letter-spacing: 2.2px; text-transform: uppercase; color: var(--oz-text);
}
.rule-law { font-size: 34px; font-weight: 300; line-height: 1.3; color: var(--t1); margin: 0 0 14px; max-width: 820px; text-wrap: balance; }
.rule-note { font-size: 15.5px; line-height: 1.65; margin: 0; max-width: var(--measure); }

/* ── Ruled lists ───────────────────────────────────────────── */
.ruled { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 56px; }
.ruled li {
    position: relative; border-top: 1px solid var(--border);
    padding: 16px 0 16px 28px;
    font-size: 15.5px; line-height: 1.6; color: var(--t2);
}
.ruled li::before { content: ""; position: absolute; left: 2px; top: 28px; width: 12px; height: 2px; background: var(--oz); }
.ruled li strong { color: var(--t1); }
.ruled-1 { grid-template-columns: 1fr; }
.refusals li::before {
    content: "\2717"; width: auto; height: auto; background: none;
    top: 15px; font-size: 14px; font-weight: 900; color: var(--oz-text);
}
/* Guardrails carry an icon in place of the dash */
.ruled.icons li { padding-left: 38px; }
.ruled.icons li::before { display: none; }
.ruled.icons .ico { position: absolute; left: 0; top: 17px; width: 22px; height: 22px; color: var(--oz-text); }

.two { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.col-title { font-size: 15px; font-weight: 700; margin: 0 0 12px; }

/* ── Delivery timeline ─────────────────────────────────────── */
.timeline { list-style: none; padding: 0; margin: 0; border-bottom: 1px solid var(--border); }
.timeline li {
    display: grid; grid-template-columns: 140px 200px minmax(0, 1fr); gap: 24px;
    align-items: baseline; border-top: 1px solid var(--border); padding: 20px 0;
}
.tl-when { font-family: var(--mono); font-size: 13px; color: var(--t3); }
.tl-what { font-size: 17px; font-weight: 700; color: var(--t1); }
.timeline .tl-detail { font-size: 15px; line-height: 1.65; margin: 0; }
.timeline li:last-child .tl-when { color: var(--oz-text); }

.terms { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
.term { border-top: 2px solid var(--t1); padding-top: 18px; }
.term h4 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.term p { font-size: 14.5px; line-height: 1.65; margin: 0; }

.next { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.next li { border: 1px solid var(--border-strong); border-radius: 2px; padding: 8px 14px; font-size: 14px; line-height: 1.4; color: var(--t1); }

/* ── Measure table ─────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-top: 2px solid var(--t1); }
.measure { width: 100%; min-width: 620px; border-collapse: collapse; font-size: 15px; }
.measure th, .measure td { text-align: left; vertical-align: top; padding: 15px 20px 15px 0; border-bottom: 1px solid var(--border); }
.measure thead th { font-size: 13px; font-weight: 700; color: var(--t3); }
.measure tbody th { font-weight: 500; color: var(--t1); }
.measure td { color: var(--t2); }

/* ── FAQ: full content width, answers at reading measure ───── */
.faq { border-top: 1px solid var(--border); }
.faq details { border-bottom: 1px solid var(--border); }
.faq summary {
    list-style: none; cursor: pointer; position: relative;
    padding: 20px 44px 20px 0; font-size: 17px; font-weight: 500; color: var(--t1);
    transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 6px; top: 15px; font-size: 24px; font-weight: 300; color: var(--oz-text); }
.faq details[open] summary::after { content: "\2212"; }
.faq summary:hover { color: var(--oz-text); }
.faq details p { font-size: 15.5px; max-width: var(--measure); margin: 0 0 22px; }

/* ── Closing ───────────────────────────────────────────────── */
.closing { padding: 88px 0 72px; border-bottom: 1px solid var(--border); }
.cta-band { border: 1px solid var(--border-strong); padding: 68px 48px; text-align: center; }
.cta-line { font-size: 25px; font-weight: 500; line-height: 1.45; color: var(--t1); max-width: 720px; margin: 0 auto 30px; text-wrap: balance; }
.cta-alt { font-size: 14.5px; color: var(--t3); margin: 22px 0 0; }
.myth { max-width: 640px; margin: 48px auto 0; text-align: center; font-size: 15px; line-height: 1.75; color: var(--t3); }
.myth em { color: var(--t1); }

/* ── Footer ────────────────────────────────────────────────── */
.foot { padding: 48px 0 56px; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 24px; }
.foot-logo img { height: 24px; width: auto; }
.foot-tag { font-size: 14px; margin: 12px 0 0; }
.foot-links { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 14px; }
.foot-links a { color: var(--t2); }
.foot-links a:hover { color: var(--oz-text); }
.foot-legal { width: 100%; margin: 8px 0 0; padding-top: 20px; border-top: 1px solid var(--border); font-size: 12.5px; color: var(--t3); }
.foot-legal a { color: var(--t3); }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .hero-grid { grid-template-columns: minmax(0, 1fr); }
    .hero-media { min-height: 0; aspect-ratio: 16 / 9; margin-top: 48px; }
    .sec-grid { grid-template-columns: 64px minmax(0, 1fr); gap: 28px; }
    .agents { grid-template-columns: 1fr 1fr; }
    .terms { grid-template-columns: 1fr 1fr; gap: 36px 32px; }
    .timeline li { grid-template-columns: 130px minmax(0, 1fr); row-gap: 6px; }
    .timeline .tl-detail { grid-column: 2; }
}
@media (max-width: 767px) {
    :root { --top-h: 60px; }
    .top-nav { display: none; }
    .top-in { gap: 16px; }
    .top-cta { margin-left: auto; }
    .brand { gap: 10px; }
    .brand img { height: 20px; }
    .brand-sep { height: 18px; }
    .brand-name { font-size: 11.5px; letter-spacing: .24em; }
    .hero { padding: 56px 0 52px; }
    .hero h1 { margin-bottom: 36px; }
    .hero-name { font-size: 50px; }
    .hero-sub { font-size: 17px; }
    .hero-lead { font-size: 17px; }
    .hero-media { aspect-ratio: 4 / 3; margin-top: 40px; }
    .thread li { font-size: 11px; letter-spacing: .04em; padding-right: 6px; }
    .thread-step { display: none; }
    .proof { flex-direction: column; gap: 6px; margin-top: 40px; }
    .proof li { padding: 0; border-left: 0; }
    .sec { padding: 60px 0; }
    .sec-grid { display: block; }
    .no { display: block; padding-top: 12px; margin-bottom: 14px; }
    .sec h2 { font-size: 27px; }
    .intro { font-size: 16.5px; margin-bottom: 32px; }
    .stats { grid-template-columns: 1fr; }
    .stat { padding: 18px 0; border-left: 0; border-top: 1px solid var(--border); }
    .stat:first-child { padding-top: 0; border-top: 0; }
    .stat-num { font-size: 42px; }
    .agents, .terms, .ruled, .two { grid-template-columns: 1fr; }
    .two { gap: 32px; }
    .timeline li { grid-template-columns: 1fr; row-gap: 4px; }
    .timeline .tl-detail { grid-column: auto; }
    .rule-law { font-size: 25px; }
    /* Measure table: stack each row, label the values from data-label */
    .table-wrap { overflow-x: visible; }
    .measure { min-width: 0; }
    .measure thead { display: none; }
    .measure tr { display: block; padding: 14px 0; border-bottom: 1px solid var(--border); }
    .measure th, .measure td { display: block; padding: 2px 0; border: 0; }
    .measure tbody th { margin-bottom: 4px; }
    .measure td::before { content: attr(data-label) ": "; color: var(--t3); }
    .closing { padding: 60px 0 52px; }
    .cta-band { padding: 40px 22px; }
    .cta-line { font-size: 19px; }
    .foot-in { flex-direction: column; }
}
/* Small phones: keep the Ozymind mark and the CTA; the hero already says ARIADNE */
@media (max-width: 400px) {
    .brand-sep, .brand-name { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    a, .btn, .faq summary { transition: none; }
}