:root{
  --bg:#e6e6e6; --bg-2:#efefef; --ink:#1a1a1a; --muted:#666; --line:#cfcfcf;
  --body:#333; --soft:#444; --nav:rgba(230,230,230,.92); --field:#999; --logo-filter:none; --blend:darken;
  --serif:"Cormorant Garamond",Georgia,serif; --sans:"Jost",system-ui,sans-serif;
}
:root[data-theme=dark]{--bg:#191919;--bg-2:#222;--ink:#ececec;--muted:#9a9a9a;--line:#333;--body:#cfcfcf;--soft:#bbb;--nav:rgba(25,25,25,.92);--field:#666;--logo-filter:invert(1);--blend:lighten;color-scheme:dark}
body,.nav,.service,input,select,textarea{transition:background-color .4s,color .4s,border-color .4s}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font:300 17px/1.75 var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15}
h2{font-size:clamp(2rem,4.5vw,3.4rem);margin-bottom:3rem}
h2 em{font-style:italic}
.eyebrow{font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);margin-bottom:1rem}

/* nav */
.nav{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.2rem clamp(1.2rem,4vw,3rem);transition:background .3s,box-shadow .3s}
.nav.solid{background:var(--nav);backdrop-filter:blur(8px);box-shadow:0 1px 0 var(--line)}
.nav__brand{text-decoration:none;font-family:var(--serif);font-size:1.3rem;letter-spacing:.12em}
.nav__brand span{font-size:.8em}
.nav__links{display:flex;align-items:center;gap:2.2rem}
.nav__links a{text-decoration:none;font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;position:relative}
.nav__links a::after{content:"";position:absolute;left:0;bottom:-4px;width:0;height:1px;background:currentColor;transition:width .3s}
.nav__links a:hover::after{width:100%}
.nav__toggle{display:none;background:none;border:0;width:32px;height:32px;position:relative;cursor:pointer}
.nav__toggle i{position:absolute;left:4px;right:4px;height:1px;background:var(--ink);transition:.3s}
.nav__toggle i:first-child{top:12px}.nav__toggle i:last-child{top:19px}
.nav__toggle[aria-expanded=true] i:first-child{top:16px;transform:rotate(45deg)}
.nav__toggle[aria-expanded=true] i:last-child{top:16px;transform:rotate(-45deg)}

.theme{background:none;border:0;color:inherit;cursor:pointer;width:32px;height:32px;display:grid;place-items:center;padding:0}
.theme svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.3}
.theme .moon{display:none}
:root[data-theme=dark] .theme .sun{display:none}
:root[data-theme=dark] .theme .moon{display:block}

/* hero */
.hero{min-height:100svh;display:grid;place-items:center;position:relative;padding:4rem 1rem 3rem}
.hero__logo{width:min(80vmin,720px);mix-blend-mode:var(--blend);filter:var(--logo-filter);animation:fade 1.4s ease both}
.hero__scroll{position:absolute;bottom:1.8rem;left:50%;width:1px;height:56px;background:var(--line);overflow:hidden}
.hero__scroll span{position:absolute;inset:0;background:var(--ink);animation:drip 2.2s ease-in-out infinite}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@keyframes fade{from{opacity:0;transform:translateY(12px)}}

/* sections */
.section{max-width:1200px;margin:0 auto;padding:clamp(4.5rem,10vw,8rem) clamp(1.2rem,4vw,3rem)}
.section--tight{padding-top:clamp(2rem,5vw,4rem)}

/* gallery */
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.gallery figure{overflow:hidden;background:var(--bg-2)}
.gallery img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.gallery figure:hover img{transform:scale(1.04)}

/* about */
#about{scroll-margin-top:4rem}
.about{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,6rem);border-top:1px solid var(--line);padding-top:clamp(3rem,6vw,5rem)}
.about h2{margin:0}
.about__body p+p{margin-top:1.2rem}
.about__body{color:var(--body)}

/* services */
.services{display:grid;gap:clamp(3rem,7vw,6rem)}
.service{display:grid;grid-template-columns:1fr 1fr;gap:clamp(1.5rem,5vw,5rem);align-items:center}
.service:nth-child(even) img{order:2}
.service img{width:100%;background:var(--bg-2)}
.service__n{font-family:var(--serif);font-style:italic;color:var(--muted);font-size:1rem}
.service h3{font-size:clamp(1.8rem,3.5vw,2.6rem);margin:.8rem 0 .6rem}
.service__tag{font-family:var(--serif);font-style:italic;font-size:1.35rem;color:var(--ink);margin-bottom:1rem}
.service p{font-size:.98rem;color:var(--soft)}

/* steps */
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:s}
.steps li{counter-increment:s;display:flex;flex-direction:column;gap:.3rem}
.steps li::before{content:counter(s,decimal-leading-zero);font-family:var(--serif);font-style:italic;color:var(--muted)}
.steps b{font-family:var(--serif);font-weight:400;font-size:1.5rem}
.steps span{font-size:.9rem;color:var(--muted)}

/* contact */
.contact{max-width:820px;text-align:center}
.contact h2{margin-bottom:1rem}
.contact__lead{color:var(--muted);margin-bottom:3rem}
.form{text-align:left;display:grid;gap:1.6rem}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1.6rem}
label{display:block;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--muted)}
input,select,textarea{width:100%;margin-top:.4rem;background:transparent;border:0;border-bottom:1px solid var(--field);border-radius:0;padding:.6rem 0;font:300 1.05rem var(--sans);color:var(--ink);outline:0;transition:border-color .3s}
textarea{resize:vertical}
input:focus,select:focus,textarea:focus{border-color:var(--ink)}
input:user-invalid,textarea:user-invalid{border-color:#a33}
.hp{position:absolute;left:-9999px}
button[type=submit]{justify-self:center;margin-top:1rem;background:var(--ink);color:var(--bg);border:1px solid var(--ink);padding:1rem 3rem;font:400 .75rem var(--sans);letter-spacing:.3em;text-transform:uppercase;cursor:pointer;transition:background .3s,color .3s}
button[type=submit]:hover{background:transparent;color:var(--ink)}
button[disabled]{opacity:.5;pointer-events:none}
.form__status{text-align:center;font-size:.95rem;min-height:1.5em}

/* footer */
.footer{text-align:center;padding:3rem 1rem 2.5rem;border-top:1px solid var(--line);font-size:.8rem;letter-spacing:.1em;color:var(--muted)}
.footer img{width:120px;margin:0 auto 1rem;mix-blend-mode:var(--blend);filter:var(--logo-filter)}
.footer a{text-decoration:none}
.footer__social{margin-top:.6rem}
.footer__social a:hover,.contact__lead a:hover{text-decoration:underline}

/* reveal */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease}
.js .reveal.in{opacity:1;transform:none}

@media(max-width:900px){
  .steps{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:1fr}
}
@media(max-width:640px){
  .nav__toggle{display:block}
  .nav__links{position:fixed;inset:0;background:var(--bg);flex-direction:column;justify-content:center;align-items:center;gap:2rem;opacity:0;visibility:hidden;transition:.3s}
  .nav__links a{font-size:1rem}
  .nav__links.open{opacity:1;visibility:visible}
  .nav__toggle{z-index:2}
  .nav__links .theme{width:40px;height:40px}
  .gallery{grid-template-columns:1fr}
  .form__row{grid-template-columns:1fr}
  .service{grid-template-columns:1fr}
  .service:nth-child(even) img{order:0}
}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}html{scroll-behavior:auto}}