:root {
  --bg:#050706;
  --surface:#0b0f0c;
  --paper:#eef1ed;
  --text:#f5f7f4;
  --muted:#a6aea8;
  --ink:#080b09;
  --accent:#71e6aa;
  --line:rgba(255,255,255,.16);
  --shell:min(1180px,calc(100vw - 64px));
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; overflow-x:hidden; background:var(--bg); color:var(--text); font-family:Inter,Arial,sans-serif; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
button,input,textarea { font:inherit; }
.skip-link { position:fixed; z-index:200; top:8px; left:8px; padding:10px 14px; transform:translateY(-160%); background:var(--accent); color:var(--ink); }
.skip-link:focus { transform:none; }

.site-header { position:fixed; z-index:100; top:0; left:0; right:0; min-height:76px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:0 32px; border-bottom:1px solid var(--line); background:rgba(5,7,6,.86); backdrop-filter:blur(16px); }
.brand { color:var(--text); font-size:.76rem; font-weight:700; letter-spacing:.16em; text-decoration:none; }
.main-nav { display:flex; gap:34px; }
.main-nav a,.language-switch button { border:0; background:none; color:#c2c8c3; font-size:.67rem; font-weight:600; letter-spacing:.13em; text-decoration:none; text-transform:uppercase; }
.main-nav a:hover,.language-switch button:hover,.language-switch button[aria-pressed="true"] { color:var(--accent); }
.language-switch { justify-self:end; display:flex; align-items:center; gap:7px; color:#59615b; }
.language-switch button { padding:8px 3px; cursor:pointer; }

.screen { min-height:100svh; position:relative; border-bottom:1px solid var(--line); }
.hero { display:grid; grid-template-columns:minmax(0,1.04fr) minmax(420px,.96fr); align-items:stretch; padding-top:76px; background:radial-gradient(circle at 75% 45%,rgba(36,111,69,.2),transparent 32%),#050706; }
.hero-copy { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding:clamp(80px,9vw,150px) max(32px,calc((100vw - 1180px)/2)); padding-right:clamp(40px,6vw,100px); }
h1 { max-width:900px; margin:0; font-size:clamp(3.8rem,6.2vw,7.2rem); line-height:.91; letter-spacing:-.058em; }
.hero-subtitle { max-width:620px; margin:34px 0 0; color:#c4cac5; font-size:clamp(.92rem,1.25vw,1.12rem); line-height:1.65; }
.text-link { margin-top:48px; padding-bottom:8px; border-bottom:1px solid var(--accent); color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.14em; text-decoration:none; text-transform:uppercase; }
.portrait { min-height:calc(100svh - 76px); margin:0; overflow:hidden; }
.portrait img { width:100%; height:100%; display:block; object-fit:cover; object-position:center 24%; filter:saturate(.9) contrast(1.03); }

.content-shell { width:var(--shell); margin:auto; }
.section-number { margin:0 0 38px; color:var(--accent); font-size:.7rem; font-weight:700; letter-spacing:.16em; }
h2 { margin:0; font-size:clamp(3.5rem,5.7vw,6.7rem); line-height:.92; letter-spacing:-.055em; }
.about-screen { display:flex; align-items:center; background:var(--paper); color:var(--ink); }
.about-screen .content-shell { padding-block:120px; }
.about-screen .section-number { color:#167645; }
.about-text { max-width:1040px; margin:35px 0 70px; color:#343b36; font-size:clamp(1.15rem,1.9vw,1.65rem); line-height:1.55; letter-spacing:-.02em; }
.link-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:1px; border:1px solid var(--line); background:var(--line); }
.destination { min-height:300px; position:relative; display:flex; flex-direction:column; justify-content:flex-end; padding:38px; background:var(--surface); text-decoration:none; transition:.25s ease; }
.destination:hover { background:#101a13; }
.destination > span:not(.destination-icon) { color:var(--accent); font-size:.65rem; font-weight:700; letter-spacing:.15em; text-transform:uppercase; }
.destination-icon { width:62px; height:62px; display:grid; margin-bottom:auto; place-items:center; border:1px solid rgba(113,230,170,.55); color:var(--accent); font-size:2rem; }
.destination-icon::before { line-height:1; }
.icon-portfolio::before { content:"▦"; }
.icon-studio::before { content:"✦"; }
.destination strong { max-width:440px; font-size:clamp(1.8rem,3.2vw,3.5rem); line-height:.93; letter-spacing:-.05em; }
.destination i { position:absolute; right:35px; top:32px; color:var(--accent); font-size:1.5rem; font-style:normal; }

.contact { width:var(--shell); margin:auto; display:flex; align-items:center; padding-block:130px; }
.contact-copy { width:100%; }
.contact-copy h2 { max-width:820px; }
.contact-links { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; margin-top:70px; border:1px solid var(--line); background:var(--line); }
.contact-links a { min-height:150px; display:flex; align-items:center; gap:18px; padding:28px; background:var(--surface); color:#c2c8c3; font-size:clamp(.85rem,1.2vw,1rem); text-decoration:none; transition:.2s; }
.contact-links a:hover { background:#101a13; color:var(--accent); }
.contact-icon { width:46px; height:46px; flex:0 0 46px; display:grid; place-items:center; border:1px solid rgba(113,230,170,.55); color:var(--accent); font-size:1.15rem; font-weight:700; }
.contact-icon-in { font-size:.88rem; letter-spacing:-.04em; }
.contact-form { padding:clamp(30px,5vw,60px); border:1px solid var(--line); background:var(--surface); }
.contact-form label { display:block; margin-bottom:30px; }
.contact-form label > span { display:block; margin-bottom:10px; color:#8f9891; font-size:.65rem; font-weight:600; letter-spacing:.13em; text-transform:uppercase; }
.contact-form input,.contact-form textarea { width:100%; display:block; padding:13px 0; resize:vertical; border:0; border-bottom:1px solid #39413b; border-radius:0; outline:0; background:transparent; color:var(--text); }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--accent); }
.submit-button { width:100%; min-height:58px; display:flex; align-items:center; justify-content:space-between; padding:0 22px; border:1px solid var(--accent); background:var(--accent); color:var(--ink); cursor:pointer; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.submit-button:hover { background:#93f0c0; }
.submit-button i { font-style:normal; font-size:1rem; }
.form-note { margin:18px 0 0; color:#6f7871; font-size:.68rem; line-height:1.55; }

.site-footer { min-height:120px; display:flex; align-items:center; justify-content:space-between; padding:0 32px; border-top:1px solid var(--line); color:#737c75; font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; }
.site-footer .brand { color:#9fa7a1; }
.reveal { opacity:0; transform:translateY(20px); transition:opacity .65s ease,transform .65s ease; }
.reveal.is-visible { opacity:1; transform:none; }

@media (max-width:900px) {
  :root { --shell:calc(100vw - 36px); }
  .site-header { grid-template-columns:1fr auto; padding:0 18px; }
  .main-nav { display:none; }
  .hero { grid-template-columns:1fr; }
  .hero-copy { min-height:72svh; padding:120px 18px 70px; }
  h1 { font-size:clamp(3.5rem,12vw,6rem); }
  .portrait { min-height:72svh; }
  .link-grid { grid-template-columns:1fr; }
  .destination { min-height:240px; }
  .contact { padding-block:100px; }
  .contact-links { grid-template-columns:1fr; }
  .contact-links a { min-height:110px; }
}

@media (max-width:560px) {
  .site-header { min-height:68px; }
  .brand { font-size:.68rem; }
  h1 { font-size:clamp(3rem,14.7vw,4.4rem); line-height:.94; letter-spacing:-.05em; }
  h2 { font-size:clamp(3rem,14vw,4.7rem); line-height:.95; }
  .hero-copy { min-height:68svh; padding-top:105px; }
  .portrait { min-height:66svh; }
  .portrait img { object-position:center 18%; }
  .about-text { font-size:1.15rem; }
  .about-screen .content-shell { padding-block:90px; }
  .destination { padding:27px; }
  .contact { padding-block:90px; }
  .contact-form { padding:25px; }
  .site-footer { min-height:150px; flex-direction:column; justify-content:center; gap:16px; text-align:center; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  .reveal { opacity:1; transform:none; transition:none; }
  * { animation-duration:.01ms!important; transition-duration:.01ms!important; }
}
