@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&family=DM+Sans:wght@400;500;600;700&display=swap');
:root { --navy:#071d2d; --navy2:#102d3d; --ink:#17242d; --red:#d71920; --ash:#edf0f2; --line:#ccd5da; --muted:#657580; --white:#fff; --display:"Archivo Black",sans-serif; --body:"DM Sans",sans-serif; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--ash); font-family:var(--body); }
a { color:inherit; }
.skip { position:absolute; left:-9999px; }
.skip:focus { left:1rem; top:1rem; z-index:100; padding:.8rem; background:#fff; }
.topbar { min-height:102px; display:flex; align-items:center; justify-content:space-between; gap:2rem; padding:1rem clamp(1.25rem,5vw,5.5rem); color:#fff; background:var(--navy); border-bottom:5px solid var(--red); }
.brand { min-width:0; display:flex; align-items:center; gap:1rem; text-decoration:none; }
.brand img { width:88px; max-height:62px; object-fit:contain; }
.brand .una-logo { width:115px; }
.brand-divider { width:1px; height:52px; background:rgba(255,255,255,.4); }
.brand strong { max-width:430px; font-family:var(--display); font-size:.72rem; letter-spacing:.08em; line-height:1.35; }
.topbar nav { display:flex; align-items:center; gap:1.6rem; font-size:.78rem; font-weight:700; }
.topbar nav a { text-decoration:none; }
.topbar nav a:hover { color:#ff5d62; }
.portal-link { padding:.75rem 1rem; border:1px solid rgba(255,255,255,.48); }
main { max-width:1900px; margin:auto; background:#fff; }
.hero { position:relative; min-height:740px; display:grid; grid-template-columns:1.1fr .65fr; align-items:end; gap:5rem; overflow:hidden; padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem); color:#fff; }
.hero-image,.hero-shade,.hero-grid { position:absolute; inset:0; }
.hero-image { background:url("hero-turrialba.jpg") center 48%/cover no-repeat; transform:scale(1.035); }
.hero-shade { background:linear-gradient(90deg,rgba(3,18,29,.94) 0%,rgba(4,23,36,.75) 48%,rgba(5,24,36,.45)),linear-gradient(0deg,rgba(3,17,27,.65),transparent 60%); }
.hero-grid { opacity:.15; background-image:linear-gradient(rgba(255,255,255,.15) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px); background-size:100px 100px; mask-image:linear-gradient(90deg,#000,transparent 80%); }
.hero-copy,.hero-intro { position:relative; z-index:1; }
.eyebrow { margin:0 0 1rem; color:var(--red); font-size:.72rem; font-weight:800; letter-spacing:.17em; }
h1,h2,h3 { font-family:var(--display); }
h1 { margin:0; font-size:clamp(4rem,8vw,9rem); line-height:.82; letter-spacing:-.055em; }
h1 em { color:var(--red); font-style:normal; }
.hero-intro { max-width:520px; padding-bottom:1rem; font-size:1.15rem; line-height:1.7; }
.hero-intro a { display:flex; justify-content:space-between; margin-top:2.4rem; padding:1rem 0; border-top:1px solid rgba(255,255,255,.45); font-weight:700; text-decoration:none; }
.identity { display:grid; grid-template-columns:1.7fr repeat(3,1fr); background:#fff; border-bottom:1px solid var(--line); }
.identity article { min-height:280px; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(1.5rem,3vw,3rem); border-right:1px solid var(--line); }
.identity article:last-child { border:0; }
.identity-lead { color:#fff; background:var(--red); }
.identity-lead span { margin-bottom:auto; font-weight:800; letter-spacing:.13em; font-size:.7rem; }
.identity h2 { margin:0; font-size:clamp(1.6rem,2.5vw,3rem); line-height:1.05; }
.identity strong { color:var(--red); font-family:var(--display); font-size:clamp(2.8rem,5vw,5.5rem); line-height:1; }
.identity p { max-width:260px; margin:.7rem 0 0; color:var(--muted); line-height:1.5; }
.purpose { display:grid; grid-template-columns:1fr 1fr; }
.purpose-card { min-height:600px; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(3rem,6vw,7rem); }
.purpose-card span { margin-bottom:auto; font-weight:800; letter-spacing:.14em; font-size:.7rem; }
.purpose-card h2 { max-width:650px; margin:2rem 0; font-size:clamp(2.6rem,5vw,6rem); line-height:.95; }
.purpose-card p { max-width:650px; font-size:1.03rem; line-height:1.75; }
.mission { color:#fff; background:var(--navy); }
.mission span { color:#ff555b; }
.mission p { color:#bdc8ce; }
.vision { background:var(--ash); }
.vision span { color:var(--red); }
.vision p { color:var(--muted); }
.work,.history { padding:clamp(4rem,8vw,8rem) clamp(1.25rem,6vw,7rem); }
.section-head { display:grid; grid-template-columns:1fr .65fr; gap:5rem; align-items:end; margin-bottom:4rem; }
.section-head h2,.history-title h2,.values h2,.people-cta h2 { margin:.2rem 0 0; font-size:clamp(2.7rem,5vw,6rem); line-height:.92; }
.section-head>p { margin:0; color:var(--muted); line-height:1.75; }
.work-grid { display:grid; grid-template-columns:repeat(4,1fr); border:1px solid var(--line); }
.work-grid a { min-height:390px; display:flex; flex-direction:column; padding:2.2rem; border-right:1px solid var(--line); text-decoration:none; transition:color .25s,background .25s; }
.work-grid a:last-child { border:0; }
.work-grid a:hover { color:#fff; background:var(--red); }
.work-grid span { margin-left:auto; color:#aab5bb; font-family:var(--display); font-size:2rem; }
.work-grid h3 { margin:auto 0 1rem; font-size:2rem; }
.work-grid p { color:var(--muted); line-height:1.55; }
.work-grid a:hover p { color:rgba(255,255,255,.78); }
.work-grid b { margin-top:1.5rem; font-size:.78rem; }
.history { display:grid; grid-template-columns:.7fr 1.3fr; gap:7rem; background:var(--ash); }
.history-title { position:sticky; top:2rem; align-self:start; }
.timeline article { display:grid; grid-template-columns:150px 1fr; gap:2rem; padding:2rem 0; border-top:1px solid var(--line); }
.timeline time { color:var(--red); font-family:var(--display); font-size:1.25rem; }
.timeline h3 { margin:0 0 .7rem; font-size:1.35rem; }
.timeline p { margin:0; color:var(--muted); line-height:1.7; }
.values { display:grid; grid-template-columns:.8fr 1.2fr; gap:6rem; padding:clamp(4rem,7vw,7rem) clamp(1.25rem,6vw,7rem); color:#fff; background:var(--red); }
.values .eyebrow { color:#fff; }
.values ul { margin:0; padding:0; list-style:none; }
.values li { display:grid; grid-template-columns:54px 1fr; gap:1rem; padding:1.15rem 0; border-bottom:1px solid rgba(255,255,255,.35); font-weight:700; }
.values li span { opacity:.55; font-family:var(--display); }
.people-cta { display:grid; grid-template-columns:.9fr 1.1fr; gap:7rem; padding:clamp(4rem,7vw,7rem) clamp(1.25rem,6vw,7rem); }
.cta-links { display:grid; align-content:center; }
.cta-links a { display:flex; justify-content:space-between; padding:1.4rem 0; border-bottom:1px solid var(--line); font-weight:700; text-decoration:none; }
.cta-links a:hover { color:var(--red); }
footer { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:2rem; padding:2.5rem clamp(1.25rem,6vw,7rem); color:#bac6cc; background:#04131d; font-size:.8rem; }
.footer-brand { display:flex; align-items:center; gap:1.2rem; }
.footer-brand img { width:88px; max-height:52px; object-fit:contain; }
footer p { line-height:1.6; }
footer a { color:#fff; font-weight:700; }
@media (max-width:1150px) { .topbar nav>a:not(.portal-link) { display:none; } .brand strong { display:none; } .hero,.purpose,.section-head,.history,.values,.people-cta { grid-template-columns:1fr; } .identity { grid-template-columns:1fr 1fr; } .work-grid { grid-template-columns:1fr 1fr; } .work-grid a:nth-child(2) { border-right:0; } .work-grid a:nth-child(-n+2) { border-bottom:1px solid var(--line); } .history-title { position:static; } }
@media (max-width:700px) { .topbar { min-height:84px; } .brand img { width:70px; } .brand .una-logo,.brand-divider { display:none; } .portal-link { padding:.6rem .7rem; font-size:.72rem; } .hero { min-height:650px; gap:2.5rem; } h1 { font-size:clamp(3.2rem,15vw,5.2rem); } .identity,.work-grid { grid-template-columns:1fr; } .identity article,.work-grid a { min-height:240px; border-right:0; border-bottom:1px solid var(--line); } .purpose-card { min-height:500px; } .timeline article { grid-template-columns:1fr; gap:.8rem; } footer { grid-template-columns:1fr; } }