:root { --ink:#263630; --paper:#fbfaf6; --sage:#dfe7dd; --deep:#355349; --sand:#ece5d9; --line:#d4d8d0; --max:1120px; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; color:var(--ink); background:var(--paper); font-family:Georgia, "Times New Roman", serif; font-size:18px; line-height:1.65; } a { color:inherit; } .skip-link { position:absolute; left:-999px; } .skip-link:focus { left:1rem; top:1rem; z-index:10; padding:.6rem 1rem; background:#fff; }
.site-header { min-height:82px; display:flex; align-items:center; gap:2rem; justify-content:space-between; padding:1rem max(5vw,1.5rem); background:var(--paper); position:sticky; top:0; z-index:5; border-bottom:1px solid rgba(38,54,48,.08); } .brand { text-decoration:none; line-height:1.05; font-size:1.18rem; letter-spacing:.02em; } .brand span { display:block; margin-top:.28rem; font-family:Arial,sans-serif; font-size:.63rem; text-transform:uppercase; letter-spacing:.18em; } nav { display:flex; gap:1.3rem; font-family:Arial,sans-serif; font-size:.77rem; letter-spacing:.04em; } nav a { text-decoration:none; } nav a:hover { text-decoration:underline; } .language-switcher { display:flex; gap:.15rem; border:1px solid var(--line); padding:.18rem; } .language-switcher button { border:0; background:transparent; color:var(--ink); cursor:pointer; padding:.35rem .5rem; font-family:Arial,sans-serif; font-size:.71rem; } .language-switcher button[aria-pressed="true"] { background:var(--deep); color:white; }
.hero { min-height:calc(100svh - 82px); display:grid; align-items:end; padding:clamp(2rem,7vw,6.5rem) max(5vw,1.5rem); color:#fff; background-image:linear-gradient(90deg,rgba(20,35,29,.79) 0%,rgba(20,35,29,.58) 46%,rgba(20,35,29,.20) 100%),url("../images/margarita-portrait.jpg"); background-size:cover; background-position:center; } .hero-content { max-width:700px; } .eyebrow,.section-label { margin:0 0:.75rem; font-family:Arial,sans-serif; font-size:.72rem; line-height:1.25; text-transform:uppercase; letter-spacing:.17em; } h1,h2,h3 { line-height:1.13; font-weight:normal; } h1 { margin:0; font-size:clamp(2.7rem,6.2vw,5.7rem); letter-spacing:-.045em; } h2 { margin:.2rem 0 1.3rem; font-size:clamp(2rem,3.7vw,3.7rem); letter-spacing:-.035em; } h3 { margin:0 0:.75rem; font-size:1.45rem; } .lead { max-width:580px; margin:1.5rem 0 2rem; font-size:clamp(1.05rem,1.7vw,1.35rem); } .button { display:inline-block; padding:.85rem 1.25rem; text-decoration:none; font-family:Arial,sans-serif; font-size:.75rem; text-transform:uppercase; letter-spacing:.12em; } .button-light { background:#fff; color:var(--ink); }
.section { padding:clamp(4rem,9vw,8rem) max(5vw,1.5rem); } .content { max-width:var(--max); margin:auto; } .narrow { max-width:720px; } .intro { background:var(--sand); } .section-tint { background:var(--sage); } .two-column { display:grid; grid-template-columns:minmax(220px,.8fr) minmax(0,1.2fr); gap:clamp(2rem,9vw,9rem); } .cards { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:3rem; background:var(--line); border:1px solid var(--line); } .card { padding:2rem; background:var(--paper); } .card p { margin-bottom:0; } .section-dark { background:var(--deep); color:#fff; } .section-dark .section-label { color:#d8e6dc; } .topic-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:2.5rem; background:rgba(255,255,255,.3); border:1px solid rgba(255,255,255,.3); } .topic { padding:1.8rem; background:var(--deep); } .topic-icon { display:grid; place-items:center; width:2.1rem; height:2.1rem; margin-bottom:1.15rem; border:1px solid rgba(255,255,255,.6); border-radius:50%; color:#d8e6dc; font-family:Arial,sans-serif; font-size:1.1rem; line-height:1; } .topic h3 { margin-bottom:.6rem; font-size:1.28rem; } .topic p { margin:0; font-size:.94rem; line-height:1.55; } .details { margin:2rem 0 0; border-top:1px solid var(--line); } .details div { display:grid; grid-template-columns:1fr 1.3fr; padding:1rem 0; border-bottom:1px solid var(--line); } dt { font-family:Arial,sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.12em; } dd { margin:0; } .contact { background:var(--sand); } .center { text-align:center; } .center .section-label { justify-self:center; } .contact-links { display:flex; justify-content:center; flex-wrap:wrap; gap:.6rem 2rem; margin:2rem 0 1.2rem; font-size:clamp(1.15rem,2vw,1.5rem); } .contact-note { font-style:italic; } footer { display:flex; justify-content:space-between; gap:1rem; padding:1.4rem max(5vw,1.5rem); background:var(--ink); color:#f7f6f0; font-family:Arial,sans-serif; font-size:.72rem; letter-spacing:.05em; }
@media (max-width:800px) { .site-header { flex-wrap:wrap; gap:.8rem; } nav { order:3; width:100%; overflow:auto; padding-top:.3rem; } .hero { min-height:620px; background-position:58% center; } .two-column,.cards { grid-template-columns:1fr; } .topic-grid { grid-template-columns:1fr 1fr; column-gap:1.5rem; } } @media (max-width:480px) { body { font-size:17px; } .site-header { padding:.8rem 1rem; } nav { gap:1rem; font-size:.69rem; } .language-switcher button { padding:.3rem .35rem; } .topic-grid { grid-template-columns:1fr; } .details div { grid-template-columns:1fr; gap:.25rem; } footer { flex-direction:column; } }

/* Illustration cards, refined to match the supplied visual direction. */
.section-dark { background:#fcfbf7; color:var(--ink); padding-top:2rem; }
.section-dark .section-label { color:var(--deep); text-align:center; }
.section-dark h2 { text-align:center; }
.topic-grid { grid-template-columns:repeat(6,1fr); gap:0; margin-top:1.5rem; background:transparent; border:0; }
.topic { min-width:0; padding:1.25rem 1rem; text-align:center; background:transparent; border-right:1px solid #d8d8cf; }
.topic:last-child { border-right:0; }
.topic-icon { display:block; width:3.75rem; height:3.75rem; margin:0 auto 1rem; border:0; border-radius:0; }
.topic h3 { margin-bottom:.65rem; font-size:1.12rem; }
.topic p { margin:0; font-size:.8rem; line-height:1.5; }
@media (max-width:800px) { .topic-grid { grid-template-columns:repeat(3,1fr); } .topic:nth-child(3) { border-right:0; } }
@media (max-width:480px) { .topic-grid { grid-template-columns:1fr 1fr; } .topic:nth-child(odd) { border-right:1px solid #d8d8cf; } .topic:nth-child(even) { border-right:0; } }