/* York Lab — Architectural Atelier: warm paper, mineral navy, editorial interiors, and measured asymmetry. */
:root { --navy:#15354A; --navy-deep:#0C2637; --ink:#1B242A; --paper:#F6F3EE; --sand:#E7E0D4; --line:rgba(27,36,42,.16); --accent:#D9704A; --serif:"DM Serif Display", Georgia, serif; --sans:"DM Sans", Arial, sans-serif; --ease:cubic-bezier(.23,1,.32,1); }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:var(--sans); font-size:16px; line-height:1.55; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button, input, textarea { font:inherit; }
.skip-link { position:fixed; z-index:100; top:10px; left:10px; padding:10px 14px; transform:translateY(-150%); color:#fff; background:var(--navy); }
.skip-link:focus { transform:translateY(0); }
.site-header { position:sticky; top:0; z-index:20; background:rgba(246,243,238,.94); border-bottom:1px solid rgba(27,36,42,.1); backdrop-filter:blur(12px); }
.nav-shell { display:flex; align-items:center; justify-content:space-between; min-height:74px; max-width:1440px; margin:0 auto; padding:0 5vw; }
.brand { display:flex; gap:9px; align-items:center; font-size:13px; font-weight:700; letter-spacing:.12em; white-space:nowrap; }
.brand img { width:30px; height:30px; object-fit:contain; }
.brand em { color:var(--accent); font-style:normal; }
.desktop-nav { display:flex; gap:28px; margin-left:auto; margin-right:32px; font-size:13px; font-weight:600; }
.desktop-nav a { position:relative; padding:8px 0; }
.desktop-nav a:after { position:absolute; bottom:4px; left:0; width:0; height:1px; background:var(--accent); content:""; transition:width .24s var(--ease); }
.desktop-nav a:hover:after { width:100%; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:48px; padding:13px 18px; color:#fff; background:var(--navy); border:1px solid var(--navy); font-size:13px; font-weight:700; letter-spacing:.02em; transition:transform .18s var(--ease), background .18s var(--ease), border .18s var(--ease); }
.button:hover { background:var(--accent); border-color:var(--accent); transform:translateY(-2px); }
.button:active { transform:scale(.97); }
.button--nav { min-height:40px; padding:9px 15px; }
.hero { position:relative; min-height:670px; display:flex; align-items:flex-end; overflow:hidden; padding:0 5vw 78px; color:#fff; background:url("../images/hero-cover.jpg") center/cover no-repeat; }
.hero-art { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:center; }
.hero-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(7,21,31,.9) 0%,rgba(7,21,31,.7) 40%,rgba(7,21,31,.23) 84%),linear-gradient(0deg,rgba(7,21,31,.48),transparent 56%); }
.hero-content { position:relative; z-index:1; max-width:860px; }
.hero-kicker,.eyebrow { display:flex; align-items:center; gap:10px; margin:0 0 19px; color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
.hero-kicker span { display:block; width:30px; height:1px; background:currentColor; }
h1,h2,h3,p { margin-top:0; }
h1,h2 { font-family:var(--serif); font-weight:400; line-height:.98; letter-spacing:-.042em; }
h1 { margin-bottom:25px; font-size:clamp(3.25rem,7.2vw,6.8rem); }
h1 em,h2 em { color:var(--accent); font-style:italic; }
.hero-content > p { max-width:475px; margin-bottom:34px; color:rgba(255,255,255,.87); font-size:18px; line-height:1.55; }
.hero-actions { display:flex; flex-wrap:wrap; align-items:center; gap:21px; }
.button--light { color:var(--navy); background:var(--paper); border-color:var(--paper); }
.button--light:hover { color:#fff; background:var(--accent); border-color:var(--accent); }
.phone-link { display:flex; gap:10px; align-items:center; font-size:13px; font-weight:700; }
.phone-dot { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; border:1px solid rgba(255,255,255,.65); border-radius:50%; font-size:12px; }
.hero-detail { position:absolute; right:5vw; bottom:42px; display:flex; align-items:center; gap:15px; color:rgba(255,255,255,.8); font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; transform:rotate(-90deg); transform-origin:right bottom; }
.hero-detail i { width:86px; height:1px; background:rgba(255,255,255,.55); }
.hero-detail b { font-size:10px; color:var(--accent); }
.intro-strip { display:flex; align-items:center; justify-content:space-between; gap:30px; padding:25px 5vw; background:var(--sand); }
.intro-strip p { margin:0; font-size:18px; }
.intro-strip strong { color:var(--navy); }
.intro-metrics { display:flex; gap:24px; color:#6a655d; font-size:12px; }
.intro-metrics span { display:flex; gap:7px; align-items:baseline; white-space:nowrap; }
.intro-metrics b { color:var(--navy); font-size:17px; }
.section { position:relative; padding:124px 9vw 120px; }
.section-side-label { position:absolute; top:133px; left:2vw; color:#766e63; font-size:10px; font-weight:700; letter-spacing:.15em; text-transform:uppercase; writing-mode:vertical-rl; transform:rotate(180deg); }
.heading-offset { max-width:1040px; margin-left:8vw; }
.eyebrow { color:var(--accent); }
h2 { margin-bottom:26px; font-size:clamp(2.65rem,5vw,5rem); }
.section-lede { max-width:570px; margin:0 0 58px; color:#68645d; font-size:17px; }
.service-list { max-width:1120px; margin-left:auto; border-top:1px solid var(--line); }
.service-item { display:grid; grid-template-columns:90px minmax(0,1fr) 45px; gap:20px; align-items:start; padding:27px 8px 27px 0; border-bottom:1px solid var(--line); transition:padding-left .25s var(--ease), background .25s var(--ease); }
.service-item:hover { padding-left:18px; background:rgba(231,224,212,.38); }
.service-number { color:var(--accent); font-size:11px; font-weight:700; letter-spacing:.1em; }
.service-item h3 { margin:0 0 7px; font-family:var(--serif); font-size:28px; font-weight:400; letter-spacing:-.02em; }
.service-item p { max-width:700px; margin:0; color:#706b62; font-size:14px; }
.service-arrow { font-size:24px; color:var(--navy); text-align:right; transition:transform .25s var(--ease); }
.service-item:hover .service-arrow { transform:translate(4px,-4px); }
.trust-section { display:grid; grid-template-columns:1fr 1fr; background:var(--navy); color:#fff; }
.trust-panel { display:flex; flex-direction:column; justify-content:center; min-height:540px; padding:88px 9vw; background:linear-gradient(135deg,#15354A,#0E2B3D); }
.eyebrow--light { color:#E6B3A0; }
.trust-panel h2 { margin-bottom:34px; }
.trust-panel h2 em { color:#E6B3A0; }
.text-link { display:inline-flex; width:max-content; gap:10px; padding-bottom:5px; border-bottom:1px solid rgba(255,255,255,.55); color:#fff; font-size:13px; font-weight:700; }
.text-link span { transition:transform .2s var(--ease); }
.text-link:hover span { transform:translate(4px,-4px); }
.trust-list { display:grid; grid-template-columns:1fr 1fr; }
.trust-list article { display:flex; gap:17px; min-height:270px; padding:55px 35px; border-right:1px solid rgba(255,255,255,.15); border-bottom:1px solid rgba(255,255,255,.15); }
.trust-icon { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border:1px solid #E6B3A0; border-radius:50%; color:#E6B3A0; font-size:12px; font-weight:700; }
.trust-list h3 { margin:3px 0 9px; font-family:var(--serif); font-size:23px; font-weight:400; line-height:1.1; }
.trust-list p { margin:0; color:rgba(255,255,255,.68); font-size:13px; }
.portfolio { padding-bottom:135px; background:#EFEAE1; }
.portfolio-heading { display:flex; justify-content:space-between; gap:50px; max-width:1120px; margin-left:auto; margin-bottom:52px; }
.portfolio-heading h2 { margin-bottom:0; }
.portfolio-heading > p { max-width:280px; align-self:flex-end; margin:0 0 4px; color:#68645d; font-size:14px; }
.portfolio-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:22px; max-width:1120px; margin:0 auto; }
.portfolio-card { grid-column:span 4; position:relative; min-height:340px; margin:0; overflow:hidden; background:var(--navy); }
.portfolio-card.card--wide { grid-column:span 8; }
.portfolio-card.card--tall { min-height:420px; }
.portfolio-card img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover; transition:transform .5s var(--ease), opacity .3s var(--ease); }
.portfolio-card:after { position:absolute; inset:0; content:""; background:linear-gradient(0deg,rgba(8,23,33,.78),transparent 58%); }
.portfolio-card:hover img { transform:scale(1.045); }
.portfolio-card figcaption { position:absolute; z-index:1; right:20px; bottom:17px; left:20px; display:flex; justify-content:space-between; gap:12px; color:#fff; font-size:13px; font-weight:700; }
.portfolio-card figcaption b { color:#E6B3A0; font-size:10px; letter-spacing:.11em; text-transform:uppercase; }
.about-section { display:grid; grid-template-columns:1.05fr .95fr; min-height:650px; background:var(--paper); }
.about-image { position:relative; min-height:470px; overflow:hidden; background:#d7cbbd; }
.about-image img { width:100%; height:100%; object-fit:cover; }
.about-image span { position:absolute; right:27px; bottom:27px; padding:13px 17px; color:#fff; background:var(--navy); font-size:10px; font-weight:700; letter-spacing:.14em; line-height:1.55; text-transform:uppercase; }
.about-content { align-self:center; max-width:580px; padding:80px 10%; }
.about-content > p:not(.eyebrow) { max-width:430px; color:#625e56; font-size:16px; }
.about-content .text-link { margin-top:15px; color:var(--navy); border-color:var(--navy); }
.contact-section { display:grid; grid-template-columns:.85fr 1.15fr; background:var(--navy-deep); color:#fff; }
.contact-intro { display:flex; flex-direction:column; justify-content:center; min-height:735px; padding:80px 9vw; background:linear-gradient(155deg,#15354A 0%,#102D40 100%); }
.contact-intro h2 { margin-bottom:25px; }
.contact-intro h2 em { color:#E6B3A0; }
.contact-intro > p:not(.eyebrow) { max-width:370px; color:rgba(255,255,255,.76); }
.contact-direct { display:flex; flex-direction:column; gap:6px; margin-top:27px; font-size:13px; font-weight:700; }
.contact-direct a { width:max-content; border-bottom:1px solid rgba(255,255,255,.4); }
.contact-card { padding:76px 8vw 45px; background:#F2EEE7; color:var(--ink); }
form { max-width:680px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.field { margin-bottom:20px; }
.field label { display:block; margin-bottom:7px; color:#514e48; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.field label span { color:var(--accent); }
.field small { color:#8a8277; font-size:10px; font-weight:500; letter-spacing:0; text-transform:none; }
input,textarea { width:100%; border:1px solid #cfc6b9; border-radius:0; outline:0; padding:12px; color:var(--ink); background:transparent; transition:border-color .18s var(--ease), box-shadow .18s var(--ease); }
textarea { resize:vertical; min-height:112px; }
input:focus, textarea:focus { border-color:var(--navy); box-shadow:0 0 0 3px rgba(21,53,74,.11); }
input::placeholder,textarea::placeholder { color:#9b9387; }
.button--submit { width:100%; margin-top:4px; }
.form-helper { margin:13px 0 0; color:#766e63; font-size:11px; line-height:1.45; text-align:center; }
.form-success { padding:65px 20px; text-align:center; }
.form-success span { display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; margin-bottom:13px; border-radius:50%; color:#fff; background:var(--navy); }
.form-success h3 { margin-bottom:5px; font-family:var(--serif); font-size:30px; font-weight:400; }
.form-success p { max-width:360px; margin:0 auto 20px; color:#6b655b; }
.form-success .text-link { color:var(--navy); background:transparent; border:0; border-bottom:1px solid var(--navy); cursor:pointer; }
.contact-details { display:flex; align-items:end; justify-content:space-between; gap:25px; padding:32px 0; border-bottom:1px solid #d7cfc4; }
.contact-details span { display:block; margin-bottom:5px; color:#7b746a; font-size:10px; font-weight:700; letter-spacing:.13em; text-transform:uppercase; }
.contact-details address { font-size:13px; font-style:normal; line-height:1.6; }
.contact-details > a { color:var(--navy); font-size:12px; font-weight:700; border-bottom:1px solid var(--navy); }
.map-shell { position:relative; height:210px; margin-top:31px; overflow:hidden; border:1px solid #d7cfc4; background:#dfe4e5; }
.map-frame { display:block; width:100%; height:100%; margin:0; border:0; filter:grayscale(.92) contrast(.92); }
.site-footer { display:flex; align-items:center; justify-content:space-between; gap:25px; padding:32px 5vw; color:#d9e2e6; background:#071923; }
.brand--footer img { width:29px; height:29px; filter:brightness(0) invert(1); }
.site-footer p,.site-footer a { margin:0; font-size:11px; }
.site-footer > div { display:flex; gap:20px; }
.site-footer a:hover { color:#E6B3A0; }
.error-message { color:#ff6b6b; margin-top:5px; font-size:14px; animation:fadeIn .3s var(--ease); }
@keyframes fadeIn { from { opacity:0; transform:translateY(-4px); } to { opacity:1; transform:translateY(0); } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { scroll-behavior:auto!important; animation-duration:.01ms!important; transition-duration:.01ms!important; } }
@media (max-width:1020px) { .trust-section,.about-section,.contact-section { grid-template-columns:1fr; } .trust-panel,.contact-intro { min-height:0; } .about-image { min-height:450px; } .contact-card { padding:64px 9vw 45px; } .section-side-label { display:none; } .heading-offset { margin-left:0; } .portfolio-heading { margin-left:0; } .section { padding-right:6vw; padding-left:6vw; } }
@media (max-width:720px) { .nav-shell { min-height:65px; padding:0 5vw; } .desktop-nav { display:none; } .button--nav { min-height:36px; padding:8px 12px; font-size:11px; } .button--nav span { display:none; } .hero { min-height:610px; padding:0 6vw 57px; background-position:57% center; } h1 { font-size:clamp(3rem,15vw,4.8rem); } .hero-content > p { max-width:330px; font-size:16px; } .hero-detail { display:none; } .intro-strip { display:block; padding:22px 6vw; } .intro-strip p { margin-bottom:15px; font-size:16px; } .intro-metrics { gap:17px; } .section { padding:78px 6vw; } h2 { font-size:clamp(2.55rem,13vw,4rem); } .section-lede { margin-bottom:38px; font-size:15px; } .service-item { grid-template-columns:43px 1fr 23px; gap:11px; padding:21px 0; } .service-item h3 { font-size:23px; } .service-item p { font-size:13px; } .trust-panel { padding:75px 7vw; } .trust-list { grid-template-columns:1fr; } .trust-list article { min-height:0; padding:30px 7vw; border-right:0; } .portfolio-heading { display:block; margin-bottom:34px; } .portfolio-heading > p { margin-top:16px; } .portfolio-grid { display:block; } .portfolio-card,.portfolio-card.card--wide,.portfolio-card.card--tall { min-height:280px; margin-bottom:14px; } .portfolio-card.card--wide { min-height:340px; } .about-image { min-height:380px; } .about-content { padding:68px 7vw; } .contact-intro { padding:74px 7vw; } .contact-card { padding:48px 7vw 35px; } .form-row { grid-template-columns:1fr; gap:0; } .contact-details { display:block; } .contact-details > a { display:inline-block; margin-top:19px; } .site-footer { display:block; padding:29px 6vw; } .site-footer p { margin:20px 0; } }