/* Professional adaptation of Spectral. Original styles and license retained. */
:root { --ink: #192d38; --deep: #142630; --green: #25534f; --accent: #bce5d8; --muted: #d0dcdf; }
body { background: var(--deep); color: #f4f6f5; font-family: "Segoe UI", Arial, sans-serif; letter-spacing: .015em; }
h1, h2, h3 { text-transform: none; letter-spacing: -.025em; font-weight: 600; }
h2 { font-size: clamp(1.8rem, 3.1vw, 2.7rem); line-height: 1.2; }
h3 { font-size: 1.35rem; }
p { line-height: 1.8; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--accent) !important; outline-offset: 5px; }
section[id] { scroll-margin-top: 5rem; }
body.landing #page-wrapper { background: var(--deep); }
.wrapper { padding: 6rem 0 4rem; }
.wrapper > .inner { width: min(1120px, calc(100% - 6rem)); }
.wrapper.style1 { background: var(--green); color: #f4f6f5; }
.wrapper.style2 { background: var(--ink); }
.wrapper header.major p { color: var(--muted); max-width: 44rem; }
header.major { margin-bottom: 2.7rem; }
header.major h2 { border: 0; padding: 0; margin-bottom: 1.3rem; }
.eyebrow, #banner p.eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; margin-bottom: 1.6rem; }
.split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 5rem; }
#header, #header.alt { background: rgba(20, 38, 48, .96); height: 4rem; line-height: 4rem; }
#header .brand { position: absolute; left: 2rem; border: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -.08em; }
.brand span { color: var(--accent); }
#header nav > ul > li.language-switch { display: inline-flex; align-items: center; gap: .6rem; }
#header nav > ul > li.language-switch a { display: inline-block; padding: 0 .3rem; letter-spacing: .06em; font-size: .75rem; line-height: 2.5rem; }
.language-switch span { color: #92a5ad; font-size: .65rem; }
.language-switch a[aria-current] { color: var(--accent) !important; box-shadow: inset 0 -2px var(--accent); }
#header nav > ul > li > a.menuToggle { padding: 0 2rem; }
#header nav > ul > li > a.menuToggle:after { height: 4rem; width: 1.5rem; margin-left: .7rem; }
#menu { background: var(--green); }
#menu .close { width: 3.5rem; height: 3.5rem; }
#menu ul > li > a { letter-spacing: .07em; }
body.landing #banner, body.is-mobile.landing #banner {
 background-image: linear-gradient(90deg, rgba(12, 28, 39, .94) 0%, rgba(12, 28, 39, .80) 34%, rgba(12, 28, 39, .12) 72%), url("../../images/hero-lucas-london_header.png");
 background-size: cover; background-position: 65% center; background-attachment: scroll;
}
#banner { height: auto; min-height: max(760px, 92vh); padding: 9rem 0 6rem; text-align: left; }
#banner .inner { width: min(1240px, calc(100% - 6rem)); margin: auto; }
#banner h1 { font-size: clamp(2.7rem, 4.7vw, 4.8rem); line-height: 1.06; margin: 0 0 1.6rem; max-width: 42rem; }
#banner p { text-transform: none; letter-spacing: 0; }
#banner .hero-statement { font-size: 1.4rem; line-height: 1.5; max-width: 30rem; margin-bottom: 1rem; }
#banner .hero-description { max-width: 28rem; font-size: 1rem; color: #e0e8eb; }
#banner .hero-languages { font-size: .8rem; letter-spacing: .08em; color: var(--accent); margin: 2rem 0; }
#banner:after { display: none; }
.button, button { font-family: inherit; letter-spacing: .07em; font-size: .7rem; height: auto; min-height: 3rem; line-height: 1.5; padding: 1rem 1.5rem; white-space: normal; }
.button.primary { background: var(--accent); color: var(--deep); box-shadow: none; }
#banner .button.primary { background-color: var(--accent); color: var(--deep) !important; transition: background-color .2s ease, border-color .2s ease, color .2s ease; }
#banner .button.primary:active { background-color: #a9d7c8 !important; color: var(--deep) !important; }
#banner .button.primary:hover, #banner .button.primary:focus-visible { background-color: #c94b4b !important; border-color: #c94b4b; color: #fff !important; }
#banner .button.primary:focus-visible { outline-color: #fff !important; outline-offset: 5px; }
.career { display: grid; grid-template-columns: 1fr 1.65fr; gap: 4rem; border-top: 1px solid #ffffff26; padding: 2.6rem 0 1rem; }
.career h3 { font-size: 1.8rem; margin: .4rem 0; }
.period, .role { color: var(--muted); font-size: .85rem; }
.career .period { margin-bottom: 1rem; }
.career .role { margin-bottom: 1.25rem; }
.company-logo { display: flex; align-items: center; justify-content: center; width: fit-content; max-width: 100%; padding: 10px; margin-bottom: 1.5rem; background: #fff; border-radius: 5px; }
.company-logo img { display: block; width: auto; height: auto; max-width: 100%; max-height: 110px; object-fit: contain; }
.company-logo--assist-card img { max-height: 130px; }
.career li { padding-left: .4rem; margin-bottom: .65rem; color: var(--muted); }
.international.wrapper { background: var(--deep); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 3rem; }
.stats > div { border-left: 2px solid var(--accent); padding-left: 1.5rem; }
.stats strong { display: block; font-size: clamp(2.5rem, 5vw, 4rem); font-weight: 400; line-height: 1.4; }
.stats span { color: var(--muted); }
.stats p { color: var(--accent); font-size: .85rem; line-height: 1.6; margin: 1.25rem 0 0; }
.travel-story { max-width: 52rem; }
.travel-story p { color: var(--muted); }
.international-gallery { margin-top: 2rem; }
.gallery-note { color: var(--muted); font-size: .85rem; }
.country-group { margin-top: 3rem; }
.country-group > h3 { border-top: 1px solid #ffffff26; padding-top: 1.5rem; margin-bottom: 1.5rem; }
.travel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.travel-card { min-width: 0; display: flex; flex-direction: column; background: var(--ink); border: 1px solid #ffffff18; }
/* A portrait frame retains the full height of the square and portrait originals. */
.travel-card > img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 50%; }
.travel-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.4rem; }
.travel-card h4 { font-size: 1.1rem; line-height: 1.4; font-weight: 600; letter-spacing: 0; text-transform: none; margin: 0 0 .6rem; }
.travel-location { color: var(--accent); font-size: .78rem; margin-bottom: 1rem; }
.travel-description { color: var(--muted); font-size: .88rem; line-height: 1.75; }
.map-link { align-self: flex-start; margin-top: auto; padding: .5rem 0; font-size: .8rem; border-bottom: 1px solid #bce5d880; }
.map-link:hover { color: var(--accent); }
@media (max-width: 980px) { .travel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .travel-grid { grid-template-columns: minmax(0, 1fr); } }
.language-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.language-grid article { border-top: 1px solid #ffffff40; padding-top: 1.5rem; }
.language-code { font-size: .75rem; letter-spacing: .1em; color: var(--accent); }
.language-grid h3 { margin: 1rem 0 .5rem; }
.language-grid p { color: #e0e8eb; }
.resume-downloads > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #ffffff26; }
.resume-downloads button:disabled { opacity: 1; color: #c5d2d6; box-shadow: inset 0 0 0 1px #ffffff40; cursor: not-allowed; }
.note { font-size: .85rem; color: var(--muted); margin-top: 1.2rem; }
.contact-pending { display: inline-block; padding: .7rem 1.3rem; border: 1px solid #ffffff40; }
body.landing #footer { background: #10212a; padding: 3rem 1.5rem; }
#footer .copyright { color: #b8c9d1; letter-spacing: .08em; line-height: 2; margin: 2rem 0 0; }
.back-top { font-size: .85rem; }
.skip-link { position: fixed; top: -5rem; left: 1rem; z-index: 10002; padding: .7rem 1rem; background: var(--deep); }
.skip-link:focus { top: .5rem; }
@media (max-width: 980px) {
 .split, .career { gap: 2.5rem; }
 #banner { min-height: 720px; }
 #banner .hero-description { max-width: 24rem; }
 #banner h1 { max-width: 33rem; }
}
@media (max-width: 736px) {
 .wrapper { padding: 4rem 0 2rem; }
 .wrapper > .inner, #banner .inner { width: calc(100% - 3rem); }
 .split, .career { grid-template-columns: 1fr; gap: .5rem; }
 #header .brand { left: 1.5rem; }
 #header nav > ul > li > a.menuToggle { padding: 0 1.2rem; }
 #banner { padding: 25rem 0 3rem; min-height: 0; }
 body.landing #banner, body.is-mobile.landing #banner {
  background-image: linear-gradient(0deg, #142630 5%, rgba(20,38,48,.97) 35%, rgba(20,38,48,.05) 80%), url("../../images/hero-lucas-london_header.png");
  background-position: center, 74% top; background-size: cover, auto 33rem; background-repeat: no-repeat; background-color: var(--deep);
 }
 #banner h1 { font-size: clamp(2.25rem, 8vw, 3.6rem); }
 #banner h1 br { display: block; }
 #banner .hero-statement { font-size: 1.2rem; }
 #banner .hero-description { max-width: none; }
 #banner p.eyebrow { max-width: 20rem; font-size: .66rem; }
 #banner .actions { flex-direction: column; gap: .75rem; margin-left: 0; }
 #banner .actions li { padding: 0; width: 100%; }
 #banner .actions .button { display: block; }
 .stats { grid-template-columns: 1fr; gap: 2rem; }
 .stats > div { padding-left: 1rem; }
 .stats strong { font-size: 2rem; }
 .stats span { font-size: .85rem; }
 .language-grid { gap: 1rem; }
 .language-grid h3 { font-size: 1.1rem; }
 .language-grid p { font-size: .85rem; }
 header.major { margin-bottom: 1.5rem; }
}
@media (max-width: 360px) { .language-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
 *, *:before, *:after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}