:root { --espresso:#2C201A; --leather:#573424; --cognac:#B55D21; --turf:#00440E; --cream:#F8E9D6; --stone:#DED4CB; --ink:#241914; --max:1180px; --edge:clamp(18px,4vw,58px); --display:"Outfit","Arial Narrow","Roboto Condensed",Impact,sans-serif; --body:"Syne",Arial,Helvetica,sans-serif; --accent:"Brush Script MT","Segoe Script",cursive; } * { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--cream); color:var(--espresso); font-family:var(--body); font-size:18px; line-height:1.5; text-rendering:optimizeLegibility; } a { color:inherit; } img { max-width:100%; height:auto; display:block; } .skip-link { position:absolute; left:12px; top:12px; z-index:99; background:var(--cream); color:var(--espresso); padding:10px 14px; transform:translateY(-150%); } .skip-link:focus { transform:translateY(0); } .nav { position:fixed; inset:0 0 auto 0; z-index:50; display:flex; justify-content:space-between; align-items:center; padding:16px var(--edge); color:var(--cream); mix-blend-mode:normal; } .nav::before { content:""; position:absolute; inset:0; background:linear-gradient(rgba(44,32,26,.78),rgba(44,32,26,.08)); z-index:-1; pointer-events:none; } .nav img { width:38px; height:38px; object-fit:contain; } .nav-links { display:none; gap:22px; align-items:center; font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:900; } .nav-links a { text-decoration:none; border-bottom:1px solid transparent; } .nav-links a:hover { border-color:currentColor; } .button { display:inline-flex; min-height:50px; align-items:center; justify-content:center; padding:15px 24px; border:2px solid var(--espresso); background:var(--espresso); color:var(--cream); text-decoration:none; text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:900; line-height:1; } .button:hover { background:var(--leather); border-color:var(--leather); } .button.light { background:var(--cream); color:var(--espresso); border-color:var(--cream); } .button.outline { background:transparent; color:var(--espresso); } .button.outline.light { color:var(--cream); border-color:rgba(248,233,214,.65); } .section { padding:clamp(66px,8vw,112px) var(--edge); } .wrap { width:min(100%,var(--max)); margin:0 auto; } .kicker { margin:0 0 16px; font-size:12px; font-weight:900; letter-spacing:.18em; text-transform:uppercase; color:var(--cognac); } .display { font-family:var(--display); font-size:clamp(44px,8vw,112px); line-height:.88; letter-spacing:-.02em; margin:0; text-transform:uppercase; } .display.small { font-size:clamp(36px,5.8vw,76px); line-height:.93; } .lede { font-size:clamp(20px,2.35vw,31px); line-height:1.22; max-width:760px; margin:22px 0 0; } .fine { font-size:12px; font-weight:900; letter-spacing:.14em; text-transform:uppercase; } .hero { min-height:100svh; position:relative; display:grid; place-items:center; overflow:hidden; padding:100px var(--edge) 48px; color:var(--cream); background:var(--espresso); isolation:isolate; } .hero::before { content:""; position:absolute; inset:0; z-index:-3; background:linear-gradient(180deg,rgba(44,32,26,.24),rgba(44,32,26,.82)),url('assets/Crowd-01.webp') center/cover no-repeat; filter:grayscale(1) contrast(1.08); } .hero::after { content:""; position:absolute; inset:0; z-index:-2; opacity:.1; background-image:radial-gradient(circle,var(--cream) 0 1px,transparent 1.3px); background-size:9px 9px; mix-blend-mode:screen; } .hero-inner { width:min(100%,1040px); display:grid; justify-items:center; text-align:center; gap:28px; } .hero-logo { width:min(82vw,760px); filter:drop-shadow(0 20px 32px rgba(0,0,0,.22)); } .hero-line { max-width:660px; margin:0; font-family:var(--display); font-weight:800; font-size:clamp(21px,3vw,35px); line-height:1.1; } .scroll-note { position:absolute; bottom:24px; left:var(--edge); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:rgba(248,233,214,.72); } .cred { background:var(--espresso); color:var(--cream); padding-top:38px; padding-bottom:38px; border-top:1px solid rgba(248,233,214,.18); } .cred .wrap { display:grid; gap:22px; align-items:center; } .cred p { margin:0; max-width:780px; font-size:clamp(20px,2.25vw,30px); line-height:1.25; color:var(--stone); } .badge-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .badge { border:1px solid rgba(248,233,214,.22); padding:14px 12px; background:rgba(248,233,214,.05); text-align:center; font-weight:900; letter-spacing:.1em; text-transform:uppercase; font-size:11px; } .intro { background:var(--cream); } .intro-grid { display:grid; gap:34px; align-items:end; } .intro-copy { display:grid; gap:18px; } .intro-copy p { margin:0; font-size:clamp(19px,2vw,26px); line-height:1.34; } .stat-card { border-top:2px solid var(--espresso); padding-top:20px; display:grid; gap:18px; } .stat-card strong { font-family:var(--display); font-size:clamp(54px,10vw,116px); line-height:.78; } .stat-card span { color:var(--leather); font-size:18px; } .services { background:var(--stone); } .service-stack { margin-top:44px; border-top:1px solid rgba(44,32,26,.38); } .service { display:grid; gap:14px; padding:28px 0; border-bottom:1px solid rgba(44,32,26,.38); } .service h3 { margin:0; font-family:var(--display); font-size:clamp(33px,5vw,58px); line-height:.92; text-transform:uppercase; } .service p { margin:0; max-width:520px; font-size:19px; } .service .num { color:var(--cognac); font-weight:900; letter-spacing:.16em; font-size:12px; } .work { background:var(--espresso); color:var(--cream); } .work .kicker { color:var(--stone); } .work-grid { display:grid; gap:18px; margin-top:42px; } .project { min-height:360px; position:relative; overflow:hidden; border:1px solid rgba(248,233,214,.25); background:var(--leather); display:grid; align-content:end; padding:24px; } .project::before { content:""; position:absolute; inset:0; background:linear-gradient(160deg,rgba(181,93,33,.78),rgba(44,32,26,.55)),var(--img); background-size:cover; background-position:center; filter:grayscale(1) contrast(1.08); opacity:.82; } .project::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 20%,rgba(44,32,26,.92)); } .project > * { position:relative; z-index:1; } .project h3 { margin:0 0 10px; font-family:var(--display); font-size:clamp(34px,5vw,62px); line-height:.9; text-transform:uppercase; } .project p { margin:0; max-width:520px; color:var(--stone); font-size:18px; } .section-note { max-width:720px; margin:18px 0 0; color:var(--stone); font-size:16px; line-height:1.5; } .project-label { display:block; margin:0 0 14px; color:var(--cream); font-family:var(--sans); font-size:11px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; opacity:.82; } .why { background:var(--cream); } .card-grid { display:grid; gap:16px; margin-top:38px; } .card { border:1px solid rgba(44,32,26,.28); background:rgba(255,255,255,.22); padding:24px; min-height:220px; display:grid; align-content:space-between; } .card h3 { margin:0 0 18px; font-family:var(--display); font-size:clamp(30px,4vw,45px); line-height:.92; text-transform:uppercase; } .card p { margin:0; color:var(--leather); } .process { background:var(--turf); color:var(--cream); } .process .kicker { color:var(--stone); } .steps { display:grid; gap:1px; margin-top:42px; background:rgba(248,233,214,.25); border:1px solid rgba(248,233,214,.25); } .step { background:var(--turf); padding:24px; } .step strong { display:block; color:var(--stone); margin-bottom:24px; } .step h3 { margin:0 0 10px; font-family:var(--display); font-size:clamp(30px,4vw,48px); line-height:.9; text-transform:uppercase; } .step p { margin:0; color:rgba(248,233,214,.82); } .quote { background:var(--cognac); color:var(--cream); text-align:center; } .quote blockquote { margin:0 auto; max-width:930px; font-family:var(--display); font-size:clamp(36px,6.5vw,84px); line-height:.92; text-transform:uppercase; } .quote figcaption { margin-top:24px; color:var(--cream); font-weight:900; letter-spacing:.14em; text-transform:uppercase; font-size:12px; } .contact { background:var(--espresso); color:var(--cream); text-align:center; position:relative; overflow:hidden; } .contact::before { content:""; position:absolute; inset:0; opacity:.06; background-image:linear-gradient(90deg,var(--cream) 1px,transparent 1px),linear-gradient(0deg,var(--cream) 1px,transparent 1px); background-size:20px 20px; } .contact .wrap { position:relative; display:grid; justify-items:center; gap:22px; } .contact-logo { width:min(78vw,480px); } .contact p { margin:0; max-width:700px; font-size:clamp(20px,2.5vw,30px); color:var(--stone); } footer { background:var(--espresso); color:var(--stone); padding:20px var(--edge); border-top:1px solid rgba(248,233,214,.16); text-align:center; font-size:12px; letter-spacing:.12em; text-transform:uppercase; } @media (min-width:740px) { .nav-links { display:flex; } .cred .wrap { grid-template-columns:1fr auto; } .badge-row { grid-template-columns:repeat(5,minmax(92px,1fr)); min-width:520px; } .intro-grid { grid-template-columns:1.15fr .85fr; } .service { grid-template-columns:96px 1fr minmax(260px,390px); align-items:center; } .work-grid { grid-template-columns:1.2fr .8fr; } .project:first-child { grid-row:span 2; min-height:640px; } .card-grid { grid-template-columns:repeat(4,1fr); } .steps { grid-template-columns:repeat(4,1fr); } } @media (max-width:739px) { body { font-size:16px; } .hero { min-height:92svh; } .button { width:100%; max-width:330px; } .badge-row { grid-template-columns:1fr; } .project { min-height:300px; } .nav { position:absolute; } } /* Approach section: wider 2x2 cards for better readability */ .approach .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); align-items: stretch; } .approach .card { min-height: 260px; padding: clamp(24px, 3vw, 34px); } .approach .card h3 { max-width: 10ch; } .approach .card p { max-width: 34ch; } @media (max-width: 739px) { .approach .card-grid { grid-template-columns: 1fr; } .approach .card { min-height: auto; } .approach .card h3, .approach .card p { max-width: none; } }