/* Egor Birding Colombia: brand Concept B. Self-hosted OFL fonts (see /fonts/OFL-*.txt). No external requests, no JS, no trackers. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:560;font-display:swap;src:url(fonts/fraunces-560-soft30-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Fraunces";font-style:normal;font-weight:560;font-display:swap;src:url(fonts/fraunces-560-soft30-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
:root{
  /* palette: teal #0C3A40, deep #08262A, sand #F1E6D0, copper #C8643B */
  --bg:#08262A; --bg2:#0A2F34; --panel:#0C3A40; --line:rgba(241,230,208,.10); --line2:rgba(241,230,208,.20);
  --text:#F1E6D0; --soft:#C7C3B2; --muted:#A9AA9C;
  --copper:#C8643B; --copper-hover:#D9774E; --on-copper:#1A0E08;
  --copper-text:#E08A5F; --copper-text-hover:#E9A27C; /* AA tint for small copper text: copper itself is 4.04:1 on #08262A */
  --radius:10px; --wrap:1180px;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;font-family:var(--sans);font-size:16.5px;line-height:1.65;color:var(--soft);background:var(--bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block} /* natural aspect ratio, never cropped */
a{color:var(--copper-text);text-underline-offset:3px}
a:hover{color:var(--copper-text-hover)}
h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.12;color:var(--text);margin:0 0 .5em;letter-spacing:.005em}
h2{font-size:clamp(1.75rem,4.6vw,2.6rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em}
i{font-style:italic}
.wrap{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 20px}
.narrow{max-width:760px}
.small{font-size:.88rem;color:var(--muted)}

/* ---------- language switch (CSS only) ---------- */
.lang-radio{position:absolute;opacity:0;pointer-events:none}
body:has(#lang-en:checked) [lang="es"]:not(.always){display:none}
body:has(#lang-es:checked) [lang="en"]:not(html){display:none}
body:has(#lang-es:checked) .translation{display:none}
.lang-switch{display:flex;align-items:center;flex:none;font-size:.75rem;line-height:1;font-weight:600;letter-spacing:.1em}
.lang-switch label{padding:10px 3px;cursor:pointer;color:var(--muted);transition:color .15s}
.lang-switch label:hover{color:var(--text)}
.lang-sep{color:var(--line2);padding:0 2px}
body:has(#lang-en:checked) label[for="lang-en"],
body:has(#lang-es:checked) label[for="lang-es"]{color:var(--text)}

/* ---------- header: one quiet row, no menu ---------- */
.topbar{position:sticky;top:0;z-index:30;background:rgba(8,38,42,.92);backdrop-filter:saturate(140%) blur(10px);-webkit-backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:14px;height:64px;max-width:1440px;margin:0 auto;padding:0 16px}
.brand{display:flex;align-items:center;min-width:0;margin-right:auto;margin-left:-5px;text-decoration:none;line-height:0}
.brand-logo{width:auto;height:44px;max-width:none} /* lockup SVG 631x200 incl. 16 px padding */
.nav{display:none}
.nav a{color:var(--soft);text-decoration:none;font-size:.875rem;line-height:1;font-weight:500;letter-spacing:.01em;padding:10px 0;transition:color .15s}
.nav a:hover{color:var(--text)}
.book-btn{display:inline-flex;align-items:center;flex:none;height:34px;padding:0 14px;border-radius:999px;background:var(--copper);color:var(--on-copper);text-decoration:none;font-size:.8125rem;line-height:1;font-weight:600;letter-spacing:.01em;white-space:nowrap;transition:background .15s}
.book-btn:hover{background:var(--copper-hover);color:var(--on-copper)}
.bk-long{display:none}

/* ---------- hero: the photo leads, never cropped ---------- */
.hero{background:var(--bg);padding:0 0 44px}
.hero-in{max-width:1500px;margin:0 auto;display:grid;gap:30px}
.hero-photo{margin:0 auto;width:100%;max-width:960px}
.hero-photo img{width:100%;height:auto} /* display capped at 960 CSS px; never cropped */
.hero-photo video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000} /* full frame, no object-fit crop */
.hero-photo .hv-still{display:none}
@media (prefers-reduced-motion:reduce){.hero-photo .hv-motion{display:none}.hero-photo .hv-still{display:block}}
.hero-photo figcaption{padding:8px 16px 0;font-size:.74rem;letter-spacing:.02em;color:var(--muted)}
.hero-photo .dot{margin:0 4px}
.hero-text{padding:0 20px}
.eyebrow{text-transform:uppercase;letter-spacing:.2em;font-size:.72rem;color:var(--muted);margin-bottom:14px;font-weight:600}
.hero h1{font-size:clamp(2.3rem,9vw,4.4rem);margin:0 0 12px;color:var(--text);letter-spacing:-.01em;line-height:1.04}
.tagline{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;font-size:.8rem;font-weight:600;color:var(--copper-text);margin:0 0 22px}
.lede{color:var(--soft);max-width:32em;margin-bottom:28px}
.cta{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 22px;border-radius:999px;font-weight:600;text-decoration:none;font-size:.92rem;letter-spacing:.01em;transition:background .15s,border-color .15s,color .15s}
.btn-primary{background:var(--copper);color:var(--on-copper)}
.btn-primary:hover{background:var(--copper-hover);color:var(--on-copper)}
.btn-ghost{border:1px solid var(--line2);color:var(--text)}
.btn-ghost:hover{border-color:var(--copper);color:var(--copper-text)}

/* ---------- highlights ---------- */
.trust{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--bg2)}
.trust-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px 20px;padding-top:24px;padding-bottom:24px}
.trust p{margin:0;font-size:.84rem;line-height:1.4;color:var(--muted);border-left:2px solid var(--copper);padding-left:12px}
.trust b{display:block;color:var(--text);font-size:.92rem;font-weight:600;margin-bottom:3px;letter-spacing:.01em}

/* ---------- quote ---------- */
.quote-band{padding:56px 0 8px}
.quote-band blockquote{margin:0 auto;max-width:860px;text-align:center}
.quote-band blockquote p{font-family:var(--serif);font-size:clamp(1.2rem,3.4vw,1.6rem);line-height:1.45;color:var(--text);margin-bottom:.6em}
.quote-band .translation{font-family:var(--sans);font-size:.95rem;color:var(--muted)}
.quote-band footer{font-size:.85rem;color:var(--muted)}

/* ---------- sections ---------- */
.section{padding:64px 0}
.section-alt{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.section-intro{color:var(--muted);max-width:44em}
.cards{display:grid;gap:14px;margin-top:26px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:22px 22px 10px}
.card h3{color:var(--text)}
.steps{list-style:none;counter-reset:step;margin:26px 0 0;padding:0;display:grid;gap:14px}
.steps li{counter-increment:step;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px 20px 8px 66px;position:relative}
.steps li::before{content:counter(step,decimal-leading-zero);position:absolute;left:20px;top:20px;font-family:var(--serif);font-size:1.25rem;color:var(--copper-text)}
.steps h3{margin-bottom:.35em}
.inline-quote{margin:1em 0;padding:4px 0 4px 16px;border-left:2px solid var(--copper);font-family:var(--serif);font-size:1.06rem;color:var(--text)}
.cta-band{margin-top:34px;padding:30px 22px;border:1px solid var(--line2);border-radius:var(--radius);background:linear-gradient(180deg,#0E4148,#0A3036);text-align:center}
.cta-band .cta-title{font-family:var(--serif);font-size:1.5rem;color:var(--text);margin:0 0 16px}
.cta-center{justify-content:center}
.timeline{list-style:none;margin:26px 0 0;padding:0;border-left:1px solid var(--line2)}
.timeline li{position:relative;padding:0 0 20px 24px}
.timeline li::before{content:"";position:absolute;left:-5px;top:8px;width:9px;height:9px;border-radius:50%;background:var(--copper)}
.timeline b{display:inline-block;color:var(--copper-text);font-size:.78rem;letter-spacing:.1em;margin-right:10px;font-weight:700}
.timeline strong{color:var(--text);font-weight:600}

/* ---------- gallery: one or two bird photos, full aspect ratio ---------- */
.gallery{display:flex;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;gap:28px;margin-top:26px}
.gallery figure{flex:0 1 360px;max-width:360px;margin:0}
.gallery img{width:100%;height:auto}
/* field photo grid for action shots of Egor (slot in index.html) */
.field-grid{columns:1;column-gap:18px;margin:26px 0 34px}
.field-grid figure{break-inside:avoid;margin:0 0 22px}
.field-grid figcaption a,.hero-photo figcaption a{color:var(--muted)}
.field-grid img{width:100%;height:auto}
figcaption{font-size:.8rem;color:var(--muted);padding-top:8px}
.credit{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}

/* ---------- about ---------- */
.about-grid > div{max-width:46em}
.about-photo{display:flex;align-items:center;gap:14px;margin:0 0 22px}
.about-photo img{width:75px;height:75px;border-radius:50%;flex:none} /* 150 px file shown at 75 CSS px = native/2 */
.about-photo figcaption{padding:0;font-size:.85rem;color:var(--text)}

/* ---------- contact ---------- */
.contact{background:var(--bg2);border-top:1px solid var(--line)}
.contact .narrow{max-width:920px}
.contact-list{list-style:none;padding:0;margin:26px 0;display:grid;gap:10px;grid-template-columns:1fr}
.contact-list a{display:flex;align-items:center;gap:14px;padding:15px 16px;background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);text-decoration:none;color:var(--text)}
.contact-list a:hover{border-color:var(--copper)}
.contact-list svg{width:24px;height:24px;color:var(--copper-text);flex:none}
.contact-list b{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--copper-text);font-weight:600}

.site-footer{background:var(--bg);border-top:1px solid var(--line);color:var(--muted);padding:28px 0;font-size:.88rem}
.site-footer p{margin:0 0 .3em}
.footer-nav{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 16px}
.footer-nav a{color:var(--soft);text-decoration:none;font-size:.875rem}
.footer-nav a:hover{color:var(--copper-text)}

/* ---------- tablets ---------- */
@media (min-width:720px){
  .trust-grid{grid-template-columns:repeat(4,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .cards{grid-template-columns:repeat(2,1fr)}
  .field-grid{columns:2}
  .bk-long{display:inline}
  .bk-short{display:none}
  .book-btn{height:38px;padding:0 18px;font-size:.875rem}
  .topbar-in{padding:0 24px;gap:20px}
  .contact-list{grid-template-columns:repeat(3,1fr)}
  .hero-text{padding:0 40px;max-width:720px;margin:0 auto;width:100%}
  .hero-photo{max-width:640px}
  .hero-photo figcaption{padding:8px 0 0}
}

/* ---------- desktop: photo left, text right, all on near-black ---------- */
@media (min-width:1024px){
  body{font-size:17px}
  .topbar-in{height:72px;padding:0 32px}
  .brand-logo{height:52px}
  .nav{display:flex;align-items:center;gap:32px;margin-right:6px}
  .lang-switch{padding-left:24px;border-left:1px solid var(--line2);height:20px}
  .hero-photo{max-width:960px}
  .hero{padding:40px 0 72px}
  .hero-in{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);align-items:center;gap:56px;padding:0 32px;max-width:1440px}
  .hero-photo figcaption{padding:10px 0 0}
  .hero-text{padding:0}
  .cards{grid-template-columns:repeat(3,1fr)}
  .cards-2{grid-template-columns:repeat(2,1fr)}
  .field-grid{columns:3}
  .section{padding:88px 0}
}
@media (min-width:1600px){
  body{font-size:18px}
  .hero h1{font-size:5rem}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
@media (max-width:719px){
  .hero .cta .btn{width:100%;justify-content:center}
}

