/* ============================================================ Winning Development - site styles Extracted from the single-file build so every page can share one copy. Edit this file, not a copy inside any .html file. ============================================================ */ :root{ /* ================= HARBOUR BLUE + SALT ================= #1E3A5C slate navy · #152B44 deep harbour · #B9C6D4 harbour grey #E6EBF0 salt · #F5F8FA linen · #9AAFC4 pewter blue #7A2E3C oxblood (burgundy accent, used sparingly) */ --color-navy:#1E3A5C; /* primary dark - nav, dark sections */ --color-midnight:#152B44; /* deepest - footer, statement blocks */ --color-harbour:#B9C6D4; /* secondary text on dark, captions */ --color-salt:#E6EBF0; /* alternating light sections */ --color-linen:#F5F8FA; /* primary light background */ --color-pewter:#9AAFC4; /* muted blue detail */ --color-brass:#7A2E3C; /* burgundy - fine rules, hovers, small marks only */ --color-text-secondary:#5E7186; --color-border:rgba(30,58,92,0.12); /* ---- GLASS: translucent white layers. blur alone looks like frosted plastic; the saturate() is what makes colour bloom through the panel and read as glass rather than fog ---- */ --glass-1:rgba(255,255,255,.48); /* lightest - over busy video */ --glass-2:rgba(255,255,255,.66); /* standard panel */ --glass-3:rgba(255,255,255,.82); /* dense - modals, menu */ --glass-blur:saturate(180%) blur(20px); --glass-blur-lg:saturate(190%) blur(44px); --glass-edge:rgba(255,255,255,.70); /* specular top edge + inner rim: the two highlights that sell the illusion of a thick pane catching light */ --glass-hi:inset 0 1px 0 rgba(255,255,255,.92); --glass-rim:inset 0 0 0 1px rgba(255,255,255,.40); --spring:cubic-bezier(.34,1.4,.64,1); /* gel overshoot */ /* ================= TYPE ================= Three families, each with one job: DISPLAY Instrument Sans - a modern grotesque. Chosen over a geometric face because its apertures are tighter and its letterforms carry actual shape, which is what stops large headlines from reading as blocky. Set at 600 with heavy NEGATIVE tracking: a grotesque at display size looks loose until you close it up. UI Jost - geometric sans, kept for the wordmark and every tracked-out uppercase label, so the caps all share one voice. TEXT Inter - built for small sizes; runs all body copy. --f-display is its own token, so swapping the headline face is a one-line change. Tracking runs opposite to size: large display goes NEGATIVE (big type looks loose by default), small caps go very POSITIVE. */ --f-display:'Instrument Sans', 'Helvetica Neue', Arial, sans-serif; --f-ui:'Jost', 'Futura', sans-serif; --f-text:'Inter', system-ui, sans-serif; --ls-display:-0.032em; /* huge headlines */ --ls-head:-0.022em; /* mid headlines */ --ls-label:0.34em; /* micro caps */ --ls-nav:0.14em; /* nav / big caps */ --lh-display:1.04; --lh-head:1.1; --lh-text:1.72; /* ---- radii: one soft family, scaled by element size ---- */ --r-xs:6px; /* dots, chips, tiny controls */ --r-sm:10px; /* inputs, small buttons */ --r-md:16px; /* cards, buttons */ --r-lg:22px; /* media frames, bio panels */ --r-xl:28px; /* modal panel, hero-scale media*/ /* ---- elevation: two layers each (contact shadow + ambient spread), tinted with the navy ink so shadows read blue-grey, never muddy ---- */ --sh-sm:0 1px 2px rgba(21,43,68,.04), 0 3px 8px rgba(21,43,68,.04); --sh-md:0 2px 6px rgba(21,43,68,.05), 0 12px 28px rgba(21,43,68,.07); --sh-lg:0 4px 12px rgba(21,43,68,.06), 0 26px 60px rgba(21,43,68,.10); --sh-xl:0 10px 28px rgba(21,43,68,.08), 0 54px 120px rgba(21,43,68,.14); --ease:cubic-bezier(.16,.9,.3,1); /* dark ladder */ --ox-deep:#152B44; --ox-mid:#1E3A5C; --ox-soft:#1E3A5C; --navy-deep:#152B44; --navy-mid:#1E3A5C; --navy-soft:rgba(245,248,250,0.14); /* fine rules on dark */ /* light ladder - the site's primary surfaces */ --white:#FFFFFF; /* pure - glass sits on this */ --white-2:#E6EBF0; /* Salt - alternating sections */ --white-3:#B9C6D4; /* Harbour grey - rules, chips */ --bg:#F5F8FA; /* page field - Linen, per the brand system */ --muted-d:#B9C6D4; /* secondary text on dark */ --muted-l:#5E7186; /* secondary text on light */ --ink-rgb:21,43,68; --white-rgb:245,248,250; /* legacy tokens mapped onto the palette */ --color-charcoal:#1E3A5C; --color-black:#152B44; --color-cashmere:#B9C6D4; --color-bone:#E6EBF0; --color-ivory:#FFFFFF; --color-bronze:#7A2E3C; --ivory:#FFFFFF; --dark:#1E3A5C; --dark-2:#1E3A5C; --taupe:#5E7186; --limestone:#E6EBF0; --brass:#7A2E3C; --emerald:#1E3A5C; --espresso:#152B44; --cognac:#B9C6D4; --amber:#7A2E3C; --champagne:#B9C6D4; --blush:#FFFFFF; --ink:#1E3A5C; --walnut:#1E3A5C; --stone:#1E3A5C; --stone-2:rgba(245,248,250,0.14); --grey-800:#152B44; --grey-600:#1E3A5C; /* accent token on LIGHT surfaces: navy */ --green:#1E3A5C; --green-hi:#152B44; --green-dim:#5E7186; } /* light theme throughout - the only inverted context is type sitting directly on a photograph (.svc-cap), handled locally */ *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} /* The weighted-scroll loop in site.js drives window.scrollTo itself every frame; native smooth behaviour would try to animate each of those and fight it, so it is switched off while that loop is active. The class is only added when the effect actually runs, so no-JS and reduced-motion visitors keep the native smooth anchors. */ html.has-weighted-scroll{scroll-behavior:auto;} body{font-family:var(--f-text); font-weight:300; color:var(--dark-2); font-size:16.5px; line-height:var(--lh-text); letter-spacing:.004em; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; font-optical-sizing:auto; overflow-x:hidden; background:var(--bg); background-image: radial-gradient(60% 42% at 12% 4%, rgba(158,186,214,.26) 0%, transparent 62%), radial-gradient(52% 38% at 92% 26%, rgba(185,198,212,.22) 0%, transparent 60%), radial-gradient(64% 46% at 46% 96%, rgba(122,46,60,.07) 0%, transparent 66%); background-attachment:fixed;} /* editorial high-contrast serif for major headlines */ h1,h2,h3,h4{font-family:var(--f-display); font-weight:600; text-transform:none; line-height:var(--lh-head); letter-spacing:var(--ls-head); color:var(--color-charcoal); font-optical-sizing:auto;} /* the biggest headlines get the tightest tracking and leading */ h1,h2{letter-spacing:var(--ls-display); line-height:var(--lh-display);} /* emphasis by weight AND slope - a light italic against medium roman reads far more modern than a colour change */ h1 em,h2 em,h3 em{font-style:italic; font-weight:400;} .dark h1,.dark h2,.dark h3,.dark h4, .city-band h1,.city-band h2,.city-band h3,.city-band h4, .hero h1,footer h1,footer h2,footer h3,.menu h1,.menu h2{color:var(--color-charcoal);} /* nav, labels, buttons, captions, project data stay sans */ .tag,.label,.send,.brand,.logo, .svc-cap span,.hs-card .info span,.specs div b,.pr-bio .facts b, .stat span,.loc,.role,.n,.idx-row .n{font-family:var(--f-ui);} /* small titles drop the display face at sizes where it loses definition */ .hs-card .info h3,.svc-cap h4,.pj-impact h4{font-family:var(--f-ui);} /* ---- where the oxblood lives: micro eyebrow labels only. Each mark is a few characters, but they recur in every section, so the accent reads as deliberate without ever taking up area. Captions sitting ON photographs are excluded - they stay light, since a dark accent would vanish. ---- */ .hs-card .info span, .specs div b, .pr-bio .facts b, .pr-bio .role, .c-info .row b, .feature-info .loc, .pj-facts div b, .pj-impact h4{color:var(--brass);} a{text-decoration:none; color:inherit;} img{display:block; width:100%; height:100%; object-fit:cover;} ul{list-style:none;} .wrap{max-width:1600px; margin:0 auto; padding:0 clamp(20px,4vw,64px);} .tag{display:inline-block; text-transform:uppercase; letter-spacing:var(--ls-label); font-size:10px; font-weight:500; color:var(--brass); margin-right:calc(var(--ls-label) * -1);} em{font-style:normal; color:var(--green);} /* No ::selection override - highlighting falls back to the browser/OS default blue, which is what people expect everywhere else. */ .dark{background:transparent; color:var(--color-charcoal);} .dark h1,.dark h2,.dark h3,.dark h4{color:var(--color-charcoal);} .muted{color:var(--taupe);} .dark .muted{color:var(--muted-l);} @supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){ :root{--glass-1:rgba(255,255,255,.86); --glass-2:rgba(255,255,255,.92); --glass-3:rgba(255,255,255,.97);} } /* respect reduced-motion / reduced-transparency preferences */ @media (prefers-reduced-motion:reduce){ *{animation-duration:.001ms !important; transition-duration:.001ms !important;} /* don't merely shorten the reveal - skip it. Otherwise content still starts at opacity 0 and depends on an observer firing to become readable. */ .js .rv{opacity:1 !important; transform:none !important; filter:none !important;} } /* ================= LIQUID GLASS ================= Apple describes the material as three stacked layers, and that is exactly how this is built: ILLUMINATION the element itself - blur + saturate + brightness on the backdrop. saturate is what makes colour bloom through so it reads as glass rather than fog. HIGHLIGHT ::before - a masked ring carrying a conic gradient, so the bevel is bright on one side and dim on the other, the way a real lens catches a light source. On small controls the ring ALSO re-filters the backdrop at higher brightness and saturation, which is what produces the "light concentrating at the edge" read - the cheap stand-in for true lensing. SHADOW outer ambient shadow + an inset bottom shade that gives the pane apparent thickness. Apple's own guidance: bigger surface = thicker material = more blur and a deeper shadow. --lq-blur is set per element to honour that. (.stat is intentionally NOT part of this system - the hero stats are a plain white-on-navy treatment, no card.) */ .lq, .burger, .send, .pj-close, .pj-nav i, .pj-plus, .pj-panel, .pr-bio{ position:relative; isolation:isolate; background:linear-gradient(150deg, rgba(255,255,255,.58) 0%, rgba(255,255,255,.30) 46%, rgba(255,255,255,.52) 100%); -webkit-backdrop-filter:blur(var(--lq-blur,18px)) saturate(var(--lq-sat,190%)) brightness(var(--lq-bright,1.06)); backdrop-filter:blur(var(--lq-blur,18px)) saturate(var(--lq-sat,190%)) brightness(var(--lq-bright,1.06)); box-shadow: 0 1px 2px rgba(21,43,68,.04), 0 8px 24px rgba(21,43,68,.07), 0 24px 64px rgba(21,43,68,.09), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -16px 26px -20px rgba(30,58,92,.34), inset 0 16px 30px -22px rgba(255,255,255,1); border:none; transition:box-shadow .5s var(--ease), transform .45s var(--spring), background .4s var(--ease), backdrop-filter .4s var(--ease); } /* HIGHLIGHT layer - the lens bevel */ .lq::before, .burger::before, .send::before, .pj-close::before, .pj-nav i::before, .pj-plus::before, .pj-panel::before, .pr-bio::before{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; padding:var(--lq-edge,1.5px); background:conic-gradient(from calc(135deg + var(--tilt,0deg)) at 50% 50%, rgba(255,255,255,.98) 0deg, rgba(185,198,212,.20) 68deg, rgba(255,255,255,.82) 148deg, rgba(122,46,60,.26) 216deg, rgba(255,255,255,.60) 292deg, rgba(255,255,255,.98) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude; } /* Small controls read as THICKER glass: a crisper rim plus a deeper stack of inset highlights. Inset shadows are used rather than a backdrop-filtered ring because a filtered pseudo-element is painted at its border box and escapes the border-radius, which halos pill shapes. */ .burger::before, .send::before, .pj-close::before, .pj-nav i::before, .pj-plus::before{ display:none; } .burger, .pj-close, .pj-nav i, .pj-plus{ box-shadow: 0 1px 2px rgba(21,43,68,.05), 0 6px 18px rgba(21,43,68,.09), 0 16px 40px rgba(21,43,68,.10), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -12px 20px -14px rgba(30,58,92,.26), inset 0 12px 22px -16px rgba(255,255,255,.95); } /* SPECULAR layer - a moving glint that tracks the pointer, and on phones the device's own tilt, exactly as Apple ties highlights to the gyroscope */ .lq::after, .burger::after, .send::after, .pj-close::after, .pj-nav i::after, .pj-plus::after, .pj-panel::after, .pr-bio::after{ content:''; position:absolute; inset:0; border-radius:inherit; z-index:-1; pointer-events:none; opacity:0; transition:opacity .45s var(--ease); background: radial-gradient(40% 60% at var(--mx,50%) var(--my,0%), rgba(255,255,255,.70) 0%, rgba(255,255,255,.18) 42%, transparent 70%), linear-gradient(180deg, rgba(255,255,255,.42) 0%, transparent 34%); } .lq:hover::after, .burger:hover::after, .send:hover::after, .pj-close:hover::after, .pj-nav:hover i::after, .pj-panel::after, .pr-bio::after{opacity:1;} /* GEL PHYSICS - squash on press, then spring back. the blur deepening on press is what makes it feel like soft material rather than a flat button */ .brand, .burger, .send, .pj-close, .pj-nav i{cursor:pointer;} .burger:hover, .send:hover{transform:translateY(-2px);} .burger:active, .send:active, .pj-close:active{ transform:scale(.955); --lq-blur:28px; --lq-bright:1.14; transition:transform .12s ease-out; } /* thicker material on the large panes */ .pj-panel{--lq-blur:40px; --lq-sat:200%;} .pr-bio {--lq-blur:14px; --lq-sat:185%;} .burger,.pj-close,.pj-nav i,.pj-plus{--lq-blur:14px; --lq-sat:200%;} .send {--lq-blur:16px;} /* squircles - Apple keeps the continuous-curvature corner */ @supports (corner-shape:squircle){ .lq,.burger,.send,.pj-close,.pj-nav i,.pj-panel,.pr-bio{corner-shape:squircle;} } /* clickable things get the normal pointer cursor */ .feature,.hs-card{cursor:pointer;} /* reveal-on-scroll - opt IN, never opt out. .rv elements are visible by default and only start hidden once site.js has confirmed it is running by putting .js on . A blocked or broken script therefore degrades to a plain, fully readable page rather than hiding the stats, the tagline, the phone numbers and the contact form. */ .js .rv{opacity:0; transform:translateY(42px); transition:opacity 1s cubic-bezier(.16,.9,.3,1), transform 1s cubic-bezier(.16,.9,.3,1);} .js .rv.in{opacity:1; transform:none;} /* ---- blur-to-focus variant ---- No vertical travel: the point is that it resolves in place, as if pulling into focus. Blur is expensive to composite, so the radius is modest and the transition is short - and will-change is applied only while an element is still out of focus, never left on permanently. */ .js .rv.rv-blur{opacity:0; transform:none; filter:blur(14px); will-change:filter, opacity; transition:opacity .95s cubic-bezier(.16,.9,.3,1), filter 1.05s cubic-bezier(.16,.9,.3,1);} .js .rv.rv-blur.in{opacity:1; filter:blur(0); will-change:auto;} /* ============ HEADER ============ */ /* A solid white bar on every page, so the nav never has to hold its own against whatever is behind it - film, photography or plain linen. To stop it permanently occupying the top of the screen it slides away as soon as you scroll down and returns the moment you scroll up (see the header module in site.js, which drives .hdr-away off scroll DIRECTION, not position - so the nav is one upward flick away at any depth). The opacity transition is here on purpose: the home page's intro sequence fades this same element in via .intro-armed / .intro-out, and declaring only `transform` would silently drop that fade. */ header{position:fixed; top:0; left:0; right:0; z-index:900; padding:clamp(16px,2.4vh,26px) 0; color:var(--color-charcoal); pointer-events:none; background:#fff; box-shadow:0 1px 0 rgba(30,58,92,.09); will-change:transform; transition:transform .45s var(--ease), opacity .8s var(--ease) .1s;} #hdr.hdr-away{transform:translateY(-100%);} @media (prefers-reduced-motion:reduce){ header{transition:none;} #hdr.hdr-away{transform:none;} } /* three tracks: the mark sits dead-centre on the page, the burger stays right */ nav{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:24px;} nav > *{pointer-events:auto;} .brand{grid-column:2; justify-self:center; display:flex; align-items:center; gap:18px;} .nav-act{display:flex; align-items:center; gap:22px;} .nav-links{display:flex; align-items:center; gap:clamp(18px,2vw,32px); padding:12px 0; background:none;} .burger{grid-column:3; justify-self:end; display:grid; gap:6px; padding:17px 19px; background:none;} .burger i{display:block; width:26px; height:1.5px; border-radius:2px; background:var(--color-charcoal); transition:transform .35s, opacity .3s, width .35s;} .burger:hover i:nth-child(2){width:22px;} body.menu-open .burger i:nth-child(1){transform:translateY(3px) rotate(45deg);} body.menu-open .burger i:nth-child(2){opacity:0;} body.menu-open .burger i:nth-child(3){transform:translateY(-3px) rotate(-45deg);} /* The soft white scrim that used to sit behind the header on the image-led pages is gone - the solid bar above does that job outright now. */ /* ============ MENU - floating glass buttons, no panel ============ The overlay itself is transparent; each link is its own liquid-glass pill. That is why the buttons must carry the glass - with no backdrop behind them, plain text would be unreadable over whatever section is showing. */ .menu{position:fixed; inset:0; z-index:880; display:grid; place-content:center; background:none; pointer-events:none; opacity:0; visibility:hidden; transition:opacity .42s var(--ease), visibility .42s;} body.menu-open .menu{opacity:1; visibility:visible; pointer-events:auto;} .menu-nav{display:flex; flex-direction:column; gap:clamp(10px,1.4vh,18px); align-items:center; padding:0 clamp(20px,5vw,60px);} .menu-nav a{display:flex; align-items:center; justify-content:center; min-width:min(360px,74vw); padding:clamp(13px,1.7vh,20px) clamp(28px,4vw,52px); border-radius:999px; position:relative; isolation:isolate; /* the family was already the heading face; what set the menu apart was label styling - uppercase and tracked out. It now takes the heading treatment: sentence case, weight 600, tight tracking. */ font-family:var(--f-display); font-weight:600; text-transform:none; color:var(--color-charcoal); font-size:clamp(17px,2.1vw,29px); letter-spacing:var(--ls-head); margin-right:0; line-height:1.2; background:linear-gradient(150deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.34) 46%, rgba(255,255,255,.56) 100%); -webkit-backdrop-filter:blur(16px) saturate(200%) brightness(1.06); backdrop-filter:blur(16px) saturate(200%) brightness(1.06); box-shadow:0 1px 2px rgba(21,43,68,.05), 0 8px 24px rgba(21,43,68,.10), 0 22px 56px rgba(21,43,68,.12), inset 0 1px 0 rgba(255,255,255,.92), inset 0 -12px 20px -14px rgba(30,58,92,.28), inset 0 12px 22px -16px rgba(255,255,255,.95); /* each pill rises in turn once the overlay is up */ opacity:0; transform:translateY(16px) scale(.97); transition:opacity .5s var(--ease), transform .5s var(--spring), box-shadow .35s var(--ease), background .35s var(--ease);} body.menu-open .menu-nav a{opacity:1; transform:none;} body.menu-open .menu-nav a:nth-child(1){transition-delay:.06s} body.menu-open .menu-nav a:nth-child(2){transition-delay:.12s} body.menu-open .menu-nav a:nth-child(3){transition-delay:.18s} body.menu-open .menu-nav a:nth-child(4){transition-delay:.24s} body.menu-open .menu-nav a:nth-child(5){transition-delay:.30s} .menu-nav a:hover{background:linear-gradient(150deg, rgba(255,255,255,.78), rgba(255,255,255,.52)); box-shadow:0 2px 6px rgba(21,43,68,.06), 0 14px 34px rgba(21,43,68,.14), 0 30px 70px rgba(21,43,68,.16), inset 0 1px 0 rgba(255,255,255,1); transform:translateY(-2px);} .menu-nav a:active{transform:scale(.97);} .menu-nav a:focus-visible{outline:2px solid var(--brass); outline-offset:5px;} .menu-nav a span{display:inline-block;} /* ============ HERO BAND - one continuous backdrop behind hero -> stats. Same pattern as the city bands: the backdrop is absolutely positioned across the whole band so it can never paint past the band's bounds, and the INNER element is what sticks to the viewport. ============ */ .hero-band{position:relative; background:var(--bg);} .hero-bg-wrap{position:absolute; inset:0; z-index:0; pointer-events:none;} .hero-bg-stick{position:sticky; top:0; height:100svh; overflow:hidden;} .hero-bg-stick video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; will-change:transform; backface-visibility:hidden; filter:saturate(1.12) contrast(1.04) brightness(1.0);} /* A video element with no decoded frame paints black. If a clip is blocked, still loading, or refused autoplay, this shows a pale brand tone under the poster instead of a black rectangle. */ .hero-bg-stick video, .city-bg-stick video, .talk-bg-stick video{background:var(--color-salt);} /* ---- photo slideshow: sits in the same spot the video does, starts hidden, JS crossfades between slides once the intro film has played out. Same object-fit/grade as the video so the handoff doesn't jump. The fade is quick - each photo still holds for the same interval (--hs-dwell, written by site.js), it just settles fast rather than dissolving the whole time it's up. ---- */ .hero-slides{position:absolute; inset:0; z-index:0; opacity:0; transition:opacity 1.1s var(--ease,ease);} .hero-slides.is-on{opacity:1;} .hs-slide{position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease;} .hs-slide picture{display:block; width:100%; height:100%;} .hs-slide img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:saturate(1.12) contrast(1.04) brightness(1.0);} .hs-slide.is-active{opacity:1; z-index:1;} /* ---- slideshow scrubber: a thin gray segment per photo, sitting flush across the top of the frame from the left edge up to where the caption starts (site.js sets the width to match - it varies with how long each location's name runs). Starts invisible; JS brings it up once the slideshow itself starts, then hands its opacity to the scroll-linked fade below (moveHeroBar in site.js) so it clears out of the logo's way. Fixed height (rather than padding top/bottom) so the caption beside it can centre on the exact same line - see --hs-bar-h below. */ .hs-bar{--hs-bar-h:56px; position:absolute; top:0; left:0; z-index:3; height:var(--hs-bar-h); display:flex; align-items:center; gap:8px; padding:0 clamp(18px,2.6vw,34px); opacity:0; pointer-events:none; transition:opacity .6s var(--ease,ease);} .hs-bar.is-on{opacity:1; pointer-events:auto;} .hs-bar-seg{flex:1 1 0; min-width:16px; height:100%; display:flex; align-items:center; background:none; border:0; margin:0; padding:0; cursor:pointer; -webkit-tap-highlight-color:transparent;} .hs-bar-seg i{display:block; width:100%; height:3px; border-radius:2px; background:rgba(158,158,158,.5); transition:background .35s ease;} .hs-bar-seg:hover i{background:rgba(158,158,158,.75);} .hs-bar-seg.is-active i{background:rgba(90,90,90,.95);} .hs-bar-seg.is-active:hover i{background:rgba(90,90,90,.95);} /* Small caption, top-right of each photo - same font as the hero's own intro line (weight, tracking, sentence case), just sized down and brightened so it's legible without competing with it. Centred on the scrubber bar's own line (half its height) so the two read as one row. */ .hs-loc{position:absolute; top:calc(56px / 2); right:clamp(18px,2.6vw,34px); z-index:2; transform:translateY(-50%); font-family:var(--f-ui); font-weight:400; font-size:12px; letter-spacing:.055em; margin-right:-.055em; text-transform:none; color:#fff; text-shadow:0 1px 6px rgba(8,16,28,.85), 0 0 16px rgba(8,16,28,.55);} /* Only enough wash to hold the wordmark - a soft halo at centre where the type sits, near-clear everywhere else, so the footage actually reads. Centred at 47% and taller than it looks it needs to be: the tagline sits at ~57% of the viewport, and at the old 44%/46% falloff it landed in the thin edge of the wash - measured, over half its glyph pixels were under 4.5:1 against the downtown skyline. */ /* Promoted to its own layer on purpose. The video underneath is composited and is itself scaled on scroll; an unpromoted full-screen gradient sitting on top of it has to be repainted into the parent layer every frame, which is what made the wash flicker. Its own layer is composited, not repainted. */ .hero-veil{position:absolute; inset:0; z-index:1; pointer-events:none; will-change:transform; transform:translateZ(0); background:radial-gradient(64% 56% at 50% 47%, rgba(255,255,255,.88) 0%, rgba(255,255,255,.66) 38%, rgba(255,255,255,.34) 66%, rgba(255,255,255,.10) 84%, transparent 100%), linear-gradient(180deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.05) 26%, rgba(255,255,255,.05) 58%, rgba(245,248,250,.42) 80%, rgba(245,248,250,.86) 93%, rgba(245,248,250,1) 100%);} .hero, .stats{position:relative; z-index:2;} /* ============ HERO - centered wordmark across screen ============ */ .hero{position:relative; background:transparent;} /* minmax(0,1fr) caps the column at the container width. Without it the track is auto-sized and grows to fit the wordmark - 20,719px at full zoom - which makes .hero-mark that wide too, so every percentage inside it resolves against the wrong number and the centring maths silently breaks. */ .hero-stick{position:sticky; top:0; height:100svh; min-height:600px; overflow:hidden; display:grid; grid-template-columns:minmax(0,1fr); place-items:center; text-align:center;} /* will-change:transform is deliberately NOT set here. The zoom is driven by font-size (see site.js), and promoting this element would have Chrome cache one giant rasterisation of a mark that is ~21,000px wide at full zoom - past the 16,384px texture limit, which is what made letters drop out. Absolutely centred rather than laid out by the grid. Because the zoom drives font-size, the mark's LAYOUT height grows past the viewport at high zoom, and grid/flex centring switches to "safe" alignment there - pinning it to the top, which read as the title sliding downwards as it zoomed. top:50% + translateY is pure geometry and cannot be clamped, so the wordmark holds its centre the whole way. (scale() never hit this: transforms don't affect layout height.) */ .hero-mark{position:absolute; left:0; right:0; top:50%; transform:translateY(-50%); z-index:3; color:var(--color-charcoal); padding:0; will-change:opacity; transform-origin:50% 50%; text-align:center; display:flex; flex-direction:column; align-items:center; backface-visibility:hidden; -webkit-font-smoothing:antialiased;} .hero-mark h1, .hero video{backface-visibility:hidden;} /* the hero wordmark keeps the geometric sans it was built around */ /* Centred by explicit geometry, not by an alignment property. Both text-align:center and flex align-items:center clamp an item wider than its container to the start edge ("safe" alignment), which sent the zoom running off to the right instead of growing from the middle of the phrase. flex-start fixes the static position at 0 whatever the width, then left:50% + translateX(-50%) puts the mark's own centre on the viewport centre. translate never rescales the raster, so it costs nothing here. */ .hero-mark h1{font-family:var(--f-ui); text-transform:uppercase; /* Viewport-relative, not a flat 60px. JS overrides this inline via fitHero, so it only shows when JS never runs - and at 60px the wrapped line ran to ~506px on a 390px phone, clipping at both ends now that the mark is centred by geometry. */ display:inline-block; font-size:min(56px,8vw); font-weight:300; line-height:1.06; letter-spacing:0.12em; margin-right:-0.12em; white-space:nowrap; align-self:flex-start; position:relative; left:50%; transform:translateX(-50%);} .hero-mark .sub{margin-top:26px; font-family:var(--f-ui); font-weight:400; font-size:clamp(9px,1vw,11.5px); letter-spacing:.42em; margin-right:-.42em; text-transform:uppercase; color:var(--color-charcoal);} .hero-scroll{position:absolute; z-index:3; bottom:34px; left:50%; transform:translateX(-50%); font-family:var(--f-ui); font-size:9.5px; letter-spacing:var(--ls-label); margin-right:calc(var(--ls-label) * -1); text-transform:uppercase; color:var(--color-charcoal); opacity:.8;} /* ============ LOGO ============ */ .brand-sym{height:clamp(38px,3.8vw,52px); width:auto; object-fit:contain; display:block; filter:drop-shadow(0 2px 8px rgba(255,255,255,.85)) drop-shadow(0 1px 4px rgba(21,43,68,.18)); transition:transform .5s cubic-bezier(.16,.9,.3,1), opacity .3s;} .brand:hover .brand-sym{transform:rotate(-8deg) scale(1.05);} /* footer horizontal lockup: symbol | wordmark */ .lockup{display:flex; align-items:center; gap:clamp(12px,1.5vw,20px);} .lockup img{height:clamp(38px,4vw,56px); width:auto; object-fit:contain;} .lockup .rule{width:1px; align-self:stretch; background:var(--color-bronze); opacity:.55; margin:4px 0;} .lockup .words{font-family:var(--f-ui); font-weight:300; text-transform:uppercase; line-height:1.15;} .lockup .words .l1{font-size:clamp(15px,2vw,28px); letter-spacing:.22em; margin-right:-.22em; display:block;} .lockup .words .l2{font-size:clamp(8px,.8vw,11px); letter-spacing:.42em; margin-right:-.42em; display:block; color:var(--muted-l); margin-top:6px;} /* menu overlay mark */ /* watermark behind the dark tagline band */ /* small solid mark sitting above the statement */ .wm-crest{height:clamp(34px,3.4vw,52px); width:auto; object-fit:contain; margin:0 auto clamp(20px,2.6vh,30px); display:block; opacity:1;} /* principals label mark */ .pr-label img{height:34px; width:auto; object-fit:contain; opacity:.9; margin:0 auto 14px;} /* ---- soft seams: dark sections fade in/out instead of butting hard against the light ones ---- */ .blend{position:relative;} .blend:before,.blend:after{content:''; position:absolute; left:0; right:0; height:clamp(60px,9vh,130px); pointer-events:none; z-index:1;} .blend:before{top:0; background:linear-gradient(180deg, rgba(245,248,250,.85), transparent);} .blend:after {bottom:0; background:linear-gradient(0deg, rgba(245,248,250,.85), transparent);} .blend > *{position:relative; z-index:2;} /* light sections that sit next to a dark one get a matching soft edge */ .blend-l{position:relative;} .blend-l:before,.blend-l:after{content:''; position:absolute; left:0; right:0; height:clamp(50px,7vh,110px); pointer-events:none; z-index:0;} .blend-l:before{top:0; background:linear-gradient(180deg, rgba(var(--ink-rgb),.05), transparent);} .blend-l:after {bottom:0; background:linear-gradient(0deg, rgba(var(--ink-rgb),.05), transparent);} .blend-l > *{position:relative; z-index:1;} /* ============ STATS ============ No card, no block - the numbers sit directly on the hero photo/video, tucked close to the bottom of that backdrop. The hero-veil's own dark grade (darkest at its bottom edge) is what keeps the white type legible; no separate fill is layered in here. */ .stats{padding:clamp(28px,4vh,48px) 0 clamp(14px,2vh,22px); background:transparent;} .stats-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,2.4vw,32px);} .stat{padding:0; background:none;} .stat h2{font-family:var(--f-display); font-weight:700; font-size:clamp(64px,9.5vw,168px); letter-spacing:var(--ls-display); line-height:.98; color:#fff; font-variant-numeric:lining-nums tabular-nums;} .stat span{display:block; margin-top:18px; font-size:13px; letter-spacing:.28em; margin-right:-.28em; text-transform:none; font-weight:500; color:rgba(255,255,255,.72); line-height:1.6; font-family:Arial, Helvetica, sans-serif;} /* ============ PRINCIPALS - pinned scroll-driven cards ============ */ .principals{position:relative; background:transparent; color:var(--color-charcoal);} .pr-sticky{position:sticky; top:0; height:100svh; overflow:hidden; display:grid; place-items:center;} /* highway footage behind both cards */ .pr-sticky > .pr-label, .pr-sticky > .pr-card, .pr-sticky > .pr-prog{position:absolute; z-index:3;} .pr-sticky > .pr-label{position:absolute;} .pr-label{position:absolute; top:clamp(80px,12vh,130px); left:0; right:0; text-align:center; z-index:5; will-change:opacity,transform; pointer-events:none;} .pr-card{position:absolute; inset:0; display:grid; place-items:center; padding:0 clamp(20px,5vw,90px); will-change:transform,opacity;} .pr-photo{width:clamp(120px,13vw,178px); height:clamp(120px,13vw,178px); flex:0 0 auto; border-radius:50%; overflow:hidden; will-change:transform,opacity; border:1px solid rgba(255,255,255,.8); box-shadow:var(--sh-lg), 0 0 0 1px rgba(30,58,92,.06);} .pr-photo img{object-position:50% 18%; filter:grayscale(.14) contrast(1.02) brightness(1);} .pr-bio{will-change:transform,opacity; width:min(1080px,100%); padding:clamp(28px,3.4vw,54px) clamp(26px,3.6vw,60px); border-radius:var(--r-xl); transform:translateZ(0);} .pr-name,.pr-body{will-change:transform;} .pr-head{display:flex; align-items:center; gap:clamp(18px,2.4vw,34px); margin-bottom:clamp(20px,2.6vh,32px);} .pr-bio .role{display:block; font-size:10px; letter-spacing:4px; text-transform:uppercase; color:var(--green); font-weight:500; margin-bottom:10px;} .pr-bio h3{font-size:clamp(28px,3.6vw,52px); font-weight:600; margin:0; color:var(--color-charcoal);} .pr-body{display:grid; grid-template-columns:1.25fr 1fr; gap:clamp(22px,3vw,52px); align-items:start;} .pr-bio p{font-size:14.5px; color:var(--muted-l); max-width:52ch; margin-bottom:14px;} .pr-bio .facts{display:grid; gap:12px; align-content:start;} .pr-bio .facts div{font-size:13px; color:var(--muted-l); line-height:1.5;} .pr-bio .facts b{display:block; color:var(--green); font-weight:500; font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase; margin:0 0 3px;} .pr-prog{position:absolute; bottom:clamp(30px,5vh,58px); left:50%; transform:translateX(-50%); display:flex; gap:10px; z-index:5;} .pr-prog i{width:46px; height:2px; border-radius:2px; background:rgba(30,58,92,.14); display:block; overflow:hidden;} .pr-prog i b{display:block; height:100%; width:0; background:var(--brass);} /* ============ LEAD / TAGLINE ============ */ /* ---- STICKY REVEAL ---- The tagline panel pins to the top of the viewport and the client rail rides up over it. The rail needs an OPAQUE background and a higher stacking order, otherwise it would scroll past transparently and reveal nothing. */ .tagline-sec{position:relative; padding:clamp(90px,16vh,190px) 0; min-height:100svh; display:grid; align-content:center;} .tagline-sec .wrap{text-align:center;} .tagline-sec h2{font-size:clamp(28px,4.6vw,76px); font-weight:600; letter-spacing:0.2px; line-height:1.14; max-width:22ch; margin:22px auto 0;} /* the emphasised clause: italic serif in cashmere */ .tagline-sec h2 em{font-style:italic; font-weight:500; color:var(--brass);} .tagline-sec .tag{display:inline-block;} /* localised darkening behind the text column only */ .tagline-sec .wrap:before{content:''; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(92%,1100px); height:160%; z-index:-1; pointer-events:none; background:radial-gradient(60% 55% at 50% 50%, rgba(255,255,255,.72) 0%, transparent 74%);} .tagline-sec .cta{margin-top:clamp(30px,4vh,46px); display:inline-flex; align-items:center; gap:14px; font-family:var(--f-ui); font-size:10.5px; letter-spacing:.3em; font-weight:500; text-transform:uppercase; padding-bottom:10px; border-bottom:1px solid var(--color-bronze); transition:gap .35s, color .35s;} .tagline-sec .cta:hover{gap:26px; color:var(--brass);} .lead-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:26px;} .lead-grid p{grid-column:1 / span 8; font-family:var(--f-ui); font-weight:300; text-transform:uppercase; font-size:clamp(17px,2.2vw,32px); line-height:1.5; letter-spacing:.1em; margin-right:-.1em;} /* ============ FEATURED PROJECT ============ */ /* Top eased back - the title sits right under "What we do" now rather than floating in a lot of open white. Bottom kept generous, that gap is doing a different job: separating this whole card from Contact below. */ .feature-sec{padding:clamp(32px,5vh,64px) 0 clamp(70px,11vh,140px); background:#fff; color:var(--color-charcoal);} /* .feat-head is shared with the "team" kicker on the About page - this is its default, small-and-centred form. The Star card overrides it below, scoped to .feature-grid, so About stays untouched. */ .feat-head{position:sticky; top:clamp(68px,9.5vh,104px); z-index:4; text-align:center; padding:10px 0 18px; margin-bottom:clamp(28px,4vh,54px);} .feat-head h2{font-size:clamp(26px,3.4vw,52px); font-weight:600; text-shadow:0 1px 10px rgba(255,255,255,.9), 0 0 26px rgba(255,255,255,.75), 0 0 52px rgba(255,255,255,.5);} .feature{backface-visibility:hidden;} .feature-sec h3{color:var(--ink);} .feature-sec .specs div p{color:var(--color-midnight); font-weight:700;} /* Stats on the left over plain white, photo pinned to the right and run out to the true edge of the window - the card lives outside .wrap now (see index.html), so only the stats column keeps the page's left margin; the grid itself carries no padding of its own. The title now lives in this same grid, in the image's column, so a row is added above it purely for the heading. */ /* Row-gap kept tight - just enough air between the title and the photo - column-gap stays wide, that is the space between the stats and the image and needs the room. The stats column is short next to the photo, so it's vertically centred alongside it rather than pinned to the top. */ .feature-grid{display:grid; grid-template-columns:minmax(240px,0.5fr) 1.5fr; grid-template-areas:". head" "info media"; gap:clamp(10px,1.4vh,18px) clamp(32px,4.4vw,64px); align-items:center;} .feature-info{grid-area:info;} .feature-media{grid-area:media;} /* The Star card's own title: sits in the image's grid column, written directly above it - a magazine-title treatment, left-set and run big, rather than the small centred kicker .feat-head is everywhere else. Living in the same column as .feature-media (grid-area:head, same grid) is what keeps it lined up exactly with the photo instead of guessing at .wrap's width. */ .feature-grid .feat-head{grid-area:head; position:static; z-index:auto; text-align:left; padding:0; margin-bottom:0;} /* Stretched slightly taller than its natural proportions - a condensed, editorial-poster feel. Anchored to the baseline (0 100%) so it grows upward into the space above rather than pushing the photo down. */ .feature-grid .feat-head h2{font-size:clamp(44px,6.6vw,108px); font-weight:700; line-height:.96; letter-spacing:-.01em; text-shadow:none; transform:scaleY(1.16); transform-origin:0 100%;} /* Square corners, no shadow - flush with the edge of the window rather than reading as a floating card. */ .feature-media{position:relative; height:clamp(360px,78vh,760px); overflow:hidden;} .feature-media picture{display:block; width:100%; height:100%;} /* Oversized and pulled up by the same margin on both edges, so JS can drift it up/down inside the frame without ever showing a gap - the frame (and everything outside it: title overlay, stats, whitespace) stays put; only the photo itself has the independent motion. */ /* Brighter grade, lighter grayscale - the photo reads clearly on its own now rather than leaning on the scrim to make up for a dim source frame. */ .feature-media img{position:absolute; top:-12%; left:0; width:100%; height:124%; filter:grayscale(.05) contrast(1.02) brightness(1.18);} /* Dark grade at the foot of the photo only, just enough to hold the white title - a real layer rather than a text-shadow, so it reads honestly under measurement rather than relying on a glow that only helps some photos. Nudged up slightly to cover the brighter photo above. */ /* Darkest through the middle band, where the title now sits, so it stays legible against whatever part of the photograph is behind it. */ .feature-scrim{position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(180deg, rgba(8,16,28,.12) 0%, rgba(8,16,28,.44) 36%, rgba(8,16,28,.50) 64%, rgba(8,16,28,.16) 100%);} /* The title lives on the photograph, static, centred top-to-bottom - "The Star" left, the location right. Regular weight, not bold. */ .feature-overlay{position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:space-between; padding:clamp(22px,3.4vw,48px); pointer-events:none;} .feature-overlay h3{color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:clamp(26px,3.4vw,52px); font-weight:400; text-shadow:0 2px 20px rgba(8,16,28,.5);} .feature-overlay .loc{color:#fff; font-family:Georgia,'Times New Roman',serif; font-size:clamp(26px,3.4vw,52px); font-weight:400; letter-spacing:0; margin-right:0; text-transform:none; opacity:.92; text-shadow:0 2px 20px rgba(8,16,28,.5);} /* Left column: three facts stacked, each rule-topped, no labels - the value itself is written as a full phrase now, sized up and pushed to the font's max weight so the column reads as bold at a glance. */ .feature-info{padding-top:0; padding-left:clamp(20px,4vw,64px);} .specs{display:grid; grid-template-columns:1fr;} .specs div{padding:26px 0; border-top:1px solid rgba(30,58,92,.14);} .specs div:first-child{border-top:none; padding-top:0;} .specs div p{font-size:clamp(26px,3vw,38px); font-weight:700; line-height:1.18; letter-spacing:-.015em; font-family:var(--f-display); color:var(--color-midnight);} /* ============ HORIZONTAL SCROLL PROJECTS ============ */ .hs{position:relative; background:#fff; color:var(--color-charcoal);} .hs-inner{position:sticky; top:0; height:100svh; overflow:hidden; display:flex; flex-direction:column; justify-content:center; padding:clamp(76px,11vh,120px) 0 clamp(66px,10vh,104px);} /* heading centred across the top of the section */ .hs-head{position:absolute; top:clamp(74px,10.5vh,116px); left:0; right:0; z-index:4; padding:0 clamp(20px,4vw,64px); display:flex; flex-direction:column; align-items:center; gap:16px;} .hs-head h2{font-size:clamp(26px,3.4vw,52px); font-weight:600; color:var(--color-charcoal); text-align:center;} .hs-prog{width:min(240px,38vw); height:2px; border-radius:2px; background:rgba(30,58,92,.14); position:relative; margin-top:18px;} .hs-prog i{position:absolute; left:0; top:0; height:100%; width:0; border-radius:2px; background:var(--brass);} .hs-track{--card-h:clamp(300px,46vh,480px); display:flex; gap:clamp(14px,1.8vw,26px); padding:0 clamp(20px,4vw,64px); will-change:transform;} .hs-card{flex:0 0 clamp(270px,30vw,480px);} /* every card shares one media height; a card carrying --ar sizes its width from that height x the image's own aspect, so nothing is cropped or matted */ .hs-card[style*="--ar"]{flex:0 0 calc(var(--card-h) * var(--ar));} .hs-card[style*="--ar"] img{object-fit:cover; object-position:50% 50%;} .hs-card .m{position:relative; height:var(--card-h); overflow:hidden; border-radius:var(--r-md); box-shadow:var(--sh-md); transition:box-shadow .55s var(--ease), transform .55s var(--ease);} .hs-card:hover .m{box-shadow:var(--sh-lg); transform:translateY(-6px);} .hs-card .m picture{display:block; width:100%; height:100%;} .hs-card img{filter:grayscale(.15) contrast(1.02) brightness(.94); transition:transform 1.1s cubic-bezier(.16,.9,.3,1), filter .5s;} .hs-card:hover img{transform:scale(1.06); filter:grayscale(.12) contrast(1.02) brightness(1);} .hs-card .info{padding-top:20px;} .hs-card .info span{display:block; font-size:9.5px; letter-spacing:3px; text-transform:uppercase; color:var(--green); margin-bottom:8px;} .hs-card .info h3{font-size:clamp(16px,1.5vw,22px); color:var(--color-charcoal);} .hs-card .info p{font-size:12.5px; color:var(--muted-l); margin-top:6px;} .hs-note{flex:0 0 clamp(210px,20vw,300px); display:flex; align-items:center;} .hs-note p{font-size:14px; color:var(--muted-l);} /* ============ SERVICES - segmented selector ============ A heading, one thin rule divided into five clickable segments, and a panel that swaps beneath. Panels share a single grid cell so the container is as tall as the tallest one - otherwise the page would jump every time a visitor picked a different service. */ .svc{position:relative; padding:clamp(72px,12vh,150px) 0 clamp(64px,10vh,120px); background:transparent;} .svc-title{font-size:clamp(30px,4.4vw,68px); font-weight:600; letter-spacing:var(--ls-display); line-height:var(--lh-display); margin:0 0 clamp(38px,6vh,72px);} .svc-bar{display:grid; grid-template-columns:repeat(5,1fr); gap:clamp(6px,1vw,16px); margin-bottom:clamp(38px,6vh,70px);} .svc-seg{background:none; border:0; padding:0; cursor:pointer; text-align:left; display:flex; flex-direction:column; gap:12px; border-radius:0; min-height:52px; justify-content:flex-end; -webkit-appearance:none; appearance:none;} .svc-seg-n{font-family:var(--f-ui); font-size:9.5px; font-weight:500; letter-spacing:.3em; color:var(--muted-l); transition:color .3s var(--ease);} .svc-seg-name{font-family:var(--f-display); font-weight:500; font-size:clamp(12px,1.05vw,16px); line-height:1.35; color:var(--muted-l); transition:color .3s var(--ease);} /* the divided rule itself */ .svc-seg i{display:block; height:3px; border-radius:2px; margin-top:4px; background:rgba(30,58,92,.16); transition:background .35s var(--ease), transform .35s var(--ease); transform-origin:0 50%;} .svc-seg:hover .svc-seg-name, .svc-seg:hover .svc-seg-n{color:var(--color-charcoal);} .svc-seg:hover i{background:rgba(30,58,92,.34);} .svc-seg.is-on .svc-seg-name{color:var(--color-charcoal);} .svc-seg.is-on .svc-seg-n{color:var(--brass);} .svc-seg.is-on i{background:var(--brass); transform:scaleY(1.7);} .svc-seg:focus-visible{outline:2px solid var(--brass); outline-offset:6px;} .svc-panels{display:grid;} .svc-panel{grid-area:1 / 1; display:grid; grid-template-columns:1.02fr .98fr; gap:clamp(24px,5vw,80px); align-items:center; opacity:0; visibility:hidden; transform:translateY(16px); transition:opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;} .svc-panel.is-on{opacity:1; visibility:visible; transform:none;} .svc-panel[hidden]{display:grid;} /* keep it in the grid so heights match */ .svc-txt .n{display:block; font-family:var(--f-ui); font-size:11px; letter-spacing:var(--ls-label); font-weight:500; color:var(--brass); margin-bottom:clamp(14px,2.2vh,26px);} .svc-txt h3{margin-top:0; font-size:clamp(28px,4vw,60px); font-weight:600; line-height:1.06; letter-spacing:var(--ls-head); color:var(--dark);} .svc-txt p{margin-top:clamp(16px,2.6vh,28px); font-size:clamp(14px,1.15vw,17px); max-width:46ch; color:var(--muted-l);} .svc-shot{position:relative; height:clamp(260px,50vh,520px); overflow:hidden; border-radius:var(--r-lg); box-shadow:var(--sh-xl);} .svc-shot picture{display:block; width:100%; height:100%;} .svc-shot img{filter:grayscale(.12) contrast(1.02) brightness(1);} .svc-shot:after{content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg, transparent 38%, rgba(21,43,68,.34) 62%, rgba(21,43,68,.86) 100%); border-radius:inherit;} /* The caption carries its OWN scrim rather than relying on the image gradient, so contrast is identical no matter how bright the photograph underneath happens to be. */ .svc-cap{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:clamp(46px,6vw,80px) clamp(18px,2.2vw,30px) clamp(18px,2.2vw,30px); background:linear-gradient(180deg, transparent 0%, rgba(21,43,68,.66) 42%, rgba(21,43,68,.90) 100%); border-radius:0 0 var(--r-lg) var(--r-lg);} .svc-cap span{display:block; font-size:10px; letter-spacing:3.2px; text-transform:uppercase; font-weight:500; color:rgba(255,255,255,.92); margin-bottom:8px; text-shadow:0 1px 3px rgba(0,0,0,.5);} .svc-cap h4{font-size:clamp(15px,1.5vw,21px); color:#fff; line-height:1.35; text-shadow:0 1px 4px rgba(0,0,0,.55);} /* ============ TALK BAND - one backdrop behind services + contact ============ Same construction as the city bands: the backdrop is absolutely positioned across the whole band so it can never paint past it, and the inner element is what sticks. This is what makes the two sections read as one space. */ .talk-band{position:relative; background:var(--bg);} .talk-bg-wrap{position:absolute; inset:0; z-index:0; pointer-events:none;} .talk-bg-stick{position:sticky; top:0; height:100svh; overflow:hidden;} .talk-band > section{position:relative; z-index:2;} /* NOTE: .talk-band / .contact / .contact-bg / .contact-scrim / .c-grid / .c-info / .c-form above are still load-bearing for services.html's own contact section - do not remove them. index.html's contact section now uses the pinned sequence below instead. */ /* ============ LET'S TALK - pinned scroll sequence (index.html only) ============ A tall scroll runway pins one viewport-height stage. The Stockyards photo fills it and holds still; three things then animate ON it, each scrubbed directly off scroll position (see moveTalkSeq in site.js) so they track the wheel rather than playing on a timer: 1. .talk-h - "Let's talk" descends from above the top edge, in white 2. .talk-card - a tall white card rises straight up from the bottom right, carrying the form. Copy inside reads maroon. 3. .talk-info - a smaller navy card rises straight up afterwards and comes to rest over the card's bottom-left corner, with Robert and Jim's details in white. All three start outside the stage's own bounds and are clipped by its overflow:hidden, so nothing is ever visible before its turn - no need to fade anything in, which is what keeps it reading as travel rather than a pop. */ .talk-seq{position:relative; background:var(--color-charcoal);} .talk-seq-pin{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--color-charcoal);} /* -- the photo: fills the stage and never moves, so the pin reads as the camera stopping rather than the image sliding -- */ /* overflow:hidden so the slightly oversized image below is always clipped to the frame - on mobile the pin itself is overflow:visible, so without this the scaled photo would push the page sideways */ .talk-bg{position:absolute; inset:0; z-index:1; overflow:hidden;} .talk-bg picture{position:absolute; inset:0; display:block;} /* Scaled a few percent because the photo is blurred as it comes into view (see moveTalkSeq): a blur samples past the edges of its own element, so an exactly-fitted image feathers away to nothing along all four sides. Oversizing pushes that soft margin outside the visible frame. */ .talk-bg img{width:100%; height:100%; object-fit:cover; object-position:50% 50%; display:block; transform:scale(1.06); will-change:filter;} /* a light overall dim - enough that white wording holds anywhere on the frame, not so much that the lamp glow down the corridor is lost */ .talk-bg-dim{position:absolute; inset:0; background:rgba(12,20,30,.42);} /* Photo credit line, tucked into the bottom-left corner the card leaves open. Same treatment as the hero slideshow's location captions. */ /* Top-right corner, tucked close to the section's own top edge. Note this sits inside the band the fixed header occupies: the header is hidden while you scroll down into this section, so it is clear in normal use, but scrolling back up brings the nav over it. */ .talk-loc{position:absolute; right:clamp(18px,2.6vw,34px); top:clamp(20px,3.2vh,36px); z-index:2; pointer-events:none; display:inline-flex; align-items:center; gap:6px; font-family:var(--f-ui); font-weight:400; font-size:12px; letter-spacing:.055em; margin-right:-.055em; color:#C3C9D0; text-shadow:0 1px 6px rgba(8,16,28,.85), 0 0 16px rgba(8,16,28,.55);} /* currentColor, so the pin tracks the caption's colour automatically. It needs its own shadow - text-shadow doesn't reach an inline SVG. */ .talk-loc svg{width:13px; height:13px; flex:none; fill:currentColor; transform:translateY(-.5px); filter:drop-shadow(0 1px 4px rgba(8,16,28,.85));} /* Sits directly on top of the card, nearly touching it, so the two read as one stacked unit. The card's height changes with the viewport, so the exact offset is set from JS (sizeTalkSeq) once the card can be measured - the value here is only the pre-script fallback. */ .talk-h{position:absolute; top:auto; bottom:62vh; left:0; right:0; z-index:2; margin:0; text-align:center; pointer-events:none; color:#fff; font-family:var(--f-display); font-weight:600; line-height:1; font-size:clamp(50px,9.6vw,168px); letter-spacing:var(--ls-head); text-shadow:0 8px 40px rgba(0,0,0,.45); will-change:transform;} .talk-h em{font-style:italic; font-weight:500; color:#fff;} /* -- the white form card: a square-cornered rectangle centred across the stage and sitting flush against its bottom edge, travelling straight up and down only (no horizontal drift) -- */ .talk-card{position:absolute; z-index:3; left:50%; margin-left:calc(min(920px,92vw) / -2); bottom:0; width:min(920px,92vw); max-height:min(76svh,720px); overflow-y:auto; background:#fff; border-radius:0; box-shadow:0 -18px 70px rgba(0,0,0,.42); padding:clamp(24px,2.4vw,40px);} /* the card's only heading now, so it carries the space the h3 used to */ .talk-card .tag{color:var(--brass); margin-bottom:clamp(18px,2.2vh,26px);} /* This card is a fixed box on a pinned stage, so the form has to fit the space rather than set it - spacing is tighter here than the same form gets when it has a whole page section to breathe in. The card is also wide now, so the short fields pair up two-across instead of running down one long column and leaving the right half empty. */ .talk-card .c-form{display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(14px,1.5vw,22px); margin:0;} .talk-card .c-form input, .talk-card .c-form textarea{padding:13px 15px; margin-bottom:12px;} .talk-card .c-form #cfCompany, .talk-card .c-form textarea, .talk-card .c-form .send, .talk-card .c-form .f-status{grid-column:1 / -1;} .talk-card .c-form textarea{margin-bottom:16px;} .talk-card .send{padding:15px 40px; justify-self:end;} .talk-card .f-status{margin-top:12px;} .talk-card .f-status:empty{margin:0;} /* -- principals' details, closing out the bottom of the form -- */ .talk-info{display:flex; flex-wrap:wrap; gap:0 clamp(26px,4vw,64px); margin-top:clamp(18px,2.2vh,26px); padding-top:clamp(16px,2vh,24px); border-top:1px solid var(--color-border);} .talk-info .row{padding:4px 0;} .talk-info .row b{display:block; font-family:var(--f-ui); font-size:9.5px; letter-spacing:.24em; text-transform:uppercase; font-weight:500; color:var(--brass); margin-bottom:3px;} .talk-info .row p{font-size:14.5px; line-height:1.5; color:var(--color-charcoal); margin:0;} .talk-info .row a{color:var(--color-charcoal); border-bottom:1px solid rgba(122,46,60,.32); transition:border-color .3s;} .talk-info .row a:hover{border-color:var(--brass);} /* the card is opaque white, so the form's frosted-glass treatment has nothing to refract - solid fields on a hairline border read cleaner */ .talk-card .c-form input, .talk-card .c-form textarea{background:#fff; border:1px solid var(--color-border); -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none; color:var(--brass);} /* The visible labels are the placeholders themselves - the real