:root{
  /* Palette — OKLCH throughout, all hues pinned to 228 (the brand's dusty blue) */
  --hs-ivory:  oklch(97%   0.006 228);   /* was warm cream — now barely-cool-tinted white */
  --hs-black:  oklch(14%   0.010 228);   /* near-black with brand-hue tint               */
  --hs-steel:  oklch(88%   0.018 228);   /* was warm taupe — now cool steel surface       */
  --hs-dusty:  oklch(76%   0.048 228);   /* dusty blue — primary brand accent             */
  --hs-slate:  oklch(46%   0.042 228);   /* deeper slate for italic emphasis              */
  /* legacy alias so existing .text-dusty / .text-slate / gradients keep working */
  --hs-taupe:  var(--hs-steel);
  --bg: var(--hs-ivory);
  --fg: var(--hs-black);
  --font-serif:"Gilda Display", ui-serif, Georgia, serif;
  --font-sans: "Manrope", ui-sans-serif, system-ui, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
.skip-nav{position:absolute;top:-100%;left:1rem;background:var(--fg);color:var(--bg);padding:.5rem 1rem;font-size:.875rem;border-radius:0 0 .375rem .375rem;text-decoration:none;z-index:100}
.skip-nav:focus{top:0}
html,body{background:var(--bg);color:var(--fg);font-family:var(--font-sans);-webkit-font-smoothing:antialiased;line-height:1.5}
p{text-wrap:pretty}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,.serif{font-family:var(--font-serif);font-weight:400;letter-spacing:-0.01em;line-height:1.05;text-wrap:balance}
.italic{font-style:italic}
.serif-italic{font-family:var(--font-serif);font-style:italic}

/* Layout */
.container{max-width:80rem;margin:0 auto;padding:0 1.5rem}
@media(min-width:768px){.container{padding:0 2.5rem}}
.flex{display:flex}
.flex-col{flex-direction:column}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.items-end{align-items:flex-end}
.items-baseline{align-items:baseline}
.justify-between{justify-content:space-between}
.justify-center{justify-content:center}
.justify-end{justify-content:flex-end}
.gap-2{gap:.5rem}.gap-3{gap:.75rem}.gap-4{gap:1rem}.gap-6{gap:1.5rem}.gap-8{gap:2rem}.gap-10{gap:2.5rem}.gap-12{gap:3rem}.gap-16{gap:4rem}
.grid{display:grid}
.text-center{text-align:center}
.hidden{display:none}
.block{display:block}
.inline-block{display:inline-block}
.relative{position:relative}
.sticky{position:sticky;top:0;z-index:40}
.min-h-screen{min-height:100vh}
.w-full{width:100%}
.max-w-xl{max-width:36rem}
.max-w-2xl{max-width:42rem}
.max-w-4xl{max-width:56rem}
.max-w-7xl{max-width:80rem}
.mx-auto{margin-left:auto;margin-right:auto}
.mt-1{margin-top:.25rem}.mt-2{margin-top:.5rem}.mt-3{margin-top:.75rem}.mt-4{margin-top:1rem}.mt-6{margin-top:1.5rem}.mt-8{margin-top:2rem}.mt-10{margin-top:2.5rem}.mt-12{margin-top:3rem}.mt-16{margin-top:4rem}.mt-32{margin-top:8rem}
.mb-4{margin-bottom:1rem}
.pt-6{padding-top:1.5rem}
.pb-0\.5{padding-bottom:.125rem}
.pb-3{padding-bottom:.75rem}
.pb-4{padding-bottom:1rem}
.py-2{padding:.5rem 0}
.py-3{padding:.75rem 0}
.py-4{padding:1rem 0}
.py-5{padding:1.25rem 0}
.py-6{padding:1.5rem 0}
.py-16{padding:4rem 0}
.py-20{padding:5rem 0}
.py-24{padding:6rem 0}
.px-4{padding-left:1rem;padding-right:1rem}
.px-5{padding:0 1.25rem}
.px-6{padding-left:1.5rem;padding-right:1.5rem}
.px-7{padding:0 1.75rem}
.px-8{padding-left:2rem;padding-right:2rem}
.p-6{padding:1.5rem}
.p-8{padding:2rem}
.p-10{padding:2.5rem}
.space-y-2 > * + *{margin-top:.5rem}
.space-y-5 > * + *{margin-top:1.25rem}
.space-y-6 > * + *{margin-top:1.5rem}
.space-y-10 > * + *{margin-top:2.5rem}

/* Typography */
.text-xs{font-size:.75rem;line-height:1rem}
.text-sm{font-size:.875rem;line-height:1.25rem}
.text-base{font-size:1rem}
.text-lg{font-size:1.125rem;line-height:1.7}
.text-xl{font-size:1.25rem}
.text-2xl{font-size:1.5rem}
.text-3xl{font-size:1.875rem}
.text-4xl{font-size:2.25rem}
.text-5xl{font-size:clamp(2.25rem,5vw,3rem);line-height:1.05}
.text-6xl{font-size:clamp(2.75rem,6vw,3.75rem);line-height:1.05}
.text-7xl{font-size:clamp(3rem,7vw,4.5rem);line-height:1}
.uppercase{text-transform:uppercase}
.tracking-wider{letter-spacing:.05em}
.tracking-widest{letter-spacing:.1em}
.tracking-quarter{letter-spacing:.25em}
.leading-snug{line-height:1.2}
.leading-relaxed{line-height:1.7}
.whitespace-pre-wrap{white-space:pre-wrap}
.whitespace-pre-line{white-space:pre-line}

/* Colors */
.bg-fg{background:var(--fg)}
.text-bg{color:var(--bg)}
.text-fg{color:var(--fg)}
.fg-50{color:oklch(14% 0.010 228 / 0.60)}
.fg-60{color:oklch(14% 0.010 228 / 0.62)}
.fg-70{color:oklch(14% 0.010 228 / 0.72)}
.fg-75{color:oklch(14% 0.010 228 / 0.78)}
.fg-80{color:oklch(14% 0.010 228 / 0.82)}
.fg-85{color:oklch(14% 0.010 228 / 0.87)}
.bg-black{background:var(--hs-black)}
.text-ivory{color:var(--hs-ivory)}
.ivory-40{color:oklch(97% 0.006 228 / 0.42)}
.ivory-50{color:oklch(97% 0.006 228 / 0.52)}
.ivory-60{color:oklch(97% 0.006 228 / 0.62)}
.ivory-70{color:oklch(97% 0.006 228 / 0.72)}
.text-slate{color:var(--hs-slate)}
.text-dusty{color:var(--hs-dusty)}
.bg-taupe-30{background:oklch(88% 0.018 228 / 0.3)}
.bg-taupe-40{background:oklch(88% 0.018 228 / 0.45)}
.bg-dusty-30{background:oklch(76% 0.048 228 / 0.3)}
.bg-card{background:oklch(98.5% 0.004 228)}
.border-fg-10{border-color:oklch(14% 0.010 228 / 0.10)}
.border-fg-15{border-color:oklch(14% 0.010 228 / 0.15)}
.border-fg-20{border-color:oklch(14% 0.010 228 / 0.20)}
.border-fg-30{border-color:oklch(14% 0.010 228 / 0.30)}
.border-ivory-10{border-color:oklch(97% 0.006 228 / 0.10)}
.border-ivory-20{border-color:oklch(97% 0.006 228 / 0.20)}
.border-ivory-30{border-color:oklch(97% 0.006 228 / 0.30)}

.border{border:1px solid}
.border-t{border-top:1px solid}
.border-b{border-bottom:1px solid}
.border-y{border-top:1px solid;border-bottom:1px solid}

/* Buttons / pills */
.btn{display:inline-block;border-radius:9999px;padding:.75rem 1.75rem;font-size:.875rem;transition:opacity .15s, background .15s, color .15s;cursor:pointer;border:none;font-family:inherit}
.btn-fg{background:var(--fg);color:var(--bg)}
.btn-fg:hover{opacity:.9}
.btn-ivory{background:var(--hs-ivory);color:var(--hs-black)}
.btn-outline{border:1px solid oklch(14% 0.010 228 / 0.22);background:transparent;color:var(--fg)}
.btn-outline:hover{background:var(--fg);color:var(--bg)}
.btn-outline-ivory{border:1px solid oklch(97% 0.006 228 / 0.32);color:var(--hs-ivory);padding:.5rem 1.25rem;font-size:.875rem;display:inline-block;border-radius:9999px}
.btn-outline-ivory:hover{background:var(--hs-ivory);color:var(--hs-black)}

.rounded-md{border-radius:.375rem}
.rounded-xl{border-radius:.75rem}
.rounded-2xl{border-radius:1rem}
.rounded-3xl{border-radius:1.5rem}
.rounded-full{border-radius:9999px}

/* Hero scale text */
.hero-h1{font-size:clamp(3rem,8vw,6rem);line-height:.97;letter-spacing:-.025em;margin-top:.5rem}
.hero-h1-sub{font-size:clamp(3rem,8vw,7rem);line-height:.95}

/* Grids responsive */
.grid-2{grid-template-columns:1fr;gap:2.5rem}
.grid-3{grid-template-columns:1fr;gap:2.5rem}
@media(min-width:768px){
  .grid-2{grid-template-columns:1fr 1fr}
  .grid-3{grid-template-columns:repeat(3,1fr)}
  .grid-12{grid-template-columns:1fr 1.2fr}
  .grid-21{grid-template-columns:1fr 2fr}
  .grid-14{grid-template-columns:1.4fr 1fr}
  .md-pt-28{padding-top:7rem}
  .md-py-32{padding:8rem 0}
  .md-text-5xl{font-size:3rem;line-height:1.05}
  .md-text-6xl{font-size:3.75rem;line-height:1.05}
  .md-text-7xl{font-size:4.5rem}
  .md-justify-end{justify-content:flex-end}
  .md-flex{display:flex}
  .md-hidden{display:none}
  .md-text-right{text-align:right}
  .md-pt-10{padding-top:2.5rem}
  .md-pt-16{padding-top:4rem}
  .md-grid-3{grid-template-columns:1fr 1fr 1fr}
  .md-p-16{padding:4rem}
  .md-py-28{padding:7rem 0}
  .md-row-rev .col-img{order:2}
}
.aspect-4-5{aspect-ratio:4/5}
.aspect-4-3{aspect-ratio:4/3}
.overflow-hidden{overflow:hidden}

/* Gradients */
.grad-1{background:linear-gradient(135deg,var(--hs-taupe),var(--hs-dusty) 50%,var(--hs-slate))}
.grad-2{background:linear-gradient(135deg,var(--hs-dusty),var(--hs-slate) 60%,var(--hs-black))}
.grad-3{background:linear-gradient(135deg,var(--hs-taupe),var(--hs-dusty) 60%,var(--hs-slate))}
.grad-dusty-slate{background:linear-gradient(135deg,var(--hs-dusty),var(--hs-slate))}
.grad-taupe-dusty{background:linear-gradient(135deg,var(--hs-taupe),var(--hs-dusty))}

/* Header */
.site-header{position:sticky;top:0;z-index:40;border-bottom:1px solid oklch(14% 0.010 228 / 0.1);background:oklch(97% 0.006 228 / 0.88);backdrop-filter:saturate(1.4) blur(8px)}
.nav-row{display:flex;align-items:center;justify-content:space-between;max-width:80rem;margin:0 auto;padding:1.25rem 1.5rem}
@media(min-width:768px){.nav-row{padding:1.25rem 2.5rem}}
.logo{font-family:var(--font-serif);font-size:1.5rem;letter-spacing:-.01em}
.logo .s-ital{font-style:italic;font-size:1.35em;line-height:1}
.nav-links{display:none;gap:2rem;align-items:center}
@media(min-width:768px){.nav-links{display:flex}}
.nav-link{font-size:.875rem;color:oklch(14% 0.010 228 / 0.70)}
.nav-link:hover,.nav-link.active{color:var(--fg)}
.menu-btn{background:none;border:none;cursor:pointer;display:block}
@media(min-width:768px){.menu-btn{display:none}}
.menu-btn span{display:block;width:24px;height:1px;background:var(--fg);margin:6px 0}
.mobile-nav{display:none;flex-direction:column;border-top:1px solid oklch(14% 0.010 228 / 0.1);padding:1rem 1.5rem}
.mobile-nav.open{display:flex}
.mobile-nav .btn-fg{padding:.625rem 1.25rem;border-radius:9999px;font-size:.875rem}
.mobile-nav a{padding:.75rem 0;font-size:1rem;color:oklch(14% 0.010 228 / 0.80);min-height:44px;display:flex;align-items:center}
@media(min-width:768px){.mobile-nav{display:none !important}}

/* Footer */
.site-footer{margin-top:8rem;border-top:1px solid oklch(14% 0.010 228 / 0.1);background:var(--hs-black);color:var(--hs-ivory)}
.footer-grid{max-width:80rem;margin:0 auto;padding:5rem 1.5rem;display:grid;gap:3rem;grid-template-columns:1fr}
@media(min-width:768px){.footer-grid{grid-template-columns:repeat(3,1fr);padding:5rem 2.5rem}}
.footer-bottom{border-top:1px solid oklch(97% 0.006 228 / 0.10)}
.footer-bottom-inner{max-width:80rem;margin:0 auto;padding:1.5rem;display:flex;flex-direction:column;gap:.5rem;font-size:.75rem;color:oklch(97% 0.006 228 / 0.52)}
@media(min-width:768px){.footer-bottom-inner{flex-direction:row;justify-content:space-between;align-items:center;padding:1.5rem 2.5rem}}

/* About grid */
.about-grid{display:grid;grid-template-columns:1fr;gap:2rem}
@media(min-width:768px){.about-grid{grid-template-columns:420px 1fr;gap:4rem;align-items:start}}

/* Hero visual */
.hero-visual{height:clamp(260px,38vw,520px);overflow:hidden}
.hero-visual-img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}

/* Marquee */
.marquee-wrap{overflow:hidden;background:var(--hs-dusty);padding:1.5rem 0}
.marquee{display:flex;width:max-content;gap:3rem;white-space:nowrap;color:var(--hs-ivory);animation:marquee-scroll 28s linear infinite}
.marquee-group{display:flex;align-items:center;gap:3rem;font-family:var(--font-serif);font-size:clamp(1.5rem,3vw,2.25rem)}
.marquee-sep{color:oklch(97% 0.006 228 / 0.45);font-size:.7em;line-height:1}
.marquee-driven{color:oklch(88% 0.032 228)}
@keyframes marquee-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.marquee{animation-play-state:paused}}

/* Service list */
.service-list{margin-top:3.5rem;border-top:1px solid oklch(97% 0.006 228 / 0.14)}
.service-row{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:2rem 0;border-bottom:1px solid oklch(97% 0.006 228 / 0.14);text-decoration:none;color:inherit;transition:opacity .2s ease}
.service-row:hover{opacity:.72}
.service-row:hover .service-arrow{transform:translateX(5px)}
.service-row-main{flex:1;display:flex;flex-direction:column;gap:.6rem}
.service-name{font-size:clamp(1.375rem,3vw,2.125rem);line-height:1.05;color:var(--hs-ivory);letter-spacing:-.01em}
.service-desc{font-size:.875rem;color:oklch(97% 0.006 228 / 0.62);max-width:36rem;line-height:1.65;letter-spacing:.01em}
.service-row-meta{display:flex;align-items:center;gap:1.25rem;flex-shrink:0}
.service-price{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:var(--hs-dusty);white-space:nowrap}
.service-arrow{color:oklch(97% 0.006 228 / 0.38);font-size:1.125rem;transition:transform .2s cubic-bezier(.22,1,.36,1)}
@media(max-width:600px){
  .service-row{flex-direction:column;align-items:flex-start;gap:.875rem}
  .service-row-meta{flex-direction:row;gap:1rem}
}
@media(prefers-reduced-motion:reduce){
  .service-row{transition:none}
  .service-arrow{transition:none}
}

/* Forms */
.field{display:grid;gap:.5rem}
.field label{font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;color:oklch(14% 0.010 228 / 0.62)}
.field input,.field select,.field textarea,.input{border:1px solid oklch(14% 0.010 228 / 0.2);background:var(--bg);border-radius:.375rem;padding:.75rem 1rem;font-size:.875rem;font-family:inherit;color:var(--fg)}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--fg)}

.border-bottom-foreground{border-bottom:1px solid oklch(14% 0.010 228 / 0.3);padding-bottom:2px}
.border-bottom-foreground:hover{border-color:var(--fg)}

/* Hover utils */
.hover-slate:hover{color:var(--hs-slate)}
.hover-dusty:hover{color:var(--hs-dusty)}
.hover-underline:hover{text-decoration:underline;text-underline-offset:4px}
.hover-opacity:hover{opacity:.9}

/* Portfolio cards */
.portfolio-card{display:block;color:inherit;text-decoration:none}
.portfolio-img-wrap{position:relative}
.portfolio-img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 0.55s cubic-bezier(0.22,1,0.36,1)}
.portfolio-card:hover .portfolio-img{transform:scale(1.04)}
.portfolio-overlay{position:absolute;inset:0;background:oklch(14% 0.010 228 / 0);display:flex;align-items:flex-end;padding:1.25rem 1.5rem;color:var(--hs-ivory);opacity:0;transition:background 0.3s ease,opacity 0.3s ease}
.portfolio-card:hover .portfolio-overlay{background:oklch(14% 0.010 228 / 0.45);opacity:1}
@media(prefers-reduced-motion:reduce){
  .portfolio-img{transition:none}
  .portfolio-overlay{transition:none}
}

/* Misc */
.list-item{display:flex;gap:.75rem;border-bottom:1px solid oklch(14% 0.010 228 / 0.10);padding-bottom:.75rem}
.list-item + .list-item{margin-top:.75rem}
.dash{color:var(--hs-slate)}