@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap');

:root { --bg:#131209; --surface:#1f1f1f; --surface-2:#272727; --ink:#f7f6f1; --muted:#a7a59c; --accent:#aac989; --line:#313131; --curve:cubic-bezier(.22,1,.36,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Manrope,sans-serif; font-size:16px; line-height:24px; text-wrap:pretty; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.skip-link { position:fixed; left:16px; top:-64px; z-index:20; padding:8px 12px; background:var(--ink); color:var(--bg); border-radius:8px; }
.skip-link:focus { top:16px; }
.site-header { position:fixed; inset:16px 0 auto; z-index:10; }
.nav { display:flex; align-items:center; justify-content:space-between; max-width:1200px; margin:auto; padding:8px 12px; border:1px solid rgba(247,246,241,.1); border-radius:16px; background:rgba(19,18,9,.78); backdrop-filter:blur(16px); }
.brand { font-size:20px; font-weight:700; letter-spacing:-.04em; }.brand span { color:var(--accent); }
.menu { display:flex; gap:24px; color:var(--muted); font-size:14px; font-weight:600; }.menu a:hover { color:var(--ink); }
.menu-toggle { display:none; }
main { display:flex; flex-direction:column; overflow:hidden; }
.hero,.about,.projects,.contact,.statement { max-width:1200px; margin:auto; padding:96px 24px; }
.hero { display:grid; grid-template-columns:1fr .82fr; align-items:center; gap:80px; min-height:100dvh; }
.eyebrow { margin:0 0 16px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
h1,h2,p { margin-top:0; } h1,h2 { text-wrap:balance; letter-spacing:-.045em; }
h1 { max-width:680px; margin-bottom:24px; font-size:60px; line-height:1; font-weight:600; background:linear-gradient(90deg,#fff,#9b9b9b); color:transparent; background-clip:text; }
h2 { max-width:680px; margin-bottom:24px; font-size:48px; line-height:1; font-weight:600; }.lead { max-width:560px; color:var(--muted); font-size:20px; line-height:28px; }
.button { display:inline-flex; gap:12px; align-items:center; margin-top:16px; padding:8px 12px; border-radius:8px; background:var(--accent); color:#131209; font-weight:700; transition:transform .5s var(--curve),background .3s var(--curve); }.button:hover { transform:translateY(-4px); background:#c1df9f; }.button:active { transform:scale(.98); }
.portrait { position:relative; margin:0; padding:8px; border:1px solid rgba(247,246,241,.14); border-radius:24px; background:var(--surface); }.portrait img { aspect-ratio:1/1.15; width:100%; object-fit:cover; object-position:50% 35%; border-radius:16px; }.portrait figcaption { padding:12px 4px 4px; color:var(--muted); font-size:12px; line-height:16px; }
.hero-carousel { position:relative; min-height:100dvh; overflow:hidden; background:#131209; }.hero-backdrop,.hero-shade { position:absolute; inset:0; }.hero-backdrop { background:center/cover no-repeat url('assets/tot-home.jpg'); transition:background-image .01s linear,transform .6s var(--curve); }.hero-shade { background:rgba(19,18,9,.64); }.hero-stage { position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,1fr) minmax(460px,.9fr); align-items:end; gap:48px; min-height:100dvh; max-width:1200px; margin:auto; padding:160px 24px 96px; }.hero-copy { max-width:680px; }.hero-title { margin-bottom:24px; font-size:60px; line-height:1; font-weight:600; background:linear-gradient(90deg,#fff,#9b9b9b); color:transparent; background-clip:text; }.hero-count { margin-left:8px; color:var(--ink); }.carousel-rail { display:flex; align-items:end; gap:12px; overflow:hidden; padding-bottom:16px; }.carousel-card { position:relative; flex:0 0 116px; height:270px; padding:12px; overflow:hidden; border:1px solid rgba(247,246,241,.25); border-radius:16px; background:center/cover no-repeat; color:#fff; cursor:pointer; transition:flex-basis .6s var(--curve),height .6s var(--curve),transform .6s var(--curve),filter .3s var(--curve); }.carousel-card::after { content:""; position:absolute; inset:0; background:rgba(19,18,9,.22); }.carousel-card span { position:relative; z-index:1; display:block; font-size:12px; font-weight:700; text-shadow:0 1px 8px #000; }.carousel-card.is-active { flex-basis:216px; height:360px; transform:translateY(-16px); filter:saturate(1.05); }.carousel-controls { display:flex; gap:8px; }.carousel-nav { width:40px; height:40px; border:1px solid rgba(247,246,241,.35); border-radius:50%; background:rgba(19,18,9,.55); color:var(--ink); cursor:pointer; transition:transform .5s var(--curve),background .3s var(--curve); }.carousel-nav:hover { transform:translateY(-3px); background:var(--accent); color:var(--bg); }
.about { display:grid; grid-template-columns:.7fr 1.3fr; gap:80px; border-top:1px solid var(--line); }.about p:last-child { max-width:560px; color:var(--muted); font-size:18px; line-height:28px; }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:48px; margin-bottom:48px; }.section-heading h2 { margin:0; }
.project-grid { display:grid; grid-template-columns:1.2fr .8fr; gap:24px; }.project-card { overflow:hidden; border:1px solid var(--line); border-radius:24px; background:var(--surface); transition:transform .5s var(--curve),border-color .3s var(--curve); }.project-card:first-child { grid-row:span 2; }.project-card:hover { transform:translateY(-8px); border-color:rgba(170,201,137,.65); }.project-visual { position:relative; display:flex; align-items:end; justify-content:space-between; min-height:220px; padding:24px; overflow:hidden; font-size:36px; letter-spacing:-.06em; transition:transform .5s var(--curve); }.project-card:hover .project-visual { transform:scale(1.04); }.project-visual span { align-self:start; padding:4px 8px; border:1px solid currentColor; border-radius:8px; font-size:12px; letter-spacing:0; }.visual-tot { min-height:464px; background:#aac989; color:#131209; }.visual-lite { background:#313131; color:#f7f6f1; }.visual-control { background:#c0b3a1; color:#131209; }.project-copy { padding:24px; }.project-copy .eyebrow { margin-bottom:8px; font-size:12px; }.project-copy h3 { margin:0 0 12px; font-size:24px; line-height:32px; letter-spacing:-.035em; }.project-copy p { color:var(--muted); font-size:14px; line-height:20px; }.project-role { display:flex; justify-content:space-between; margin-top:24px; padding-top:16px; border-top:1px solid var(--line); color:var(--accent); font-size:12px; font-weight:700; }.project-role i { font-style:normal; transition:transform .5s var(--curve); }.project-card:hover .project-role i { transform:translate(4px,-4px); }
.statement { max-width:780px; padding-top:160px; padding-bottom:160px; }.statement p { margin:0; color:rgba(247,246,241,.3); font-size:36px; line-height:40px; font-weight:600; letter-spacing:-.045em; }.statement .word { transition:color .5s var(--curve); }.statement .word.is-visible { color:var(--ink); }
.contact { border-top:1px solid var(--line); }.contact p:last-child { max-width:560px; color:var(--muted); font-size:18px; line-height:28px; } footer { display:flex; justify-content:space-between; max-width:1200px; margin:auto; padding:32px 24px; color:var(--muted); font-size:12px; border-top:1px solid var(--line); } footer a:hover { color:var(--ink); }
.reveal { opacity:0; transform:translateY(32px); transition:opacity .7s var(--curve),transform .7s var(--curve); }.reveal.is-visible { opacity:1; transform:none; } a:focus-visible,button:focus-visible { outline:2px solid var(--accent); outline-offset:4px; }
@media (max-width:760px) { .site-header { inset:8px 12px auto; }.nav { padding:8px 12px; }.menu-toggle { display:block; padding:8px; border:0; background:none; color:var(--ink); font:inherit; font-size:14px; font-weight:700; }.menu { position:fixed; inset:0; z-index:-1; display:flex; flex-direction:column; justify-content:center; gap:32px; padding:32px; background:rgba(19,18,9,.97); backdrop-filter:blur(20px); font-size:30px; opacity:0; pointer-events:none; transition:opacity .3s var(--curve); }.menu.is-open { opacity:1; pointer-events:auto; }.hero,.about,.projects,.contact,.statement { padding:80px 24px; }.hero { grid-template-columns:1fr; gap:40px; padding-top:120px; }.hero-copy { order:2; }.portrait { order:1; max-width:440px; }.about { grid-template-columns:1fr; gap:24px; }.section-heading { display:block; }.project-grid { grid-template-columns:1fr; }.project-card:first-child { grid-row:auto; }.visual-tot { min-height:260px; } h1 { font-size:48px; line-height:1; } h2 { font-size:36px; line-height:40px; }.statement { padding-top:96px; padding-bottom:96px; }.statement p { font-size:30px; line-height:36px; } footer { gap:16px; flex-wrap:wrap; }.reveal { transform:translateY(16px); } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; animation-duration:.01ms!important; } .reveal { opacity:1; transform:none; } }
@media (max-width:760px) { .hero-stage { display:flex; flex-direction:column; align-items:stretch; justify-content:flex-end; gap:32px; padding:120px 24px 48px; }.hero-title { font-size:48px; }.carousel-rail { gap:8px; padding-bottom:0; }.carousel-card { flex-basis:72px; height:150px; border-radius:12px; }.carousel-card.is-active { flex-basis:168px; height:210px; transform:none; }.carousel-controls { margin-top:8px; }.about { display:block; }.about .portrait { max-width:420px; margin-bottom:40px; } }
.visual-tot { background:center/cover url('assets/tot-home.jpg'); color:#fff; }.visual-lite { background:center/cover url('assets/litedpo-concept.png'); color:#fff; }.project-visual::before { content:""; position:absolute; inset:0; background:rgba(19,18,9,.3); }.project-visual > * { position:relative; z-index:1; }
.hero-carousel { display:none; }.projects { order:1; padding-top:160px; }.about { order:2; }.statement { order:3; }.contact { order:4; }.project-visual { filter:grayscale(1); transition:transform .5s var(--curve),filter .7s var(--curve); }.project-card:hover .project-visual,.project-card:focus-within .project-visual { filter:grayscale(0); }
.statement,.contact { display:none; }