/* Telphos: a mission-led company site. Paper, ink, one quiet amber; photographs do the atmosphere. */
@font-face{font-family:Geist;src:url(/fonts/geist.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Cormorant;src:url(/fonts/cormorant.woff2) format("woff2");font-weight:300 700;font-display:swap}
:root{
 --night:#0B1220;--deep:#16213B;--beam:#F5B43A;--paper:#F7F5F0;--mist:#E3E7EF;--slate:#566179;--fog:#A6B0C4;
 --ink:#0B1220;--muted:#4A5468;--rule:#0B12201f;
 --wrap:1240px;--gutter:clamp(20px,4vw,48px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 Geist,system-ui,-apple-system,sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,figure{margin:0}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:12px;z-index:50;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:999px}
.skip:focus{left:12px}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.serif{font-family:Cormorant,"Iowan Old Style",Georgia,serif;font-weight:500;letter-spacing:-.012em}

/* Nav */
.nav{position:sticky;top:0;z-index:20;background:rgba(247,245,240,.88);backdrop-filter:saturate(140%) blur(14px);-webkit-backdrop-filter:saturate(140%) blur(14px);transition:box-shadow .3s}
.nav.scrolled{box-shadow:0 1px 0 var(--rule)}
.nav-inner{display:flex;align-items:center;gap:32px;height:72px}
.brand img{height:26px;width:auto}
.nav nav{display:flex;gap:30px;margin-left:auto}
.nav nav a{color:var(--muted);text-decoration:none;font-size:15px}
.nav nav a:hover{color:var(--ink)}
@media(max-width:760px){.nav nav{gap:18px}.nav nav a:nth-child(n+4){display:none}.nav-inner{height:62px}.brand img{height:22px}}
@media(max-width:420px){.nav nav a:nth-child(n+3){display:none}}

/* Intro: one statement, generous space */
.intro{padding:clamp(80px,12vw,180px) 0 clamp(56px,7vw,96px)}
.intro h1{font-size:clamp(48px,7.4vw,118px);line-height:1;letter-spacing:-.022em;font-weight:500;max-width:13em;text-wrap:balance}
.intro-sub{margin-top:clamp(28px,3vw,40px);max-width:36em;font-size:clamp(18px,1.45vw,22px);line-height:1.55;color:var(--muted)}

/* Photographs */
.hero-photo,.wide-photo{width:100%;max-width:calc(1600px + 2 * var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.hero-photo img,.wide-photo img{width:100%;aspect-ratio:16/8;object-fit:cover;border-radius:6px}
.wide-photo.short img{aspect-ratio:16/6;object-position:70% 72%}
@media(max-width:760px){.hero-photo img,.wide-photo img{aspect-ratio:4/3}.wide-photo.short img{aspect-ratio:4/3}}

/* Two-column sections: a small label on the left, the substance on the right */
section:not(.intro){padding:clamp(88px,11vw,170px) 0}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:clamp(28px,5vw,96px);align-items:start}
.label{font:500 15px/1.4 Geist,sans-serif;letter-spacing:.01em;color:var(--muted)}
.lead{font-size:clamp(30px,2.9vw,46px);line-height:1.15;color:var(--ink)}
.prose p:not(.lead){margin-top:24px;max-width:36em;font-size:clamp(17px,1.2vw,19px);color:var(--muted)}
.prose .lead + p{margin-top:36px}
@media(max-width:860px){.two-col{grid-template-columns:1fr}}

/* Principles */
.side-photo{margin-top:32px;border-radius:6px;overflow:hidden;aspect-ratio:3/4;max-width:360px}
.side-photo img{width:100%;height:100%;object-fit:cover}
.values{list-style:none;margin:0;padding:0}
.values li{display:grid;grid-template-columns:52px minmax(0,1fr);column-gap:16px;padding:34px 0;border-top:1px solid var(--rule)}
.values li:first-child{border-top:0;padding-top:0}
.n{grid-row:span 2;font-size:14px;color:var(--slate);padding-top:10px;font-variant-numeric:tabular-nums}
.values h3{font-size:clamp(28px,2.4vw,38px);line-height:1.1}
.values p{margin-top:10px;max-width:34em;color:var(--muted)}
@media(max-width:860px){.side-photo{display:none}}

/* Software */
.software{background:#EEEBE3}
.product-head{display:flex;align-items:center;gap:14px}
.product-head img{width:44px;height:44px;border-radius:11px}
.product-name{font-size:24px;font-weight:600;letter-spacing:-.02em}
.product .lead{margin-top:28px}
.product>p:not(.lead):not(.product-name){margin-top:22px;max-width:34em;color:var(--muted)}
.link{display:inline-block;margin-top:26px;font-weight:600;text-underline-offset:5px}
.link::after{content:" \2192"}
.product-media{position:relative;margin-top:clamp(40px,5vw,64px);aspect-ratio:16/9}
.pm-photo{position:absolute;left:0;top:0;width:72%;border-radius:6px;box-shadow:0 24px 60px -30px #0B122066}
.pm-post{position:absolute;right:0;bottom:0;width:32%;border-radius:6px;box-shadow:0 24px 60px -24px #0B122080}

/* Contact */
.contact h2{font-size:clamp(48px,6vw,96px);line-height:1}
.contact-rows{list-style:none;margin:clamp(36px,4vw,56px) 0 0;padding:0;max-width:880px}
.contact-rows li{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;padding:22px 0;border-top:1px solid var(--rule)}
.contact-rows li:last-child{border-bottom:1px solid var(--rule)}
.contact-rows span{color:var(--muted)}
.contact-rows a{font-weight:600;text-underline-offset:5px}

/* Footer */
.footer{border-top:1px solid var(--rule);padding:32px 0 calc(32px + env(safe-area-inset-bottom))}
.footer-inner{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.footer-inner img{height:20px;width:auto}
.footer nav{display:flex;gap:22px}
.footer a,.footer p{color:var(--muted);font-size:14.5px;text-decoration:none}
.footer a:hover{color:var(--ink)}
.footer p{margin-left:auto}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* Dark hero (Nicholas 10-01: "dark SaaS software startup style"): the city seen from far across the
   water, full screen, white serif statement set low like a title card; the editorial sections stay light. */
.nav{background:rgba(11,18,32,.82);border-bottom:1px solid #ffffff12}
.nav.scrolled{box-shadow:none}
.nav nav a{color:#A6B0C4}
.nav nav a:hover{color:#fff}
.intro-dark{position:relative;min-height:calc(100svh - 72px);display:flex;align-items:flex-end;margin-top:-1px;padding:clamp(120px,14vw,200px) 0 clamp(64px,8vw,120px);
 background:linear-gradient(180deg,#0B1220d9 0%,#0B122059 38%,#0B122080 70%,#0B1220f2 100%),var(--night) url(/assets/hero-city.jpg) center 62%/cover no-repeat;color:#F7F5F0}
.intro-dark h1{color:#F7F5F0}
.intro-dark .intro-sub{color:#C9D2E6}
@media(max-width:760px){.intro-dark{min-height:calc(100svh - 62px);background-position:58% 62%}}
.nav{background:#0B1220;backdrop-filter:none;-webkit-backdrop-filter:none}