/* ==========================================================================
claude_modern_001 — critical above-fold CSS (blocking, keep small)
========================================================================== */

@view-transition {
navigation: auto;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

body {
overflow-x: hidden;
}

:root {
--cm-black: #0b0b0b;
--cm-ink: #1a1a1a;
--cm-graphite: #3a3a3a;
--cm-grey-700: #555;
--cm-grey-500: #8a8a8a;
--cm-grey-300: #c9c9c9;
--cm-grey-200: #e6e6e6;
--cm-grey-100: #f2f2f2;
--cm-paper: #fafafa;
--cm-white: #ffffff;
--cm-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
--cm-font-display: "Playfair Display", Georgia, "Times New Roman", serif;
--cm-header-h: 84px;
--cm-header-h-sm: 64px;
--cm-radius: 0px;
--cm-shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.06);
--cm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.cm-header *,
.cm-back-to-top {
box-sizing: border-box;
}

.cm-header svg,
.cm-back-to-top svg {
display: inline-block;
vertical-align: middle;
fill: currentColor;
flex-shrink: 0;
}

/* Header */
.cm-header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 100;
background: rgba(255, 255, 255, 0.94);
backdrop-filter: saturate(140%) blur(10px);
-webkit-backdrop-filter: saturate(140%) blur(10px);
border-bottom: 1px solid transparent;
transition: background-color .35s var(--cm-ease),
border-color .35s var(--cm-ease),
box-shadow .35s var(--cm-ease);
font-family: var(--cm-font-sans);
}

.cm-header.is-scrolled {
background: rgba(255, 255, 255, 0.98);
border-bottom-color: var(--cm-grey-200);
box-shadow: var(--cm-shadow-soft);
}

.cm-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
padding: 20px 40px;
transition: padding .35s var(--cm-ease);
}

.cm-header.is-scrolled .cm-header__inner {
padding-top: 10px;
padding-bottom: 10px;
}

.cm-header__brand {
display: inline-flex;
align-items: center;
text-decoration: none;
color: var(--cm-black);
flex-shrink: 0;
}

.cm-header__logo {
display: block;
max-height: 52px;
max-width: 280px;
width: auto;
object-fit: contain;
aspect-ratio: 640/120;
transition: max-height .35s var(--cm-ease), max-width .35s var(--cm-ease);
}

.cm-header.is-scrolled .cm-header__logo {
max-height: 42px;
max-width: 224px;
}

.cm-header__brand-text {
font-family: var(--cm-font-display);
font-size: 22px;
font-weight: 500;
letter-spacing: 0.04em;
color: var(--cm-black);
}

.cm-header__nav {
flex: 1;
display: flex;
justify-content: center;
}

.cm-nav {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 4px;
}

.cm-nav__item {
position: relative;
}

.cm-nav__link {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 10px 16px;
font-size: 12px;
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--cm-ink);
text-decoration: none;
position: relative;
transition: color .25s var(--cm-ease);
}

.cm-nav__link::after {
content: "";
position: absolute;
left: 16px;
right: 16px;
bottom: 4px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left center;
transition: transform .4s var(--cm-ease);
}

.cm-nav__link:hover { color: var(--cm-black); }
.cm-nav__link:hover::after { transform: scaleX(1); }

.cm-nav__chevron {
width: 9px;
height: 9px;
flex-shrink: 0;
color: var(--cm-grey-500);
transition: transform .25s var(--cm-ease);
}

.cm-nav__item--has-children:hover .cm-nav__chevron {
transform: rotate(180deg);
}

.cm-header__actions {
display: flex;
align-items: center;
gap: 18px;
flex-shrink: 0;
}

.cm-header__phone {
display: inline-flex;
align-items: center;
gap: 8px;
font-size: 13px;
font-weight: 500;
color: var(--cm-ink);
text-decoration: none;
letter-spacing: 0.04em;
transition: color .25s var(--cm-ease);
}

.cm-header__phone svg { width: 12px; height: 12px; color: var(--cm-grey-500); }
.cm-header__phone:hover { color: var(--cm-black); }

.cm-header__cta { padding: 12px 22px; }

/* Buttons — only the base + dark variant needed above fold */
.cm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 14px 28px;
font-family: var(--cm-font-sans);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.16em;
text-transform: uppercase;
text-decoration: none;
border: 1px solid transparent;
border-radius: var(--cm-radius);
cursor: pointer;
transition: background-color .35s var(--cm-ease),
color .35s var(--cm-ease),
border-color .35s var(--cm-ease);
line-height: 1;
}

.cm-btn--dark {
background: var(--cm-black);
color: var(--cm-white);
border-color: var(--cm-black);
}
.cm-btn--dark:hover { background: transparent; color: var(--cm-black); }

/* Hamburger toggle — hidden on desktop */
.cm-header__toggle {
display: none;
height: 44px;
width: auto;
padding: 0 14px;
gap: 10px;
background: transparent;
border: 1px solid var(--cm-grey-200);
cursor: pointer;
font-family: var(--cm-font-sans);
}

.cm-header__toggle-label {
font-size: 11px;
font-weight: 600;
letter-spacing: 0.14em;
color: var(--cm-black);
text-transform: uppercase;
line-height: 1;
}

.cm-header__toggle-icon {
position: relative;
width: 20px;
height: 14px;
display: block;
flex-shrink: 0;
}

.cm-header__toggle-icon span {
position: absolute;
left: 0;
right: 0;
height: 1.5px;
background: var(--cm-black);
transition: transform .35s var(--cm-ease), opacity .25s var(--cm-ease), top .35s var(--cm-ease);
}

.cm-header__toggle-icon span:nth-child(1) { top: 0; }
.cm-header__toggle-icon span:nth-child(2) { top: 6px; }
.cm-header__toggle-icon span:nth-child(3) { top: 12px; }

body.cm-nav-open .cm-header__toggle-icon span:nth-child(1) { top: 6px; transform: rotate(45deg); }
body.cm-nav-open .cm-header__toggle-icon span:nth-child(2) { opacity: 0; }
body.cm-nav-open .cm-header__toggle-icon span:nth-child(3) { top: 6px; transform: rotate(-45deg); }

/* Page offset */
#page-container {
padding-top: var(--cm-header-h);
}

.cm-main {
min-height: 40vh;
}

/* Keep mobile nav off-screen before deferred CSS loads — prevents in-flow render */
.cm-mobile-nav {
position: fixed;
transform: translateX(100%);
overflow: hidden;
width: 0;
}

/* Reserve footer space so it doesn't collapse/shift when grid CSS loads */
.cm-footer {
display: block;
background: var(--cm-black);
}

@media (max-width: 1100px) {
.cm-header__nav,
.cm-header__phone { display: none; }

.cm-header__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
}

.cm-header__inner { padding: 12px 24px; }
.cm-header.is-scrolled .cm-header__inner { padding-top: 8px; padding-bottom: 8px; }

.cm-header__logo { max-height: 40px; max-width: 213px; }
.cm-header.is-scrolled .cm-header__logo { max-height: 36px; max-width: 192px; }

#page-container { padding-top: var(--cm-header-h-sm); }
}