/* ---------- Design tokens ---------- */
:root{
  --background: oklch(0.975 0.008 85);
  --foreground: oklch(0.27 0.012 255);
  --card: oklch(0.99 0.005 85);
  --primary: oklch(0.28 0.06 260);
  --primary-foreground: oklch(0.975 0.008 85);
  --secondary: oklch(0.94 0.012 80);
  --muted: oklch(0.93 0.01 80);
  --muted-foreground: oklch(0.5 0.015 255);
  --accent: oklch(0.58 0.08 60);
  --destructive: oklch(0.577 0.245 27.325);
  --border: oklch(0.86 0.012 80);
  --input: oklch(0.82 0.012 80);
  --navy-deep: oklch(0.2 0.045 260);
  --font-display: "Cormorant Garamond", serif;
  --font-sans: "Jost", sans-serif;
}
/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid var(--border)}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--font-sans);background:var(--background);color:var(--foreground);line-height:1.5;-webkit-font-smoothing:antialiased}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:inherit}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit;background:transparent}
button{cursor:pointer;text-align:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:500;letter-spacing:-0.01em;font-size:inherit}
[hidden]{display:none!important}
dl,dd,dt{margin:0}

.page{overflow-x:hidden;background:var(--background);padding-bottom:4rem}
.container{max-width:80rem;margin-inline:auto;padding-inline:1.25rem}
.font-display{font-family:var(--font-display)}
.eyebrow{font-family:var(--font-sans);font-size:.72rem;letter-spacing:.32em;text-transform:uppercase;color:var(--accent)}
.body-text{font-weight:300;line-height:1.625;color:var(--muted-foreground)}
.h2{font-size:2.25rem;line-height:2.5rem;color:var(--foreground)}
.h2-tight{line-height:1.25}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:1rem 1.75rem;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;transition:all .15s ease}
.btn:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.btn-primary{background:var(--primary);color:var(--primary-foreground)}
.btn-primary:hover{background:var(--navy-deep)}
.btn-sm{padding-block:.75rem}
.btn-block{width:100%}
.btn-hero{background:var(--primary-foreground);color:var(--primary)}
.btn-hero:hover{background:var(--secondary)}
.btn-light{border:1px solid color-mix(in oklab,var(--primary-foreground) 60%,transparent);color:var(--primary-foreground)}
.btn-light:hover{background:var(--primary-foreground);color:var(--primary)}

/* ---------- Header ---------- */
.site-header{position:fixed;inset:0 0 auto 0;z-index:40;transition:all .15s ease;background:transparent;color:var(--primary-foreground)}
.site-header.scrolled{border-bottom:1px solid var(--border);background:color-mix(in oklab,var(--background) 95%,transparent);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);color:var(--foreground)}
.site-header.menu-open{color:var(--foreground)}
.header-inner{display:flex;height:5rem;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:.75rem}
.brand-logo{height:3.5rem;width:auto}
.brand-name{font-size:1.25rem;line-height:1.75rem;letter-spacing:.025em}
.desktop-nav{display:none;align-items:center;gap:2rem}
.nav-link{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.2em;transition:color .15s}
.nav-link:hover{color:var(--accent)}
.desktop-nav .btn{color:var(--primary-foreground)}
.menu-btn{display:block;padding:0}
.bar{display:block;height:1px;background:currentColor}
.bar-1,.bar-2{width:1.75rem}.bar-3{width:1.25rem}
.bar-2,.bar-3{margin-top:.5rem}
.mobile-nav{border-top:1px solid var(--border);background:var(--background);padding:1.5rem 1.25rem;color:var(--foreground)}
.mobile-nav a:not(.btn){display:block;padding-block:.75rem;font-size:.875rem;line-height:1.25rem;text-transform:uppercase;letter-spacing:.2em}
.mobile-nav .btn{margin-top:1rem;color:var(--primary-foreground)}

/* ---------- Hero ---------- */
.hero{position:relative;display:flex;min-height:100vh;min-height:100svh;align-items:flex-end}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right}
.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,color-mix(in oklab,var(--navy-deep) 88%,transparent) 0%,color-mix(in oklab,var(--navy-deep) 55%,transparent) 50%,transparent 100%)}
.hero-content{position:relative;width:100%;padding-top:10rem;padding-bottom:6rem}
.hero-title{max-width:48rem;font-size:3rem;line-height:1.02;color:var(--primary-foreground)}
.hero-title em{font-weight:400;font-style:italic}
.hero-text{margin-top:2rem;max-width:32rem;font-size:1rem;line-height:1.625;font-weight:300;color:color-mix(in oklab,var(--primary-foreground) 85%,transparent)}
.hero-actions{margin-top:2.5rem;display:flex;flex-wrap:wrap;gap:1rem}

/* ---------- Intro ---------- */
.intro{display:grid;align-items:center;gap:3.5rem;padding-block:6rem}
.intro-media{position:relative;isolation:isolate}
.intro-media img{aspect-ratio:4/5;width:100%;object-fit:cover}
.intro-frame{display:none;position:absolute;right:-1.5rem;bottom:-1.5rem;z-index:-1;width:100%;height:100%;border:1px solid var(--accent)}
.text-link{display:inline-block;margin-top:2.5rem;border-bottom:1px solid var(--accent);padding-bottom:.25rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.2em;color:var(--foreground);transition:color .15s}
.text-link:hover{color:var(--accent)}

/* ---------- Services ---------- */
.services{background:var(--secondary);padding-block:6rem}
.service-grid{margin-top:4rem;display:grid;grid-template-columns:1fr;gap:1px;border:1px solid var(--border);background:var(--border)}
.service{background:var(--secondary);padding:2.5rem;transition:background .15s}
.service:hover{background:var(--card)}
.service-num{font-size:3rem;line-height:1;color:var(--accent)}
.service h3{margin-top:2rem;font-size:1.5rem;line-height:2rem;color:var(--foreground)}
.service p{margin-top:1rem}

/* ---------- Portfolio ---------- */
.work{padding-block:6rem}
.work-head{margin-bottom:4rem;display:flex;flex-direction:column;justify-content:space-between;gap:1.5rem}
.gallery{display:grid;grid-template-columns:1fr;grid-auto-rows:280px;gap:1rem}
.g-item{position:relative;overflow:hidden;background:var(--muted)}
.g-item img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.g-item:hover img{transform:scale(1.04)}
.g-overlay{position:absolute;inset:0;background:color-mix(in oklab,var(--navy-deep) 0%,transparent);transition:background .15s}
.g-item:hover .g-overlay{background:color-mix(in oklab,var(--navy-deep) 20%,transparent)}

/* ---------- Why ---------- */
.why{background:var(--primary);color:var(--primary-foreground);padding-block:6rem}
.why .h2{color:inherit}
.why-grid{margin-top:4rem;display:grid;gap:3rem}
.why-item{border-top:1px solid color-mix(in oklab,var(--primary-foreground) 25%,transparent);padding-top:1.5rem}
.why-item h3{font-size:1.5rem;line-height:2rem}
.why-item p{margin-top:.75rem;font-weight:300;line-height:1.625;color:color-mix(in oklab,var(--primary-foreground) 75%,transparent)}

/* ---------- Contact ---------- */
.contact{display:grid;gap:4rem;padding-block:6rem}
.contact-list{margin-top:3rem;font-size:.875rem;line-height:1.25rem}
.contact-list>div+div{margin-top:1.25rem}
.contact-list dd{margin-top:.25rem;font-size:1.125rem;line-height:1.75rem}
.contact-list dd a:hover{color:var(--accent)}
.form{display:flex;flex-direction:column;gap:1.5rem;border:1px solid var(--border);background:var(--card);padding:2rem}
.form-row{display:grid;gap:1.5rem}
.label{display:block;color:var(--muted-foreground)}
.field input,.field textarea{display:block;margin-top:.5rem;width:100%;border:1px solid var(--input);background:var(--background);padding:.75rem 1rem;color:var(--foreground);outline:none;transition:border-color .15s}
.field input:focus,.field textarea:focus{border-color:var(--primary)}
.field textarea{resize:vertical}
.error{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;color:var(--destructive)}
.error:empty{display:none}
.thanks{display:flex;height:100%;flex-direction:column;justify-content:center;border:1px solid var(--border);background:var(--card);padding:2.5rem}
.thanks h3{font-size:1.875rem;line-height:2.25rem;color:var(--foreground)}
.thanks p{margin-top:1rem;font-weight:300;color:var(--muted-foreground)}
.thanks a{color:var(--foreground);text-decoration:underline}

/* ---------- Footer ---------- */
.footer{background:var(--navy-deep);color:var(--primary-foreground)}
.footer-inner{display:flex;flex-direction:column;gap:2.5rem;padding-block:4rem}
.footer-brand{display:flex;align-items:center;gap:1rem}
.footer-brand img{height:4rem;width:auto}
.footer-title{font-size:1.5rem;line-height:2rem}
.footer-sub{font-size:.875rem;line-height:1.25rem;font-weight:300;color:color-mix(in oklab,var(--primary-foreground) 70%,transparent)}
.footer-nav{display:flex;flex-wrap:wrap;gap:1.5rem}
.footer-nav a{font-size:.75rem;line-height:1rem;text-transform:uppercase;letter-spacing:.2em;color:color-mix(in oklab,var(--primary-foreground) 80%,transparent);transition:color .15s}
.footer-nav a:hover{color:var(--primary-foreground)}
.footer-contact{font-size:.875rem;line-height:1.25rem;font-weight:300}
.footer-contact a{display:block;transition:color .15s}
.footer-contact a:hover{color:var(--accent)}
.copyright{border-top:1px solid color-mix(in oklab,var(--primary-foreground) 10%,transparent);padding-block:1.5rem;text-align:center;font-size:.75rem;line-height:1rem;color:color-mix(in oklab,var(--primary-foreground) 50%,transparent)}

/* ---------- Mobile sticky call ---------- */
.sticky-call{position:fixed;inset:auto 0 0 0;z-index:40;background:var(--primary);padding-block:1rem;text-align:center;font-size:.75rem;line-height:1rem;font-weight:500;text-transform:uppercase;letter-spacing:.2em;color:var(--primary-foreground)}

/* ---------- Lightbox ---------- */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;background:color-mix(in oklab,var(--navy-deep) 95%,transparent);padding:1rem}
.lightbox img{max-height:88vh;max-width:100%;object-fit:contain}
.lb-close{position:absolute;right:1.5rem;top:1.5rem;font-size:1.875rem;line-height:2.25rem;color:var(--primary-foreground)}

/* ---------- sm ≥640 ---------- */
@media (min-width:640px){
  .form-row{grid-template-columns:repeat(2,1fr)}
}
/* ---------- md ≥768 ---------- */
@media (min-width:768px){
  .page{padding-bottom:0}
  .sticky-call{display:none}
  .container{padding-inline:2.5rem}
  .brand-logo{height:4rem}
  .hero-content{padding-bottom:8rem}
  .hero-title{font-size:4.5rem}
  .hero-text{font-size:1.125rem;line-height:1.75rem}
  .h2{font-size:3.75rem;line-height:1}
  .h2-tight{line-height:1.25}
  .intro{grid-template-columns:repeat(12,1fr);padding-block:9rem}
  .intro-media{grid-column:span 6}
  .intro-copy{grid-column:8 / span 5}
  .intro-frame{display:block}
  .services{padding-block:8rem}
  .service-grid{grid-template-columns:repeat(2,1fr)}
  .work{padding-block:9rem}
  .work-head{flex-direction:row;align-items:flex-end}
  .gallery{grid-template-columns:repeat(4,1fr);grid-auto-rows:300px}
  .g-big{grid-column:span 2;grid-row:span 2}
  .g-tall{grid-row:span 2}
  .g-wide{grid-column:span 2}
  .why{padding-block:8rem}
  .why-grid{grid-template-columns:repeat(4,1fr)}
  .contact{grid-template-columns:repeat(2,1fr);padding-block:9rem}
  .form{padding:2.5rem}
  .footer-inner{flex-direction:row;justify-content:space-between}
}
/* ---------- lg ≥1024 ---------- */
@media (min-width:1024px){
  .desktop-nav{display:flex}
  .menu-btn,.mobile-nav{display:none!important}
  .hero-title{font-size:6rem}
  .service-grid{grid-template-columns:repeat(4,1fr)}
}