* { box-sizing: border-box; }
:root { --ink: #173b40; --paper: #f9fbfa; --accent: #245d61; --line: #bfcdce; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; }
h1,h2,h3,p,figure { margin: 0; }
a { color: inherit; text-underline-offset: 5px; }
button,input,textarea { font: inherit; }
button,summary { cursor: pointer; }
img { display: block; width: 100%; height: auto; }
[hidden] { display: none !important; }
.shell { width: min(1240px, calc(100% - 96px)); margin: auto; }
:focus-visible { outline: 3px solid #008593; outline-offset: 5px; }
section[id] { scroll-margin-top: 92px; }
.skip { position: absolute; top: -100px; left: 15px; z-index: 20; background: white; color: #173b40; padding: 14px; }
.skip:focus { top: 8px; }
.demo-bar { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 3vw; background: #eef3f3; color: #23444c; font-size: 11px; }
.demo-bar > span { font-size: 9px; letter-spacing: .1em; }
.site-header { position: sticky; top: 0; z-index: 5; background: var(--paper); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 84px; gap: 25px; }
.brand { font-size: 33px; font-weight: 700; letter-spacing: -.055em; text-decoration: none; line-height: 1; }
.brand span { display: block; font: 9px/1.5 Arial, sans-serif; letter-spacing: .12em; margin-top: 8px; }
.desktop-nav { display: flex; gap: 35px; font-size: 13px; }
.desktop-nav a { text-decoration: none; padding: 12px 0; }
.desktop-nav a:hover { text-decoration: underline; }
.mobile-nav { display: none; }
.eyebrow { font-size: 10px; font-weight: 700; letter-spacing: .16em; line-height: 1.6; margin-bottom: 22px; }
h1 { font-size: clamp(42px, 4.8vw, 68px); letter-spacing: -.055em; line-height: 1.06; }
h2 { font-size: clamp(30px, 3.1vw, 45px); letter-spacing: -.04em; line-height: 1.13; }
h3 { font-size: 22px; letter-spacing: -.03em; }
p { line-height: 1.75; }
.button { display: inline-flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 48px; padding: 15px 22px; background: var(--accent); color: #fff; border: 1px solid transparent; text-decoration: none; font-size: 13px; font-weight: 700; transition: filter .2s ease; }
.button:hover { filter: brightness(1.13); }
.text-link { font-size: 13px; font-weight: 700; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 28px; }
.hero-caption { display: block; font-size: 10px; line-height: 1.6; margin-top: 22px; }
.section-heading { margin-bottom: 38px; }
.section-heading > p:last-child { margin-top: 18px; }
/* Clara: airy, soft shapes, blue-green and lilac. */
.clara .brand { font-family: Georgia, serif; font-weight: 400; font-size: 43px; }
.clara .button { border-radius: 30px; }
.clara-hero { background: #eef6f5; padding: 60px 0; }
.clara-hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.clara h1 { font-family: Georgia, serif; font-weight: 400; letter-spacing: -.035em; }
.clara .hero-copy > p:not(.eyebrow) { max-width: 450px; font-size: 17px; margin-top: 24px; }
.clara-hero figure img { height: 425px; object-fit: cover; object-position: 68% center; border-radius: 100px 12px 100px 12px; }
.clara-hero figcaption { font: italic 18px/1.6 Georgia, serif; text-align: right; margin-top: 12px; }
.clara-services { padding: 80px 0; }
.clara-service-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.clara-service-grid article { border-radius: 20px; padding: 28px; background: #eef5f1; }
.clara-service-grid article:nth-child(2) { background: #f1eef8; }
.clara-service-grid article:nth-child(3) { background: #f7f2e8; }
.service-icon { display: grid; place-items: center; width: 45px; height: 45px; border: 1px solid #889ca1; border-radius: 50%; font-size: 27px; margin-bottom: 26px; }
.clara-service-grid p { font-size: 14px; margin-top: 15px; }
.clara .contact-section { background: #e9f1f0; }
.clara .form-card { border-radius: 24px; }
/* Trazo: oversized type, terracotta and structural horizontal rows. */
.trazo { --ink: #242822; --paper: #f3f0e8; --accent: #a33b25; --line: #c5c6ba; }
.trazo .brand { font-weight: 900; letter-spacing: -.07em; }
.trazo-hero { padding: 42px 0 0; }
.trazo-intro { display: grid; grid-template-columns: 1.45fr 1fr; gap: 60px; align-items: end; margin-bottom: 36px; }
.trazo h1 { font-weight: 800; font-size: clamp(43px, 5.8vw, 82px); }
.trazo h1 span { color: var(--accent); }
.trazo-lead { padding-bottom: 5px; }
.trazo-lead p { max-width: 330px; margin-bottom: 20px; font-size: 16px; }
.trazo-photo { position: relative; }
.trazo-photo img { height: 320px; object-fit: cover; object-position: center 68%; }
.trazo-photo figcaption { position: absolute; right: 0; bottom: 0; background: #a33b25; color: white; padding: 17px 24px; font-size: 10px; letter-spacing: .13em; }
.trazo-services { padding: 82px 0; }
.trazo-service-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 80px; }
.trazo-service-layout > div > p:last-child { max-width: 340px; font-size: 15px; margin-top: 24px; }
.service-rows article { display: grid; grid-template-columns: 30px 1fr 25px; gap: 20px; border-top: 1px solid #aeb3a6; padding: 25px 0; }
.service-rows article > span { color: #953522; font-size: 13px; }
.service-rows p { font-size: 14px; margin-top: 12px; }
.trazo .contact-section { background: #242822; color: #f3f0e8; }
.trazo .form-card { background: #f3f0e8; color: #242822; }
.trazo .map-card { color: #242822; }
.trazo .email { color: #f3f0e8; }
.trazo .contact-section :focus-visible { outline-color: #ffc898; }
.trazo .form-card :focus-visible, .trazo dialog :focus-visible { outline-color: #a33b25; }
/* Nexo: bold blue/yellow, asymmetry, graphic course blocks. */
.nexo { --ink: #202c59; --paper: #fbfaf6; --accent: #263887; --line: #ccd1df; }
.nexo .brand { font-size: 40px; font-weight: 900; }
.nexo .site-header { background: #202c59; color: #fbfaf6; border-bottom-color: #536087; }
.nexo .site-header :focus-visible { outline-color: #f4d769; }
.nexo-hero { background: #202c59; color: #fbfaf6; padding: 48px 0 58px; }
.nexo-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; }
.nexo h1 { font-size: clamp(58px, 6.8vw, 94px); font-weight: 900; letter-spacing: -.065em; line-height: .99; }
.nexo h1 span { color: #f4d769; }
.nexo-hero p:not(.eyebrow) { max-width: 410px; font-size: 16px; margin-top: 25px; }
.nexo-hero .eyebrow { color: #f4d769; }
.nexo-hero .button { background: #f4d769; color: #202c59; }
.nexo-hero :focus-visible { outline-color: #f4d769; }
.nexo-photo { background: #f4d769; color: #202c59; border-radius: 0 50px 0 0; overflow: hidden; }
.nexo-photo-top { display: flex; align-items: center; justify-content: space-between; padding: 15px 24px; font-size: 10px; font-weight: 700; letter-spacing: .09em; }
.nexo-photo-top > span:last-child { font-size: 32px; }
.nexo-photo img { height: 310px; object-fit: cover; object-position: 70% center; }
.nexo-photo figcaption { padding: 22px 24px; font-size: 18px; font-weight: 700; line-height: 1.5; }
.nexo-photo figcaption span { display: block; font-size: 10px; font-weight: 400; margin-top: 12px; }
.nexo-services { padding: 75px 0; }
.nexo-section-title { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 38px; }
.nexo-section-title > p { font-size: 14px; }
.nexo-course-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; border: 1px solid #b7bcd1; }
.nexo-course-grid article { padding: 32px; background: #edeafb; }
.nexo-course-grid article:nth-child(2) { background: #f5e9b7; }
.nexo-course-grid article:nth-child(3) { background: #d9ece6; }
.course-number { display: block; font-size: 50px; letter-spacing: -.05em; font-weight: 700; margin-bottom: 40px; }
.nexo-course-grid h3 { font-size: 23px; }
.nexo-course-grid p { margin: 15px 0 25px; font-size: 14px; }
.nexo-course-grid a { font-size: 13px; font-weight: 700; }
.nexo .contact-section { background: #f3e6ad; }
/* Contact tools shared by the demonstrations, themed per brand. */
.contact-section { padding: 70px 0; }
.contact-heading { margin-bottom: 35px; }
.contact-heading > p:last-child { max-width: 560px; font-size: 15px; margin-top: 20px; }
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 65px; align-items: start; }
.contact-info > p { font-size: 14px; margin-top: 16px; max-width: 420px; }
.email { display: block; font-size: 16px; margin: 18px 0 25px; overflow-wrap: anywhere; }
.map-card { margin-top: 28px; background: #fff; border: 1px solid #c6d1c9; }
.map-card img { height: 190px; object-fit: cover; }
.map-card > div { padding: 18px; }
.map-card strong { font-size: 14px; }
.map-card p { font-size: 12px; margin-top: 8px; }
.social { color: inherit; background: transparent; border: 0; border-bottom: 1px solid currentColor; margin-top: 18px; padding: 12px 0; font-size: 13px; }
.form-card { background: #fff; padding: 32px; border: 1px solid #c6cecb; }
.form-card .eyebrow { margin-bottom: 15px; }
.form-intro { font-size: 12px; margin: 16px 0 22px; }
.demo-form label { display: block; font-size: 13px; font-weight: 700; margin: 20px 0 9px; }
.demo-form label span { font-weight: 400; font-size: 11px; }
input,textarea { display: block; width: 100%; border: 1px solid #829795; border-radius: 4px; background: #fbfcfa; color: #172d31; padding: 12px; font-size: 16px; }
textarea { resize: vertical; min-height: 100px; }
.demo-form > .button { margin-top: 20px; width: 100%; }
.form-note { font-size: 11px; margin-top: 16px; }
.feedback { font-size: 13px; margin-top: 18px; font-weight: 700; }
.message-preview { border-top: 1px solid var(--line); padding-top: 16px; }
.preview-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13px; margin-bottom: 16px; }
.prepared-link { max-width: 100%; }
.footer { background: #eef3f3; color: #23444c; padding: 24px 0; font-size: 11px; }
.footer .shell { display: flex; justify-content: space-between; gap: 25px; }
.footer p { max-width: 680px; }
dialog { border: 1px solid #788c8d; border-radius: 8px; padding: 30px; width: min(460px, calc(100% - 32px)); background: #fafbf8; color: #173b40; }
dialog h2 { font-size: 25px; } dialog p { font-size: 15px; margin: 18px 0 25px; }
dialog::backdrop { background: #101e36b8; }
/* Package gallery */
.gallery { --ink: #20374a; --accent: #163b63; }
.gallery-main { padding: 65px 0; }
.gallery-intro { max-width: 760px; margin-bottom: 42px; }
.gallery-intro h1 { margin-bottom: 25px; }
.gallery-intro > p:last-child { font-size: 17px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 28px; }
.gallery-grid article { min-width: 0; }
.gallery-grid img { aspect-ratio: 1.5; object-fit: cover; object-position: top; border: 1px solid #bdcbd3; }
.gallery-grid h2 { font-size: 26px; margin: 22px 0 12px; }
.gallery-grid p { font-size: 14px; margin-bottom: 18px; }
.gallery-note { border-top: 1px solid #bccad0; margin-top: 40px; padding-top: 24px; font-size: 13px; }
.gallery-note p { margin-bottom: 12px; }
@media(max-width: 1000px) {
 .shell { width: calc(100% - 56px); }
 .clara-hero-grid,.nexo-hero-grid,.trazo-intro { gap: 30px; }
 .trazo-service-layout,.contact-grid { gap: 35px; }
 .clara-service-grid article,.nexo-course-grid article { padding: 22px; }
 .nexo h1 { font-size: 68px; }
 .trazo h1 { font-size: 58px; }
 .form-card { padding: 24px; }
 .gallery-grid { gap: 18px; }
}
@media(max-width: 700px) {
 .shell { width: calc(100% - 40px); }
 .demo-bar { flex-wrap: wrap; padding: 12px 20px; }
 .demo-bar > span { width: 100%; order: -1; }
 .header-inner { min-height: 78px; position: relative; }
 .desktop-nav { display: none; }
 .mobile-nav { display: block; }
 .mobile-nav summary { padding: 12px 0 12px 12px; font-size: 13px; }
 .mobile-nav summary span { margin-left: 8px; }
 .mobile-nav nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 16px; gap: 8px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 10px 20px #14273415; }
 .mobile-nav nav a { padding: 12px; }
 .nexo .mobile-nav nav :focus-visible { outline-color: #263887; }
 .clara-hero-grid,.trazo-intro,.nexo-hero-grid,.trazo-service-layout,.contact-grid { grid-template-columns: 1fr; }
 .clara-service-grid,.nexo-course-grid,.gallery-grid { grid-template-columns: 1fr; }
 .clara-hero,.nexo-hero { padding: 38px 0; }
 h1 { font-size: clamp(39px, 10vw, 59px); }
 .clara-hero figure img { height: 310px; border-radius: 60px 8px 60px 8px; }
 .clara-services,.trazo-services,.nexo-services,.contact-section { padding: 50px 0; }
 .clara .hero-copy > p:not(.eyebrow) { font-size: 16px; }
 .trazo h1 { font-size: clamp(42px, 11vw, 65px); }
 .trazo-intro { gap: 25px; }
 .trazo-photo img { height: 280px; }
 .trazo-photo figcaption { font-size: 8px; padding: 13px; }
 .service-rows article { grid-template-columns: 24px 1fr 18px; gap: 12px; }
 .nexo h1 { font-size: clamp(64px, 15vw, 88px); }
 .nexo-photo img { height: 270px; }
 .nexo-section-title { display: block; } .nexo-section-title > p { margin-top: 20px; }
 .nexo-course-grid article { padding: 28px; } .course-number { margin-bottom: 22px; }
 .form-card { padding: 23px 19px; }
 .button { max-width: 100%; }
 .footer .shell { flex-direction: column; gap: 12px; }
 .gallery-main { padding: 42px 0; }
 .gallery-grid { gap: 38px; }
}
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }