/* ========================================================================== Self-hosted fonts. Replaces the Google Fonts request that used to sit in every : one less render-blocking third-party round trip, and no visitor data leaving this server (see privacy.html §5). All three are variable fonts, so one file covers every weight the site uses. Latin subset only. Licensed under the SIL Open Font License 1.1 — see assets/fonts/OFL.txt. ========================================================================== */ @font-face{ font-family:'Archivo'; src:url('assets/fonts/archivo-var.woff2') format('woff2-variations'); font-weight:400 900; font-stretch:75% 125%; font-style:normal; font-display:swap; } @font-face{ font-family:'Inter'; src:url('assets/fonts/inter-var.woff2') format('woff2-variations'); font-weight:400 600; font-style:normal; font-display:swap; } @font-face{ font-family:'JetBrains Mono'; src:url('assets/fonts/jetbrains-mono-var.woff2') format('woff2-variations'); font-weight:400 500; font-style:normal; font-display:swap; } /* ========================================================================== Black Oak Consulting Dark theme · oak amber accent · Archivo display / Inter body / JetBrains Mono labels ========================================================================== */ :root{ /* surfaces */ --bg: #0B0B0C; --bg-2: #101012; --surface: #151518; --surface-2: #1B1B1F; --line: #26262C; --line-2: #33333B; /* text */ --fg: #F2F0ED; --fg-2: #C6C4C0; --muted: #9C9CA6; /* 7.2:1 on --bg */ /* oak */ --oak: #E0A458; /* 9.0:1 on --bg */ --oak-2: #F0BE7E; --oak-dim: #8A6533; --oak-glow: rgba(224,164,88,.14); --danger: #FF7B72; /* type */ --f-display: 'Archivo', 'Archivo Expanded', system-ui, sans-serif; --f-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --f-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace; /* space */ --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4rem; --s7:6rem; --s8:8rem; --wrap: 1240px; --r: 2px; /* motion */ --e-out: cubic-bezier(.22,1,.36,1); --t: 260ms; } *,*::before,*::after{ box-sizing:border-box; } /* `hidden` must beat any display rule below (banner panel, buttons, menus) */ [hidden]{ display:none !important; } html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } } body{ margin:0; background:var(--bg); color:var(--fg); font-family:var(--f-body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; overflow-x:hidden; } img{ max-width:100%; height:auto; display:block; } a{ color:inherit; } ::selection{ background:var(--oak); color:#000; } :focus-visible{ outline:2px solid var(--oak); outline-offset:3px; border-radius:2px; } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; } .skip-link{ position:absolute; left:var(--s2); top:-100px; z-index:200; background:var(--oak); color:#000; padding:.7rem 1.1rem; font:600 14px/1 var(--f-body); text-decoration:none; transition:top 180ms var(--e-out); } .skip-link:focus{ top:var(--s2); } .wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; } /* ── type scale ───────────────────────────────────────────── */ .h2{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:clamp(1.9rem, 4.6vw, 3.4rem); line-height:1.04; letter-spacing:-.028em; margin:0 0 var(--s3); text-wrap:balance; } .h2--wide{ max-width:16ch; } .eyebrow{ font-family:var(--f-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--oak); margin:0 0 var(--s3); } .lede{ font-size:clamp(1rem, 1.6vw, 1.15rem); color:var(--fg-2); max-width:60ch; margin:0 0 var(--s4); } /* ── buttons ──────────────────────────────────────────────── */ .btn{ --btn-bg:transparent; --btn-fg:var(--fg); --btn-bd:var(--line-2); display:inline-flex; align-items:center; justify-content:center; gap:.55em; min-height:44px; padding:.75rem 1.4rem; background:var(--btn-bg); color:var(--btn-fg); border:1px solid var(--btn-bd); border-radius:var(--r); font:600 15px/1 var(--f-body); letter-spacing:.01em; text-decoration:none; cursor:pointer; transition:background var(--t) var(--e-out), color var(--t) var(--e-out), border-color var(--t) var(--e-out), transform 140ms var(--e-out); } .btn--primary{ --btn-bg:var(--oak); --btn-fg:#141007; --btn-bd:var(--oak); } .btn--primary:hover{ --btn-bg:var(--oak-2); --btn-bd:var(--oak-2); } .btn--solid{ --btn-bg:var(--surface-2); --btn-bd:var(--line-2); } .btn--solid:hover{ --btn-bg:var(--line); } .btn--ghost:hover{ --btn-bd:var(--oak); --btn-fg:var(--oak); } .btn--lg{ padding:1rem 1.9rem; font-size:16px; } .btn--sm{ min-height:38px; padding:.5rem 1rem; font-size:14px; } .btn:active{ transform:translateY(1px); } .ico{ width:1.05em; height:1.05em; fill:currentColor; } .linkbtn{ background:none; border:0; padding:0; cursor:pointer; font:inherit; color:inherit; text-decoration:underline; text-underline-offset:3px; } /* ══════════ NAV ══════════ */ .nav{ position:fixed; inset:0 0 auto 0; z-index:90; border-bottom:1px solid transparent; transition:background var(--t), border-color var(--t), backdrop-filter var(--t); } .nav.is-stuck{ background:rgba(11,11,12,.82); backdrop-filter:blur(14px) saturate(140%); border-bottom-color:var(--line); } .nav__inner{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; display:flex; align-items:center; gap:var(--s3); height:74px; } .brand{ display:flex; align-items:center; gap:.65rem; text-decoration:none; margin-right:auto; } .brand__mark{ display:block; width:22px; height:39px; flex:none; background:var(--oak); -webkit-mask:url('assets/logo-mark.png') center/contain no-repeat; mask:url('assets/logo-mark.png') center/contain no-repeat; transition:background var(--t) var(--e-out); } .brand:hover .brand__mark{ background:var(--oak-2); } /* footer lockup: same structure as the header, scaled up ~1.4x */ .brand--foot{ margin-right:0; gap:.8rem; width:fit-content; } .brand--foot .brand__mark{ width:31px; height:55px; } .brand--foot .brand__text{ font-size:21px; } .brand--foot .brand__sub{ font-size:13px; letter-spacing:.225em; } /* The wordmark's first line. .brand__text is a column flex container, so the text and the ™ must sit inside one flex item or the ™ becomes its own row. */ .brand__line{ display:block; white-space:nowrap; } /* Common-law trademark claim. A USPTO application is pending as of Aug 2026 — ™ needs no registration and is correct to show during examination. Do NOT change to ® until the certificate actually issues; using ® before grant is false marking. */ .brand__tm{ font-family:var(--f-body); /* Sits after CONSULTING, so it scales off the small mono sub-line. ~1.4x the original for legibility, still below the cap height of the letters it marks. */ font-size:max(16px, 1.6em); margin-left:-.05em; font-weight:600; /* No rise, and a real line box. line-height:0 gave the glyph a zero-height box so it overflowed upward into the wordmark; the ™ glyph is already drawn high within its em square, so it reads as a superscript unaided. */ vertical-align:baseline; line-height:1; letter-spacing:0; color:var(--oak); } .brand__text{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:15px; line-height:1.05; letter-spacing:-.01em; text-transform:uppercase; display:flex; flex-direction:column; } .brand__sub{ font-family:var(--f-mono); font-weight:400; font-size:9.5px; letter-spacing:.24em; color:var(--muted); text-transform:uppercase; } .nav__links{ display:flex; gap:var(--s3); } .nav__links a{ position:relative; font-size:14.5px; color:var(--fg-2); text-decoration:none; padding:.4rem 0; transition:color var(--t); } .nav__links a::after{ content:''; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--oak); transform:scaleX(0); transform-origin:left; transition:transform var(--t) var(--e-out); } .nav__links a:hover{ color:var(--fg); } .nav__links a:hover::after{ transform:scaleX(1); } .nav__links a.is-active{ color:var(--oak); } .nav__links a.is-active::after{ transform:scaleX(1); } .nav__toggle{ display:none; width:44px; height:44px; background:none; border:0; cursor:pointer; } .bars{ display:block; position:relative; width:22px; height:12px; margin-inline:auto; } .bars i{ position:absolute; left:0; width:100%; height:1.5px; background:var(--fg); transition:transform 240ms var(--e-out), opacity 160ms; } .bars i:nth-child(1){ top:0; } .bars i:nth-child(2){ bottom:0; } [aria-expanded="true"] .bars i:nth-child(1){ transform:translateY(5.25px) rotate(45deg); } [aria-expanded="true"] .bars i:nth-child(2){ transform:translateY(-5.25px) rotate(-45deg); } .mobilenav{ display:none; flex-direction:column; padding:var(--s2) 1.25rem var(--s4); background:var(--bg-2); border-bottom:1px solid var(--line); } .mobilenav a{ padding:.95rem 0; font-family:var(--f-display); font-weight:700; font-size:1.4rem; text-decoration:none; border-bottom:1px solid var(--line); } .mobilenav__call{ color:var(--oak); border-bottom:0 !important; } /* ══════════ HERO ══════════ */ .hero{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; padding:120px 0 var(--s6); overflow:hidden; } .hero{ background:var(--bg) url('assets/hero-poster.jpg') center/cover no-repeat; } .hero__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .hero__veil{ position:absolute; inset:0; pointer-events:none; background: /* darkens the left column the headline sits in */ linear-gradient(to right, rgba(11,11,12,.90) 0%, rgba(11,11,12,.78) 34%, rgba(11,11,12,.40) 68%, rgba(11,11,12,.20) 100%), /* clears the nav at the top, lands the section into the page below */ linear-gradient(to bottom, rgba(11,11,12,.80) 0%, rgba(11,11,12,.20) 26%, rgba(11,11,12,.20) 52%, var(--bg) 98%); } .hero__inner{ position:relative; z-index:2; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; } .hero__title{ font-family:var(--f-display); font-weight:900; font-stretch:112%; font-size:clamp(2.6rem, 8.2vw, 7rem); line-height:.94; letter-spacing:-.038em; margin:0 0 var(--s4); max-width:16ch; } .hero__title .line{ display:block; } .hero__title .accent{ color:var(--oak); } .hero__lede{ font-size:clamp(1rem, 1.5vw, 1.15rem); color:var(--fg-2); max-width:54ch; margin:0 0 var(--s4); } .hero__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); } /* The scroll cue is the only child here. It used to be paired with a "move your cursor" hint and justified space-between; once that hint went (and was display:none on mobile anyway) space-between parked the lone cue at the START, sliding it under the hero CTA on small screens. flex-end keeps it pinned right at every width. */ .hero__foot{ position:absolute; z-index:2; left:0; right:0; bottom:var(--s4); width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; display:flex; align-items:center; justify-content:flex-end; gap:var(--s2); } .scrollcue{ width:34px; height:52px; border:1px solid var(--line-2); border-radius:20px; display:grid; place-items:start center; padding-top:9px; } .scrollcue span{ width:3px; height:8px; border-radius:2px; background:var(--oak); animation:cue 1.9s var(--e-out) infinite; } @keyframes cue{ 0%{transform:translateY(0);opacity:1} 70%{transform:translateY(16px);opacity:0} 100%{opacity:0} } /* ══════════ MARQUEE ══════════ */ .marquee{ border-block:1px solid var(--line); background:var(--bg-2); overflow:hidden; padding:var(--s2) 0; } .marquee__track{ display:flex; align-items:center; width:max-content; font-family:var(--f-mono); font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); animation:slide var(--marquee-dur, 26s) linear infinite; will-change:transform; } .marquee__group{ display:flex; align-items:center; flex:none; } /* margin (not flex gap) so spacing is identical at the seam between groups — a flex gap adds an extra space there that the shift can't account for */ .marquee__group > *{ margin-right:var(--s3); } .marquee__track b{ color:var(--oak); } /* shift by exactly one group's width; JS measures it into --marquee-w */ @keyframes slide{ from{ transform:translateX(0); } to { transform:translateX(calc(-1 * var(--marquee-w, 50%))); } } /* ══════════ SECTIONS ══════════ */ .section{ padding:var(--s8) 0; } .section--tight{ padding-block:var(--s7); } .section--alt{ background:var(--bg-2); border-block:1px solid var(--line); } /* about */ .about{ display:grid; grid-template-columns:1.05fr 1fr; gap:var(--s5); align-items:start; } .about__body p{ color:var(--fg-2); margin:0 0 var(--s2); max-width:56ch; } .facts{ list-style:none; margin:var(--s6) 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .facts li{ background:var(--bg); padding:var(--s3); display:flex; flex-direction:column; gap:.35rem; } .facts__k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .facts__v{ font-family:var(--f-display); font-weight:700; font-size:1.15rem; } /* ══════════ CARDS ══════════ */ .cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; background:var(--line); border:1px solid var(--line); margin-top:var(--s5); } .card{ background:var(--bg); padding:var(--s4); transition:background var(--t) var(--e-out); } .card:hover{ background:var(--surface); } .card__no{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--oak); } .card__t{ font-family:var(--f-display); font-weight:800; font-size:1.5rem; letter-spacing:-.02em; margin:.6rem 0 .55rem; } .card p{ color:var(--fg-2); margin:0; max-width:46ch; font-size:15.5px; } /* The third service card fills the row on its own, so the grid never shows an empty fourth cell. Its body and list sit side by side to fill the width. */ .card--wide{ grid-column:1 / -1; } .card--wide > p{ max-width:none; } @media (min-width: 861px){ .card--wide{ display:grid; grid-template-columns:1fr 1fr; column-gap:var(--s5); align-items:start; } .card--wide .card__no, .card--wide .card__t{ grid-column:1 / -1; } .card--wide > p{ max-width:52ch; } .card--wide .card__list{ margin-top:0; } } /* ══════════ STEPS ══════════ */ .steps{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:var(--s3); counter-reset:s; } .steps li{ border-top:2px solid var(--oak-dim); padding-top:var(--s2); } .steps__n{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; color:var(--oak); } .steps h3{ font-family:var(--f-display); font-weight:800; font-size:1.3rem; margin:.5rem 0 .4rem; letter-spacing:-.02em; } .steps p{ margin:0; color:var(--fg-2); font-size:15px; } /* ══════════ CONTACT ══════════ */ .contact{ display:grid; grid-template-columns:320px 1fr; gap:var(--s6); align-items:start; } .contact__person{ position:sticky; top:110px; } .contact__photo{ width:100%; aspect-ratio:1125/1272; object-fit:cover; border:1px solid var(--line); filter:grayscale(1) contrast(1.06); transition:filter 500ms var(--e-out); } .contact__person:hover .contact__photo{ filter:grayscale(0) contrast(1); } .contact__id{ margin-top:var(--s2); } .contact__name{ font-family:var(--f-display); font-weight:800; font-size:1.35rem; letter-spacing:-.02em; margin:0; } .contact__role{ font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin:.3rem 0 0; } .contact__bio{ margin-top:var(--s3); padding-top:var(--s3); border-top:1px solid var(--line); font-size:.92rem; line-height:1.6; color:var(--fg-2); } .contact__bio p{ margin:0 0 .8rem; } .contact__bio p:last-child{ margin-bottom:0; } .contact__bio strong{ color:var(--fg); font-weight:600; } .contact__direct{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); margin-bottom:var(--s5); } .contact__link{ background:var(--bg); padding:var(--s3); text-decoration:none; display:flex; flex-direction:column; gap:.3rem; transition:background var(--t) var(--e-out); } a.contact__link:hover{ background:var(--surface); } a.contact__link:hover .contact__v{ color:var(--oak); } .contact__k{ font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); } .contact__v{ font-family:var(--f-display); font-weight:700; font-size:clamp(1.15rem,2.2vw,1.5rem); letter-spacing:-.02em; transition:color var(--t); word-break:break-word; overflow-wrap:anywhere; } /* ══════════ FORM ══════════ */ .form{ display:grid; grid-template-columns:1fr 1fr; gap:var(--s3); } .field{ display:flex; flex-direction:column; gap:.45rem; } .field--full{ grid-column:1 / -1; } .field label{ font-size:14px; font-weight:500; color:var(--fg-2); } .req{ color:var(--oak); } .opt{ color:var(--muted); font-weight:400; } .field input, .field textarea, .field select{ font:inherit; font-size:16px; color:var(--fg); background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); padding:.85rem 1rem; min-height:48px; width:100%; transition:border-color var(--t), background var(--t); } .field textarea{ resize:vertical; min-height:130px; } .field input:hover, .field textarea:hover, .field select:hover{ border-color:var(--line-2); background:var(--surface-2); } .field input:focus, .field textarea:focus, .field select:focus{ border-color:var(--oak); outline:none; background:var(--surface-2); } .field input[aria-invalid="true"], .field textarea[aria-invalid="true"]{ border-color:var(--danger); } /* The native arrow renders light-on-light in several browsers on a dark control, so it is suppressed and redrawn as a chevron the wrapper owns. The wrapper is what sizes the control - the select itself stays a plain block filling it. */ .select{ position:relative; display:block; } .select select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; padding-right:2.75rem; cursor:pointer; } .select::after{ content:''; position:absolute; right:1.05rem; top:50%; width:8px; height:8px; margin-top:-6px; border-right:2px solid var(--muted); border-bottom:2px solid var(--muted); transform:rotate(45deg); pointer-events:none; transition:border-color var(--t); } .select:hover::after{ border-color:var(--fg-2); } .select:focus-within::after{ border-color:var(--oak); } /* the dropdown list itself is drawn by the OS - name the colors or it inherits white */ .field select option{ background:var(--surface); color:var(--fg); } .field--full > .btn{ align-self:flex-start; } .hint{ font-size:13px; color:var(--muted); margin:0; } .err{ font-size:13.5px; color:var(--danger); margin:0; display:flex; gap:.4rem; align-items:center; } .err::before{ content:'!'; flex:none; width:16px; height:16px; border-radius:50%; background:var(--danger); color:#000; font:700 11px/16px var(--f-body); text-align:center; } .consent{ flex-direction:row; align-items:flex-start; gap:.7rem; flex-wrap:wrap; } .consent input{ width:24px; height:24px; min-height:0; margin-top:.1rem; flex:none; accent-color:var(--oak); } .consent label{ flex:1; min-width:14rem; font-size:14px; line-height:1.55; } .consent a{ color:var(--oak); } .consent .err{ flex-basis:100%; } .form__summary{ grid-column:1 / -1; border:1px solid var(--danger); border-left-width:3px; background:rgba(255,123,114,.08); padding:var(--s2) var(--s3); font-size:14.5px; } .form__summary ul{ margin:.5rem 0 0; padding-left:1.1rem; } .form__summary a{ color:var(--danger); } .form__ok{ margin:var(--s2) 0 0; color:var(--oak); font-size:15px; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } /* ══════════ FOOTER ══════════ */ .foot{ border-top:1px solid var(--line); background:var(--bg-2); padding-top:var(--s6); } .foot__inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--s4); padding-bottom:var(--s6); } .foot__tag{ margin:var(--s2) 0 0; color:var(--muted); font-size:15px; } .foot__area{ margin:var(--s2) 0 0; color:var(--muted); font-size:13.5px; opacity:.8; } .foot__nav, .foot__meta{ display:flex; flex-direction:column; gap:.6rem; font-size:15px; } .foot__nav a, .foot__meta a{ color:var(--fg-2); text-decoration:none; transition:color var(--t); width:fit-content; min-height:24px; display:flex; align-items:center; } .foot__nav a:hover, .foot__meta a:hover{ color:var(--oak); } .foot__meta span{ color:var(--muted); } .foot__legal{ border-top:1px solid var(--line); padding:var(--s3) 0; display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); justify-content:space-between; font-size:13.5px; color:var(--muted); } .foot__legal p{ margin:0; } .foot__links{ display:flex; flex-wrap:wrap; gap:var(--s3); } .foot__links a, .foot__links .linkbtn{ color:var(--muted); text-decoration:none; min-height:24px; display:inline-flex; align-items:center; } .foot__links a:hover, .foot__links .linkbtn:hover{ color:var(--oak); } /* ══════════ COOKIE CONSENT ══════════ */ .cc{ position:fixed; z-index:120; left:var(--s2); right:var(--s2); bottom:var(--s2); display:flex; justify-content:flex-start; } .cc__panel{ width:min(100%, 480px); background:var(--surface); border:1px solid var(--line-2); padding:var(--s3); box-shadow:0 20px 60px rgba(0,0,0,.6); animation:ccIn 420ms var(--e-out) both; } @keyframes ccIn{ from{ opacity:0; transform:translateY(14px); } } @media (prefers-reduced-motion: reduce){ .cc__panel{ animation:none; } } .cc__title{ font-family:var(--f-display); font-weight:800; font-size:1.15rem; margin:0 0 .5rem; letter-spacing:-.02em; } .cc__desc{ font-size:14px; color:var(--fg-2); margin:0 0 var(--s3); line-height:1.6; } .cc__desc a{ color:var(--oak); } .cc__prefs{ display:grid; gap:var(--s2); margin-bottom:var(--s3); border-top:1px solid var(--line); padding-top:var(--s3); } .cc__opt{ display:flex; gap:.7rem; align-items:flex-start; } .cc__opt input{ width:24px; height:24px; margin-top:.05rem; flex:none; accent-color:var(--oak); } .cc__opt label{ font-size:14px; font-weight:500; display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .cc__opt p{ margin:.25rem 0 0; font-size:13px; color:var(--muted); line-height:1.5; } .cc__always{ font-family:var(--f-mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--oak); border:1px solid var(--oak-dim); padding:.15rem .4rem; } .cc__actions{ display:flex; flex-wrap:wrap; gap:.6rem; } /* Accept and Reject must carry equal visual weight, not just equal clicks */ #ccReject{ --btn-bg:transparent; --btn-fg:var(--oak); --btn-bd:var(--oak); } #ccReject:hover{ --btn-bg:rgba(224,164,88,.12); } .cc__actions .btn{ flex:1 1 auto; min-width:8.5rem; } /* ══════════ CUSTOM CURSOR (fine pointers only) ══════════ */ .cursor{ display:none; } @media (hover:hover) and (pointer:fine){ .cursor{ display:block; position:fixed; z-index:150; top:0; left:0; width:26px; height:26px; margin:-13px 0 0 -13px; border:1px solid var(--oak); border-radius:50%; pointer-events:none; opacity:0; transition:opacity 260ms, transform 200ms var(--e-out), background 200ms; will-change:transform; } .cursor.is-on{ opacity:.85; } .cursor.is-hot{ transform:scale(1.9); background:var(--oak-glow); } } /* ══════════ REVEAL ══════════ */ .reveal{ opacity:0; transform:translateY(18px); } .reveal.is-in{ opacity:1; transform:none; transition:opacity 700ms var(--e-out), transform 700ms var(--e-out); } /* ══════════ LEGAL PAGES (privacy.html, terms.html) ══════════ */ .legal{ padding:140px 0 var(--s7); } .legal .wrap{ width:min(100% - 2.5rem, 800px); } .legal h1{ font-family:var(--f-display); font-weight:900; font-stretch:110%; font-size:clamp(2.2rem,6vw,4rem); line-height:1; letter-spacing:-.035em; margin:0 0 var(--s2); } .legal h2{ font-family:var(--f-display); font-weight:800; font-size:clamp(1.3rem,2.6vw,1.75rem); letter-spacing:-.02em; margin:var(--s5) 0 var(--s2); scroll-margin-top:100px; } .legal h3{ font-family:var(--f-display); font-weight:700; font-size:1.1rem; margin:var(--s3) 0 .5rem; } .legal p, .legal li{ color:var(--fg-2); } .legal p{ margin:0 0 var(--s2); } .legal ul, .legal ol{ margin:0 0 var(--s2); padding-left:1.3rem; } .legal li{ margin-bottom:.5rem; } .legal a{ color:var(--oak); text-underline-offset:3px; } .legal strong{ color:var(--fg); } .updated{ font-family:var(--f-mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--s5); } .toc{ border:1px solid var(--line); background:var(--bg-2); padding:var(--s3); margin-bottom:var(--s5); } .toc h2{ margin:0 0 var(--s2); font-size:1rem; font-family:var(--f-mono); font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--oak); } .toc ol{ margin:0; columns:2; column-gap:var(--s4); } @media (max-width:600px){ .toc ol{ columns:1; } } .callout{ border:1px solid var(--oak-dim); border-left-width:3px; background:rgba(224,164,88,.06); padding:var(--s3); margin:0 0 var(--s4); } .callout p:last-child{ margin-bottom:0; } .tbl{ width:100%; border-collapse:collapse; margin:0 0 var(--s3); font-size:14.5px; display:block; overflow-x:auto; } .tbl th, .tbl td{ border:1px solid var(--line); padding:.7rem .85rem; text-align:left; vertical-align:top; } .tbl th{ background:var(--bg-2); color:var(--fg); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:500; white-space:nowrap; } .tbl td{ color:var(--fg-2); } .back{ display:inline-flex; align-items:center; gap:.5rem; font-size:14px; color:var(--muted); text-decoration:none; margin-bottom:var(--s4); } .back:hover{ color:var(--oak); } /* ══════════ RESPONSIVE ══════════ */ @media (max-width: 1024px){ .about{ grid-template-columns:1fr; gap:var(--s3); } .contact{ grid-template-columns:260px 1fr; gap:var(--s4); } .steps{ grid-template-columns:repeat(2,1fr); gap:var(--s4); } .facts{ grid-template-columns:repeat(2,1fr); } } @media (max-width: 860px){ .nav__links, .nav__cta{ display:none; } .nav__toggle{ display:block; } .nav.is-open .mobilenav{ display:flex; } .nav.is-open{ background:var(--bg-2); } .section{ padding:var(--s6) 0; } .cards{ grid-template-columns:1fr; } .contact{ grid-template-columns:1fr; } /* photo + name share the first row; the bio wraps to its own full-width row beneath them rather than being squeezed into the leftover column */ .contact__person{ position:static; display:flex; flex-wrap:wrap; gap:var(--s3); align-items:center; } .contact__photo{ width:120px; flex:none; } .contact__id{ margin-top:0; } .contact__bio{ flex-basis:100%; margin-top:0; } .form{ grid-template-columns:1fr; } .foot__inner{ grid-template-columns:1fr; gap:var(--s4); } .cc{ left:0; right:0; bottom:0; } .cc__panel{ width:100%; border-inline:0; border-bottom:0; } } @media (max-width: 520px){ .facts{ grid-template-columns:1fr; } .steps{ grid-template-columns:1fr; } .cc__actions .btn{ flex-basis:100%; } } /* ══════════ REDUCED MOTION ══════════ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } .reveal{ opacity:1; transform:none; } .marquee__track{ animation:none; } .scrollcue span{ animation:none; } .cursor{ display:none !important; } } @media print{ .nav,.cc,.cursor,.hero__video,.vizband__video,.marquee,.scrollcue{ display:none !important; } body{ background:#fff; color:#000; } } /* Reduced motion: hold the finished-build still instead of playing the rebuild. */ @media (prefers-reduced-motion: reduce){ .hero__video{ display:none; } } /* ══════════ SERVICES — supporting lists ══════════ */ .card__list{ list-style:none; margin:var(--s2) 0 0; padding:0; display:grid; gap:.4rem; } .card__list li{ position:relative; padding-left:1.1rem; font-size:.94rem; color:var(--fg-2); line-height:1.5; } .card__list li::before{ content:""; position:absolute; left:0; top:.62em; width:5px; height:1px; background:var(--oak); } .svc__note{ margin:var(--s5) 0 0; max-width:70ch; font-size:.9rem; line-height:1.6; color:var(--muted); border-left:2px solid var(--line-2); padding-left:var(--s2); } .svc__note p{ margin:0 0 .85rem; } .svc__note p:last-child{ margin-bottom:0; } .svc__note strong{ color:var(--fg-2); font-weight:600; } /* ══════════ PACKAGES ══════════ */ .tiers{ display:grid; gap:var(--s3); margin-top:var(--s5); grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); /* stretch, not start: every card takes the row height so the three read as one block and the CTAs line up. .tier__list has flex:1, which then pushes each .tier__foot to the bottom of its own card. */ align-items:stretch; } .tier{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) var(--s3) var(--s3); } .tier--feature{ background:var(--surface-2); border-color:var(--oak-dim); box-shadow:0 0 0 1px var(--oak-dim), 0 24px 60px -32px var(--oak-glow); } .tier__flag{ position:absolute; top:0; left:var(--s3); transform:translateY(-50%); background:var(--oak); color:#000; font:600 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:.45rem .7rem; border-radius:var(--r); white-space:nowrap; } .tier__head{ border-bottom:1px solid var(--line); padding-bottom:var(--s3); } /* Roots / Branch / Canopy, drawn rather than photographed — the tier names are tree logic, so the marks reinforce the naming instead of decorating it. */ .tier__icon{ display:block; width:58px; height:58px; margin-bottom:var(--s2); fill:none; stroke:var(--oak); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.75; transition:opacity var(--t) var(--e-out); } .tier:hover .tier__icon{ opacity:1; } .tier--feature .tier__icon{ opacity:1; } .tier__name{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.6rem; letter-spacing:-.02em; margin:0; } .tier__price{ font-family:var(--f-display); font-weight:900; font-stretch:110%; font-size:clamp(2.4rem, 4.6vw, 3.1rem); line-height:1; letter-spacing:-.035em; color:var(--oak); margin:.35rem 0 .6rem; } .tier__for{ margin:0; font-size:.95rem; color:var(--fg-2); line-height:1.55; } .tier__list{ list-style:none; margin:var(--s3) 0; padding:0; display:grid; gap:.7rem; flex:1; } .tier__list li{ font-size:.94rem; line-height:1.45; padding-bottom:.7rem; border-bottom:1px dashed var(--line); } .tier__list li:last-child{ border-bottom:0; padding-bottom:0; } .tier__line{ display:flex; gap:var(--s2); align-items:baseline; justify-content:space-between; } .tier__item{ color:var(--fg-2); } /* Sub-bullets are what the priced line above actually contains, so they read as part of it rather than as further line items with their own prices. */ .tier__sub{ list-style:none; margin:.4rem 0 0; padding:0 0 0 .8rem; display:grid; gap:.25rem; font-size:.85rem; line-height:1.45; color:var(--muted); border-left:1px solid var(--line); } .tier__sub li::before{ content:"— "; color:var(--line-2); } /* "$8,350+" — the plus is a starting price, not part of the figure. */ .tier__plus{ font-size:.55em; vertical-align:.35em; margin-left:.06em; } /* Each tier is a step up on the one below; saying so beats repeating the list. */ .tier__inherits{ margin:var(--s3) 0 0; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--oak); } .tier__item em{ color:var(--muted); font-style:normal; } .tier__alc{ font-family:var(--f-mono); font-size:.82rem; color:var(--muted); white-space:nowrap; flex-shrink:0; } .tier__foot{ border-top:1px solid var(--line); padding-top:var(--s3); } .tier__sum{ display:flex; justify-content:space-between; gap:var(--s2); margin:0; font-family:var(--f-mono); font-size:.82rem; color:var(--muted); } .tier__save{ margin:.35rem 0 var(--s3); font-family:var(--f-mono); font-size:.86rem; letter-spacing:.04em; color:var(--oak); } .tier .btn{ width:100%; justify-content:center; } .tiers__note{ margin:var(--s4) 0 0; max-width:66ch; font-size:.92rem; color:var(--muted); line-height:1.6; } /* ── care plans ─────────────────────────────────────── */ .care{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); } .care__h{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing:-.02em; margin:0 0 var(--s2); } .care__lede{ margin:0 0 var(--s4); max-width:60ch; color:var(--fg-2); } .care__list{ list-style:none; margin:0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); } .care__list li{ position:relative; border:1px solid var(--line); border-radius:var(--r); padding:var(--s3); background:var(--bg-2); } .care__list .care--flag{ border-color:var(--oak-dim); background:var(--surface-2); } .care__flag{ position:absolute; top:0; right:var(--s3); transform:translateY(-50%); background:var(--oak); color:#000; font:600 10px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:.4rem .6rem; border-radius:var(--r); white-space:nowrap; } .care__name{ display:block; font-family:var(--f-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--oak); } .care__price{ display:block; margin:.3rem 0 .6rem; font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.9rem; letter-spacing:-.03em; } .care__per{ font-size:.9rem; font-weight:500; color:var(--muted); letter-spacing:0; } .care__list p{ margin:0; font-size:.9rem; line-height:1.55; color:var(--fg-2); } @media (max-width: 560px){ .tier__line{ flex-direction:column; gap:.15rem; } .tier__alc{ font-size:.78rem; } } /* ══════════ MULTI-PAGE ══════════ */ /* Sub-page headers: the hero only exists on Home, so these clear the fixed nav. */ .pagehead{ padding-top:calc(74px + var(--s7)); } .pagehead .h2{ max-width:20ch; } /* Current page in the nav. Kept separate from .is-active, which main.js drives from scroll position — these must not fight each other. */ .nav__links a[aria-current="page"]{ color:var(--oak); } .nav__links a[aria-current="page"]::after{ transform:scaleX(1); } .mobilenav a[aria-current="page"]{ color:var(--oak); } /* ── package teaser (Home) ───────────────────────────── */ .ptease{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); } .ptease__i{ position:relative; display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:var(--s4) var(--s3) var(--s3); } .ptease__i--feature{ background:var(--surface-2); border-color:var(--oak-dim); box-shadow:0 0 0 1px var(--oak-dim), 0 24px 60px -32px var(--oak-glow); } .ptease__flag{ position:absolute; top:0; left:var(--s3); transform:translateY(-50%); background:var(--oak); color:#000; font:600 11px/1 var(--f-mono); letter-spacing:.12em; text-transform:uppercase; padding:.45rem .7rem; border-radius:var(--r); white-space:nowrap; } .ptease__n{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.4rem; letter-spacing:-.02em; } .ptease__p{ font-family:var(--f-display); font-weight:900; font-stretch:110%; font-size:2.4rem; line-height:1; letter-spacing:-.035em; color:var(--oak); margin:.3rem 0 .7rem; } .ptease__i p{ margin:0 0 var(--s3); color:var(--fg-2); font-size:.94rem; line-height:1.55; flex:1; } .ptease__s{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; color:var(--muted); border-top:1px solid var(--line); padding-top:var(--s2); } .ptease__cta{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s5); } /* ── closing CTA band ────────────────────────────────── */ .ctaband{ text-align:center; } .ctaband .lede{ margin-inline:auto; } /* ── contact page extras ─────────────────────────────── */ .steps--compact{ grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); } .areaserved{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); text-align:center; } .areaserved p{ margin-inline:auto; margin-block:0; max-width:62ch; color:var(--fg-2); text-align:center; } /* ══════════ FAQ ══════════ */ .faq{ margin-top:var(--s5); border-top:1px solid var(--line); } .faq__i{ border-bottom:1px solid var(--line); } .faq__i summary{ list-style:none; cursor:pointer; padding:var(--s3) 2.5rem var(--s3) 0; position:relative; transition:color var(--t); } .faq__i summary::-webkit-details-marker{ display:none; } .faq__i summary h3{ display:inline; margin:0; font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.1rem; letter-spacing:-.015em; color:var(--fg); } .faq__i summary::after{ content:''; position:absolute; right:.35rem; top:50%; width:11px; height:11px; margin-top:-6px; border-right:2px solid var(--oak); border-bottom:2px solid var(--oak); transform:rotate(45deg); transition:transform var(--t) var(--e-out); } .faq__i[open] summary::after{ transform:rotate(-135deg); } .faq__i summary:hover h3{ color:var(--oak); } .faq__a{ padding:0 var(--s5) var(--s3) 0; } .faq__a p{ margin:0; color:var(--fg-2); max-width:70ch; font-size:.96rem; line-height:1.65; } /* ══════════ SERVICE AREA DIAGRAM ══════════ */ /* Not a map. It illustrates reach — rings for coverage, spokes out to the towns. */ .svcmap{ margin:var(--s4) auto var(--s3); max-width:600px; } .svcmap svg{ width:100%; height:auto; display:block; overflow:visible; } .svcmap figcaption{ margin:var(--s2) auto 0; font-size:.85rem; line-height:1.5; color:var(--muted); max-width:46ch; text-align:center; } .svcmap .m-ring circle{ fill:none; stroke:var(--oak); stroke-opacity:.16; stroke-width:1; } .svcmap .m-edge{ fill:none; stroke:var(--oak); stroke-opacity:.5; stroke-width:1.5; stroke-dasharray:7 6; } .svcmap .m-spoke line{ stroke:var(--oak); stroke-opacity:.24; stroke-width:1; } .svcmap .m-town circle{ fill:var(--fg-2); } .svcmap .m-town text{ font-family:var(--f-mono); font-size:14px; letter-spacing:.1em; fill:var(--fg-2); dominant-baseline:middle; } .svcmap .m-home circle{ fill:var(--oak); } .svcmap .m-home .m-halo{ fill:var(--oak); opacity:.2; } .svcmap .m-home text{ font-family:var(--f-display); font-weight:800; font-size:20px; letter-spacing:-.01em; fill:var(--oak); } .svcmap .m-home .m-sub{ font-family:var(--f-mono); font-weight:400; font-size:11px; letter-spacing:.16em; fill:var(--muted); } .svcmap .m-note{ font-family:var(--f-mono); font-size:12px; letter-spacing:.2em; fill:var(--oak); fill-opacity:.85; } @media (max-width: 560px){ .svcmap .m-town text{ font-size:17px; } .svcmap .m-home text{ font-size:23px; } .svcmap .m-home .m-sub{ font-size:13px; } .svcmap .m-note{ font-size:14px; } } /* ══════════ VISUALIZATION BAND ══════════ */ /* Full-bleed interstitial between Services and Packages. Deliberately breaks the text rhythm — everything either side of it is boxes of copy. */ .vizband{ position:relative; overflow:hidden; min-height:min(78svh, 660px); display:flex; align-items:center; padding:var(--s7) 0; border-block:1px solid var(--line); } .vizband__video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; } .vizband__veil{ position:absolute; inset:0; pointer-events:none; background: linear-gradient(to right, rgba(11,11,12,.92) 0%, rgba(11,11,12,.80) 38%, rgba(11,11,12,.42) 72%, rgba(11,11,12,.22) 100%), linear-gradient(to bottom, rgba(11,11,12,.55) 0%, rgba(11,11,12,.18) 30%, rgba(11,11,12,.18) 70%, rgba(11,11,12,.55) 100%); } .vizband__inner{ position:relative; z-index:2; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; } .vizband .h2{ max-width:20ch; } .vizband .lede{ max-width:48ch; margin-bottom:var(--s3); } .viznote{ margin:calc(var(--s2) * -1) 0 var(--s4); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.7; } .vizband__note{ margin:0; font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); max-width:46ch; line-height:1.7; } /* Poster stands in wherever the video is not loaded (mobile, reduced motion, Data Saver) — it is the finished-room frame, so the still still sells it. */ .vizband{ background:var(--bg) url('assets/viz-poster.jpg') center/cover no-repeat; } @media (prefers-reduced-motion: reduce){ .vizband__video{ display:none; } } @media (max-width: 700px){ .vizband{ min-height:0; padding:var(--s6) 0; } } /* ══════════ PAGE HEADER — split layout ══════════ */ .pagehead--split{ padding-bottom:var(--s7); } .pagehead__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:var(--s6); align-items:center; } .pagehead__copy .lede + .lede{ margin-top:calc(var(--s3) * -0.5); } .pagehead__media{ margin:0; } .pagehead__media img{ width:100%; height:auto; border:1px solid var(--line); border-radius:var(--r); } .pagehead__media figcaption{ margin-top:var(--s2); font-family:var(--f-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); line-height:1.7; } /* three facts under the intro copy */ .keyfacts{ list-style:none; margin:var(--s4) 0 0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); } .keyfacts li{ border-top:2px solid var(--oak-dim); padding-top:var(--s2); } .keyfacts__v{ display:block; font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.15rem; letter-spacing:-.02em; color:var(--oak); } .keyfacts__k{ display:block; margin-top:.3rem; font-size:.86rem; line-height:1.5; color:var(--muted); } @media (max-width: 900px){ .pagehead__grid{ grid-template-columns:1fr; gap:var(--s5); } .pagehead__media{ max-width:420px; } } @media (max-width: 620px){ /* 2-then-1 reads as a mistake; one clean column does not */ .keyfacts{ grid-template-columns:1fr; gap:var(--s2); } } /* ══════════ TIER COMPARISON ══════════ */ .cmp{ margin-top:var(--s7); padding-top:var(--s5); border-top:1px solid var(--line); } .cmp__h{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:clamp(1.4rem, 2.6vw, 1.9rem); letter-spacing:-.02em; margin:0 0 var(--s2); } .cmp__lede{ margin:0 0 var(--s4); max-width:62ch; color:var(--fg-2); } /* a table this wide must scroll inside its own box, never the page */ .cmp__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; } .cmp__t{ width:100%; min-width:640px; border-collapse:collapse; font-size:.92rem; line-height:1.5; } .cmp__t th, .cmp__t td{ text-align:left; vertical-align:top; padding:var(--s3) var(--s2); border-bottom:1px solid var(--line); } .cmp__t thead th{ font-family:var(--f-display); font-weight:800; font-stretch:105%; font-size:1.25rem; letter-spacing:-.02em; color:var(--fg); border-bottom:1px solid var(--line-2); } .cmp__p{ display:block; margin-top:.2rem; font-family:var(--f-mono); font-size:.9rem; letter-spacing:.02em; font-weight:400; color:var(--oak); } /* row labels */ .cmp__t tbody th{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); white-space:nowrap; width:1%; padding-right:var(--s3); } .cmp__t td{ color:var(--fg-2); } .cmp__t td em{ color:var(--muted); font-style:normal; } .cmp__none{ color:var(--muted); } /* the target sale gets a lit column, matching the flagged card above */ .cmp__t .cmp__feature{ background:var(--surface-2); } .cmp__t thead .cmp__feature{ box-shadow:inset 0 2px 0 var(--oak); } .cmp__total td, .cmp__total th{ border-bottom:0; padding-bottom:.4rem; } .cmp__total td{ font-family:var(--f-mono); font-size:.85rem; color:var(--muted); } .cmp__save td{ font-family:var(--f-mono); font-size:.9rem; color:var(--oak); border-bottom:0; } .cmp__save th{ border-bottom:0; } /* ── quoted-per-project and add-on rate tables ──────── Same table shell as the tier comparison, but these stand on their own in a section rather than under a set of cards, so they carry no top rule. */ .cmp--flat{ margin-top:var(--s5); padding-top:0; border-top:0; } .cmp__t--rate{ min-width:560px; } .cmp__t--rate thead th{ font-family:var(--f-mono); font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .cmp__t--rate tbody th.cmp__svc{ font-family:var(--f-body); font-size:.95rem; font-weight:600; letter-spacing:0; text-transform:none; color:var(--fg); white-space:normal; width:26%; padding-right:var(--s3); } .cmp__from{ font-family:var(--f-mono); font-size:.9rem; color:var(--oak); white-space:nowrap; width:1%; } /* ── how projects run ────────────────────────────────── */ .terms{ margin-top:var(--s6); padding-top:var(--s5); border-top:1px solid var(--line); } .terms__list{ margin:var(--s4) 0 0; padding:0; } .terms__row{ display:grid; grid-template-columns:minmax(140px, 22%) 1fr; gap:var(--s3); padding:var(--s3) 0; border-bottom:1px solid var(--line); } .terms__row:last-child{ border-bottom:0; } .terms__row dt{ font-family:var(--f-mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); } .terms__row dd{ margin:0; font-size:.95rem; line-height:1.6; color:var(--fg-2); } @media (max-width: 560px){ .cmp__t{ font-size:.88rem; } .cmp__t th, .cmp__t td{ padding:var(--s2) .6rem; } .terms__row{ grid-template-columns:1fr; gap:.3rem; } } /* ══════════ PORTFOLIO HERO — interactive lattice ══════════ The highlight is per-cell :hover, NOT a JS mousemove handler. That keeps it working with JS off, costs nothing per frame, and lets the browser do the hit-testing. main.js only adds the soft glow that trails the cursor, and it is purely additive — see module 8d. Cells are plain empty spans. auto-fill means the column count follows the viewport, so one fixed pool of cells covers every width and the surplus is clipped by overflow:hidden. */ .pfhero{ position:relative; overflow:hidden; padding:calc(120px + var(--s6)) 0 var(--s7); background:var(--bg); /* set by main.js; the fallback keeps the glow off-canvas until it does */ --mx:-999px; --my:-999px; } .pfhero__grid{ position:absolute; inset:0; z-index:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(88px, 1fr)); grid-auto-rows:88px; } .pfhero__grid span{ border-right:1px solid var(--line); border-bottom:1px solid var(--line); transition:background-color 420ms var(--e-out), border-color 420ms var(--e-out); } .pfhero__grid span:hover{ background:var(--oak-glow); border-color:var(--oak-dim); transition-duration:90ms; /* light instantly, fade out slowly */ } /* The glow follows the cursor and sits BETWEEN the lattice and the veil, so it tints the grid without washing out the headline. */ .pfhero__veil{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(340px circle at var(--mx) var(--my), rgba(224,164,88,.10), transparent 70%), /* keep the headline legible over whatever the lattice is doing */ linear-gradient(to right, rgba(11,11,12,.92) 0%, rgba(11,11,12,.62) 46%, rgba(11,11,12,.30) 100%), linear-gradient(to bottom, rgba(11,11,12,.86) 0%, rgba(11,11,12,.24) 34%, var(--bg) 97%); } .pfhero__inner{ position:relative; z-index:2; width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; pointer-events:none; /* let the cursor reach the cells behind the copy */ } .pfhero__title{ font-family:var(--f-display); font-weight:900; font-stretch:112%; font-size:clamp(2.4rem, 6.4vw, 5.2rem); line-height:.96; letter-spacing:-.035em; color:var(--oak); /* matches .hero__title .accent on the homepage */ margin:0 0 var(--s3); max-width:14ch; } .pfhero__lede{ font-size:clamp(1rem, 1.5vw, 1.15rem); color:var(--fg-2); max-width:54ch; margin:0; } @media (max-width:700px){ .pfhero{ padding:calc(96px + var(--s5)) 0 var(--s6); } .pfhero__grid{ grid-template-columns:repeat(auto-fill, minmax(64px, 1fr)); grid-auto-rows:64px; } } /* A touch device has no hover, so the lattice would just be static lines. Fade it back and drop the glow rather than implying an affordance. */ @media (hover:none){ .pfhero__grid{ opacity:.5; } .pfhero__grid span{ transition:none; } } @media (prefers-reduced-motion:reduce){ .pfhero__grid span{ transition:none; } } /* ══════════ PORTFOLIO ══════════ */ .portfolio-head{ padding-bottom:var(--s4); } .section--tight{ padding-block:var(--s5); } /* One row of four — the fourth build (CR3ASED) arrived and the row is meant to stay a single line, which is what the earlier note here anticipated. Four columns inside the 1240px wrap gives ~286px a card, so the gap tightens to --s3 to buy back a little width without the cards touching. Below 1100px four columns get too narrow to read, and it steps straight to two rather than three: three would leave the fourth build alone on a second row, which is the ragged half-empty look this grid keeps trying to avoid. */ .demos{ list-style:none; margin:var(--s5) 0 0; padding:0; display:grid; gap:var(--s3); grid-template-columns:repeat(4, 1fr); } /* These live here, next to the rule they override, NOT in the shared 1024/860 blocks near the top of the file — those sit ~560 lines above .demos, so at equal specificity the base rule would win on source order and the grid would stay four columns wide on a phone. */ @media (max-width: 1100px){ .demos{ grid-template-columns:repeat(2, 1fr); gap:var(--s4); } } @media (max-width: 860px){ .demos{ grid-template-columns:1fr; } } .demo{ display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; } /* The chrome bar is the whole reason a visitor reads this image as a WEBSITE and not as a photograph. It is three dots and a rule — cheap, and it does more work than any label would. */ .demo__shot{ position:relative; background:var(--bg-2); border-bottom:1px solid var(--line); } .demo__chrome{ position:absolute; inset:0 0 auto 0; height:1.75rem; z-index:1; display:flex; align-items:center; gap:.375rem; padding-inline:.75rem; background:var(--surface-2); border-bottom:1px solid var(--line); } .demo__chrome i{ width:.5rem; height:.5rem; border-radius:50%; background:var(--line-2); } .demo__shot img{ display:block; width:100%; height:auto; margin-top:1.75rem; } .demo__body{ display:flex; flex-direction:column; gap:var(--s2); padding:var(--s3); flex:1; } .demo__kind{ margin:0; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; color:var(--oak); } .demo__name{ margin:0; font-family:var(--f-display); font-size:1.35rem; letter-spacing:-.01em; } .demo__what{ margin:0; color:var(--fg-2); font-size:.95rem; line-height:1.65; /* Absorbs the slack so the tag row and button bottom-align across cards whose descriptions run to different line counts. Without this the tags float up with the shorter text and the row looks ragged. */ flex-grow:1; } .demo__tags{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.4rem; } .demo__tags li{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.06em; color:var(--muted); border:1px solid var(--line); border-radius:var(--r); padding:.25rem .5rem; } .demo__open{ align-self:flex-start; } .demo__open .ico{ width:.85em; height:.85em; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; } .demos__note{ margin-top:var(--s4); font-size:.85rem; color:var(--muted); } /* ── 3D visualization: one hero render over a row of six ── */ .vizset{ margin-top:var(--s5); } .vizhero{ display:block; width:100%; padding:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; background:var(--surface); cursor:zoom-in; } .vizhero img{ display:block; width:100%; height:auto; transition:transform 620ms var(--e-out), filter 620ms var(--e-out); } .vizhero:hover img, .vizhero:focus-visible img{ transform:scale(1.02); filter:brightness(1.05); } .vizhero:focus-visible{ outline:2px solid var(--oak); outline-offset:-2px; } /* SIX across on one line, deliberately fixed rather than auto-fill: seven renders in an auto-fill grid left a single orphan on a second row, which is what this layout exists to remove. Squares are what make six fit. */ .vizgrid{ list-style:none; margin:8px 0 0; padding:0; display:grid; grid-template-columns:repeat(6, 1fr); gap:8px; } .vizgrid__cell{ aspect-ratio:1; overflow:hidden; border-radius:var(--r); background:var(--surface); } .vizgrid__cell .lb-open{ display:block; width:100%; height:100%; padding:0; border:0; cursor:zoom-in; background:none; overflow:hidden; } .vizgrid__cell img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 480ms var(--e-out), filter 480ms var(--e-out); } .vizgrid__cell .lb-open:hover img, .vizgrid__cell .lb-open:focus-visible img{ transform:scale(1.05); filter:brightness(1.06); } .vizgrid__cell .lb-open:focus-visible{ outline:2px solid var(--oak); outline-offset:-2px; } /* Six 190px-ish squares stop being legible below roughly 900px. Three then two keeps whole rows — six divides by both, so there is never a lone straggler. */ @media (max-width:900px){ .vizgrid{ grid-template-columns:repeat(3, 1fr); } } @media (max-width:560px){ .vizgrid{ grid-template-columns:repeat(2, 1fr); } } /* ══════════ PREVIEW VIEWER ══════════ The demo runs at a real device width inside the iframe and is SCALED to fit, rather than being squeezed into whatever space is going. That distinction is the entire point: squeezing it would just show the desktop layout smaller, while scaling a genuinely 390px-wide viewport shows the phone layout. */ .pv{ width:min(96vw, 1500px); max-width:none; height:min(92vh, 1000px); max-height:none; padding:0; border:1px solid var(--line-2); border-radius:var(--r); background:var(--bg-2); color:var(--fg); overflow:hidden; } .pv::backdrop{ background:rgba(6,6,8,.82); } .pv[open]{ display:flex; flex-direction:column; } .pv__bar{ display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap; padding:.7rem var(--s3); background:var(--surface); border-bottom:1px solid var(--line); } .pv__title{ margin:0; font-family:var(--f-display); font-size:.95rem; flex:1 1 12rem; } .pv__sizes{ display:flex; gap:2px; background:var(--bg); border:1px solid var(--line); border-radius:var(--r); padding:2px; } .pv__size{ font-family:var(--f-mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); background:none; border:0; border-radius:var(--r); padding:.4rem .75rem; cursor:pointer; } .pv__size:hover{ color:var(--fg); } .pv__size[aria-pressed="true"]{ background:var(--oak); color:#141007; } .pv__pop{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.08em; color:var(--oak); } .pv__close{ display:grid; place-items:center; width:2rem; height:2rem; cursor:pointer; background:none; border:1px solid var(--line); border-radius:var(--r); color:var(--fg); } .pv__close:hover{ border-color:var(--oak); color:var(--oak); } .pv__close svg{ width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .pv__stage{ flex:1; display:grid; place-items:center; overflow:hidden; padding:var(--s3); background:var(--bg); } .pv__device{ transform-origin:center center; border:1px solid var(--line-2); border-radius:var(--r); overflow:hidden; background:#fff; box-shadow:0 1.5rem 4rem rgba(0,0,0,.55); transition:width var(--t) var(--e-out), height var(--t) var(--e-out); } .pv__frame{ display:block; width:100%; height:100%; border:0; } .pv__foot{ margin:0; padding:.6rem var(--s3); font-size:.75rem; color:var(--muted); border-top:1px solid var(--line); background:var(--surface); } @media (max-width:760px){ /* A phone cannot usefully preview a phone. Below this width the toggles are meaningless, so the card's link opens the demo outright instead — see main.js. */ .pv__sizes{ display:none; } } /* ══════════ BENTO GALLERY ══════════ WIDER THAN THE TEXT COLUMN, ON PURPOSE. At the 1240px wrap and 4 columns this ran 3112px tall — one element taking three screens. Height scales as 1/columns^2, so widening the grid past the wrap AND going to 6 columns cuts it to ~2195px while the tiles stay the same size they were (307px vs 304px). Shorter and bigger at once; only the reading column stays narrow, which is what the reading column is for. The column counts are not arbitrary. 21 photos occupy 42 grid cells, and 42 divides exactly by 6, 3 and 2 — so every breakpoint can pack with no holes. Four columns cannot (42/4 is not whole) and is deliberately skipped. Changing the photo set means re-checking that arithmetic. Row height is set equal to a COLUMN's width, which is what makes cells square and lets 2x1 / 1x2 / 2x2 resolve to real rectangles. */ .bento{ --bento-cols:6; --bento-gap:8px; --bento-w:min(100vw - 2.5rem, 1880px); --bento-cell:calc((var(--bento-w) - (var(--bento-cols) - 1) * var(--bento-gap)) / var(--bento-cols)); width:var(--bento-w); margin-left:calc(50% - var(--bento-w) / 2); /* break out of .wrap, stay centered */ margin-block:var(--s5) 0; padding:0; list-style:none; display:grid; grid-template-columns:repeat(var(--bento-cols), 1fr); grid-auto-rows:var(--bento-cell); grid-auto-flow:dense; /* backfills if the tile set ever stops dividing evenly */ gap:var(--bento-gap); } .bento__cell{ overflow:hidden; border-radius:var(--r); background:var(--surface); } .bento__cell--2x1{ grid-column:span 2; } .bento__cell--1x2{ grid-row:span 2; } .bento__cell--2x2{ grid-column:span 2; grid-row:span 2; } .bento__btn{ display:block; width:100%; height:100%; padding:0; border:0; cursor:zoom-in; background:none; overflow:hidden; } .bento__btn img{ display:block; width:100%; height:100%; object-fit:cover; transition:transform 480ms var(--e-out), filter 480ms var(--e-out); } .bento__btn:hover img, .bento__btn:focus-visible img{ transform:scale(1.045); filter:brightness(1.06); } .bento__btn:focus-visible{ outline:2px solid var(--oak); outline-offset:-2px; } @media (max-width:1100px){ .bento{ --bento-cols:3; } } @media (max-width:700px){ .bento{ --bento-cols:2; } } /* ══════════ LIGHTBOX ══════════ Shows the UNCROPPED original. object-fit:contain and the viewport-bounded box are the whole point: a portrait 2:3 frame must letterbox rather than be re-cropped, otherwise clicking a cropped thumbnail would just show a differently cropped photo. */ .lb{ width:100vw; max-width:100vw; height:100vh; max-height:100vh; padding:0; border:0; background:rgba(6,6,8,.94); color:var(--fg); } .lb::backdrop{ background:rgba(6,6,8,.94); } .lb[open]{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; } .lb__figure{ margin:0; grid-column:2; display:grid; place-items:center; width:100%; height:100vh; padding:var(--s4) 0; } .lb__img{ max-width:100%; max-height:calc(100vh - 2 * var(--s4)); width:auto; height:auto; object-fit:contain; } .lb__close{ position:absolute; top:var(--s3); right:var(--s3); z-index:2; display:grid; place-items:center; width:2.75rem; height:2.75rem; cursor:pointer; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); color:var(--fg); } .lb__close:hover{ border-color:var(--oak); color:var(--oak); } .lb__close svg{ width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; } .lb__nav{ display:grid; place-items:center; width:3.5rem; height:100%; cursor:pointer; background:none; border:0; color:var(--fg-2); } .lb__nav:hover{ color:var(--oak); background:rgba(255,255,255,.03); } .lb__nav svg{ width:1.6rem; height:1.6rem; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .lb__nav--prev{ grid-column:1; } .lb__nav--next{ grid-column:3; } .lb__count{ position:absolute; bottom:var(--s3); left:50%; transform:translateX(-50%); margin:0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.12em; color:var(--muted); } @media (max-width:760px){ /* Thumb-reach beats hover targets on a phone: the arrows drop to the bottom corners and the photo gets the full width. */ .lb[open]{ grid-template-columns:1fr; } .lb__figure{ grid-column:1; padding:var(--s5) var(--s2); } .lb__nav{ position:absolute; bottom:var(--s2); width:3rem; height:3rem; background:var(--surface); border:1px solid var(--line-2); border-radius:var(--r); } .lb__nav--prev{ left:var(--s3); } .lb__nav--next{ right:var(--s3); } .lb__count{ bottom:calc(var(--s2) + .9rem); } }