/* Vintiö Industries — a deliberately small, dependency-free first website. */
:root { color-scheme: light; --ink:#332f2b; --charcoal:#58534d; --muted:#756f68; --line:#ddd8d1; --paper:#f8f6f2; --offwhite:#fdfcf9; --sand:#ece8e1; --stone:#8d877f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:Arial, Helvetica, sans-serif; font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; }
a { color:inherit; }
a:focus-visible { outline:3px solid #887569; outline-offset:5px; border-radius:2px; }
img { max-width:100%; display:block; }
.container { max-width:1230px; padding-inline:38px; margin-inline:auto; }
.skip-link { position:absolute; left:12px; top:-100px; z-index:200; background:#fff; padding:12px 16px; }
.skip-link:focus { top:12px; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); }
.header-inner { min-height:112px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.brand { display:inline-flex; align-items:center; flex:0 0 auto; }
.brand img { width:206px; height:auto; }
.navigation { display:flex; align-items:center; gap:38px; font-size:12px; text-transform:uppercase; letter-spacing:.14em; font-weight:600; }
.navigation a { text-decoration:none; white-space:nowrap; }
.navigation a:hover { color:#837970; }
.navigation .nav-contact { padding-bottom:6px; border-bottom:1px solid var(--charcoal); }
.navigation .nav-contact span { margin-left:8px; }
.hero { padding:70px 0 112px; }
.hero-grid { display:grid; grid-template-columns:minmax(0, .91fr) minmax(0, 1.09fr); align-items:center; gap:62px; }
.eyebrow { color:var(--charcoal); font-size:11px; letter-spacing:.19em; text-transform:uppercase; font-weight:700; line-height:1.55; }
.eyebrow-rule { display:inline-block; width:25px; height:1px; background:currentColor; margin-right:12px; vertical-align:middle; }
.hero-copy .eyebrow::after { content:""; display: inline-block; width: 25px; height:1px; background:currentColor; margin-left:12px; vertical-align:middle; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { line-height:1.08; letter-spacing:-.047em; }
h1 { font-size:clamp(55px,6.2vw,92px); font-weight:500; margin:30px 0 30px; }
h1 span { color:var(--stone); }
.hero-lead { font-size:clamp(20px,2vw,25px); line-height:1.36; font-weight:500; max-width:470px; margin-bottom:22px; }
.hero-body { max-width:435px; color:#68615a; font-size:15px; line-height:1.85; }
.hero-actions { display:flex; flex-wrap:wrap; gap:15px 25px; align-items:center; margin-top:42px; }
.primary-link { display:inline-flex; justify-content:space-between; gap:25px; align-items:center; background:var(--charcoal); color:white; padding:15px 19px; font-size:13px; text-decoration:none; font-weight:600; transition:background .18s ease; }
.primary-link:hover { background:#3e3935; }
.primary-link span { font-size:18px; line-height:1; }
.hero-note { color:#898179; font-size:12px; }
.hero-media { position:relative; background:#e9e6e0; }
.hero-photo { width:100%; height:580px; object-fit:cover; object-position:center; }
.hero-index { display:flex; justify-content:space-between; gap:15px; position:absolute; left:22px; right:22px; bottom:20px; font-size:10px; text-transform:uppercase; letter-spacing:.16em; color:#fff; text-shadow:0 1px 8px #1f1b16, 0 1px 8px #1f1b16; font-weight:700; }
.intro-section { background:var(--offwhite); border-top:1px solid var(--line); padding:112px 0 100px; }
.section-heading { display:grid; grid-template-columns: 1.15fr .85fr; gap:75px; align-items:end; margin-bottom:65px; }
.section-heading h2 { font-size:clamp(42px,4.7vw,68px); font-weight:500; margin:20px 0 0; }
.section-heading em { font-style:normal; color:var(--stone); }
.section-intro { font-size:17px; line-height:1.8; color:#69635d; max-width:470px; margin:0 0 5px; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); border-top:1px solid var(--line); }
.feature { padding:32px 36px 5px 0; }
.feature + .feature { border-left:1px solid var(--line); padding-left:36px; }
.feature-number { color:var(--stone); font-size:12px; letter-spacing:.16em; }
.feature h3 { font-size:20px; line-height:1.35; margin:22px 0 14px; font-weight:600; letter-spacing:-.025em; }
.feature p { font-size:14px; color:#6f6861; line-height:1.85; margin-bottom:0; }
.gallery-section { background:var(--offwhite); padding-bottom:112px; }
.gallery-grid { display:grid; grid-template-columns: 1.22fr .78fr; gap:20px; }
.gallery-card { margin:0; background:var(--paper); overflow:hidden; }
.gallery-card-primary { grid-row:span 2; }
.gallery-card img { width:100%; height:247px; object-fit:cover; object-position:center; }
.gallery-card-primary img { height:610px; }
.gallery-card figcaption { display:flex; justify-content:space-between; gap:15px; padding:17px 18px; text-transform:uppercase; letter-spacing:.15em; font-size:10px; color:var(--charcoal); }
.gallery-card figcaption span:last-child { color:#8f8982; }
.story-section { background:var(--sand); padding:112px 0 122px; }
.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:110px; }
.story-grid h2 { font-size:clamp(44px,4.7vw,69px); font-weight:500; margin:24px 0 0; max-width:545px; }
.story-copy { padding-top:44px; }
.story-copy p { font-size:15px; color:#625c56; line-height:1.9; }
.story-copy .story-lead { font-size:25px; color:var(--charcoal); font-weight:500; letter-spacing:-.02em; margin-bottom:22px; line-height:1.4; }
.contact-section { background:var(--charcoal); color:#fbfaf7; padding:95px 0 105px; }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; align-items:end; gap:80px; }
.contact-section .eyebrow { color:#d4cdc4; }
.contact-section h2 { font-size:clamp(43px,4vw,63px); font-weight:500; margin:20px 0 22px; }
.contact-section p:not(.eyebrow) { max-width:480px; color:#d7d0c7; font-size:15px; margin:0; }
.email-link { color:#fff; display:inline-flex; justify-content:space-between; align-items:baseline; gap:18px; text-decoration:none; font-size:clamp(22px,2.9vw,39px); font-weight:400; border-bottom:1px solid #c7c0b7; padding-bottom:12px; letter-spacing:-.03em; white-space:nowrap; }
.email-link:hover { color:#ded6cb; }
.email-link span { font-size:25px; }
.site-footer { background:#49443e; color:#dad4cb; }
.footer-inner { display:flex; flex-wrap:wrap; justify-content:space-between; gap:18px 30px; align-items:center; min-height:90px; font-size:12px; }
.footer-inner a { text-decoration:none; border-bottom:1px solid currentColor; }
@media (max-width:1050px) { .hero-grid{gap:36px} .hero-photo{height:510px} .hero{padding:55px 0 80px} .story-grid{gap:55px} .contact-grid{gap:35px} }
@media (max-width:800px) { .container{padding-inline:25px} .header-inner{min-height:90px} .brand img{width:175px} .navigation{gap:18px;font-size:10px} .hero-grid{grid-template-columns:1fr;gap:40px} .hero-copy{max-width:690px} h1{font-size:clamp(58px,10vw,80px);margin:22px 0 20px} .hero-body{max-width:630px} .hero-photo{height:auto;max-height:630px;aspect-ratio:1.2/1;object-fit:cover} .section-heading{grid-template-columns:1fr;gap:25px;margin-bottom:40px} .section-intro{max-width:600px} .intro-section{padding:80px 0} .feature-grid{grid-template-columns:1fr} .feature{padding:24px 0} .feature+.feature{border-left:0;border-top:1px solid var(--line);padding:24px 0} .feature h3{margin:10px 0} .gallery-section{padding-bottom:80px} .story-section{padding:78px 0} .story-grid{grid-template-columns:1fr;gap:20px} .story-copy{padding-top:0;max-width:650px} .contact-grid{grid-template-columns:1fr;gap:40px} }
@media (max-width:540px) { .container{padding-inline:20px} .header-inner{align-items:flex-start;flex-direction:column;gap:15px;padding-top:18px;padding-bottom:20px} .brand img{width:177px} .navigation{gap:20px;flex-wrap:wrap;font-size:10px} .hero{padding:44px 0 68px} .hero h1{font-size:clamp(52px,12.5vw,72px)} .hero-lead{font-size:21px} .hero-body{font-size:14px} .hero-actions{margin-top:28px;align-items:flex-start;flex-direction:column} .hero-photo{aspect-ratio:1/1;height:auto} .hero-index{font-size:9px;left:13px;right:13px;bottom:12px} .section-heading h2{font-size:46px} .section-intro{font-size:16px} .gallery-grid{grid-template-columns:1fr;gap:14px} .gallery-card-primary{grid-row:auto} .gallery-card img,.gallery-card-primary img{height:auto;aspect-ratio:1.1/1;object-fit:cover} .story-grid h2{font-size:47px} .contact-section{padding:72px 0 80px} .contact-section h2{font-size:45px} .email-link{font-size:clamp(22px,6.5vw,30px)} .footer-inner{align-items:flex-start;flex-direction:column;justify-content:center;padding-block:25px;gap:12px} }
@media (prefers-reduced-motion:reduce) { html{scroll-behavior:auto} *{transition:none !important} }
.hero-copy .eyebrow-rule, .hero-copy .eyebrow::after {display: none; }