/* ============ Cruz Vale site — shared styles ============ */
:root {
  --paper:#f4eee2; --paper-2:#ece3d3; --paper-3:#e3d8c4;
  --ink:#221d16; --ink-soft:#574c3e; --ink-faint:#8a7c69;
  --rust:#b4502e; --rust-deep:#8c3a1f; --rust-light:#e8865f; --green:#3f6b4f;
  --line:rgba(34,29,22,0.14); --line-soft:rgba(34,29,22,0.08);
  --shadow:0 1px 2px rgba(34,29,22,0.05),0 14px 34px rgba(80,55,30,0.10);
  --radius:16px; --radius-sm:10px; --maxw:1120px;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --body:"Work Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--body); color:var(--ink); background-color:var(--paper); background-image:repeating-linear-gradient(45deg, rgba(34,29,22,0.05) 0 1px, transparent 1px 15px), repeating-linear-gradient(-45deg, rgba(34,29,22,0.05) 0 1px, transparent 1px 15px); line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 28px; }

/* Buttons */
.btn { display:inline-flex; align-items:center; gap:8px; padding:13px 24px; border-radius:999px; font-weight:600; font-size:15px; border:1px solid transparent; cursor:pointer; transition:transform .15s ease, background .18s ease, border-color .18s ease, color .18s ease; }
.btn:hover { transform:translateY(-2px); }
.btn-primary { background:var(--rust); color:var(--paper); }
.btn-primary:hover { background:var(--rust-deep); }
.btn-ghost { background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover { border-color:var(--ink); }
.btn-light { background:#fff; color:var(--ink); }
.btn-light:hover { background:rgba(255,255,255,0.85); }
.btn-outline-light { background:rgba(255,255,255,0.06); color:#fff; border-color:rgba(255,255,255,0.55); }
.btn-outline-light:hover { background:rgba(255,255,255,0.16); border-color:#fff; }

/* ============ Landing page ============ */
.landing { position:relative; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; background:#0c0c0e; }
.landing-bg { position:absolute; inset:0; z-index:0; }
.landing-bg img { width:100%; height:100%; object-fit:cover; object-position:center 52%; }
.landing-overlay { position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,8,6,0.74) 0%, rgba(10,8,6,0.28) 26%, rgba(10,8,6,0.30) 52%, rgba(10,8,6,0.88) 100%); }
.landing > .landing-top, .landing > .landing-hero { position:relative; z-index:2; }

.landing-top { padding:30px 0 0; text-align:center; }
.brand-name { font-family:var(--display); color:#fff; font-size:clamp(28px,4.4vw,42px); font-weight:600; letter-spacing:0.01em; display:inline-block; }
.brand-name .reg { color:var(--rust-light); }
.landing-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:18px; }
.landing-nav a { color:rgba(255,255,255,0.94); font-weight:600; font-size:13.5px; letter-spacing:0.05em; text-transform:uppercase; padding:10px 16px; border:1px solid rgba(255,255,255,0.24); border-radius:999px; background:rgba(255,255,255,0.07); backdrop-filter:blur(5px); transition:all .18s ease; }
.landing-nav a:hover { background:#fff; color:var(--ink); border-color:#fff; transform:translateY(-1px); }

.landing-hero { flex:1; display:flex; align-items:flex-end; padding:0 28px 9vh; }
.landing-inner { width:100%; max-width:var(--maxw); margin:0 auto; }
.slogan { font-family:var(--display); color:#fff; font-weight:600; line-height:0.96; letter-spacing:-0.025em; font-size:clamp(46px,9vw,108px); text-shadow:0 2px 30px rgba(0,0,0,0.35); }
.slogan span { display:block; }
.slogan .em { color:var(--rust-light); font-style:italic; font-weight:500; }
.tagline { color:rgba(255,255,255,0.92); font-size:clamp(17px,2.2vw,21px); margin-top:24px; max-width:48ch; text-shadow:0 1px 16px rgba(0,0,0,0.4); }
.landing-cta { margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; }
.landing-loc { margin-top:30px; color:rgba(255,255,255,0.7); font-size:13px; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; }

/* ============ Inner page header ============ */
.site-header { position:sticky; top:0; z-index:50; background:rgba(244,238,226,0.92); backdrop-filter:blur(6px); border-bottom:1px solid var(--line-soft); }
.header-inner { display:flex; align-items:center; justify-content:space-between; padding:10px 0; }
.brand { font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-0.01em; }
.brand img, .brand-name img { display:block; height:100px; width:350px; object-fit:cover; object-position:center; transition:filter .25s ease; }
.brand img { filter:brightness(0) invert(0); }
@media (max-width:680px){ .brand img, .brand-name img { height:88px; width:308px; } }
.main-nav { display:flex; align-items:center; gap:4px; font-size:14.5px; font-weight:500; flex-wrap:wrap; }
.main-nav a { padding:8px 13px; border-radius:999px; color:var(--ink-soft); transition:color .18s ease, background .18s ease; }
.main-nav a:hover, .main-nav a.active { color:var(--ink); background:var(--paper-2); }
.main-nav .nav-cta { color:var(--paper); background:var(--ink); }
.main-nav .nav-cta:hover { background:var(--rust-deep); color:var(--paper); }
@media (max-width:680px){ .header-inner{ flex-direction:column; gap:8px; padding:6px 0; } .main-nav{ justify-content:center; } }

/* ============ Page sections ============ */
section { padding:80px 0; }
.eyebrow { font-size:13px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--rust); margin-bottom:14px; }
h1,h2,h3 { font-family:var(--display); font-weight:600; letter-spacing:-0.015em; }
.page-title { padding:74px 0 8px; }
.page-title h1 { font-size:clamp(38px,6vw,62px); line-height:1.02; letter-spacing:-0.025em; margin-bottom:18px; }
h2 { font-size:clamp(28px,4vw,42px); line-height:1.07; margin-bottom:16px; }
.lede { color:var(--ink-soft); font-size:19px; max-width:60ch; }

/* Feature banner */
.banner { width:100%; aspect-ratio:3/1; margin:40px 0 16px; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); box-shadow:var(--shadow); }
.banner img { width:100%; height:100%; object-fit:cover; object-position:center 60%; transition:transform .5s ease; }
.banner:hover img { transform:scale(1.03); }
@media (max-width:560px){ .banner{ aspect-ratio:16/10; } }

/* Two-column intro */
.split { display:grid; grid-template-columns:1.05fr 0.95fr; gap:48px; align-items:center; }
.split p { color:var(--ink-soft); font-size:17.5px; margin-bottom:16px; }
.split p:last-child { margin-bottom:0; }
.split strong { color:var(--ink); font-weight:600; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; gap:32px; } }

/* Included list */
.checks { list-style:none; display:grid; gap:14px; margin-top:24px; }
.checks li { display:flex; gap:12px; align-items:flex-start; font-size:16.5px; color:var(--ink-soft); }
.checks li::before { content:""; flex:0 0 auto; width:22px; height:22px; margin-top:2px; border-radius:50%; background:var(--rust); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='white' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/16px no-repeat; }

/* Service / skills shared */
.alt { background-color:var(--paper-2); background-image:repeating-linear-gradient(45deg, rgba(34,29,22,0.05) 0 1px, transparent 1px 15px), repeating-linear-gradient(-45deg, rgba(34,29,22,0.05) 0 1px, transparent 1px 15px); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); }
.skill-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:16px; margin-top:40px; }
.skill { background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; transition:transform .18s ease, box-shadow .18s ease; }
.skill:hover { transform:translateY(-3px); box-shadow:var(--shadow); }
.skill .k { display:inline-block; font-size:12px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); margin-bottom:10px; }
.skill h3 { font-size:19px; margin-bottom:6px; }
.skill p { color:var(--ink-soft); font-size:15.5px; }

/* Gallery */
.duo { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-top:18px; }
.portrait-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:18px; margin-top:18px; }
.tile { border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--paper); box-shadow:var(--shadow); display:flex; flex-direction:column; }
.tile .img { overflow:hidden; }
.tile.land .img { aspect-ratio:3/2; }
.tile.port .img { aspect-ratio:3/4; }
.tile img { width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.tile:hover img { transform:scale(1.045); }
.cap { padding:12px 14px 14px; }
.cap .c-cat { font-size:11.5px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase; color:var(--rust); }
.cap .c-txt { font-size:14px; color:var(--ink-soft); margin-top:2px; line-height:1.4; }
@media (max-width:560px){ .duo{ grid-template-columns:1fr; } .portrait-grid{ grid-template-columns:1fr 1fr; } }

/* Timeline */
.timeline { display:grid; margin-top:40px; border-left:2px solid var(--line); }
.tl-item { position:relative; padding:0 0 34px 30px; }
.tl-item:last-child { padding-bottom:0; }
.tl-item::before { content:""; position:absolute; left:-7px; top:6px; width:12px; height:12px; border-radius:50%; background:var(--paper); border:2px solid var(--rust); }
.tl-label { font-size:13px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:var(--rust); margin-bottom:4px; }
.tl-item h3 { font-size:20px; margin-bottom:6px; }
.tl-item p { color:var(--ink-soft); font-size:16px; max-width:70ch; }

/* Contact card */
.contact-card { background:var(--ink); color:var(--paper); border-radius:var(--radius); padding:48px; display:grid; grid-template-columns:1.1fr 0.9fr; gap:44px; align-items:center; }
.contact-card h2 { color:var(--paper); }
.contact-card .lede { color:rgba(244,238,226,0.78); }
.contact-card .em { color:var(--rust-light); font-style:italic; font-weight:500; }
.methods { display:grid; gap:14px; }
.method { display:flex; flex-direction:column; gap:2px; padding:16px 20px; border-radius:var(--radius-sm); background:rgba(244,238,226,0.07); border:1px solid rgba(244,238,226,0.13); transition:background .18s ease; }
a.method:hover { background:rgba(244,238,226,0.13); }
.method span { font-size:12.5px; text-transform:uppercase; letter-spacing:0.1em; color:rgba(244,238,226,0.6); font-weight:600; }
.method strong { font-family:var(--display); font-weight:500; font-size:19px; }
@media (max-width:760px){ .contact-card{ grid-template-columns:1fr; gap:32px; padding:32px; } }

footer { padding:30px 0; text-align:center; color:var(--ink-faint); font-size:14px; }
footer strong { color:var(--ink); font-weight:600; font-family:var(--display); }

@media (prefers-reduced-motion:no-preference){
  .reveal{ opacity:0; transform:translateY(14px); animation:rise .7s cubic-bezier(.2,.7,.2,1) forwards; }
  .d1{animation-delay:.05s;} .d2{animation-delay:.15s;} .d3{animation-delay:.25s;} .d4{animation-delay:.35s;}
  @keyframes rise{ to{ opacity:1; transform:none; } }
}
@media (max-width:860px){ section{ padding:60px 0; } }

/* ============ Full-bleed photo hero (photography page) ============ */
.site-header.float { position:fixed; top:0; left:0; right:0; background:transparent; border-bottom:1px solid transparent; transition:background .3s ease, border-color .3s ease, backdrop-filter .3s ease; }
.site-header.float .brand { color:#fff; }
.site-header.float .brand img { filter:brightness(0) invert(1); }
.site-header.float .main-nav a { color:rgba(255,255,255,0.9); }
.site-header.float .main-nav a:hover, .site-header.float .main-nav a.active { color:#fff; background:rgba(255,255,255,0.16); }
.site-header.float .main-nav .nav-cta { background:#fff; color:var(--ink); }
.site-header.float .main-nav .nav-cta:hover { background:rgba(255,255,255,0.85); }
.site-header.float.scrolled { background:rgba(244,238,226,0.95); backdrop-filter:blur(6px); border-bottom-color:var(--line-soft); }
.site-header.float.scrolled .brand { color:var(--ink); }
.site-header.float.scrolled .brand img { filter:brightness(0) invert(0); }
.site-header.float.scrolled .main-nav a { color:var(--ink-soft); }
.site-header.float.scrolled .main-nav a:hover, .site-header.float.scrolled .main-nav a.active { color:var(--ink); background:var(--paper-2); }
.site-header.float.scrolled .main-nav .nav-cta { background:var(--ink); color:var(--paper); }

.photo-hero { position:relative; min-height:100vh; min-height:100svh; display:flex; align-items:flex-end; background:#0c0c0e; overflow:hidden; }
.photo-hero .bg { position:absolute; inset:0; z-index:0; }
.photo-hero .bg img { width:100%; height:100%; object-fit:cover; object-position:center; }
.photo-hero .ov { position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(8,10,16,0.55) 0%, rgba(8,10,16,0.12) 28%, rgba(8,10,16,0.22) 55%, rgba(8,10,16,0.9) 100%); }
.photo-hero .inner { position:relative; z-index:2; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 28px 11vh; }
.photo-hero .eyebrow { color:var(--rust-light); }
.photo-hero h1 { font-family:var(--display); color:#fff; font-weight:600; line-height:0.97; letter-spacing:-0.025em; font-size:clamp(46px,9vw,104px); text-shadow:0 2px 30px rgba(0,0,0,0.4); }
.photo-hero h1 span { display:block; }
.photo-hero h1 .em { color:var(--rust-light); font-style:italic; font-weight:500; }
.photo-hero .tagline { color:rgba(255,255,255,0.92); font-size:clamp(17px,2.2vw,21px); margin-top:22px; max-width:48ch; text-shadow:0 1px 16px rgba(0,0,0,0.45); }
.scroll-cue { position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:2; color:rgba(255,255,255,0.8); font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; display:flex; flex-direction:column; align-items:center; gap:10px; }
.scroll-cue .arrow { width:16px; height:16px; border-right:2px solid rgba(255,255,255,0.8); border-bottom:2px solid rgba(255,255,255,0.8); transform:rotate(45deg); animation:bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100%{ transform:rotate(45deg) translate(0,0); } 50%{ transform:rotate(45deg) translate(4px,4px); } }

/* ============ Mobile fix: keep photo-hero text clear of the fixed header ============ */
@media (max-width:680px){
  .brand { font-size:20px; }
  .main-nav { gap:6px; }
  .main-nav a { padding:7px 12px; font-size:13.5px; }
  .photo-hero { align-items:flex-start; }
  .photo-hero .inner { padding:calc(var(--hh, 160px) + 22px) 24px 96px; }
  .photo-hero h1 { font-size:clamp(40px, 12vw, 62px); }
  .photo-hero .tagline { font-size:16.5px; margin-top:18px; }
}

/* Photography gallery grid — scales gracefully from 1 photo to many */
.gallery-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:18px; margin-top:36px; align-items:start; }
.portrait-grid { align-items:start; }
.gallery-grid .tile.port .img { aspect-ratio:3/4; }
.gallery-grid .tile.land .img { aspect-ratio:3/2; }

/* ============ Landing nav matches the inner-page pill nav (white over photo) ============ */
.landing-top .main-nav { display:flex; align-items:center; flex-wrap:wrap; justify-content:center; gap:4px; margin-top:10px; }
.landing-top .main-nav a { color:rgba(255,255,255,0.92); padding:8px 13px; font-size:14.5px; border-radius:999px; }
.landing-top .main-nav a:hover { color:#fff; background:rgba(255,255,255,0.16); }
.landing-top .main-nav .nav-cta { background:#fff; color:var(--ink); }
.landing-top .main-nav .nav-cta:hover { background:rgba(255,255,255,0.85); color:var(--ink); }
@media (max-width:680px){
  .landing-top .main-nav { gap:6px; }
  .landing-top .main-nav a { padding:7px 12px; font-size:13.5px; }
}

/* Smaller hero headline on phones so long words never clip at the edges */
@media (max-width:680px){
  .photo-hero h1 { font-size:clamp(34px, 10vw, 56px); }
  .slogan { font-size:clamp(42px, 11vw, 76px); }
}

/* ============ Social hero on phones: shorter so the front of the car AND the full sign both fit ============ */
@media (max-width:680px){
  .photo-hero.shop { min-height:108vw; }
  .photo-hero.shop .inner { padding:calc(var(--hh, 150px) + 12px) 24px 20px; }
  .photo-hero.shop .bg img { object-position:54% center; }
  .photo-hero.shop .scroll-cue { display:none; }
}