:root { --ease: cubic-bezier(0.22, 1, 0.36, 1); }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #f5ebe0; }
html { scroll-behavior: smooth; }
body {
  min-height: 100vh; background: #f5ebe0; color: #3d405b;
  font-family: 'Instrument Sans', system-ui, sans-serif; font-size: 18px; line-height: 1.55;
  font-weight: 400; letter-spacing: -.006em; -webkit-font-smoothing: antialiased;
  position: relative; overflow-x: hidden;
}
body.dys, body.dys * { font-family: 'Lexend', system-ui, sans-serif !important; }
a { color: #3d405b; text-decoration: none; }
a:hover { color: #93a392; }
::selection { background: #3d405b; color: #f5ebe0; }
img { max-width: 100%; }
input, textarea, select, button { font: inherit; }
h1, h2, h3 { font-weight: 400; }

@keyframes fadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes clipIn { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes kb { from { transform: scale(1) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(0,-1.2%,0); } }
@keyframes pageIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes grainShift { 0% { transform: translate3d(0,0,0); } 25% { transform: translate3d(-2%,1%,0); } 50% { transform: translate3d(1%,-2%,0); } 75% { transform: translate3d(-1%,-1%,0); } 100% { transform: translate3d(0,0,0); } }

html[data-anim] [data-reveal]:not([data-shown]) { opacity: 0; transform: translateY(24px); }
html[data-anim] [data-reveal][data-shown] { animation: fadeUp .8s var(--ease); }
html[data-anim] [data-clip]:not([data-shown]) { clip-path: inset(0 0 100% 0); }
html[data-anim] [data-clip][data-shown] { animation: clipIn 1s var(--ease); }
.page-in { animation: pageIn .5s var(--ease) both; }

/* hover states */
.link-underline { background-image: linear-gradient(#3d405b,#3d405b); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 1px; transition: background-size .35s var(--ease), color .35s var(--ease); }
.link-underline:hover { background-size: 100% 1px; color: #93a392; }
.btn-solid { transition: background .35s var(--ease), color .35s var(--ease); }
.btn-solid:hover { background: #93a392; color: #f5ebe0; }
.pill:hover { background: rgba(61,64,91,.08); border-color: #3d405b; }
.icon-btn { transition: background .35s var(--ease); }
.icon-btn:hover { background: rgba(61,64,91,.1); }
.card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card:hover { transform: translateY(-6px); }
.card:hover img { transform: scale(1.05); }
.gcard:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(61,64,91,.12); border-color: #3d405b; }
.gcard:hover img { transform: scale(1.05); }
.arrow-link .arrow { display: inline-block; transition: transform .3s var(--ease); }
.arrow-link:hover .arrow { transform: translateX(5px); }
.menu-item:hover { background: rgba(61,64,91,.09); }
.result-row:hover { background: rgba(61,64,91,.08); }
.social:hover { box-shadow: 0 0 22px rgba(61,64,91,.28); background: rgba(61,64,91,.08); }
details summary::-webkit-details-marker { display: none; }
details[open] .plus { transform: rotate(45deg); }
.plus { display: inline-block; transition: transform .3s var(--ease); }

/* responsive grids (mirror of the design's breakpoints) */
.grid-hero { display: grid; gap: clamp(26px,4vw,64px); grid-template-columns: 1fr; align-items: end; }
@media (min-width: 980px) { .grid-hero { grid-template-columns: minmax(0,1fr) minmax(0,.6fr); } }
.grid-split { display: grid; grid-template-columns: 1fr; }
@media (min-width: 769px) { .grid-split { grid-template-columns: 1fr 1fr; } }
.grid-services { display: grid; grid-template-columns: 1fr; gap: clamp(18px,2vw,28px); }
@media (min-width: 620px) { .grid-services { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (min-width: 1180px) { .grid-services { grid-template-columns: repeat(4,minmax(0,1fr)); } }
.order-text { order: 1; }
@media (min-width: 769px) { .order-text { order: 0; } }

/* header */
.nav-desk { display: none; gap: 18px; margin-left: auto; align-items: center; white-space: nowrap; }
@media (min-width: 1000px) { .nav-desk { display: flex; } }
@media (min-width: 1200px) { .nav-desk { gap: clamp(22px,2vw,32px); } }
.burger { display: grid; }
@media (min-width: 1000px) { .burger { display: none; } }
.header-cta { display: none; }
@media (min-width: 1120px) { .header-cta { display: inline-block; } }
.phone-text { display: none; }
@media (min-width: 560px) { .phone-text { display: inline; } }
@media (min-width: 1180px) and (max-width: 1299px) { .phone-text { display: none; } }
.brand-sub { display: block; }
@media (max-width: 440px) { .brand-sub { display: none; } }
@media (max-width: 440px) { .brand-name { font-size: 22px; } }

/* mobile drawer: solid, full screen, scrollable */
.drawer { display: none; position: fixed; inset: 0; z-index: 80; background: #f5ebe0; flex-direction: column; align-items: center; padding: 22px clamp(18px,5vw,40px) 40px; overflow-y: auto; }
.drawer[data-open] { display: flex; animation: pageIn .3s var(--ease) both; }
.panel { display: none; }
.panel[data-open] { display: block; animation: pageIn .3s var(--ease) both; }
.sheet { display: none; }
.sheet[data-open] { display: block; animation: pageIn .35s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal], [data-reveal]:not([data-shown]) { opacity: 1 !important; transform: none !important; }
  [data-clip], [data-clip]:not([data-shown]) { clip-path: none !important; }
}