:root { --ink:#102433; --muted:#536b78; --paper:#f5f8f6; --surface:#ffffff; --soft:#e5f0ee; --line:#b9d0d2; --accent:#087f8c; --accent-dark:#075264; --electric:#1b9cff; --coral:#f05b4f; --warm:#ffc857; --max:1160px; }
body { font-family:'DM Sans',system-ui,sans-serif; background:var(--paper); }
h1,h2,h3,.brand { font-family:'Space Grotesk',system-ui,sans-serif; }
.site-header { background:rgba(245,248,246,.94); border-bottom:1px solid var(--line); }
.brand span { background:linear-gradient(135deg,var(--accent),var(--electric)); border-radius:.55rem; box-shadow:0 8px 20px rgba(8,127,140,.25); }
.nav-list a { padding:.7rem .65rem; border-radius:.45rem; }
.nav-list a:hover,.nav-list a[aria-current="page"] { background:#d9eceb; color:var(--accent-dark); }
.landing-hero { position:relative; overflow:hidden; background:radial-gradient(circle at 78% 15%,rgba(27,156,255,.18),transparent 22rem),linear-gradient(135deg,#e5f0ee 0%,#f5f8f6 56%,#dceef2 100%); }
.landing-hero::after { content:""; position:absolute; width:24rem; height:24rem; right:-9rem; top:-9rem; border:1px solid rgba(27,156,255,.3); border-radius:50%; box-shadow:0 0 0 2rem rgba(27,156,255,.05),0 0 0 5rem rgba(27,156,255,.04); }
.landing-grid { position:relative; z-index:1; grid-template-columns:minmax(0,1.1fr) minmax(15rem,.58fr) minmax(18rem,.72fr); gap:clamp(2rem,4vw,4.5rem); align-items:center; }
.landing-hero h1 { max-width:9ch; font-size:clamp(3.5rem,7vw,6.8rem); }
.kicker { color:var(--accent-dark); }
.button { border-radius:.55rem; transition:transform .2s ease,box-shadow .2s ease,background .2s ease; }
.button:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(7,82,100,.18); }
.primary { background:var(--coral); border-color:var(--coral); }
.primary:hover { background:#d7473e; }
.hero-signals { display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2rem; }
.hero-signals span { padding:.35rem .65rem; border:1px solid rgba(8,127,140,.35); border-radius:999px; color:var(--accent-dark); font-size:.78rem; font-weight:700; }
.hero-portrait { align-self:stretch; display:flex; flex-direction:column; justify-content:center; }
.portrait-frame { position:relative; padding:.7rem; background:linear-gradient(145deg,var(--electric),var(--accent),var(--coral)); border-radius:1.2rem 1.2rem 4rem 1.2rem; box-shadow:0 1.5rem 3rem rgba(7,82,100,.2); transform:rotate(2deg); }
.portrait-frame img { display:block; width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:.75rem .75rem 3.4rem .75rem; }
.portrait-caption { margin:1rem 0 0; padding-left:.2rem; color:var(--accent-dark); font-size:.95rem; line-height:1.45; transform:rotate(-2deg); }
.portrait-caption p { margin:.2rem 0; }
.portrait-caption .caption-kicker { color:var(--coral); font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.landing-aside { border-left-color:var(--coral); }
.path-list a { transition:padding .2s ease,background .2s ease; border-radius:.5rem; }
.path-list a:hover { padding-inline:.75rem; background:rgba(255,255,255,.7); }
.landing-services { background:#fff; }
.service-strip article { transition:background .2s ease,transform .2s ease; }
.service-strip article:hover { background:#f0f8f7; transform:translateY(-3px); }
.service-strip .index { color:var(--coral); }
.contact { background:linear-gradient(120deg,#075264,#087f8c 60%,#116ba0); }
@media (max-width:800px) { .landing-grid { grid-template-columns:1fr; }.hero-portrait { max-width:20rem; margin-inline:auto; }.landing-aside { margin-top:1rem; } }
@media (prefers-reduced-motion:reduce) { .button,.path-list a,.service-strip article { transition:none; } .button:hover,.service-strip article:hover { transform:none; } }