/* Carreh Visas · visas.carreh.com
   Type: Source Serif 4 for headlines (the voice of an official document), Geist for everything
   you read and touch (the Carreh family's interface face). One scale, one grid, tabular figures
   for money. Red is for action only. */
:root {
  --ink: #1D1416;
  --ink-2: #4A3B3E;
  --ink-3: #7A686B;
  --line: #E9DFDF;
  --line-2: #F2ECEC;
  --paper: #FCFAF8;
  --card: #FFFFFF;
  --red: #B8192F;
  --red-press: #94111F;
  --red-soft: #FBEDEE;
  --wine: #261015;
  --wine-2: #3A1820;
  --rose: #E9A3AB;
  --ok: #1D6B4A;
  --warn: #8A5A0B;
  --bad: #A3272F;
  --serif: 'Source Serif 4', 'Iowan Old Style', Georgia, serif;
  --sans: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --r: 14px;
  --gut: clamp(20px, 4vw, 40px);
  --max: 1200px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
img { display: block; }
a { color: var(--red); text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
.serif { font-family: var(--serif); }
.num { font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Header */
.top { position: sticky; top: 0; z-index: 20; background: rgba(252, 250, 248, 0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.top.scrolled { border-bottom-color: var(--line); }
.top .wrap { display: flex; align-items: center; gap: 32px; height: 68px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); flex: none; }
.brand svg { width: 34px; height: 31px; }
.brand b { font: 700 21px/1 var(--sans); letter-spacing: -0.04em; }
.brand span { display: block; font: 600 9px/1 var(--sans); letter-spacing: 0.22em; color: #7A1424; margin-top: 4px; }
.nav { display: flex; gap: 28px; margin-left: auto; }
.nav a { color: var(--ink-2); text-decoration: none; font-size: 15px; font-weight: 500; }
.nav a:hover { color: var(--ink); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: 12px; border: 0; background: var(--red); color: #fff; font: 600 16px/1 var(--sans); text-decoration: none; cursor: pointer; white-space: nowrap; transition: background .15s, transform .15s; }
.btn:hover { background: var(--red-press); }
.btn:active { transform: translateY(1px); }
.btn.small { min-height: 40px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1px var(--ink-3); background: #fff; }
.btn.block { width: 100%; }
@media (max-width: 760px) { .nav { display: none; } .top .wrap { justify-content: space-between; height: 60px; } }

/* Hero */
.hero { padding: clamp(40px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); grid-template-areas: 'copy route' 'proof route'; column-gap: clamp(32px, 5vw, 72px); row-gap: 0; align-items: start; }
.hero-copy { grid-area: copy; } .route { grid-area: route; } .proof { grid-area: proof; }
.hero h1 { margin: 0; font: 600 clamp(42px, 6.4vw, 78px)/1.02 var(--serif); letter-spacing: -0.022em; text-wrap: balance; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--red); }
.lede { margin: 24px 0 0; font-size: clamp(17px, 1.6vw, 19px); line-height: 1.6; color: var(--ink-2); max-width: 34em; text-wrap: pretty; }
.proof { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 36px; border-top: 1px solid var(--line); }
.proof div { padding: 16px 16px 0 0; }
.proof div + div { padding-left: 16px; border-left: 1px solid var(--line); }
.proof b { display: block; font: 600 22px/1.15 var(--serif); }
.proof span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.45; color: var(--ink-3); }
@media (max-width: 960px) { .hero .wrap { grid-template-columns: 1fr; grid-template-areas: 'copy' 'route' 'proof'; row-gap: 32px; } .proof { margin-top: 8px; } }
@media (max-width: 420px) { .proof { grid-template-columns: 1fr; } .proof div + div { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 14px; } }

/* Route card */
.route { background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: clamp(20px, 3vw, 28px); box-shadow: 0 1px 0 rgba(29, 20, 22, .02), 0 20px 48px -28px rgba(38, 16, 21, .25); }
.route h2 { margin: 0 0 4px; font: 600 24px/1.2 var(--serif); }
.route .hint { margin: 0 0 20px; font-size: 15px; color: var(--ink-3); }
.field { display: block; margin-bottom: 12px; }
.field-hint { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.field > span { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 500; color: var(--ink-2); }
.pick { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 54px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; font: 500 17px/1.2 var(--sans); color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.pick:hover { border-color: #D5C6C7; }
.pick[aria-expanded="true"], .pick:focus-visible { border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); outline: none; }
.pick .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick .placeholder { color: var(--ink-3); font-weight: 400; }
.pick svg { flex: none; color: var(--ink-3); }
.flag { flex: none; width: 28px; height: 21px; border-radius: 3px; object-fit: cover; box-shadow: 0 0 0 1px rgba(29, 20, 22, .12); background: var(--line-2); }
.flag.lg { width: 36px; height: 27px; }
.route .btn { margin-top: 8px; }
.route .small-print { margin: 12px 0 0; font-size: 13.5px; color: var(--ink-3); text-align: center; }

/* Country sheet */
.sheet-back { position: fixed; inset: 0; z-index: 60; background: rgba(38, 16, 21, .38); display: none; }
.sheet-back.open { display: block; }
.sheet { position: fixed; z-index: 61; left: 50%; top: 50%; width: min(460px, calc(100vw - 32px)); height: min(620px, calc(100vh - 64px)); transform: translate(-50%, -50%); background: #fff; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(38, 16, 21, .45); display: none; flex-direction: column; overflow: hidden; }
.sheet.open { display: flex; }
.sheet header { padding: 18px 18px 12px; border-bottom: 1px solid var(--line-2); }
.sheet header div { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.sheet h3 { margin: 0; font: 600 19px/1.2 var(--serif); }
.sheet .close { width: 36px; height: 36px; border: 0; border-radius: 10px; background: var(--line-2); cursor: pointer; display: grid; place-items: center; color: var(--ink); }
.sheet input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid var(--line); border-radius: 11px; font: 400 16px var(--sans); color: var(--ink); background: var(--paper); }
.sheet input:focus { outline: none; border-color: var(--red); box-shadow: 0 0 0 3px var(--red-soft); background: #fff; }
.sheet ul { list-style: none; margin: 0; padding: 6px; overflow-y: auto; flex: 1; overscroll-behavior: contain; }
.sheet li { display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 10px; cursor: pointer; font-size: 16px; }
.sheet li[aria-selected="true"] { background: var(--red-soft); font-weight: 600; }
.sheet li.active { background: var(--line-2); }
.sheet li small { margin-left: auto; color: var(--ink-3); font-size: 13px; }
.sheet .group { padding: 12px 12px 6px; font-size: 13px; font-weight: 600; color: var(--ink-3); cursor: default; }
.sheet .empty { padding: 24px 12px; color: var(--ink-3); cursor: default; }
@media (max-width: 600px) {
  .sheet { left: 0; right: 0; top: auto; bottom: 0; width: 100%; height: 86vh; transform: none; border-radius: 20px 20px 0 0; }
}

/* Result */
.result { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 20px; display: none; }
.result.open { display: block; }
.steps { list-style: none; margin: 0; padding: 0; }
.steps li { display: flex; gap: 12px; align-items: flex-start; padding: 6px 0; font-size: 15px; color: var(--ink-3); opacity: 0; transform: translateY(4px); transition: opacity .3s, transform .3s, color .3s; }
.steps li.in { opacity: 1; transform: none; }
.steps li.done { color: var(--ink-2); }
.dot { flex: none; width: 18px; height: 18px; margin-top: 3px; border-radius: 50%; border: 2px solid var(--line); position: relative; }
.steps li.in .dot { border-color: var(--red); border-right-color: transparent; animation: spin .8s linear infinite; }
.steps li.done .dot { border-color: var(--ok); background: var(--ok); animation: none; }
.steps li.done .dot::after { content: ''; position: absolute; left: 4px; top: 1px; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
@keyframes spin { to { transform: rotate(360deg); } }
.verdict { display: none; }
.verdict.open { display: block; margin-top: 18px; animation: rise .35s ease both; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.verdict h3 { margin: 4px 0 8px; font: 600 26px/1.18 var(--serif); text-wrap: balance; }
.verdict p { margin: 0 0 14px; color: var(--ink-2); font-size: 16px; }
.facts { margin: 0 0 16px; padding: 0; list-style: none; border: 1px solid var(--line-2); border-radius: 14px; overflow: hidden; }
.facts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; padding: 12px 14px; font-size: 15px; line-height: 1.45; }
.facts li + li { border-top: 1px solid var(--line-2); }
.facts b { font-weight: 500; color: var(--ink-3); }
.docs { margin: 0 0 16px; padding: 0; list-style: none; counter-reset: d; }
.docs li { position: relative; padding: 8px 0 8px 32px; font-size: 15px; line-height: 1.45; border-bottom: 1px solid var(--line-2); counter-increment: d; }
.docs li::before { content: counter(d); position: absolute; left: 0; top: 8px; width: 22px; height: 22px; border-radius: 50%; background: var(--line-2); font: 600 12px/22px var(--sans); text-align: center; color: var(--ink-2); }
.docs li.added { background: linear-gradient(90deg, var(--red-soft), transparent); }
.source { margin: 12px 0 0; font-size: 13px; color: var(--ink-3); }
@media (max-width: 420px) { .facts li { grid-template-columns: 1fr; gap: 2px; } }

/* Sections */
section { scroll-margin-top: 80px; }
.band { padding: clamp(64px, 9vw, 120px) 0; }
.band.alt { background: #fff; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band.dark { background: var(--wine); color: #F7ECEE; }
.kicker { margin: 0 0 14px; font-size: 15px; font-weight: 500; color: var(--red); }
.dark .kicker { color: var(--rose); }
h2.title { margin: 0; font: 600 clamp(32px, 4.6vw, 54px)/1.06 var(--serif); letter-spacing: -0.018em; max-width: 23ch; text-wrap: balance; }
.intro { margin: 18px 0 0; font-size: 18px; color: var(--ink-2); max-width: 36em; text-wrap: pretty; }
.dark .intro { color: #D9BCC1; }

/* How it works */
.how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin-top: 56px; border-top: 1px solid var(--line); }
.how article { padding: 28px 28px 0 0; }
.how article + article { padding-left: 28px; border-left: 1px solid var(--line); }
.how .n { font: 500 15px/1 var(--serif); color: var(--red); }
.how h3 { margin: 14px 0 10px; font: 600 24px/1.2 var(--serif); }
.how p { margin: 0; color: var(--ink-2); font-size: 16px; }
@media (max-width: 860px) { .how { grid-template-columns: 1fr; } .how article + article { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); margin-top: 28px; } }

/* Live review */
.live { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.feed { background: var(--wine-2); border-radius: 22px; padding: clamp(16px, 2.5vw, 24px); display: flex; flex-direction: column; gap: 12px; min-height: 460px; }
.feed .head { display: flex; justify-content: space-between; align-items: center; font-size: 14px; color: #D9BCC1; padding: 2px 4px 6px; }
.feed .head b { color: #fff; font-weight: 600; }
.msg { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; background: #fff; color: var(--ink); border-radius: 14px; padding: 14px; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .4s; }
.msg.in { opacity: 1; transform: none; }
.msg .file { width: 40px; height: 48px; border-radius: 6px; background: var(--line-2); display: grid; place-items: center; font: 600 10px/1 var(--sans); color: var(--ink-3); }
.msg .fname { font-size: 14px; color: var(--ink-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .say { margin-top: 4px; font-size: 15px; line-height: 1.5; }
.msg .tag { display: inline-block; margin-top: 8px; font-size: 13px; font-weight: 600; }
.tag.ok { color: var(--ok); } .tag.warn { color: var(--warn); } .tag.bad { color: var(--bad); }
.feed .note { margin-top: auto; font-size: 13px; color: #B88F96; padding: 0 4px; }
.points { list-style: none; margin: 28px 0 0; padding: 0; }
.points li { padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.points b { display: block; font: 600 19px/1.3 var(--serif); color: #fff; }
.points span { display: block; margin-top: 4px; color: #D9BCC1; font-size: 16px; }
@media (max-width: 900px) { .live { grid-template-columns: 1fr; } .feed { min-height: 0; } }

/* Prices */
.prices { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); margin-top: 48px; align-items: start; }
.price-big { font: 600 clamp(56px, 8vw, 88px)/1 var(--serif); letter-spacing: -0.02em; }
.price-big small { font: 500 17px var(--sans); color: var(--ink-3); letter-spacing: 0; margin-left: 6px; }
.price-sub { margin: 10px 0 0; color: var(--ink-2); }
table.group { width: 100%; border-collapse: collapse; margin-top: 28px; font-size: 16px; }
table.group th { text-align: left; font-weight: 500; font-size: 14px; color: var(--ink-3); padding: 0 0 10px; border-bottom: 1px solid var(--line); }
table.group td { padding: 13px 0; border-bottom: 1px solid var(--line-2); }
table.group td:not(:first-child), table.group th:not(:first-child) { text-align: right; }
table.group tr.sel td { font-weight: 600; }
.terms-box { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: clamp(20px, 3vw, 28px); }
.terms-box h3 { margin: 0 0 6px; font: 600 21px/1.25 var(--serif); }
.terms-box dl { margin: 16px 0 0; }
.terms-box dt { font-weight: 600; font-size: 15.5px; margin-top: 14px; }
.terms-box dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 860px) { .prices { grid-template-columns: 1fr; } }

/* Honesty */
.honest { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: start; }
.honest > div:last-child p { margin: 0 0 14px; color: var(--ink-2); font-size: 17px; }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } }

/* Questions */
.qa { margin-top: 40px; border-top: 1px solid var(--line); }
.qa details { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 22px 0; font: 600 clamp(18px, 2vw, 21px)/1.35 var(--serif); }
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after { content: ''; flex: none; width: 12px; height: 12px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg) translateY(-3px); transition: transform .2s; }
.qa details[open] summary::after { transform: rotate(225deg) translateY(-3px); }
.qa .a { padding: 0 0 22px; color: var(--ink-2); max-width: 46em; }
.qa .a p { margin: 0 0 10px; }

/* Final call */
.cta { background: var(--red); color: #fff; border-radius: 24px; padding: clamp(32px, 5vw, 56px); display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px; align-items: center; }
.cta h2 { margin: 0; font: 600 clamp(28px, 3.6vw, 42px)/1.1 var(--serif); text-wrap: balance; }
.cta p { margin: 10px 0 0; color: #FFE1E4; }
.cta .btn { background: #fff; color: var(--red-press); }
.cta .btn:hover { background: #FFF2F3; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } .cta .btn { width: 100%; } }

/* Footer */
footer.foot { padding: 56px 0 64px; border-top: 1px solid var(--line); margin-top: clamp(64px, 9vw, 120px); font-size: 14.5px; color: var(--ink-3); }
.foot .wrap { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 28px; }
.foot h4 { margin: 0 0 12px; font: 600 14.5px var(--sans); color: var(--ink); }
.foot a { display: block; color: var(--ink-3); text-decoration: none; padding: 3px 0; }
.foot a:hover { color: var(--ink); }
.foot p { margin: 14px 0 0; line-height: 1.55; }
@media (max-width: 860px) { .foot .wrap { grid-template-columns: 1fr 1fr; } .foot .wrap > div:first-child { grid-column: 1 / -1; } }

/* Legal pages */
.legal { padding: clamp(40px, 6vw, 72px) 0 0; }
.legal .wrap { max-width: 820px; }
.legal h1 { margin: 0; font: 600 clamp(36px, 5vw, 54px)/1.08 var(--serif); letter-spacing: -0.018em; }
.legal .meta { margin: 12px 0 32px; color: var(--ink-3); font-size: 15px; }
.legal h2 { margin: 40px 0 10px; font: 600 24px/1.25 var(--serif); scroll-margin-top: 80px; }
.legal h3 { margin: 22px 0 6px; font: 600 17px/1.35 var(--sans); }
.legal p, .legal li { color: var(--ink-2); font-size: 16.5px; line-height: 1.65; }
.legal ul { padding-left: 22px; }
.legal li { margin: 6px 0; }
.legal .toc { margin: 0 0 8px; padding: 18px 22px; background: #fff; border: 1px solid var(--line); border-radius: 14px; columns: 2; column-gap: 32px; list-style: none; }
.legal .toc li { margin: 4px 0; font-size: 15px; break-inside: avoid; }
.legal .toc a { color: var(--ink-2); text-decoration: none; }
.legal .callout { margin: 20px 0; padding: 18px 20px; border-left: 3px solid var(--red); background: #fff; border-radius: 0 12px 12px 0; }
@media (max-width: 600px) { .legal .toc { columns: 1; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

/* Long stays */
.ls-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 36px; }
.ls-card { display: flex; flex-direction: column; gap: 8px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 16px; color: var(--ink); text-decoration: none; transition: border-color .15s, transform .15s; }
.ls-card:hover { border-color: var(--red); transform: translateY(-1px); }
.ls-card b { margin-top: 6px; font: 600 20px/1.25 var(--serif); }
.ls-card span { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 960px) { .ls-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ls-grid { grid-template-columns: 1fr; } }

.legal p.kicker { color: var(--red); font-size: 15px; }