/* =========================================================== Designs by Hunter Curtis ---------------------------------------------------------- Warm paper, filmed forest. The atmosphere comes from real footage and stills, not from runtime effects. PERFORMANCE RULES (the last build ran at 20fps; these are why) - No animated `filter: blur()`. Blurring a viewport-sized layer re-rasterises it every frame. This alone cost 40fps. - No `mix-blend-mode` on full-page overlays. It forces the compositor to re-blend everything beneath it on every frame. - No `backdrop-filter`. A translucent solid reads the same here. - Overlays are static: painted once, composited free forever. - Only `transform` and `opacity` are ever animated. 1. Tokens 2. Reset & base 3. Atmosphere 4. Header & nav 5. Buttons 6. Hero (cinematic) 7. Marquee 8. Paper sections 9. Full-bleed band 10. Contact & footer 11. Reveal 12. Responsive =========================================================== */ /* ---------- 1. Tokens ---------- */ :root { /* paper — warm, like light through haze */ --paper: #f7f4ec; --paper-2: #f1ece0; --paper-3: #e9e2d2; /* ink — warm near-black, never pure */ --ink: #1d1b15; --ink-soft: #4f4a3e; --muted: #6d6657; /* rules */ --line: rgba(29, 27, 21, 0.14); --line-soft: rgba(29, 27, 21, 0.08); /* accents */ --gold: #8a5f22; /* passes AA on paper — use for text */ --gold-lit: #c08f3e; /* decorative, and for dark grounds */ --forest: #2b3527; /* on dark grounds */ --on-dark: #f2efe5; --on-dark-soft: #b7af9d; --on-dark-line: rgba(242, 239, 229, 0.18); /* fonts */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; --serif: "Instrument Serif", "Times New Roman", Georgia, serif; --script: "Pinyon Script", "Snell Roundhand", "Apple Chancery", cursive; /* metrics */ --shell: 1240px; --gutter: 28px; --radius: 2px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --header-h: 76px; } /* ---------- 2. Reset & base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.65; letter-spacing: -0.006em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } body.nav-open { overflow: hidden; } h1, h2, h3 { margin: 0; font-weight: 400; letter-spacing: -0.035em; line-height: 1.02; } p { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); } em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -0.01em; color: var(--gold); } /* Buttons and form controls do not inherit font-family, so they fall back to the browser default. The contact page's submit button was rendering in Arial while every other word on the site was Inter. */ button, input, select, textarea, optgroup { font-family: inherit; } svg { display: block; } img, video { display: block; max-width: 100%; } ::selection { background: var(--forest); color: var(--paper); } :focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; } .shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--gutter); } .skip-link { position: absolute; top: -100px; left: 16px; z-index: 200; padding: 10px 16px; background: var(--ink); color: var(--paper); font-size: 13px; transition: top 0.25s var(--ease); } .skip-link:focus { top: 16px; } /* ---------- 3. Atmosphere ---------- */ /* Static paper tooth. No animation, no blend mode — this layer is rasterised once and then costs nothing to composite. */ .grain { position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: 0.4; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.11 0 0 0 0 0.10 0 0 0 0 0.08 0 0 0 0.055 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- 4. Header ---------- */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; border-bottom: 1px solid transparent; transition: background 0.4s var(--ease), border-color 0.4s var(--ease), color 0.4s var(--ease); } /* Over the hero film, the header runs light. */ .site-header.is-over-media { color: var(--on-dark); } .site-header.is-over-media .wordmark-small { color: rgba(242, 239, 229, 0.62); } .site-header.is-over-media .wordmark-name, .site-header.is-over-media .nav a { color: var(--on-dark); } .site-header.is-over-media .nav-cta, .site-header.is-over-media .menu-toggle { border-color: var(--on-dark-line); } .site-header.is-over-media .wordmark-mark { color: var(--on-dark); } .site-header.is-over-media .wordmark:hover .wordmark-mark { color: var(--gold-lit); } .site-header.is-over-media .menu-toggle span { background: var(--on-dark); } .site-header.is-over-media .nav-cta { color: var(--on-dark) !important; } .site-header.is-over-media .nav-cta:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--ink) !important; } /* Translucent solid instead of backdrop-filter: same read, no per-frame cost. */ .site-header.is-stuck { background: rgba(247, 244, 236, 0.94); border-bottom-color: var(--line-soft); } .header-inner { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { display: inline-flex; align-items: center; gap: 13px; z-index: 110; } /* The HC monogram stands on its own — it doesn't need a container, and rotating letterforms on hover only made them unreadable. */ .wordmark-mark { display: grid; place-items: center; color: var(--forest); transition: color 0.35s var(--ease); } .wordmark-glyph { overflow: visible; } .wordmark:hover .wordmark-mark { color: var(--gold); } .wordmark-text { display: flex; flex-direction: column; line-height: 1.15; } .wordmark-small { font-size: 9.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .wordmark-name { font-size: 14px; font-weight: 500; letter-spacing: -0.01em; } .nav { display: flex; align-items: center; gap: 34px; font-size: 13px; } .nav a { color: var(--ink-soft); position: relative; } .nav a:not(.nav-cta)::after { content: ""; position: absolute; left: 0; bottom: -5px; width: 100%; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform 0.4s var(--ease); } .nav a:not(.nav-cta):hover::after { transform: scaleX(1); transform-origin: left; } .nav-cta { padding: 9px 18px; border: 1px solid var(--line); border-radius: 100px; color: var(--ink) !important; transition: background 0.35s var(--ease), border-color 0.35s var(--ease), color 0.35s var(--ease); } .nav-cta:hover { background: var(--forest); border-color: var(--forest); color: var(--paper) !important; } /* Owner login — a quiet circle beside the CTA. Everyone sees it; only the owner's credentials get past it. */ .nav-login { display: inline-grid; place-items: center; width: 40px; height: 40px; margin-left: -20px; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 50%; transition: color 0.35s var(--ease), border-color 0.35s var(--ease), background 0.35s var(--ease); } .nav a.nav-login::after { display: none; } .nav-login:hover { color: var(--paper); background: var(--forest); border-color: var(--forest); } .nav-login.is-owner { color: var(--gold); border-color: rgba(138, 95, 34, 0.45); } .nav-login-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .site-header.is-over-media .nav-login { border-color: var(--on-dark-line); } .site-header.is-over-media .nav-login:hover { color: var(--ink) !important; background: var(--on-dark); border-color: var(--on-dark); } .menu-toggle { display: none; z-index: 110; width: 42px; height: 42px; padding: 0; background: none; border: 1px solid var(--line); border-radius: var(--radius); cursor: pointer; position: relative; } .menu-toggle span { position: absolute; left: 50%; width: 16px; height: 1px; background: var(--ink); transform: translateX(-50%); transition: transform 0.35s var(--ease); } .menu-toggle span:nth-child(1) { top: 17px; } .menu-toggle span:nth-child(2) { top: 23px; } .menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateX(-50%) translateY(3px) rotate(45deg); } .menu-toggle[aria-expanded="true"] span:nth-child(2) { transform: translateX(-50%) translateY(-3px) rotate(-45deg); } /* ---------- 5. Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 26px; font-size: 13px; font-weight: 500; letter-spacing: 0.02em; border-radius: 100px; border: 1px solid transparent; white-space: nowrap; transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease); } .btn svg { transition: transform 0.35s var(--ease); } .btn:hover svg { transform: translateX(4px); } .btn-primary { background: var(--paper); color: var(--ink); border-color: var(--paper); } .btn-primary:hover { background: var(--gold-lit); border-color: var(--gold-lit); color: var(--ink); } .btn-ink { background: var(--forest); color: var(--paper); border-color: var(--forest); } .btn-ink:hover { background: var(--ink); border-color: var(--ink); } .btn-ghost { color: inherit; border-color: currentColor; opacity: 0.75; } .btn-ghost:hover { opacity: 1; } /* ---------- 6. Hero ---------- */ .hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--header-h) + 40px); padding-bottom: clamp(56px, 9vh, 104px); color: var(--on-dark); background: #14160f; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img, .hero-media video { width: 100%; height: 100%; object-fit: cover; object-position: center; } /* The film sits on top of the still and fades in once it can actually play, so there is never a black box or a pop. */ .hero-video { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s var(--ease); } .hero-video.is-playing { opacity: 1; } /* Static scrim. Two stops, painted once — this is what makes the type legible. */ .hero-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(12, 14, 9, 0.88) 0%, rgba(12, 14, 9, 0.42) 42%, rgba(12, 14, 9, 0.28) 70%, rgba(12, 14, 9, 0.55) 100%), radial-gradient(120% 80% at 70% 34%, rgba(196, 140, 62, 0.20), transparent 62%); } .hero .shell { position: relative; } .eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 32px; padding: 8px 16px 8px 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--on-dark); border: 1px solid var(--on-dark-line); border-radius: 100px; background: rgba(12, 14, 9, 0.3); } .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-lit); animation: pulse 2.8s var(--ease) infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(192, 143, 62, 0.5); } 70% { box-shadow: 0 0 0 9px rgba(192, 143, 62, 0); } 100% { box-shadow: 0 0 0 0 rgba(192, 143, 62, 0); } } .hero-title { /* Two full sentences rather than a three-word phrase, so the measure is the constraint, not the height: sized so the longer line holds one row at the shell's width. It wraps on a phone, which the reveal handles — .line clips to the span's own height however many rows that is. */ font-size: clamp(2rem, 5vw, 4.2rem); letter-spacing: -0.04em; line-height: 1.04; text-wrap: balance; } .hero-title .line { display: block; overflow: hidden; } .hero-title .line > span { display: block; } .js .hero-title .line > span { transform: translateY(102%); transition: transform 0.95s var(--ease); } .hero-title .line.is-in > span { transform: translateY(0); } .hero-title em { color: var(--gold-lit); font-size: 1.06em; } .hero-foot { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 36px; margin-top: 44px; padding-top: 34px; border-top: 1px solid var(--on-dark-line); } .hero-lede { max-width: 44ch; font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--on-dark-soft); line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; } .scroll-hint { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; } .scroll-hint i { display: block; width: 1px; height: 38px; background: linear-gradient(to bottom, var(--gold-lit), transparent); transform-origin: top; animation: drop 2.6s var(--ease) infinite; } @keyframes drop { 0% { transform: scaleY(0); opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } } /* ---------- 8. Paper sections ---------- */ .section { --section-pad: clamp(92px, 11.5vw, 168px); position: relative; padding-block: var(--section-pad); } /* Two sections in a row paid the padding twice — 201px of bottom against 201px of top, 403px of nothing between the last line of one and the first of the next. The gap is now one section's worth, not two. The full-bleed band is not a .section, so it keeps its own separation on both sides. */ .section + .section { padding-top: 0; } /* ...unless the section paints its own ground. There the padding is interior space inside a visible panel rather than a gap between two sheets of paper, so dropping the top edge pinned the type to the top of the photograph. */ .section + .section.contact { padding-top: var(--section-pad); } /* Skip layout and paint for sections that are nowhere near the viewport. The intrinsic size keeps the scrollbar honest. */ .section.is-deferred { content-visibility: auto; contain-intrinsic-size: auto 900px; } .section-head { margin-bottom: clamp(56px, 7vw, 92px); } .section-label { display: flex; align-items: center; gap: 14px; font-size: 10px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--gold); } /* A short rule instead of bracket punctuation — quieter, and it reads as typography rather than as an interface label. */ .section-label::before { content: ""; width: 26px; height: 1px; background: currentColor; opacity: 0.55; } .contact .section-label { justify-content: center; } .section-title { margin-top: 26px; font-size: clamp(2.2rem, 5.6vw, 4.4rem); } /* A script face has a small x-height and long extenders, so it needs to be set larger than the sans to read at the same weight, and given room to let its descenders through. */ .section-title.is-script { font-family: var(--script); font-size: clamp(2.9rem, 7.4vw, 5.6rem); font-weight: 400; letter-spacing: 0; line-height: 1.12; padding-bottom: 0.12em; } /* Statement and portrait share a row: the text leads, the photograph sits against it. They bottom-align so the two blocks share a baseline. */ .statement-top { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); /* Centred, not bottom-aligned: the text block is shorter than the figure, so pinning it to the baseline dumped the whole difference above it. */ align-items: center; gap: clamp(32px, 5vw, 72px); } .statement-text { /* The serif, because the gold accent inside it IS this family's italic — set in the sans, the emphasis was a foreign face dropped mid-sentence. Larger and looser than the sans was: a serif carries less weight at the same size and resents tight negative tracking. */ max-width: 32ch; font-family: var(--serif); font-size: clamp(2rem, 5vw, 3.9rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.018em; text-wrap: balance; } .statement-figure { margin: 0; position: relative; } .statement-figure img { width: 100%; height: auto; /* The source is a tall 2:3. Cropping to 4:5 keeps the figure and the fog and drops most of the empty sky above it. */ aspect-ratio: 4 / 5; object-fit: cover; object-position: center 78%; border-radius: var(--radius); } /* A warm edge so the photograph sits on the paper rather than floating. */ .statement-figure::after { content: ""; position: absolute; inset: 0; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(29, 27, 21, 0.1); pointer-events: none; } .statement-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(30px, 4vw, 72px); margin-top: clamp(72px, 9vw, 124px); } /* Panels read as software chrome. An open column under a hairline reads as print. */ .stat { padding-top: 24px; border-top: 1px solid var(--line); } .stat-k { display: block; margin-bottom: 12px; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); } .stat p { font-size: 14px; color: var(--ink-soft); line-height: 1.7; } /* services */ .service { display: grid; grid-template-columns: 88px minmax(0, 1fr); column-gap: clamp(20px, 3vw, 40px); padding: clamp(30px, 3.6vw, 48px) 0; border-top: 1px solid var(--line-soft); } .service-list .service:last-child { border-bottom: 1px solid var(--line-soft); } /* A serif numeral rather than a letterspaced tag — it sits with the display type instead of against it. */ .service-num { grid-row: 1 / span 2; padding-top: 0.35em; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 26px); line-height: 1; color: var(--muted); transition: color 0.4s var(--ease); } .service h3 { grid-column: 2; font-size: clamp(1.5rem, 3.4vw, 2.5rem); transition: transform 0.5s var(--ease), color 0.4s var(--ease); } .service p { grid-column: 2; margin-top: 12px; max-width: 48ch; font-size: 14.5px; color: var(--ink-soft); line-height: 1.7; } .service:hover .service-num { color: var(--gold); } .service:hover h3 { transform: translateX(10px); color: var(--forest); } /* work — the archive entry is a composition, not a screenshot on a page: the plate holds the left, a spec table holds the right, and the hairlines in it do the same job as the ones in the service rows above. */ /* work — the entry shows the site the way a studio presents one: the desktop view and the phone view together. Two plates fill the measure honestly, which a single wide screenshot never could — it either swelled to fill the width or left a hole beside it. The phone view is also the proof that the build is responsive, which no caption has to claim. The section rhythm is tightened here; one entry cannot carry the full site-wide measure, and the other sections hold enough to earn it. */ .work .section-head { margin-bottom: clamp(30px, 3.4vw, 44px); } .work-list { margin-top: 0; } .work-entry { display: block; padding: clamp(22px, 2.8vw, 40px); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius); transition: border-color 0.4s var(--ease); } .work-entry:hover { border-color: var(--line); } .work-top { display: flex; align-items: baseline; gap: clamp(14px, 1.8vw, 26px); padding-bottom: clamp(16px, 2vw, 24px); border-bottom: 1px solid var(--line-soft); } .work-num { font-family: var(--serif); font-size: clamp(18px, 2vw, 24px); line-height: 1; color: var(--muted); transition: color 0.4s var(--ease); } .work-name { /* The serif, not the sans: the numeral beside it is already Instrument Serif and the section heading above is a script, so Inter here was the only unrelated face in the panel. Set larger and tracked looser than the sans would be — the serif carries less weight at the same size. */ font-family: var(--serif); font-weight: 400; font-size: clamp(1.8rem, 4.2vw, 3.1rem); letter-spacing: -0.015em; line-height: 1.02; transition: color 0.4s var(--ease); } /* Both views sit on one baseline, so the composition reads as one object rather than two pictures that happen to be adjacent. */ /* A grid, not a flex row, so the phone plate can be tied to the desktop plate's height. Its own aspect is much taller, which left the two ending on different lines. */ .work-views { display: grid; grid-template-columns: minmax(0, 1fr) clamp(108px, 18vw, 236px); align-items: stretch; gap: clamp(18px, 2.6vw, 40px); margin-top: clamp(22px, 2.6vw, 34px); } .work-plate { display: block; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); /* transform only — see the performance rules at the top of this file */ transition: transform 0.5s var(--ease), border-color 0.4s var(--ease); } .work-plate img { display: block; width: 100%; height: auto; } .work-plate--wide { min-width: 0; } /* Filled absolutely, so the plate has no intrinsic height of its own: the row is sized by the desktop plate and this one stretches to match, with the surplus cropped off the bottom rather than pushing the row taller. */ .work-plate--phone { position: relative; } .work-plate--phone picture { position: absolute; inset: 0; display: block; } .work-plate--phone img { width: 100%; height: 100%; object-fit: cover; object-position: top center; } .work-foot { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: clamp(16px, 2vw, 24px); } .work-place { font-size: 12.5px; letter-spacing: 0.02em; color: var(--muted); } .work-go { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--ink-soft); transition: color 0.3s var(--ease), transform 0.4s var(--ease); } .work-entry:hover .work-num { color: var(--gold); } .work-entry:hover .work-name { color: var(--forest); } .work-entry:hover .work-go { color: var(--gold); transform: translateX(5px); } /* Both plates lift by the same amount. Lifting the phone plate further looked like depth in isolation, but the two share a top edge — any difference just reads as one photo sitting higher than the other. */ .work-entry:hover .work-plate { transform: translateY(-3px); border-color: rgba(29, 27, 21, 0.28); } @media (prefers-reduced-motion: reduce) { .work-plate, .work-go { transition: color 0.3s var(--ease), border-color 0.4s var(--ease); } .work-entry:hover .work-plate, .work-entry:hover .work-go { transform: none; } } /* On a phone, showing both views squeezes each to about 150px, where neither reads. The visitor is already holding the responsive proof, so the desktop view is the one that still carries information. */ @media (max-width: 620px) { /* display:none removes the item but not its track, which left an empty 108px column squeezing the desktop plate. Collapse to one column. */ .work-views { grid-template-columns: 1fr; } .work-plate--phone { display: none; } } /* process */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(26px, 3.4vw, 58px); } .step { padding-top: 26px; border-top: 1px solid var(--line); } .step-num { display: block; font-family: var(--serif); font-size: clamp(38px, 4.4vw, 58px); line-height: 1; color: rgba(29, 27, 21, 0.16); transition: color 0.5s var(--ease); } .step:hover .step-num { color: var(--gold); } .step h3 { margin-top: 22px; font-size: 1.1rem; letter-spacing: -0.015em; } .step p { margin-top: 10px; font-size: 14px; color: var(--ink-soft); line-height: 1.7; } /* ---------- 9. Full-bleed band ---------- */ .band { position: relative; isolation: isolate; display: grid; place-items: center; min-height: clamp(400px, 62vh, 680px); padding-block: clamp(72px, 10vw, 130px); color: var(--on-dark); background: #14160f; overflow: hidden; content-visibility: auto; contain-intrinsic-size: auto 560px; } .band-media { position: absolute; inset: 0; z-index: -2; } .band-media img { width: 100%; height: 100%; object-fit: cover; } .band-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(12, 14, 9, 0.48), rgba(12, 14, 9, 0.34) 45%, rgba(12, 14, 9, 0.58)), radial-gradient(90% 70% at 50% 40%, rgba(196, 140, 62, 0.15), transparent 64%); } .band .shell { position: relative; text-align: center; } .band-quote { max-width: 20ch; margin-inline: auto; font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: 300; letter-spacing: -0.038em; line-height: 1.12; text-wrap: balance; } .band-quote em { color: var(--gold-lit); } /* ---------- 10. Contact & footer ---------- */ .contact { position: relative; isolation: isolate; text-align: center; color: var(--on-dark); background: #11130d; overflow: hidden; } .contact-media { position: absolute; inset: 0; z-index: -2; } .contact-media img { width: 100%; height: 100%; object-fit: cover; } .contact-scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(10, 12, 8, 0.58) 0%, rgba(10, 12, 8, 0.78) 55%, rgba(10, 12, 8, 0.92) 100%), radial-gradient(80% 60% at 50% 22%, rgba(196, 140, 62, 0.22), transparent 66%); } .contact .shell { position: relative; } .contact .section-label { color: var(--gold-lit); } .contact-title { margin-top: 22px; font-size: clamp(2.2rem, 6.6vw, 5.2rem); letter-spacing: -0.045em; line-height: 1.03; text-wrap: balance; } .contact-title em { color: var(--gold-lit); } .contact-copy { margin: 28px auto 0; max-width: 50ch; font-size: clamp(0.95rem, 1.5vw, 1.05rem); color: var(--on-dark-soft); line-height: 1.72; } .contact-actions { display: flex; justify-content: center; margin-top: 44px; } .mail-link { display: inline-flex; align-items: center; gap: 16px; padding: 19px 30px; border: 1px solid var(--on-dark-line); border-radius: 100px; background: rgba(242, 239, 229, 0.04); transition: border-color 0.35s var(--ease), background 0.35s var(--ease); } .mail-link:hover { border-color: rgba(192, 143, 62, 0.55); background: rgba(192, 143, 62, 0.09); } .mail-label { font-size: 10.5px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-lit); } .mail-address { font-size: clamp(0.95rem, 2.4vw, 1.2rem); letter-spacing: -0.01em; } .mail-link svg { color: rgba(242, 239, 229, 0.5); transition: color 0.35s var(--ease), transform 0.35s var(--ease); } .mail-link:hover svg { color: var(--gold-lit); transform: translate(3px, -3px); } .contact :focus-visible, .site-footer :focus-visible { outline-color: var(--gold-lit); } .site-footer { position: relative; padding-block: 40px; color: var(--on-dark-soft); background: #0e100a; border-top: 1px solid rgba(242, 239, 229, 0.08); } .footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; } .footer-brand { display: flex; flex-direction: column; gap: 4px; } .footer-name { font-size: 14px; font-weight: 500; color: var(--on-dark); } .footer-tag { font-size: 10.5px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: #7b7466; } .footer-nav { display: flex; flex-wrap: wrap; gap: 26px; font-size: 13px; } .footer-nav a:hover { color: var(--gold-lit); } .footer-legal { display: flex; gap: 8px; font-size: 12px; color: #7b7466; } /* The hero title still makes an entrance — it rides a transform-only mask, and transform costs nothing in LCP because the element counts as painted the moment it is drawn, wherever it happens to be. Opacity is the one that delays it. */ /* ---------- 11. Reveal ---------- Scoped to .js (set by an inline script in ). With JavaScript off nothing is ever hidden, so the page reads in full — which also matters for crawlers that don't execute scripts. */ .js [data-reveal] { opacity: 0; transform: translate3d(0, 14px, 0); transition: opacity 1.05s var(--ease), transform 1.05s var(--ease); } .js [data-reveal].is-in { opacity: 1; transform: none; } /* ---------- 12. Responsive ---------- */ @media (max-width: 1080px) { .service { grid-template-columns: 58px minmax(0, 1fr); } .steps { grid-template-columns: repeat(2, 1fr); gap: clamp(26px, 4vw, 44px); } } @media (max-width: 860px) { :root { --gutter: 22px; --header-h: 68px; } .menu-toggle { display: block; } .nav { position: fixed; inset: 0; flex-direction: column; align-items: flex-start; justify-content: center; gap: 6px; padding: 0 var(--gutter); background: var(--paper); font-size: 2rem; opacity: 0; visibility: hidden; transition: opacity 0.35s var(--ease), visibility 0.35s; } .nav.is-open { opacity: 1; visibility: visible; } .nav a, .site-header.is-over-media .nav a { color: var(--ink); } .nav a { padding-block: 10px; letter-spacing: -0.03em; } .nav a:not(.nav-cta)::after { display: none; } .nav-cta, .site-header.is-over-media .nav-cta { margin-top: 20px; padding: 14px 24px; font-size: 1rem; border-color: var(--line); color: var(--ink) !important; } .nav-login, .site-header.is-over-media .nav-login { display: inline-flex; gap: 10px; width: auto; height: auto; margin: 18px 0 0; font-size: 0.95rem; letter-spacing: 0; color: var(--ink-soft); border: 0; border-radius: 0; } .nav-login:hover { background: none; color: var(--gold); } .nav-login-text { position: static; width: auto; height: auto; overflow: visible; clip-path: none; } .statement-top { grid-template-columns: 1fr; gap: 36px; } .statement-figure img { aspect-ratio: 3 / 2; object-position: center 58%; } .statement-grid { grid-template-columns: 1fr; margin-top: 52px; } .scroll-hint { display: none; } .footer-inner { flex-direction: column; align-items: flex-start; } } @media (max-width: 560px) { .steps { grid-template-columns: 1fr; } .service { grid-template-columns: 1fr; padding: 28px 0; } .service-num { grid-row: auto; padding-top: 0; margin-bottom: 10px; } .service h3, .service p { grid-column: 1; } .service:hover h3 { transform: none; } .hero-actions .btn { flex: 1 1 auto; justify-content: center; } .mail-link { flex-direction: column; gap: 8px; border-radius: 16px; padding: 22px; } .mail-link svg { display: none; } } /* ---------- Preferences ---------- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } [data-reveal] { opacity: 1; transform: none; } .hero-title .line > span { transform: none; } .hero-video { display: none; } } @media print { .grain, .site-header, .scroll-hint, .hero-media, .hero-scrim, .band-media, .band-scrim, .contact-media, .contact-scrim { display: none !important; } body, .hero, .band, .contact, .site-footer { background: #fff !important; color: #000 !important; } } /* =========================================================== 13. Interior pages Shared by contact.html, terms.html, privacy.html. These sit on paper rather than film, so the fixed header needs real clearance at the top of the document. =========================================================== */ .page { padding-top: calc(var(--header-h) + clamp(40px, 6vw, 76px)); padding-bottom: clamp(64px, 8vw, 108px); } .page-head { max-width: 66ch; } .page-title { margin-top: 18px; font-size: clamp(2.1rem, 5.2vw, 3.7rem); letter-spacing: -0.042em; line-height: 1; text-wrap: balance; } .page-title em { color: var(--gold); } .page-lede { margin-top: 22px; max-width: 58ch; font-size: clamp(0.95rem, 1.3vw, 1.02rem); color: var(--ink-soft); line-height: 1.7; } .page-rule { margin-top: clamp(36px, 4.6vw, 58px); border: 0; border-top: 1px solid var(--line-soft); } /* Breadcrumb back to the site */ .back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .back-link svg { transition: transform 0.35s var(--ease); } .back-link:hover { color: var(--ink); } .back-link:hover svg { transform: translateX(-3px); } /* ---------- 14. Forms ---------- */ .inquiry { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr); gap: clamp(40px, 6vw, 88px); align-items: start; margin-top: clamp(48px, 6vw, 76px); } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 24px; } .field-wide { grid-column: 1 / -1; } /* A full-width dropdown looks like a stretched text field — keep selects to one column even when the field spans both. Matches on the native cannot be styled past its trigger — the panel is drawn by the operating system. So the native element stays in the form (it is what actually submits, and what works with no JavaScript) and js/select.js builds this listbox over it. =========================================================== */ /* The real control, once enhanced: out of sight, still in the form. */ .select-native.is-enhanced { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .select { position: relative; } .select-trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; padding: 10px 2px 12px; font-family: inherit; font-size: 14.5px; text-align: left; color: var(--ink); background: transparent; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; cursor: pointer; transition: border-color 0.3s var(--ease), color 0.3s var(--ease); } .select-trigger:hover { border-bottom-color: var(--ink-soft); } .select-trigger[aria-expanded="true"] { border-bottom-color: var(--forest); border-bottom-width: 2px; padding-bottom: 11px; } /* The text inputs rely on a thickened underline for focus, because a caret already shows where you are. A button has no caret, so the trigger keeps a real ring — different control, different need. */ .select-trigger:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; border-radius: 3px; } /* Nothing chosen yet reads as placeholder, not as an answer. */ .select-trigger.is-empty .select-value { color: #a39b8a; } .select-caret { flex: none; color: var(--muted); transition: transform 0.3s var(--ease), color 0.3s var(--ease); } .select-trigger[aria-expanded="true"] .select-caret { transform: rotate(180deg); color: var(--forest); } /* ---- Panel ---- */ .select-panel { position: absolute; z-index: 40; top: calc(100% + 8px); left: -10px; right: -10px; max-height: 264px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: var(--paper); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 1px 2px rgba(29, 27, 21, 0.05), 0 12px 28px -10px rgba(29, 27, 21, 0.22); /* Only transform and opacity animate — see the performance rules up top. */ opacity: 0; transform: translate3d(0, -6px, 0); transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s; visibility: hidden; } .select-panel.is-open { opacity: 1; transform: none; visibility: visible; } /* Opens upward when there isn't room below */ .select-panel.is-up { top: auto; bottom: calc(100% + 8px); transform: translate3d(0, 6px, 0); } .select-panel.is-up.is-open { transform: none; } .select-option { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 12px; font-size: 13.5px; line-height: 1.4; color: var(--ink-soft); border-radius: 2px; cursor: pointer; transition: background 0.15s var(--ease), color 0.15s var(--ease); } .select-option:hover { background: var(--paper-2); color: var(--ink); } /* Keyboard position. Distinct from hover so the two never disagree. */ .select-option.is-active { background: var(--paper-3); color: var(--ink); box-shadow: inset 2px 0 0 var(--gold); } .select-option[aria-selected="true"] { color: var(--ink); font-weight: 500; } .select-tick { flex: none; color: var(--gold); opacity: 0; transform: scale(0.7); transition: opacity 0.15s var(--ease), transform 0.15s var(--ease); } .select-option[aria-selected="true"] .select-tick { opacity: 1; transform: none; } .select-panel::-webkit-scrollbar { width: 10px; } .select-panel::-webkit-scrollbar-thumb { background: rgba(29, 27, 21, 0.18); border: 3px solid var(--paper); border-radius: 10px; } .field.is-invalid .select-trigger { border-bottom-color: #8f3a24; } /* ---------- 17. Textarea affordances ---------- */ .textarea-wrap { position: relative; } .char-count { position: absolute; right: 2px; bottom: -22px; font-size: 11.5px; font-variant-numeric: tabular-nums; color: var(--muted); opacity: 0; transition: opacity 0.3s var(--ease), color 0.3s var(--ease); } .char-count.is-shown { opacity: 1; } .char-count.is-over { color: #8f3a24; } .field:has(.char-count) .field-error { margin-top: 24px; } /* ---------- 17b. Service chips ---------- Several needs often go together — a new site, brand work, ongoing care — so this is a set of checkboxes, not a single-choice dropdown. Real inputs, so it submits and stays keyboard- and screen-reader-accessible with no script. */ .chips { border: 0; margin: 0; padding: 0; min-width: 0; } .chips > legend { padding: 0; } .legend-hint { margin-left: 8px; font-weight: 400; letter-spacing: 0.02em; text-transform: none; color: var(--muted); opacity: 0.8; } .chip-set { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; } .chip { position: relative; display: inline-flex; cursor: pointer; } /* Visually hidden but still focusable and still submitted. */ .chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; } .chip span { display: inline-flex; align-items: center; gap: 9px; padding: 10px 17px 10px 14px; font-size: 13.5px; line-height: 1.2; color: var(--ink-soft); border: 1px solid var(--line); border-radius: 999px; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), color 0.25s var(--ease); } /* A small ring on every chip says "selectable" before anything is chosen, and fills when it is — width never changes, so the row never reflows. */ .chip span::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; border: 1px solid currentColor; opacity: 0.5; transition: background-color 0.25s var(--ease), border-color 0.25s var(--ease), opacity 0.25s var(--ease); } .chip:hover span { border-color: var(--ink-soft); color: var(--ink); } .chip input:checked + span { color: var(--paper); background: var(--forest); border-color: var(--forest); } .chip input:checked + span::before { background: var(--gold-lit); border-color: var(--gold-lit); opacity: 1; } .chip input:focus-visible + span { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------- 18. Restored draft notice ---------- */ .draft-note { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 13px 16px; margin-bottom: 30px; font-size: 13.5px; color: var(--ink-soft); background: var(--paper-2); border: 1px solid var(--line-soft); border-radius: var(--radius); } .draft-note button { padding: 0; font: inherit; font-weight: 500; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--line); cursor: pointer; } .draft-note button:hover { color: var(--gold); border-bottom-color: var(--gold); } @media (prefers-reduced-motion: reduce) { .select-panel, .select-caret, .select-tick, .select-option { transition: none !important; } } /* The empty option is a reset, not an answer */ .select-option.is-placeholder { color: var(--muted); font-style: italic; } .select-option.is-placeholder .select-tick { display: none; } .select-option.is-placeholder[aria-selected="true"] { font-weight: 400; } /* A link that behaves like a button without shouting like one. */ .text-link { display: inline-flex; align-items: center; /* Used on both and