/* Page scope only. Layers: scene 1, content 2, header 3, loader 4;
   the native dialog occupies the browser top layer. Square cards, pill controls. */
html:has(.websites-page) { scroll-behavior: auto; scrollbar-gutter: stable; }
.websites-page { background: var(--ink); color: var(--paper); font-family: var(--sans); }
.websites-page [hidden] { display: none !important; }
.websites-page button, .websites-page a { -webkit-tap-highlight-color: transparent; }
.websites-page button { font: inherit; color: inherit; cursor: pointer; }
.websites-page a { color: inherit; text-decoration: none; }
.websites-page :focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
.websites-page section { scroll-margin-top: 90px; }
#webgl-canvas { position: fixed; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; opacity: 0; }
.websites-page.scene-ready #webgl-canvas { opacity: 1; }
.web-static-mark { position: fixed; inset: 0; z-index: 1; display: grid; place-items: center; pointer-events: none; }
.web-static-mark img { width: min(86vw, 880px); height: auto; opacity: .32; transform: rotate(-12deg); }
.scene-ready .web-static-mark { visibility: hidden; }
#webPageContent { position: relative; z-index: 2; }
.web-header { height: 80px; position: absolute; inset: 0 0 auto; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding-inline: 6%; border-bottom: 1px solid rgb(244 241 234 / .13); }
.web-brand { display: flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 750; letter-spacing: .1em; }
.web-brand img { height: 30px; width: auto; }
.web-desktop-nav { display: none; }
.web-menu-toggle { display: inline-flex; align-items: center; gap: 14px; min-height: 44px; background: none; border: 0; font-family: var(--mono) !important; font-size: 11px !important; }
.web-menu-toggle span { font-size: 23px; }
.web-mobile-nav { position: absolute; inset: 79px 0 auto; background: var(--ink-raised); padding: 16px 6% 24px; border-bottom: 1px solid var(--gray); }
.web-mobile-nav a { display: block; padding-block: 12px; }
.web-skip { position: fixed; left: 6%; top: 12px; z-index: 4; padding: 12px; background: var(--ink); transform: translateY(-180%); }
.web-skip:focus { transform: none; }
.web-hero { min-height: max(720px, 100svh); padding: 116px 6% 30px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.web-hero__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.web-eyebrow, .web-draft, .bento-num, .web-step-num { font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; }
.web-eyebrow { color: var(--green); }
.web-draft { color: var(--gray); font-size: 10px; }
.web-hero h1 { max-width: 1120px; margin-top: auto; font-size: clamp(48px, 7.8vw, 112px); line-height: .99; font-weight: 650; letter-spacing: -.065em; text-wrap: balance; text-shadow: 0 3px 32px var(--ink); }
.web-hero h1 span { color: var(--paper); }
.web-hero__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px; }
.web-hero__bottom p { color: var(--paper); max-width: 34ch; font-size: 14px; line-height: 1.55; text-shadow: 0 2px 12px var(--ink); }
.web-motion { display: inline-flex; align-items: center; gap: 18px; min-height: 44px; padding: 8px 16px; border: 1px solid rgb(244 241 234 / .3); border-radius: 999px; background: var(--ink); font-family: var(--mono) !important; font-size: 10px !important; }
.web-section { padding: 88px 6%; }
.web-section-heading { margin-bottom: 36px; }
.web-section h2 { font-size: clamp(38px, 5.8vw, 84px); line-height: 1.04; letter-spacing: -.055em; font-weight: 550; }
.web-section h2 span { color: var(--gray); }
.web-section-heading .web-eyebrow, .web-contact > .web-eyebrow { margin-bottom: 22px; }
.web-services { border-top: 1px solid rgb(244 241 234 / .15); }
.bento-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-auto-rows: 1fr; gap: 16px; }
.bento-item { position: relative; min-height: 365px; isolation: isolate; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.05); border-radius: 16px; }
.bento-bg { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.bento-bg img { position: absolute; width: 100%; height: auto; top: 14%; left: 5%; opacity: .44; transform: rotate(-24deg); }
/* Image cards share BENTO_IMAGE_OPACITY from websites.js. */
:is(.bento-item--web, .bento-item--seo, .bento-item--building) .bento-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: var(--bento-image-opacity, 0.18); transform: none; }
:is(.bento-item--web, .bento-item--seo) .bento-copy p { color: var(--paper); }
.bento-num { color: var(--paper); }
.bento-copy { margin-top: 160px; }
.bento-copy h3 { font-size: clamp(24px, 2.2vw, 34px); line-height: 1.13; font-weight: 550; letter-spacing: -.035em; max-width: 16ch; }
.bento-copy h3 button { text-align: left; background: none; border: 0; font: inherit; }
.bento-copy h3 button::after { content: ''; position: absolute; inset: 0; }
.bento-copy p { margin-top: 14px; font-size: 14px; line-height: 1.6; max-width: 37ch; color: var(--gray); }
.bento-subtitle { font-size: .7em; white-space: nowrap; }
.bento-open { position: absolute; top: 16px; right: 22px; font-size: 26px; font-weight: 400; }
.bento-item:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.bento-copy button:focus-visible { outline: none; }
.bento-item--building .bento-bg img { object-position: center; }
.bento-item--building .bento-copy h3 { color: var(--gray); }
.bento-status { position: absolute; top: 64px; left: 24px; color: var(--green); font: 10px/1.5 var(--mono); text-transform: uppercase; }
.bento-build { position: absolute; left: 24px; right: 24px; top: 110px; height: 70px; overflow: hidden; border-block: 1px dashed rgb(150 147 140 / .4); display: grid; align-items: center; font: 10px var(--mono); letter-spacing: .22em; color: var(--gray); background: repeating-linear-gradient(135deg, transparent, transparent 9px, rgb(150 147 140 / .07) 9px, rgb(150 147 140 / .07) 10px); }
.bento-build > span:first-child { background: var(--ink-raised); padding-block: 8px; justify-self: start; }
.bento-scan { position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, transparent, rgb(0 210 106 / .12)); border-right: 1px solid rgb(0 210 106 / .5); }
.web-noscript { padding-top: 24px; color: var(--gray); }
.web-process { background: transparent; }
.web-steps { list-style: none; }
.web-steps li { display: grid; grid-template-columns: 38px 1fr; gap: 18px; border-top: 1px solid rgb(244 241 234 / .18); padding-block: 26px; }
.web-step-num { color: var(--green); padding-top: 7px; }
.web-steps h3 { font-size: 23px; font-weight: 500; letter-spacing: -.025em; }
.web-steps p { margin-top: 10px; max-width: 40ch; color: var(--gray); font-size: 14px; }
.web-contact { padding-block: 100px 72px; border-top: 1px solid rgb(244 241 234 / .16); }
.web-contact h2 { font-size: clamp(44px, 7.8vw, 112px); }
.web-contact h2 span { color: var(--green); }
.web-contact__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-top: 36px; }
.web-contact__bottom p { max-width: 30ch; color: var(--gray); }
.web-contact-link { display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; width: 100%; padding-block: 15px; border-bottom: 1px solid var(--green); font-size: 18px; }
.web-contact-link span { font-size: 30px; color: var(--green); }
.web-phone { display: inline-block; margin-top: 28px; min-height: 44px; color: var(--gray) !important; font: 13px/44px var(--mono); }
.web-footer { display: flex; flex-wrap: wrap; gap: 18px 32px; justify-content: space-between; padding: 24px 6%; background: var(--ink); border-top: 1px solid rgb(244 241 234 / .12); font: 11px/2 var(--mono); color: var(--gray); }
.web-footer > a { min-height: 44px; line-height: 44px; }
.web-footer > span { line-height: 44px; }
.web-preloader { position: fixed; inset: 0; z-index: 4; padding: 8%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 24px; background: var(--ink); }
.web-preloader__label { font: 11px var(--mono); color: var(--gray); }
.web-preloader__count { font: 400 clamp(70px, 14vw, 180px)/1 var(--mono); letter-spacing: -.09em; color: var(--paper); }
.web-preloader__track { width: 100%; height: 1px; background: rgb(150 147 140 / .3); }
.web-preloader__track > span { display: block; width: 100%; height: 100%; transform: scaleX(0); transform-origin: left; background: var(--green); }
.websites-page.is-loading { overflow: hidden; }
.websites-page.is-loading .web-hero { visibility: hidden; }
.websites-page.modal-open { overflow: hidden; }
.web-modal { position: fixed; margin: auto; width: min(840px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 90px 24px 36px; overflow: auto; overscroll-behavior: contain; isolation: isolate; background: var(--ink-raised); color: var(--paper); border: 1px solid rgb(244 241 234 / .22); }
.web-modal::backdrop { background: rgb(10 10 11 / .86); backdrop-filter: blur(6px); }
.web-modal__image { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.web-modal__image img { width: 120%; height: auto; position: absolute; top: 12%; left: 20%; opacity: .09; transform: rotate(-24deg); }
.web-modal__close { position: absolute; right: 20px; top: 20px; padding: 10px 18px; min-height: 44px; border-radius: 999px; border: 1px solid var(--gray); background: var(--ink); font: 11px var(--mono) !important; }
.web-modal h2 { margin: 24px 0; text-transform: uppercase; font-size: clamp(32px, 5.2vw, 66px); line-height: 1.02; font-weight: 550; letter-spacing: -.04em; overflow-wrap: anywhere; }
.web-modal__copy > p:not(.web-eyebrow):not(.web-draft) { max-width: 57ch; font-size: 16px; line-height: 1.75; }
.web-modal__status { margin-top: 20px; color: var(--green); }
.web-modal .web-draft { margin-top: 32px; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
@media (min-width: 768px) {
  .web-desktop-nav { display: flex; gap: 32px; font: 11px var(--mono); text-transform: uppercase; }
  .web-desktop-nav a { padding-block: 16px; }
  .web-desktop-nav [aria-current] { color: var(--green); }
  .web-menu-toggle, .web-mobile-nav { display: none !important; }
  .web-hero { min-height: max(760px, 100svh); padding-top: 132px; padding-bottom: 42px; }
  .web-hero h1 { margin-top: 160px; }
  .web-hero__bottom p { font-size: 16px; }
  .web-section { padding-block: 120px; }
  .web-section-heading { margin-bottom: 54px; }
  .bento-item { min-height: 430px; padding: 32px; }
  .bento-open { right: 30px; top: 25px; }
  .bento-status { left: 32px; top: 72px; }
  .bento-build { left: 32px; right: 32px; top: 130px; height: 85px; }
  .web-process { display: grid; grid-template-columns: 1fr 1fr; gap: 7%; }
  .web-process .web-section-heading h2 { font-size: clamp(42px, 4.8vw, 70px); }
  .web-contact__bottom { flex-direction: row; justify-content: space-between; align-items: center; }
  .web-contact-link { width: auto; min-width: 330px; font-size: 22px; }
  .web-modal { padding: 100px 60px 60px; }
}
@media (min-width: 1024px) {
  .bento-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento-item--building { grid-column: 1 / -1; }
}
@media (min-width: 1600px) {
  .web-section, .web-hero, .web-header, .web-footer { padding-inline: max(6%, calc((100vw - 1440px) / 2)); }
}
@media (hover: hover) {
  .bento-item:hover { border-color: var(--green); }
  .websites-page a:hover, .web-modal__close:hover { color: var(--green); }
}
@media (prefers-reduced-motion: no-preference) {
  .websites-page.motion-enabled .fade-up { opacity: 0; transform: translateY(16px); transition: opacity .45s cubic-bezier(.22,1,.36,1), transform .45s cubic-bezier(.22,1,.36,1); }
  .websites-page.motion-enabled .fade-up.is-visible { opacity: 1; transform: none; }
  .websites-page.hero-reveal .web-hero h1 { animation: web-arrive .65s cubic-bezier(.22,1,.36,1) both; }
  .websites-page.motion-enabled .bento-scan { animation: web-scan 3.5s linear infinite; }
  .websites-page.motion-paused .bento-scan { animation-play-state: paused; }
  .bento-bg img { transition: transform .5s cubic-bezier(.22,1,.36,1); }
  .web-modal.pointer-open[open] { animation: web-arrive .22s cubic-bezier(.22,1,.36,1) both; }
  @keyframes web-arrive { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes web-scan { from { transform: translateX(-110%); } to { transform: translateX(390%); } }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.websites-page), .websites-page *, .websites-page *::before, .websites-page *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
  #webgl-canvas { display: none; }
  .web-static-mark { visibility: visible; }
  .websites-page .fade-up { opacity: 1; transform: none; }
  .websites-page .web-hero { visibility: visible; }
}