/* ========================================================================== 0. Type faces, served from this origin. Google Fonts cost two extra connections before the first paint (the CSS on one host, the files on another), which was the single largest item in the mobile load. The four latin files are in /fonts, cached for a year, and are deliberately not preloaded (see the note in each page's ). Bricolage Grotesque (display) and Archivo (body) are variable fonts: one file covers every weight. Bricolage replaced Bodoni Moda on 2026-08-28: a didone reads as fashion, and its hairlines vanished at card-title size. ========================================================================== */ @font-face{ font-family:'Bricolage Grotesque';font-style:normal;font-weight:200 800;font-display:swap; src:url("fonts/bricolage-grotesque.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'Archivo';font-style:normal;font-weight:100 900;font-display:swap; src:url("fonts/archivo.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap; src:url("fonts/ibm-plex-mono-400.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap; src:url("fonts/ibm-plex-mono-500.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; } /* Fallbacks sized to the real faces, so text set before the font arrives occupies the same lines and nothing jumps when it swaps in. */ @font-face{ font-family:'Archivo Fallback';src:local('Arial'),local('Helvetica Neue'),local('Liberation Sans'); size-adjust:98%;ascent-override:88%;descent-override:22%;line-gap-override:0%; } @font-face{ font-family:'Display Fallback';src:local('Arial Bold'),local('Arial'),local('Helvetica Neue'),local('Liberation Sans'); size-adjust:91%;ascent-override:92%;descent-override:24%;line-gap-override:0%; } /* ========================================================================== ASH MEDIA SOLUTIONS: "The Edit Bay" A teal-and-orange grade: shadows pushed cyan, highlights pushed warm, the same complementary grade used on the commercial work we sell. Content lives in config.js. Structure lives in the HTML. Look lives here. ========================================================================== */ /* ---------- 1. Tokens ---------------------------------------------------- */ :root{ /* Ash Media is house one, so measure one is lit and the other two rest in brass. */ --m1: var(--ember); --m2: var(--brass); --m3: var(--brass); /* The Ash Limited house palette. Warm ash, never cool black. Proportion is the discipline: Ash 68 / Panel 16 / Bone 10 / Brass 4 / Ember 2. Every ratio below is measured against Ash, not estimated. */ --void: #131211; /* Ash: warm near-black */ --grade-deep: #1D1B19; /* Panel */ --grade-mid: #252220; /* Panel 2 */ --grade-hi: #2E2A26; /* raised */ /* The house specifies Brass and Smoke against Ash only. This site also puts small text on raised panels, where the house values drop to ~3.97 and fail. Both are lifted one step so they clear 4.5:1 on the LIGHTEST surface here. Hue is unchanged: these are the same colours, corrected for the surface. */ --brass: #A79162; /* 6.12 on Ash, 4.66 on the raised panel */ --brass-lift: #BCA571; --brass-dim: rgba(154,133,86,.14); --ember: #C8542A; /* 4.24:1. Large text, rules and the lit measure. 2% of surface. */ --ember-warm: #DC6337; --ember-dim: rgba(200,84,42,.13); /* House ember is 4.24:1, which their own board flags as large-text-only. A button label is body size, so filled buttons use a darker step of the same hue (16 deg) that carries paper text at 4.97:1. */ --ember-fill: #AD441E; --on-ember: #F2EDE4; --ink: #D8D2C8; /* Bone: 12.45:1 */ --ink2: #C8C2B8; /* AAA everywhere it is used: 8.04 on the raised panel, 10.57 on Ash. Body copy lives on this. */ --ink3: #BCB5AA; /* 7.00 on the raised panel, 9.20 on Ash. Was 4.64 on raised: legal, but not comfortable to read. */ --line: rgba(154,133,86,.16); /* hairlines are brass-tinted, not grey */ --line2: rgba(154,133,86,.28); /* Type. The fallback faces are metric-matched (see the @font-face block at the top) so the swap to the real font moves nothing. */ --disp: 'Bricolage Grotesque', 'Display Fallback', Arial, sans-serif; /* display + wordmark */ --body: 'Archivo', 'Archivo Fallback', 'Helvetica Neue', Arial, sans-serif; /* headings + body */ --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; /* Measure widths are in em, not ch: ch is the width of the current font's zero, so it changes when the web font swaps in over the fallback and the text re-wraps. em is glyph-independent. (Bodoni: 1ch ≈ .66em, Archivo ≈ .57em.) */ /* Fluid rhythm: everything expands and contracts, no snapping */ --gutter: clamp(20px, 4vw, 56px); --shell: 1400px; /* was 1280: at 1920 that left a third of the screen empty */ --pad-sec: clamp(52px, 6.4vw, 96px); --gap: clamp(12px, 1.4vw, 20px); --r: 14px; --r-lg: 20px; /* Fluid type scale */ /* Sized for the two-column hero: big enough to lead, small enough to keep the WhatsApp button above the fold on a laptop. */ --t-hero: clamp(34px, 4.6vw, 64px); --t-h2: clamp(28px, 4.6vw, 54px); --t-h3: clamp(18px, 1.5vw, 22px); --t-h3: clamp(19px, 1.6vw, 24px); /* card titles: always above the lede beside them */ --t-lede: clamp(18px, 1.65vw, 22px); --t-body: clamp(16.5px, 1.2vw, 18px); --t-small: clamp(15px, 1.1vw, 16.5px); --t-micro: clamp(11.5px, .84vw, 13px); } /* ---------- 2. Base ------------------------------------------------------ */ *,*::before,*::after{box-sizing:border-box} *{margin:0;padding:0} html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} body{ background:var(--void); color:var(--ink); font:400 var(--t-body)/1.62 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img,svg,video{display:block;max-width:100%} a{color:inherit;text-decoration:none} button,input,select,textarea{font:inherit;color:inherit} ::selection{background:var(--ember-fill);color:var(--on-ember)} h1,h2,h3,.disp{ font-family:var(--disp); font-weight:700; letter-spacing:0; line-height:1.06; } /* Headings: one family at every size. Display sizes tighten a little. */ h1,.h2,.cta h2,.svc-detail__head h2,.pagehero h1,.feature__title,.creed__lead{letter-spacing:-.03em} h3,.plan h3,.svc-card h3,.frm h2,.side h2{font-family:var(--disp);font-weight:700;letter-spacing:-.02em;line-height:1.2;font-size:var(--t-h3)} .tm__name,.wcard__title,.rot__title{font-family:var(--disp);font-weight:700;letter-spacing:-.015em} .logo{line-height:1.2;letter-spacing:-.01em;font-weight:700} /* No orphans in the section leads */ h1,.h2,.cta h2,.svc-detail__head h2,.pagehero h1{text-wrap:balance} .sub,.hero__lede,.prose p,.cta p,.t__q{text-wrap:pretty} /* ---------- 3. Layout ---------------------------------------------------- */ .wrap{width:min(var(--shell), 100% - var(--gutter)*2);margin-inline:auto} section{padding-block:var(--pad-sec);position:relative;z-index:2} .sec-deep{background:var(--grade-deep)} .kicker{ display:inline-flex;align-items:center;gap:10px; font:500 var(--t-micro)/1 var(--mono); letter-spacing:.2em;text-transform:uppercase;color:var(--brass); margin-bottom:clamp(12px,1.4vw,18px); } .h2{font-size:var(--t-h2);margin-bottom:clamp(10px,1.2vw,16px)} .h2 em{font-style:normal;color:var(--brass-lift)} .sub{color:var(--ink2);max-width:35.5em;font-size:var(--t-lede);line-height:1.55} /* ---------- 4. Buttons --------------------------------------------------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:48px;padding:13px 26px;border-radius:999px; font:600 var(--t-small) var(--body);letter-spacing:.005em; border:1px solid var(--line2);background:transparent;cursor:pointer; transition:background .2s,border-color .2s,transform .2s,box-shadow .2s; white-space:nowrap; } .btn:hover{border-color:var(--ink2);transform:translateY(-2px)} /* WhatsApp CTAs wear the brand, not WhatsApp's green. That green sits at hue 142°, outside this palette's ember (18°) / teal (175°) grade. The glyph still carries the recognition, and the floating button below stays green as the one deliberate WhatsApp-coloured anchor. */ .btn--ember{background:var(--ember-fill);border-color:var(--ember-fill);color:var(--on-ember)} .btn--ember:hover{background:var(--ember);border-color:var(--ember)} /* Secondary. Ember is spent once per screen, so everything else wears brass. */ .btn--wa{border-color:var(--brass);color:var(--ink)} .btn--wa:hover{border-color:var(--brass-lift);background:var(--brass-dim)} .btn .ic{width:18px;height:18px;flex:0 0 18px} /* ---------- 5. Focus + motion (quality floor) ---------------------------- */ :focus{outline:none} :focus-visible{ outline:2px solid var(--brass-lift); outline-offset:3px; border-radius:6px; } .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--ember-fill);color:var(--on-ember);padding:12px 20px;border-radius:0 0 10px 0; font:600 14px var(--body); } .skip:focus{left:0} .rv{ opacity:0;transform:translateY(18px); transition:opacity .7s cubic-bezier(.22,1,.36,1),transform .7s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0) * 70ms); } .rv.in{opacity:1;transform:none} /* Already on screen at load: placed, not animated. No transition means no gap between the image arriving and the pixels being painted. */ .rv--now,.rv--now .rv-item{transition:none;opacity:1;transform:none} html:not(.js) .rv{opacity:1;transform:none} .rv:focus-within{opacity:1;transform:none;transition:none} /* Children of a [data-stagger] container arrive in sequence rather than as a block. The order carries meaning: the eye is walked across the row. */ .rv-item{ opacity:0;transform:translateY(14px); transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--i,0) * 80ms); } .rv.in .rv-item{opacity:1;transform:none} html:not(.js) .rv-item{opacity:1;transform:none} @media print{ .rv,.rv-item{opacity:1!important;transform:none!important;transition:none!important} .fab,.vmodal,.burger,.themebtn,.cover__bar,.skip{display:none!important} .nav{position:static} body::after{display:none} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} .rv,.rv-item{opacity:1;transform:none;transition:none;transition-delay:0s} *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important} } /* ---------- 6. Nav ------------------------------------------------------- */ .nav{ position:fixed;inset:0 0 auto 0;z-index:100; background:rgba(19,18,17,.76);backdrop-filter:blur(16px); border-bottom:1px solid var(--line); } .nav__bar{display:flex;align-items:center;gap:clamp(14px,2.2vw,30px);min-height:68px} .logo{display:flex;align-items:center;gap:12px;min-height:44px;font:700 17px var(--disp);letter-spacing:-.01em} .logo__mark{ width:42px;height:42px;flex:0 0 42px;border-radius:10px; background:var(--grade-deep);border:1px solid var(--line2); display:grid;place-items:center;color:var(--ink); } /* 26px clears the 24px minimum from the house rules. Below that the three measures close up and the apex should be used alone instead. */ .logo__mark svg{width:26px;height:26px} .logo small{display:block;font:500 10px var(--mono);color:var(--ink3);letter-spacing:.22em;text-transform:uppercase} .nav__links{display:flex;gap:clamp(14px,1.9vw,28px);margin-left:auto} .nav__links a{ font:500 14px var(--body);color:var(--ink2); padding:8px 2px;position:relative;transition:color .18s; } .nav__links a:hover,.nav__links a[aria-current="page"]{color:var(--ink)} .nav__links a::after{ content:"";position:absolute;left:0;right:0;bottom:2px;height:1px; background:var(--brass);transform:scaleX(0);transform-origin:left;transition:transform .22s; } .nav__links a:hover::after,.nav__links a[aria-current="page"]::after{transform:scaleX(1)} .nav .btn{min-height:42px;padding:10px 20px} .burger{ display:none;margin-left:auto;width:46px;height:46px; background:none;border:1px solid var(--line2);border-radius:11px; cursor:pointer;position:relative; } .burger span{ position:absolute;left:13px;right:13px;height:1.5px;background:var(--ink);border-radius:2px; transition:transform .25s,opacity .2s; } .burger span:nth-child(1){top:16px} .burger span:nth-child(2){top:22px} .burger span:nth-child(3){top:28px} .burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .burger[aria-expanded="true"] span:nth-child(2){opacity:0} .burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} @media (max-width:900px){ .nav__links{ display:none;position:fixed;top:68px;left:0;right:0; /* Fully opaque. The old .97 let the hero headline bleed through */ background:var(--void); border-bottom:1px solid var(--line); flex-direction:column;gap:0;padding:8px var(--gutter) 22px; max-height:calc(100dvh - 68px);overflow-y:auto; } .nav__links.is-open{display:flex} .nav__links a{min-height:52px;display:flex;align-items:center;font-size:16px;border-bottom:1px solid var(--line)} .nav__links a::after{display:none} .nav .btn{display:none} .burger{display:block} } /* ---------- 7. Hero ------------------------------------------------------ */ .hero{padding-block:clamp(112px,14vw,168px) clamp(40px,5vw,64px);position:relative;overflow:hidden;z-index:2} /* Dusk scene: sky darkens upward, one warm line at the horizon, ridges stacked for atmospheric depth. Distant ridges sit lighter than near ones. */ .scene{ position:absolute;inset:auto 0 0 0;height:clamp(190px,30vh,300px); z-index:0;pointer-events:none; /* the scene has to arrive out of the ground, not start on a hard edge */ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%); mask-image:linear-gradient(180deg,transparent 0,#000 46%); } .scene svg{width:100%;height:100%;display:block} .scene::after{ content:"";position:absolute;inset:0; background-image:radial-gradient(circle at 1px 1px,var(--halftone-dot) 1px,transparent 1.6px); background-size:5px 5px; } /* Any section hosting the scene must clip it and lift its own content above it. Keeping this with the scene means a new host cannot forget it. */ .has-scene{position:relative;overflow:hidden} .has-scene > .wrap{position:relative;z-index:2} /* Page headers are shorter than the homepage hero, so the scene is too. */ .pagehero .scene{height:clamp(110px,18vh,180px)} .hero::before{ content:"";position:absolute;inset:-30% -10% auto;height:120%;pointer-events:none; background: radial-gradient(46% 48% at 78% 14%, rgba(200,84,42,.16), transparent 64%), radial-gradient(42% 46% at 12% 4%, rgba(154,133,86,.13), transparent 62%); } .hero__grid{ position:relative;z-index:2; display:grid;gap:clamp(32px,4.5vw,64px); grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center; } .hero h1{font-size:var(--t-hero);max-width:10.6em} .hero h1 em{font-style:normal;color:var(--ember);display:inline-block} .hero__lede{margin:clamp(18px,2vw,28px) 0 clamp(22px,2.6vw,34px);font-size:var(--t-lede);color:var(--ink2);max-width:29.8em} .hero__ctas{display:flex;gap:12px;flex-wrap:wrap} /* Featured vertical piece ------------------------------------------------ Two columns: the 9:16 card at its real ratio, its specs beside it. This is deliberately a different layout family from the deck in the hero. */ .feature{ display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr); gap:clamp(22px,4vw,56px);align-items:center; margin-top:clamp(26px,3.4vw,44px); } .feature__card{ position:relative;display:block;width:100%;aspect-ratio:9/16; /* Short screens: cap the height, and carry that cap into the width so the card stays a true 9:16 instead of being cropped to a near-square. */ max-width:min(100%, calc(74svh * 9 / 16));margin-inline:auto; border:1px solid var(--line2);border-radius:var(--r-lg);overflow:hidden; background:var(--grade-mid);padding:0;cursor:pointer; transition:border-color .25s,transform .25s; } .feature__card:hover{border-color:var(--ember);transform:translateY(-3px)} .feature__card img{width:100%;height:100%;object-fit:cover} .feature__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(19,18,17,.55))} .feature__card:hover .play-btn{background:var(--ember);border-color:var(--ember)} .feature__card:hover .play-btn svg path{fill:var(--on-ember)} .feature__eyebrow{ font:500 var(--t-micro) var(--mono);letter-spacing:.22em; text-transform:uppercase;color:var(--brass);margin-bottom:12px; } .feature__title{font-size:clamp(24px,3.2vw,40px);letter-spacing:-.02em;line-height:1.05} .feature__tag{margin-top:10px;font:400 var(--t-small) var(--mono);letter-spacing:.06em;color:var(--ink3)} .feature__specs{ display:grid;grid-template-columns:repeat(3,auto);gap:clamp(18px,3vw,44px); justify-content:start;margin:clamp(20px,2.6vw,32px) 0; padding-top:clamp(18px,2.2vw,26px);border-top:1px solid var(--line); } .feature__specs dt{font:500 var(--t-micro) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)} .feature__specs dd{margin-top:7px;font:700 clamp(17px,1.7vw,24px) var(--disp);letter-spacing:-.02em;color:var(--ink)} @media (max-width:820px){ .feature{grid-template-columns:1fr;gap:16px;margin-top:16px} .feature__card{max-width:min(320px, calc(66svh * 9 / 16))} } @media (max-width:980px){ .hero__grid{grid-template-columns:1fr} .hero h1{max-width:11.9em} .hero .rot{--cw:82} } /* ---------- 8. Marquee --------------------------------------------------- */ /* ---------- 9. Stats ----------------------------------------------------- */ .stats{ min-height:110px; display:grid;grid-template-columns:repeat(4,1fr);gap:1px; background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden; } .stat{background:var(--grade-deep);padding:clamp(18px,2.4vw,30px) clamp(16px,2vw,24px)} .stat__fig{ display:flex;align-items:baseline;gap:1px; /* Scoped to the figure only. The old `.stat span` rule also caught the number span inside and rendered it at 13px. */ font:700 clamp(26px,3.4vw,42px)/1 var(--disp); font-feature-settings:'tnum' 1;letter-spacing:-.02em;color:var(--ink); } .stat__fig .stat__suffix{color:var(--ember);font-style:normal} .stat__label{display:block;margin-top:9px;font-size:var(--t-small);color:var(--ink3);line-height:1.35} @media (max-width:760px){.stats{grid-template-columns:1fr 1fr}} /* ---------- 10. Services ------------------------------------------------- */ .svc__tags{display:flex;gap:7px;flex-wrap:wrap;margin-top:18px} .tag{ font:500 var(--t-micro) var(--mono);letter-spacing:.06em;color:var(--ink3); border:1px solid var(--line2);border-radius:999px;padding:5px 11px; } /* ---------- 11. Play button (used by the hero showreel) ------------------ */ .play-btn{ position:absolute;top:50%;left:50%;transform:translate(-50%,-56%); width:58px;height:58px;border-radius:50%;display:grid;place-items:center; /* scrim over media stays dark in both themes. The glyph on it is light */ background:rgba(19,18,17,.62);border:1px solid rgba(232,227,218,.28);backdrop-filter:blur(5px); transition:background .2s,border-color .2s,transform .2s; } /* ---------- 12. SIGNATURE: the edit timeline ----------------------------- */ /* "Brief → 48h → revisions → publish" is genuinely a sequence in time, so it is drawn as one: a ruler, clip blocks on a track, and a playhead. */ /* ---------- 13. The editing bay ------------------------------------------ The process section as a mock edit suite. The section is a tall runway (.bay__track); the suite inside is sticky and holds on screen while the visitor scrolls the runway. site.js writes the scroll progress to --p on the section; the playhead reads it directly, the frame and the active step are swapped in JS. The suite is a screen, so its chrome stays dark in both themes. */ .bay{padding-bottom:0} /* a pixel floor keeps the pace on short laptop screens: never fewer than ~225px of scroll per stage */ .bay__track{height:max(190vh, calc(100vh + 900px));position:relative} .bay__stage{ position:sticky;top:68px;height:calc(100vh - 68px);height:calc(100svh - 68px); display:flex;align-items:center;padding-block:clamp(12px,3vh,40px); } .bay__grid{ display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,.8fr); gap:clamp(22px,4vw,64px);align-items:center; } .nle{ --nle:#141416;--nle2:#1B1B1F;--nle3:#27272C;--nleline:rgba(255,255,255,.08);--nletxt:#B4AFA5; background:var(--nle);border:1px solid var(--nleline);border-radius:14px;overflow:hidden; box-shadow:0 34px 90px -34px rgba(0,0,0,.75),0 0 0 1px rgba(200,84,42,.05); font-family:var(--mono); } .nle__top{ display:flex;align-items:center;gap:12px;padding:9px 12px; background:var(--nle2);border-bottom:1px solid var(--nleline); font-size:11px;letter-spacing:.06em;color:var(--nletxt); } .nle__dots{display:flex;gap:5px} .nle__dots i{width:9px;height:9px;border-radius:50%;background:#3A3A41} .nle__dots i:first-child{background:#C8542A} .nle__title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .nle__stat{color:#131211;background:#E8E3DA;padding:3px 8px;border-radius:4px;font-weight:700;font-size:10.5px;letter-spacing:.12em;white-space:nowrap;min-width:9ch;text-align:center} /* The screen. Stage 1 is the edit (frames and loop); stages 0 and 2 are the WhatsApp thread with the client; stage 3 is the export queue. Which one shows is driven by data-stage on .nle, written by site.js. */ .nle__monitor{position:relative;aspect-ratio:16/9;background:#0E0E10;overflow:hidden} .nle[data-stage="1"] .nle__monitor{background:#000} /* outside the edit stage the screen is a plain panel: no footage behind the chat */ .nle:not([data-stage="1"]) .nle__frame.is-on{opacity:0} .nle:not([data-stage="1"]) .nle__monitor{background:#121215 radial-gradient(circle at 1px 1px,rgba(255,255,255,.035) 1px,transparent 0) 0 0/14px 14px} .nle:not([data-stage="1"]) .nle__live{opacity:0!important} .scr{position:absolute;inset:0;display:none;flex-direction:column;gap:7px;padding:12px 14px;z-index:3;font-family:var(--body);overflow:hidden} .scr-chat{justify-content:flex-end} .scr-chat .scr__hd{position:absolute;left:14px;right:14px;top:10px} /* the monitor chrome (tag, safe area) belongs to the edit stage only */ .nle:not([data-stage="1"]) .nle__tag,.nle:not([data-stage="1"]) .nle__safe{display:none} .nle[data-stage="0"] .scr[data-stage="0"],.nle[data-stage="2"] .scr[data-stage="2"]{display:flex} .nle[data-stage="3"] .scr.exp{display:grid} .scr__hd{display:flex;align-items:center;gap:8px;font:600 11.5px var(--body);color:#E8E3DA;padding-bottom:6px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:2px} .exp .scr__hd{position:static} .scr__hd i{width:8px;height:8px;border-radius:50%;background:#25D366} .scr__hd small{font:400 10.5px var(--mono);color:#B4AFA5;margin-left:auto;letter-spacing:.04em} .bub{max-width:82%;padding:7px 10px 6px;border-radius:12px;font:400 12.5px/1.4 var(--body);color:#E8E3DA;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .35s} .bub.is-in{opacity:1;transform:none} .bub--them{align-self:flex-start;background:#26262B;border-bottom-left-radius:4px} .bub--us{align-self:flex-end;background:#1F5C48;border-bottom-right-radius:4px} .bub small{display:block;font:400 9.5px var(--mono);color:rgba(232,227,218,.55);margin-top:3px;text-align:right} /* "typing…" before our replies: three dots, the middle one a beat behind */ .bub--typing{display:flex;gap:4px;padding:9px 12px;width:auto} .bub--typing:not(.is-in){display:none} .bub--typing i{width:6px;height:6px;border-radius:50%;background:rgba(232,227,218,.8);animation:typing 1s infinite} .bub--typing i:nth-child(2){animation-delay:.18s} .bub--typing i:nth-child(3){animation-delay:.36s} @keyframes typing{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} .bub--file{display:flex;align-items:center;gap:8px} .bub--file b{display:grid;place-items:center;width:26px;height:26px;border-radius:7px;background:rgba(255,255,255,.1);font:700 9px var(--mono);color:#E8E3DA;flex:0 0 auto} .bub--file span{display:block;font:500 12px var(--body)} .bub--file span em{display:block;font:400 10px var(--mono);color:rgba(232,227,218,.6);font-style:normal} .exp{gap:8px;align-content:start;font-family:var(--mono);color:#E8E3DA} .exp__row{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:11px;letter-spacing:.04em;align-items:center} .exp__row small{color:#B4AFA5;font-size:10px} .exp__bar{grid-column:1/-1;height:6px;border-radius:3px;background:rgba(255,255,255,.08);overflow:hidden} .exp__bar i{display:block;height:100%;width:calc(var(--w,0) * 100%);background:#C8542A;transition:width .2s linear} .exp__row.is-done small::after{content:" ✓";color:#25D366} .exp__done{margin-top:auto;align-self:flex-end} @media (max-width:880px){ .scr{padding:9px 10px;gap:5px} .bub{font-size:11px;padding:5px 8px 4px;max-width:88%} .bub small{display:none} .exp__row{font-size:10px} .scr__hd{font-size:10.5px} } .nle__frame,.nle__live{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .45s ease} .nle__frame.is-on{opacity:1} .nle__live.is-on{opacity:1;z-index:1} .nle__tag{ position:absolute;left:12px;top:10px;z-index:2;font-size:10px;letter-spacing:.16em; color:#E8E3DA;background:rgba(0,0,0,.6);padding:4px 8px;border-radius:3px; } .nle__safe{position:absolute;inset:7% 9%;border:1px dashed rgba(255,255,255,.16);pointer-events:none;z-index:2} .nle__bar{ display:flex;justify-content:space-between;align-items:center;padding:8px 12px; background:var(--nle2);border-block:1px solid var(--nleline); font-size:12px;letter-spacing:.08em;color:#E8E3DA;font-feature-settings:'tnum' 1; } .nle__fps{color:var(--nletxt);font-size:10px} .nle__tl{position:relative;padding:10px 12px 12px;display:grid;gap:6px;--n:6} .nle__ruler{ display:grid;grid-template-columns:repeat(4,1fr);margin-left:34px; font-size:10px;letter-spacing:.1em;color:var(--nletxt); border-bottom:1px solid var(--nleline);padding-bottom:4px; } .nle__track{position:relative;height:36px;margin-left:34px;background:var(--nle2);border-radius:4px} .nle__track--a1{height:22px} .nle__lbl{position:absolute;left:-34px;top:0;bottom:0;width:28px;display:grid;place-items:center;font-size:10px;color:var(--nletxt)} .nle__clip,.nle__gfx{ position:absolute;top:2px;bottom:2px;border-radius:3px;overflow:hidden; left:calc(var(--i) * 100% / var(--n) + 1px);width:calc(100% / var(--n) - 2px); } .nle__clip{background:var(--nle3);border:1px solid rgba(255,255,255,.1);display:flex;align-items:center;gap:6px;padding-right:6px} .nle__clip img{height:100%;aspect-ratio:16/9;object-fit:cover;opacity:.85;flex:0 0 auto} .nle__clip span{font-size:9.5px;color:#E8E3DA;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0} .nle__gfx{ width:calc(100% / var(--n) * .55);left:calc(var(--i) * 100% / var(--n) + 100% / var(--n) * .3); background:repeating-linear-gradient(90deg,rgba(167,145,98,.55) 0 6px,rgba(167,145,98,.28) 6px 12px); } .nle__wave{ position:absolute;inset:3px 2px;opacity:.75; background:repeating-linear-gradient(90deg,#4E9270 0 2px,transparent 2px 5px); -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 65%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 35%,#000 65%,transparent 100%); } /* the playhead: --p is written to the section by site.js, 0 at the start of the runway and 1 at its end; 46px and 58px are the label gutter and the panel padding, so the head travels exactly the width of the tracks */ .nle__head{ position:absolute;top:8px;bottom:8px;width:2px;z-index:3;left:46px; transform:translateX(calc(var(--travel,0px) * var(--p,0)));will-change:transform; background:#C8542A;box-shadow:0 0 10px rgba(200,84,42,.85); } .nle__head::before{content:"";position:absolute;top:-7px;left:-5px;border:6px solid transparent;border-top:8px solid #C8542A} .bay__steps{list-style:none;margin:0;padding:0;display:grid;gap:clamp(10px,1.4vw,16px)} .bay__steps li{ padding:clamp(14px,1.6vw,20px) clamp(16px,1.8vw,22px); border:1px solid var(--line);border-left:2px solid var(--line2);border-radius:4px 12px 12px 4px; background:var(--grade-mid);opacity:.86; transition:opacity .4s,border-color .4s,transform .4s,background .4s; } .bay__steps li.is-on{ opacity:1;border-left-color:var(--ember);transform:translateX(6px); background:linear-gradient(178deg,var(--grade-mid),var(--grade-deep)); } .bay__steps li.is-on .clip__tc{color:var(--accent-text)} .bay__steps p{font-size:var(--t-small);color:var(--ink2);line-height:1.55;margin:0} /* Motion off: no runway, no sticky, everything readable at once */ .bay--static .bay__track{height:auto} .bay--static .bay__stage{position:static;height:auto;padding-block:clamp(26px,3vw,40px) 0} .bay--static .bay__steps li{opacity:1;transform:none} .bay--static{padding-bottom:var(--pad-sec)} @media (max-width:880px){ .bay__track{height:max(170vh, calc(100vh + 800px))} .bay__grid{grid-template-columns:1fr;gap:14px;align-content:center} .bay__steps{ grid-auto-flow:column;grid-auto-columns:78%;overflow-x:auto; scroll-snap-type:x mandatory;gap:10px;padding-bottom:4px; scrollbar-width:none; } .bay__steps::-webkit-scrollbar{display:none} .bay__steps li{scroll-snap-align:start} .bay__steps li.is-on{transform:none} .bay__steps:focus-visible{outline:2px solid var(--brass-lift);outline-offset:4px;border-radius:8px} .nle__clip span,.nle__safe,.nle__fps{display:none} .nle__track{height:30px} .nle__ruler{font-size:9px} } @media (max-height:820px) and (min-width:881px){ .bay__grid{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)} } .clip__tc{font:500 var(--t-micro) var(--mono);letter-spacing:.12em;color:var(--brass)} .clip:nth-child(2) .clip__tc{color:var(--accent-text)} .clip__name{display:block;font:600 clamp(15px,1.25vw,18px) var(--body);margin:9px 0 7px;letter-spacing:-.02em} @media (max-width:880px){ .clip__tc{display:inline-block} } /* ---------- 13. Pricing -------------------------------------------------- */ .price-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,3.4vw,46px);align-items:stretch} .plan{ background:var(--grade-mid);border:1px solid var(--line);border-radius:var(--r); padding:clamp(24px,2.8vw,34px);display:flex;flex-direction:column; transition:border-color .25s,transform .25s;position:relative; } .plan:hover{border-color:var(--line2);transform:translateY(-3px)} .plan--hot{background:linear-gradient(168deg,var(--tint-warm),var(--grade-mid) 62%);border-color:rgba(200,84,42,.38)} .plan__flag{ position:absolute;top:-12px;left:clamp(24px,2.8vw,34px); background:var(--ember-fill);color:var(--on-ember); font:600 var(--t-micro) var(--body);letter-spacing:.07em; padding:5px 13px;border-radius:999px; } .plan h3{font-size:var(--t-h3)} .plan__who{font-size:var(--t-small);color:var(--ink2);margin:5px 0 18px} .plan__amt{font:700 clamp(30px,3.2vw,40px)/1 var(--disp);font-feature-settings:'tnum' 1;letter-spacing:-.025em} .plan__amt small{font:400 var(--t-small) var(--mono);color:var(--ink3);letter-spacing:0} .plan ul{list-style:none;margin:22px 0 26px;display:grid;gap:10px;flex:1} .plan li{font-size:var(--t-small);color:var(--ink2);padding-left:23px;position:relative;line-height:1.5} .plan li::before{content:"✓";position:absolute;left:0;top:-1px;color:var(--brass);font-weight:700} .plan--hot li::before{color:var(--ember-warm)} .plan .btn{width:100%} .price-note{margin-top:22px;font-size:var(--t-small);color:var(--ink3);max-width:37.8em} @media (max-width:940px){.price-grid{grid-template-columns:1fr}} /* ---------- 14. Reviews --------------------------------------------------- Three views of one list. The score sits in the section head, four typeset quotes carry the strongest reviews, and the wall below pins the original screenshots on a paper ground so the white cards read as evidence rather than as pasted-in panels. */ .score{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0;color:var(--ink2);font-size:var(--t-small)} .score__n{font:700 clamp(30px,3.4vw,44px)/1 var(--disp);color:var(--ink);letter-spacing:-.02em;font-feature-settings:'tnum' 1} .score__stars{color:var(--ember);font-size:17px;letter-spacing:.08em} .t-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,3.4vw,46px)} @media (max-width:1100px){.t-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} .t{background:var(--grade-mid);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.6vw,30px);margin:0;display:flex;flex-direction:column} .t__stars{display:block;color:var(--ember);font-size:15px;letter-spacing:.12em;margin-bottom:12px} .t__q{font-size:var(--t-body);color:var(--ink);line-height:1.68;margin:0} .t__who{display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:20px;flex-wrap:wrap} .t__orig{ margin-left:auto;font:500 var(--t-micro) var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink2);background:none;border:1px solid var(--line2);border-radius:99px;padding:9px 13px; cursor:zoom-in;transition:border-color .2s,color .2s; } .t__orig:hover{border-color:var(--ember);color:var(--ink)} .t__av{ width:38px;height:38px;flex:0 0 38px;border-radius:50%;display:grid;place-items:center; font:600 13px var(--body);background:var(--brass-dim);color:var(--brass-lift); border:1px solid rgba(154,133,86,.3); } .t__name{display:block;font:600 14.5px var(--body)} .t__role{display:block;font:400 var(--t-micro) var(--mono);color:var(--ink2);letter-spacing:.08em} @media (max-width:780px){.t-grid{grid-template-columns:1fr}} /* Every other review, as text. The screenshots stay one tap away. */ .score__l a{color:var(--ink2)} /* ---------- 15. FAQ ------------------------------------------------------ */ .faq{max-width:820px;margin-top:clamp(26px,3vw,42px)} .faq details{border:1px solid var(--line);border-radius:12px;background:var(--grade-mid);margin-bottom:10px;overflow:hidden} .faq details[open]{border-color:var(--line2)} .faq summary{ list-style:none;cursor:pointer;padding:18px 22px;min-height:56px; font:600 clamp(15px,1.2vw,17px) var(--body); display:flex;gap:14px;align-items:center;letter-spacing:-.015em; } .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";margin-left:auto;color:var(--brass);font:400 22px var(--mono);transition:transform .22s;flex:0 0 auto} .faq details[open] summary::after{transform:rotate(45deg)} .faq__a{padding:0 22px 20px;color:var(--ink2);font-size:var(--t-small);max-width:40.1em;line-height:1.62} /* ---------- 16. Contact -------------------------------------------------- */ /* minmax(0,...) not 1fr: a bare 1fr track is min-width:auto, so the form could not shrink below the intrinsic width of its own inputs and blew 13px past a 320px viewport. */ .reach-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap);margin-top:clamp(28px,3.4vw,46px);align-items:start} .frm{background:var(--grade-mid);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,34px)} .frm h3{font-size:var(--t-h3);margin-bottom:5px} .frm__hint{font-size:var(--t-small);color:var(--ink3);margin-bottom:20px} .frm label{display:block;font:500 var(--t-micro) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:15px 0 7px} .frm input,.frm select,.frm textarea{ /* min-width:0 or a text input refuses to go under ~20 characters wide */ width:100%;min-width:0;background:var(--void);border:1px solid var(--line2);border-radius:10px; color:var(--ink);font:400 15px var(--body);padding:13px 15px; transition:border-color .18s,box-shadow .18s; } .frm input::placeholder,.frm textarea::placeholder{color:var(--ink3);opacity:.75} .frm input:focus,.frm select:focus,.frm textarea:focus{border-color:var(--ember);box-shadow:0 0 0 3px var(--ember-dim)} .frm input:user-invalid,.frm textarea:user-invalid{border-color:#E5484D} .frm textarea{min-height:118px;resize:vertical} .frm .btn{margin-top:22px;width:100%} .req{color:var(--accent-text,var(--ember));margin-left:2px} .frm__legend{font-size:var(--t-micro);color:var(--ink3);margin:-4px 0 14px;font-family:var(--mono);letter-spacing:.06em} .frm__row{display:grid;grid-template-columns:1fr 1fr;gap:0 14px} @media (max-width:520px){.frm__row{grid-template-columns:1fr}} .frm__opt{font:400 var(--t-micro) var(--mono);color:var(--ink3);letter-spacing:.06em;margin-left:6px} .frm__fine{font-size:var(--t-small);color:var(--ink3);margin-top:12px;text-align:center} .frm__status{margin-top:14px;font-size:var(--t-small);border-radius:10px;padding:12px 14px;display:none} .frm__status.is-ok{display:block;background:var(--brass-dim);border:1px solid rgba(154,133,86,.35);color:var(--brass-lift)} .frm__status.is-err{display:block;background:rgba(229,72,77,.12);border:1px solid rgba(229,72,77,.4);color:#FF9EA1} .side{background:linear-gradient(168deg,var(--grade-hi),var(--grade-deep) 62%);border:1px solid var(--line);border-radius:var(--r);padding:clamp(24px,2.8vw,34px)} .side h3{font-size:var(--t-h3);margin-bottom:11px} .side p{color:var(--ink2);font-size:var(--t-small);margin-bottom:18px;line-height:1.6} .side__row{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line);font-size:var(--t-small);min-height:56px} /* gap replaces the trailing space that inline-flex trims off the text node */ .side__row a{display:inline-flex;align-items:center;gap:.32em;min-height:44px;transition:color .18s} .side__row a:hover{color:var(--ember-warm)} .side__ic{ width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:var(--brass-dim); display:grid;place-items:center;color:var(--brass-lift); } .side__ic svg{width:17px;height:17px;fill:currentColor} @media (max-width:880px){.reach-grid{grid-template-columns:minmax(0,1fr)}} /* ---------- 17. CTA band ------------------------------------------------- */ .cta{ background:linear-gradient(140deg,#22130A,var(--grade-deep) 56%); border:1px solid rgba(200,84,42,.3);border-radius:var(--r-lg); padding:clamp(32px,5.4vw,68px);text-align:center;position:relative;overflow:hidden; } .cta::before{ content:"";position:absolute;inset:auto -8% -66% -8%;height:118%;pointer-events:none; background:radial-gradient(closest-side,rgba(200,84,42,.17),transparent 70%); } .cta > *{position:relative;z-index:2} .cta h2{font-size:var(--t-h2);margin-bottom:13px} .cta p{color:var(--ink2);max-width:32.1em;margin:0 auto clamp(22px,2.6vw,32px);font-size:var(--t-lede)} .cta__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ---------- 18. Footer + FAB --------------------------------------------- */ footer{border-top:1px solid var(--line);padding-block:32px 38px;position:relative;z-index:2} .foot{display:flex;gap:18px;flex-wrap:wrap;align-items:center;justify-content:space-between;color:var(--ink3);font:400 var(--t-small) var(--mono)} .socials{display:flex;gap:9px} .soc{width:44px;height:44px;border-radius:11px;border:1px solid var(--line2);display:grid;place-items:center;color:var(--ink3);transition:border-color .2s,transform .2s,color .2s} .soc:hover{border-color:var(--brass);transform:translateY(-2px);color:var(--ember-warm)} .soc svg{width:20px;height:20px;fill:currentColor;display:block} .fab{ position:fixed;right:clamp(14px,2vw,24px);bottom:clamp(14px,2vw,24px);z-index:90; width:56px;height:56px;border-radius:50%;background:var(--ember-fill);display:grid;place-items:center; box-shadow:0 12px 32px rgba(173,68,30,.42);transition:transform .2s,background .2s; } .fab:hover{transform:scale(1.07);background:var(--ember)} .fab svg{width:27px;height:27px} /* ---------- 19. Video modal ---------------------------------------------- */ .vmodal{ position:fixed;inset:0;z-index:150;background:rgba(4,6,8,.92);backdrop-filter:blur(8px); display:none;place-items:center;padding:clamp(14px,3vw,28px); } .vmodal.is-open{display:grid} .vmodal__holder{position:relative;width:min(1040px,100%)} .vmodal__box{ width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden; border:1px solid var(--line2);position:relative; } .vmodal__box--tall{aspect-ratio:9/16;max-height:82dvh;margin-inline:auto;width:auto} /* a review screenshot: its own height, scrollable if taller than the screen */ .vmodal__box--img{aspect-ratio:auto;width:min(100%,760px);max-height:82dvh;margin-inline:auto;background:var(--grade-mid);overflow:auto} .vmodal__fig{margin:0} .vmodal__img{display:block;width:100%;height:auto;background:#fff} .vmodal__cap{padding:clamp(16px,2.4vw,24px);color:var(--ink);font-size:var(--t-body);line-height:1.6} .vmodal__cap p{margin:8px 0 12px} .vmodal__cap b{font:600 var(--t-small) var(--body)} .vmodal__cap span{color:var(--ink2);font-size:var(--t-small)} .vmodal iframe,.vmodal video{width:100%;height:100%;border:0;display:block} /* Pinned to the viewport, not the holder. The tall 9:16 box is narrower than the holder, and an absolutely-placed button drifted away from the video. */ .vmodal__close{ position:fixed;top:clamp(12px,2vw,22px);right:clamp(12px,2vw,22px);min-height:44px; background:rgba(19,18,17,.72);backdrop-filter:blur(8px); border:1px solid var(--line2);color:var(--ink); border-radius:999px;padding:9px 18px;font:600 13px var(--body);cursor:pointer; transition:border-color .2s,background .2s; } .vmodal__close:hover{border-color:var(--ink2);background:rgba(216,210,200,.14)} /* ---------- 20. About page ----------------------------------------------- */ .pagehero{padding-block:clamp(112px,13vw,150px) clamp(28px,3.4vw,48px)} /* Ambient video header: the loop sits under a scrim so the copy keeps its contrast; the scrim is what the light theme darkens too. */ .pagehero--video,.hero--video{position:relative;overflow:hidden;isolation:isolate} /* the home hero holds the deck, so its loop sits lower and darker than the page headers, and fades out before the deck column */ .hero--video .pagehero__video{opacity:.38;filter:saturate(.8)} .hero--video::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(19,18,17,.5),rgba(19,18,17,.25) 40%,var(--void) 100%),linear-gradient(90deg,rgba(19,18,17,0) 55%,rgba(19,18,17,.55) 100%)} :root[data-theme="light"] .hero--video .pagehero__video{opacity:.6;mix-blend-mode:multiply;filter:saturate(.7) contrast(1.05)} :root[data-theme="light"] .hero--video::after{background:linear-gradient(180deg,rgba(231,225,214,.25),rgba(231,225,214,.15) 40%,var(--void) 100%),linear-gradient(90deg,rgba(231,225,214,0) 55%,rgba(231,225,214,.5) 100%)} /* the services header keeps its photo treatment but gets the loop instead of the still */ .pagehero--bg.pagehero--video::before{display:none} .pagehero--bg.pagehero--video::after{display:none} .pagehero--bg.pagehero--video{background:var(--void)} /* proof under the hero buttons: the one line every good studio site has */ .hero__proof{margin:18px 0 0;font-size:var(--t-small);color:var(--ink2);display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hero__proof b{color:var(--ink);font-weight:700} .hero__stars{color:var(--accent-text,var(--ember));letter-spacing:.1em;font-size:14px} /* a hairline of ember light where the hero ends */ .hero--video{border-bottom:1px solid rgba(200,84,42,.28);box-shadow:0 1px 0 rgba(200,84,42,.12),0 -40px 80px -60px rgba(200,84,42,.25) inset} .pagehero__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;opacity:.55;filter:saturate(.85)} .pagehero--video::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(19,18,17,.55),rgba(19,18,17,.35) 45%,var(--void) 100%)} :root[data-theme="light"] .pagehero__video{opacity:.62;mix-blend-mode:multiply;filter:saturate(.7) contrast(1.05)} :root[data-theme="light"] .pagehero--bg .pagehero__video{opacity:.42} :root[data-theme="light"] .pagehero--video::before{background:linear-gradient(180deg,rgba(231,225,214,.3),rgba(231,225,214,.2) 45%,var(--void) 100%)} @media (prefers-reduced-motion:reduce){.pagehero__video{display:none}} .pagehero h1{font-size:clamp(34px,6.4vw,74px);max-width:11.9em} .pagehero h1 em{font-style:normal;color:var(--ember)} .prose{max-width:37.8em;color:var(--ink2);font-size:var(--t-lede);display:grid;gap:17px;line-height:1.62} .prose b{color:var(--ink);font-weight:600} .team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);margin-top:clamp(28px,3.4vw,46px)} .tm{background:var(--grade-mid);border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);transition:border-color .25s,transform .25s} .tm:hover{border-color:var(--line2);transform:translateY(-3px)} .tm__face{ width:56px;height:56px;border-radius:16px;background:var(--brass-dim); border:1px solid rgba(154,133,86,.3);display:grid;place-items:center; font:700 19px var(--disp);color:var(--brass-lift);margin-bottom:15px;object-fit:cover; } .tm__name{font:600 clamp(15px,1.25vw,17px) var(--body);display:block;letter-spacing:-.015em} .tm__role{font:400 var(--t-micro) var(--mono);color:var(--brass);letter-spacing:.1em;display:block;margin-top:3px} .tm p{font-size:var(--t-small);color:var(--ink2);margin-top:10px;line-height:1.55} @media (max-width:880px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:560px){.team-grid{grid-template-columns:1fr}} /* About: statement band. Hairlines and space instead of card boxes, so this page does not repeat the services-page grid rhythm. */ .creed{margin-top:clamp(30px,4vw,54px);display:grid} .creed__row{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(20px,4vw,64px);align-items:baseline; padding:clamp(24px,3.2vw,42px) 0;border-top:1px solid var(--line); } .creed__row:last-child{border-bottom:1px solid var(--line)} .creed__lead{ font-family:var(--disp);font-weight:700; font-size:clamp(20px,2.4vw,32px);line-height:1.12;letter-spacing:-.02em; color:var(--ink);text-wrap:balance; } .creed__body{font-size:var(--t-body);color:var(--ink2);line-height:1.62;max-width:29.8em} @media (max-width:760px){ .creed__row{grid-template-columns:1fr;gap:12px} } /* ---------- 21. Thanks page ---------------------------------------------- */ .thanks{min-height:66dvh;display:grid;place-items:center;text-align:center;padding:var(--gutter)} .thanks__inner{max-width:520px} .thanks h1{font-size:clamp(30px,5.4vw,52px);margin-bottom:14px} .thanks p{color:var(--ink2);font-size:var(--t-lede);margin-bottom:28px} .thanks__ctas{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} /* ========================================================================== 22. Multi-page additions ========================================================================== */ /* Icon sprite: defined once per page, referenced with . Sized here because a -only has no intrinsic dimensions. */ .sprite{position:absolute;width:0;height:0;overflow:hidden} .btn .ic{fill:currentColor} .fab svg{fill:#04240F} .side__ic svg{fill:currentColor} /* Section header with a "more" link on the right */ .sec-head{ display:flex;align-items:flex-end;justify-content:space-between; gap:var(--gap);flex-wrap:wrap;margin-bottom:8px; } .sec-head .h2{margin-bottom:0} /* Section lead: heading on the left, lede (and any link or score) on the right, bottom-aligned. On a wide screen a heading with its lede stacked under it left the right half of every section empty; side by side the row is used without stretching any line of text past a readable length. */ .sec-lead{ display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); gap:clamp(18px,3vw,56px);align-items:end;margin-bottom:clamp(6px,1vw,12px); } .sec-lead .h2{margin-bottom:0} .sec-lead .sub{margin:0} .sec-lead__r{display:grid;gap:14px;justify-items:start;padding-bottom:.35em} @media (max-width:1000px){ .sec-lead{grid-template-columns:1fr;align-items:start;gap:14px} .sec-lead__r{padding-bottom:0} } .sec-tight{padding-block:clamp(32px,4vw,56px)} .link-more{ display:inline-flex;align-items:center;min-height:44px; font:600 var(--t-small) var(--body);color:var(--accent-text); white-space:nowrap;transition:color .18s,gap .18s; } .link-more:hover{color:var(--ember-warm)} /* Homepage service summary: four linked cards, detail lives on services.html */ .svc-row{ display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--gap);margin-top:clamp(24px,3vw,40px); } .svc-card{ display:flex;flex-direction:column; background:linear-gradient(172deg,var(--grade-mid),var(--grade-deep) 64%); border:1px solid var(--line);border-radius:var(--r); padding:clamp(20px,2.3vw,28px);position:relative;overflow:hidden; transition:border-color .25s,transform .25s; } .svc-card:hover{border-color:var(--line2);transform:translateY(-3px)} .svc-card--flag{background:linear-gradient(158deg,#1C1109,var(--grade-deep) 58%)} .svc-card--flag .svc__num{color:var(--accent-text)} .svc-card h3{font-size:var(--t-h3);margin:10px 0 8px} .svc-card p{color:var(--ink2);font-size:var(--t-small);line-height:1.55;flex:1} .svc-card__go{ margin-top:16px;font:600 var(--t-micro) var(--mono); letter-spacing:.1em;color:var(--brass);text-transform:uppercase; } .svc-card:hover .svc-card__go{color:var(--accent-text)} @media (max-width:1040px){.svc-row{grid-template-columns:repeat(2,minmax(0,1fr))}} @media (max-width:600px){.svc-row{grid-template-columns:1fr}} /* Services page ---------------------------------------------------------- */ .svc-jump{display:flex;gap:10px;flex-wrap:wrap;margin-top:clamp(20px,2.4vw,30px)} .svc-jump a{ display:inline-flex;align-items:center;min-height:44px;padding:10px 18px; border:1px solid var(--line2);border-radius:999px; font:600 var(--t-small) var(--body);color:var(--ink2); transition:border-color .2s,color .2s,transform .2s; } .svc-jump a:hover{border-color:var(--brass);color:var(--ink);transform:translateY(-2px)} .svc-detail{ display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr); gap:clamp(24px,4vw,64px);align-items:start; } .svc-detail__head h2{font-size:clamp(26px,3.4vw,40px);margin:10px 0 14px} .svc-detail__body .lead{ font-size:var(--t-lede);color:var(--ink);line-height:1.55; padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--line); } .svc-detail__body ul{list-style:none;display:grid;gap:13px} .svc-detail__body li{ font-size:var(--t-small);color:var(--ink2);line-height:1.6; padding-left:22px;position:relative; } .svc-detail__body li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;background:var(--brass)} .svc-detail__body li b{color:var(--ink);font-weight:600} .svc-detail__body .link-more{margin-top:18px} @media (max-width:880px){.svc-detail{grid-template-columns:1fr;gap:20px}} /* Contact page ----------------------------------------------------------- */ .side__note{ margin-top:20px;padding-top:18px;border-top:1px solid var(--line); font-size:var(--t-small);color:var(--ink3);line-height:1.55; } .frm h2,.side h2{font-size:var(--t-h3);margin-bottom:6px} /* Page hero accent, shared by the inner pages */ .pagehero h1 em{font-style:normal;color:var(--ember)} /* Footer nav ------------------------------------------------------------- */ .foot__links{display:flex;gap:clamp(12px,1.8vw,24px);flex-wrap:wrap} .foot__links a{ display:inline-flex;align-items:center;min-height:44px; font:400 var(--t-small) var(--mono);color:var(--ink3);transition:color .18s; } .foot__links a:hover{color:var(--ink)} @media (max-width:760px){ .foot{justify-content:flex-start;gap:10px} .foot__links{order:3;width:100%} } /* ========================================================================== 23. Services page: background frame + rotating reel strip ========================================================================== */ /* Hero background: a real frame from our own edit timeline, not stock. Sits behind the copy at low opacity with a fade into the page colour. */ .pagehero--bg{position:relative;overflow:hidden;isolation:isolate} .pagehero--bg::before{ content:"";position:absolute;inset:0;z-index:-2; background:url("videos/posters/bg-edit.jpg") center 38%/cover no-repeat; opacity:.26;filter:saturate(.85) contrast(1.05); } .pagehero--bg::after{ content:"";position:absolute;inset:0;z-index:-1; background: linear-gradient(90deg,var(--void) 8%,rgba(19,18,17,.72) 48%,rgba(19,18,17,.42)), linear-gradient(180deg,rgba(19,18,17,.9),transparent 34%,var(--void)); } @media (max-width:760px){ .pagehero--bg::before{opacity:.18} .pagehero--bg::after{background:linear-gradient(180deg,rgba(19,18,17,.86),rgba(19,18,17,.72) 40%,var(--void))} } /* Coverflow reel --------------------------------------------------------- Three cards on a shallow 3D arc: the centre one faces you, the flanking two turn inward. Drag, arrow-key or click a side card to rotate the deck. Only the active card plays, and it plays the small silent loop, not the full clip. ------------------------------------------------------------------------ */ .rot{--cw:58;margin-top:clamp(24px,3vw,40px)} /* --cw = card width in % */ .hero .rot{--cw:72;margin-top:0} /* narrower column, bigger centre card */ /* The static first frame index.html ships: the same size and place as the active card, plus the control bar's height below it, so swapping in the deck moves nothing. The stage's own ratio is derived from the card width, so a card-width image is exactly the stage's height. */ .rot__first{ display:block;width:calc(var(--cw) * 1%);height:auto;aspect-ratio:16/9;max-height:62vh; margin:0 auto calc(44px + clamp(16px,2vw,26px));object-fit:cover; border:1px solid rgba(200,84,42,.5);border-radius:var(--r);background:var(--grade-mid); } .cover__stage{ position:relative; /* Card is 58% of the stage at 16:9, so the stage's own ratio is 1 / (0.58 * 9/16) = 3.065. Deriving it means no dead space at any width. */ aspect-ratio:calc(1600 / (9 * var(--cw))); max-height:62vh; perspective:1500px; perspective-origin:50% 45%; touch-action:pan-y; cursor:grab; } .cover__stage.is-dragging{cursor:grabbing} .cover__stage:focus-visible{outline:2px solid var(--brass-lift);outline-offset:6px;border-radius:var(--r)} .rot__item{ position:absolute;top:0;left:50%; width:calc(var(--cw) * 1%);aspect-ratio:16/9; margin-left:calc(var(--cw) * -0.5%); border-radius:var(--r);overflow:hidden; border:1px solid var(--line);background:var(--grade-mid); padding:0;text-align:left;cursor:pointer; transform-style:preserve-3d;backface-visibility:hidden; /* JS supplies these per card */ transform:translate3d(var(--x,0),0,var(--z,0)) rotateY(var(--ry,0deg)) scale(var(--s,1)); opacity:var(--o,1); z-index:var(--zi,1); transition:transform .62s cubic-bezier(.22,1,.36,1), opacity .5s ease, border-color .35s; will-change:transform; } .rot__item.is-active{border-color:rgba(200,84,42,.5)} .rot__item:not(.is-active){filter:saturate(.6)} .rot__item:not(.is-active):hover{filter:saturate(.9)} .rot__media{position:absolute;inset:0} .rot__media img,.rot__media video{width:100%;height:100%;object-fit:cover;display:block} .rot__media video{position:absolute;inset:0;opacity:0;transition:opacity .5s} .rot__item.is-playing .rot__media video{opacity:1} .rot__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(19,18,17,.05) 42%,rgba(19,18,17,.9))} /* Halftone screen. The house image direction is "halftone, ash, one warm line". */ .rot__media::after,.feature__card::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:1; background-image:radial-gradient(circle at 1px 1px,var(--halftone-dot) 1px,transparent 1.6px); background-size:5px 5px; } .rot__meta{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;opacity:0;transition:opacity .45s} .rot__item.is-active .rot__meta{opacity:1} .rot__title{ display:block;font:600 clamp(13px,1.05vw,15.5px) var(--body); letter-spacing:-.005em;color:var(--on-media); } .rot__tag{display:block;margin-top:3px;font:400 var(--t-micro) var(--mono);letter-spacing:.08em;color:var(--on-media-2)} .rot__play{ position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:52px;height:52px;border-radius:50%;display:grid;place-items:center;z-index:3; background:rgba(19,18,17,.6);border:1px solid rgba(232,227,218,.28);backdrop-filter:blur(5px); opacity:0;transition:opacity .35s,background .2s,border-color .2s; } .rot__item.is-active .rot__play{opacity:1} .rot__item.is-active:hover .rot__play{background:var(--ember);border-color:var(--ember)} .rot__item.is-active:hover .rot__play svg path{fill:var(--on-ember)} /* controls */ .cover__bar{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:clamp(16px,2vw,26px)} .cover__btn{ width:44px;height:44px;flex:0 0 44px;display:grid;place-items:center; border:1px solid var(--line2);border-radius:50%;background:none;color:var(--ink2); cursor:pointer;transition:border-color .2s,color .2s,transform .2s; } .cover__btn:hover{border-color:var(--ember);color:var(--ink);transform:translateY(-1px)} .cover__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .cover__btn--pause{margin-left:8px;width:36px;height:36px;flex-basis:36px} .cover__btn--pause svg{width:13px;height:13px} .cover__btn--pause[aria-pressed="true"]{border-color:var(--ember);color:var(--ember)} .cover__dots{display:flex;gap:8px} /* The bar people see stays 4px, but the button itself is 24px tall so it meets the minimum target size. The rule is drawn with ::before. */ .cover__dot{ width:30px;height:24px;border:0;padding:0;cursor:pointer; background:none;position:relative;transition:width .3s; } .cover__dot::before{ content:"";position:absolute;left:0;right:0;top:50%;translate:0 -50%; height:4px;border-radius:99px;background:var(--line2);transition:background .3s; } .cover__dot.is-on{width:44px} .cover__dot.is-on::before{background:var(--ember)} /* Phones: 3D coverflow is unreadable at this width. Flatten to a snap row. */ @media (max-width:700px){ .cover__stage{ aspect-ratio:auto;max-height:none;perspective:none;display:flex;gap:var(--gap); overflow-x:auto;scroll-snap-type:x mandatory; padding-bottom:6px;-webkit-overflow-scrolling:touch; } /* the stage padding is the peek; the card fills the content width, so the snapped card always sits centred with equal slivers of its neighbours. touch-action returns to the browser here: pan-y belongs to the 3D deck's drag handler, and it was blocking the native horizontal swipe */ .cover__stage{padding-inline:8%;scroll-padding-inline:8%;touch-action:auto} .rot__item{ position:relative;top:auto;left:auto;margin-left:0; flex:0 0 100%;width:100%;scroll-snap-align:center; transform:none;opacity:1;filter:none; } .rot__item:not(.is-active){filter:none} .rot__meta{opacity:1} .rot__play{top:12px;right:12px;left:auto;bottom:auto;transform:none} .cover__bar{display:none} .rot__first{width:100%;max-height:none;margin:0 0 6px} } /* Motion off: no autoplay, no rotation, everything readable and equal. */ @media (prefers-reduced-motion:reduce){ .cover__stage{ aspect-ratio:auto;max-height:none;perspective:none;display:flex;gap:var(--gap); overflow-x:auto;scroll-snap-type:x mandatory; } .cover__stage{padding-inline:19%;scroll-padding-inline:19%;touch-action:auto} .rot__item{ position:relative;top:auto;left:auto;margin-left:0; flex:0 0 100%;width:100%;scroll-snap-align:center; transform:none;opacity:1;filter:none;transition:none; } .rot__meta,.rot__play{opacity:1} .rot__first{width:100%;max-height:none;margin:0 0 6px} } /* Shopify stores our Shopify lead has worked on: names, not logos */ .stores{margin-top:clamp(26px,3vw,40px);padding-top:clamp(22px,2.6vw,32px);border-top:1px solid var(--line)} .stores__intro{color:var(--ink2);font-size:var(--t-body);line-height:1.6;max-width:40em;margin:0 0 6px} @media (min-width:900px){footer .socials{margin-right:76px}} /* the WhatsApp button sits over the corner */ .stores__grp{margin-top:20px} .stores__label{font:500 var(--t-micro) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0 0 10px} .stores__label span{color:var(--brass);margin-left:6px} .stores__list,.svc-detail__body .stores__list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px} .svc-detail__body .stores__list li{padding:0;font-size:inherit;line-height:inherit} .svc-detail__body .stores__list li::before{display:none} .stores__list a{ display:inline-flex;flex-direction:column;gap:2px;padding:9px 13px; border:1px solid var(--line2);border-radius:10px;color:var(--ink);text-decoration:none; font:600 var(--t-small) var(--body);transition:border-color .2s,transform .2s; } .stores__list a small{font:400 11.5px var(--mono);color:var(--ink3);letter-spacing:.02em} .stores__list a:hover{border-color:var(--ember);transform:translateY(-1px)} /* ========================================================================== 24. Themes: dark is the default identity, light is the alternative ========================================================================== */ /* Extra tokens the two themes need to swap. Anything that sits OVER video or photography keeps a dark scrim in both themes, because the text on top of it is always light. */ :root{ /* Theme-support tokens. Kept separate from the palette above so the house colours read as one block. */ --void-rgb: 19 18 17; --accent-text: var(--ember-warm); /* 5.24:1 on ash; house ember is 4.24 and fails at body size */ --glass: rgb(19 18 17 / .78); /* sticky nav */ --tint-warm: #241A13; /* warm panel base (flagship card, hot plan, CTA) */ --tint-warm-2: #2A1D14; --grain-dot: rgba(216,210,200,.022); --halftone-dot: rgba(216,210,200,.075); /* dusk scene: distant ridges lighter than near ones, which is how depth reads on a dark ground */ --sky-top: #131211; --sky-low: #2B2624; --ridge-far: #322D2A; --ridge-mid: #242120; --ridge-near: #191716; --glow-ember: rgba(200,84,42,.15); --glow-teal: rgba(154,133,86,.11); --shadow-card: none; /* Text that sits ON video or photography always stays light, in BOTH themes. The scrim underneath it is dark either way. */ --on-media: #E8E3DA; --on-media-2: #BBB2A5; } :root[data-theme="light"]{ /* The house palette inverted: ash on bone paper, not a generic light mode. Brass and ember darken so they still clear AA against a light ground. */ --void: #E7E1D6; --grade-deep: #DCD5C8; --grade-mid: #F2EDE4; --grade-hi: #F7F3EB; --void-rgb: 231 225 214; --brass: #68572B; /* 4.82:1 on the deep panel, 5.40:1 on bone paper */ --brass-lift: #54461F; --brass-dim: rgba(110,92,47,.12); --ember: #C8542A; --ember-warm: #B84A22; --ember-dim: rgba(200,84,42,.13); --ember-fill: #AD441E; /* 4.97:1 with paper text, same hue */ --on-ember: #F2EDE4; --accent-text:#993813; /* 5.51:1: ember darkened for use as TEXT */ --ink: #131211; /* 14.38:1 */ --ink2: #3D372F; /* 9.04:1 */ --ink3: #454038; /* 7.04 on the deep panel, 7.90 on bone */ --line: rgba(110,92,47,.20); --line2: rgba(110,92,47,.34); --glass: rgb(231 225 214 / .84); --tint-warm: #F0E7DA; --tint-warm-2: #F5EDE3; --grain-dot: rgba(19,18,17,.030); --halftone-dot: rgba(19,18,17,.055); --sky-top: #E7E1D6; --sky-low: #D6CDBD; --ridge-far: #CDC3B0; --ridge-mid: #BFB49F; --ridge-near: #ADA08A; --glow-ember: rgba(200,84,42,.10); --glow-teal: rgba(110,92,47,.08); --shadow-card: 0 1px 2px rgba(19,18,17,.05), 0 8px 24px rgba(19,18,17,.07); } /* Accent text uses the theme-aware token so it stays legible on both grounds */ .hero h1 em,.pagehero h1 em,.link-more, .svc-card--flag .svc__num,.svc-card:hover .svc-card__go{color:var(--accent-text)} .stat__fig .stat__suffix{color:var(--accent-text)} .t__stars,.score__stars{color:var(--accent-text)} .marquee__track b{color:var(--accent-text)} .clip:nth-child(2) .clip__tc{color:var(--accent-text)} .nav{background:var(--glass)} .hero::before{ background: radial-gradient(46% 48% at 78% 14%, var(--glow-ember), transparent 64%), radial-gradient(42% 46% at 12% 4%, var(--glow-teal), transparent 62%); } .svc-card--flag{background:linear-gradient(158deg,var(--tint-warm),var(--grade-deep) 58%)} .plan--hot{background:linear-gradient(168deg,var(--tint-warm),var(--grade-mid) 62%)} .cta{background:linear-gradient(140deg,var(--tint-warm-2),var(--grade-deep) 56%)} .side{background:linear-gradient(168deg,var(--grade-hi),var(--grade-deep) 62%)} /* Cards get a real shadow on light, where borders alone read as flat */ :root[data-theme="light"] .svc-card, :root[data-theme="light"] .plan, :root[data-theme="light"] .t, :root[data-theme="light"] .tm, :root[data-theme="light"] .frm, :root[data-theme="light"] .side, :root[data-theme="light"] .faq details, :root[data-theme="light"] .clip, :root[data-theme="light"] .chip{box-shadow:var(--shadow-card)} /* The marquee and stat rules sit on the deep band in both themes */ :root[data-theme="light"] .stat{background:var(--grade-mid)} :root[data-theme="light"] .stats{background:var(--line)} /* Light mode: the timeline photo is dark, so it needs a light scrim not a dark one */ :root[data-theme="light"] .pagehero--bg::before{opacity:.30;filter:saturate(.7) contrast(.95)} :root[data-theme="light"] .pagehero--bg::after{ background: linear-gradient(95deg, var(--void) 0%, rgb(var(--void-rgb) / .96) 32%, rgb(var(--void-rgb) / .70) 60%, rgb(var(--void-rgb) / .52) 100%), linear-gradient(180deg, rgb(var(--void-rgb) / .55), transparent 30%, var(--void)); } /* ---------- theme toggle ---------- */ .themebtn{ width:44px;height:44px;flex:0 0 44px; display:grid;place-items:center; background:none;border:1px solid var(--line2);border-radius:12px; color:var(--ink2);cursor:pointer; transition:border-color .2s,color .2s,transform .2s; } .themebtn:hover{border-color:var(--ink2);color:var(--ink);transform:translateY(-1px)} .themebtn svg{width:19px;height:19px;grid-area:1/1;fill:none;stroke:currentColor} .themebtn__sun{display:none} :root[data-theme="light"] .themebtn__sun{display:block} :root[data-theme="light"] .themebtn__moon{display:none} @media (max-width:900px){ .themebtn{margin-left:auto} .burger{margin-left:0} } /* ========================================================================== 25. Services hero background: actually visible now Previously the image sat at .26 opacity under two dark gradients, which let only 0-15% of it through. The scrim is now strong only behind the text column, so the frame reads on the right where nothing sits on top of it. ========================================================================== */ .pagehero--bg::before{opacity:.62} .pagehero--bg::after{ background: linear-gradient(95deg, var(--void) 0%, rgb(var(--void-rgb) / .94) 34%, rgb(var(--void-rgb) / .58) 62%, rgb(var(--void-rgb) / .34) 100%), linear-gradient(180deg, rgb(var(--void-rgb) / .75), transparent 26%, var(--void)); } .pagehero--bg h1,.pagehero--bg .prose{max-width:9.9em} .pagehero--bg .prose{max-width:26.4em} @media (max-width:860px){ .pagehero--bg::before{opacity:.34} .pagehero--bg::after{ background:linear-gradient(180deg, rgb(var(--void-rgb) / .88), rgb(var(--void-rgb) / .82) 45%, var(--void)); } .pagehero--bg h1,.pagehero--bg .prose{max-width:none} } /* ---------- service card graphics ---------- */ .svc-card__ic{ width:44px;height:44px;display:grid;place-items:center; border:1px solid var(--line2);border-radius:12px; background:var(--brass-dim);color:var(--brass); margin-bottom:14px;transition:color .25s,border-color .25s,background .25s; } .svc-card__ic svg{width:24px;height:24px} .svc-card--flag .svc-card__ic{background:var(--ember-dim);color:var(--accent-text);border-color:rgba(200,84,42,.32)} .svc-card:hover .svc-card__ic{color:var(--accent-text);border-color:rgba(200,84,42,.4)} /* ---------- work grid -------------------------------------------------- The browsable index under the featured piece. Cards share one 16:9 well whatever the source ratio, so the grid keeps a straight baseline; the true format is stated on the badge rather than implied by the crop. */ .wgrid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr)); gap:clamp(16px,2vw,26px);margin-top:clamp(30px,4vw,52px); } .wcard{ display:flex;flex-direction:column;text-align:left;padding:0;cursor:pointer; background:var(--grade-mid);border:1px solid var(--line); border-radius:var(--r-lg);overflow:hidden; transition:border-color .25s,transform .25s; } .wcard:hover{border-color:var(--ember);transform:translateY(-3px)} /* The image is taken out of flow so a 9:16 poster can never define the well's height and stretch its whole grid row. Same trick as .rot__media. */ .wcard__media{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:var(--grade-hi)} .wcard__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .wcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(19,18,17,.5))} .wcard__ratio{ position:absolute;top:10px;left:10px;z-index:2; font:500 var(--t-micro) var(--mono);letter-spacing:.1em; color:var(--on-media-2);background:rgba(19,18,17,.6); border:1px solid rgba(232,227,218,.2);border-radius:999px;padding:3px 9px; } .wcard__media .play-btn{ position:absolute;right:12px;bottom:12px;z-index:2; opacity:0;transition:opacity .25s,background .25s,border-color .25s; } .wcard:hover .play-btn,.wcard:focus-visible .play-btn{opacity:1} .wcard:hover .play-btn{background:var(--ember);border-color:var(--ember)} .wcard:hover .play-btn svg path{fill:var(--on-ember)} .wcard__body{display:flex;flex-direction:column;gap:6px;padding:clamp(14px,1.6vw,18px)} .wcard__top{display:flex;align-items:baseline;justify-content:space-between;gap:10px} .wcard__client{ font:500 var(--t-micro) var(--mono);letter-spacing:.16em; text-transform:uppercase;color:var(--brass); } .wcard__dur{font:400 var(--t-micro) var(--mono);letter-spacing:.08em;color:var(--ink3);font-feature-settings:'tnum' 1} .wcard__title{font:600 clamp(16px,1.5vw,19px)/1.25 var(--body);letter-spacing:-.01em;color:var(--ink)} .wcard__tag{font-size:var(--t-small);line-height:1.5;color:var(--ink2)} /* ---------- specialist work ---------------------------------------------- Deliberately not a fourth plan card. The three cards above carry numbers; this block carries a reason instead, so it is built from a different material: no card border on the items, a rule between them, and the whole thing set on the raised panel to separate it from the priced grid. */ .spec{ display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr); gap:clamp(24px,4vw,64px);align-items:start; margin-top:clamp(34px,4.5vw,58px); padding:clamp(26px,3.4vw,44px); background:var(--grade-mid);border:1px solid var(--line); border-radius:var(--r-lg); } .spec__eyebrow{ font:500 var(--t-micro) var(--mono);letter-spacing:.22em; text-transform:uppercase;color:var(--brass);margin-bottom:12px; } .spec__lead{ font:400 clamp(21px,2.4vw,31px)/1.18 var(--disp); letter-spacing:-.015em;color:var(--ink); } .spec__body{ margin-top:14px;font-size:var(--t-small);line-height:1.62;color:var(--ink2); max-width:26.4em; } .spec__cta{margin-top:clamp(20px,2.4vw,28px)} .spec__list{list-style:none;display:grid;gap:0} .spec__item{ display:grid;gap:5px;padding:clamp(14px,1.7vw,19px) 0; border-top:1px solid var(--line); } .spec__item:first-child{border-top:0;padding-top:0} .spec__item:last-child{padding-bottom:0} .spec__item b{ font:600 clamp(15px,1.35vw,17px) var(--body);letter-spacing:-.005em;color:var(--ink); } .spec__item span{font-size:var(--t-small);line-height:1.55;color:var(--ink3)} @media (max-width:860px){ .spec{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vw,30px)} } /* Video Editing carries two of these links now. .link-more is nowrap so a long label cannot break, which forces a horizontal scroll on a 320px screen. Let them wrap as a pair, and let the text itself break when the viewport is genuinely narrow. */ .svc-detail__body .link-more + .link-more{margin-left:clamp(14px,2vw,26px)} @media (max-width:600px){ .svc-detail__body .link-more{white-space:normal;min-height:0;padding:11px 0} .svc-detail__body .link-more + .link-more{margin-left:0;margin-top:0;display:flex} } /* The email address is one long unbreakable token. At the larger body size it stopped fitting a 320px screen and pushed the page sideways. Let it break, and let the flex item shrink below its content width. */ .side__row{min-width:0} .side__row a{min-width:0;overflow-wrap:anywhere} .side__row span{min-width:0;overflow-wrap:anywhere} /* ========================================================================== 25. Late overrides: these must follow every rule they replace ========================================================================== */ /* Mono is for labels. The footer, the chips and the price suffix read as terminal UI when set in it. */ .foot,.foot__links a{font:400 var(--t-small) var(--body)} .plan__amt small{font:400 var(--t-small) var(--body);letter-spacing:0} .svc-card__go{font:600 var(--t-small) var(--body);letter-spacing:0;text-transform:none} .t__orig{text-transform:none;letter-spacing:.02em;font-family:var(--body);font-weight:500} /* The ember phrase is a device for the home hero, not a tic for every page */ .pagehero h1 em{color:inherit} /* .side__row a sets inline-flex for the text links; the icon buttons in the same row must keep their grid centring or the glyph hugs the left edge */ .side__row .soc{display:grid;place-items:center;gap:0} /* ---------- reviews explorer ---------- Names on the left, the chosen review on the right with its screenshot. Featured first, then the rest. Until someone presses a name the featured ones take turns; the ember hairline under the lit tile is the timer. */ .rx{display:grid;grid-template-columns:minmax(250px,34%) minmax(0,1fr);gap:clamp(16px,2.4vw,34px);margin-top:clamp(28px,3.4vw,46px);align-items:start;position:relative} /* visible only while the featured reviews are taking turns */ .rx__pause{ display:none;position:absolute;right:0;top:-38px; font:500 var(--t-micro) var(--mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink2);background:none;border:1px solid var(--line2);border-radius:99px;padding:8px 13px;cursor:pointer; transition:border-color .2s,color .2s; } .rx--auto .rx__pause{display:inline-flex} .rx__pause:hover{border-color:var(--ember);color:var(--ink)} .rx__pause:focus-visible{outline:2px solid var(--brass-lift);outline-offset:2px} .rx__list{ position:relative;display:grid;gap:6px;align-content:start; max-height:min(560px,72vh);overflow:auto;padding:4px 6px 48px 2px; scrollbar-width:thin;overscroll-behavior:contain; -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(180deg,#000 calc(100% - 48px),transparent); } .rx__tile{ display:grid;grid-template-columns:38px minmax(0,1fr) auto;align-items:center;gap:12px;width:100%;text-align:left; padding:10px 12px;border:1px solid transparent;border-radius:12px;background:none;color:var(--ink2);cursor:pointer; font:inherit;position:relative;overflow:hidden;transition:background .2s,border-color .2s,color .2s; } .rx__tile:hover{background:var(--grade-mid);color:var(--ink)} .rx__tile[aria-selected="true"]{background:var(--grade-mid);border-color:var(--line2);color:var(--ink)} .rx__tile:focus-visible{outline:2px solid var(--brass-lift);outline-offset:2px} .rx__meta{display:grid;min-width:0} .rx__meta b{font:600 var(--t-small) var(--body);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rx__meta span{font:400 var(--t-micro) var(--mono);color:var(--ink3);letter-spacing:.06em} .rx__stars{font-size:12px;letter-spacing:.08em;color:var(--accent-text)} .rx__av{ width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex:0 0 auto; font:600 14px var(--body);background:var(--brass-dim);color:var(--brass-lift);border:1px solid rgba(154,133,86,.3); } .rx__av--e{background:var(--ember-dim);color:var(--accent-text);border-color:rgba(200,84,42,.3)} .rx__av--i{background:var(--grade-hi);color:var(--ink);border-color:var(--line2)} .rx__av--lg{width:44px;height:44px;font-size:16px} .rx--auto .rx__tile[aria-selected="true"]::after{ content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--ember); transform-origin:left;animation:rx-tick 6.5s linear forwards; } @keyframes rx-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}} .rx__panel{ position:sticky;top:88px;background:var(--grade-mid);border:1px solid var(--line);border-radius:var(--r-lg); padding:clamp(22px,2.8vw,38px);min-height:320px;transition:opacity .16s; } .rx__panel.is-out{opacity:0} .rx__panel:focus-visible{outline:2px solid var(--brass-lift);outline-offset:3px} .rx__pstars{display:block;color:var(--accent-text);font-size:17px;letter-spacing:.14em;margin-bottom:14px} .rx__q{margin:0;font:400 clamp(18px,1.7vw,24px)/1.5 var(--disp);color:var(--ink);letter-spacing:-.01em;text-wrap:pretty} .rx__who{display:flex;align-items:center;gap:12px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)} .rx__who b{display:block;font:600 15px var(--body);color:var(--ink)} .rx__who>span>span{display:block;font:400 var(--t-micro) var(--mono);color:var(--ink2);letter-spacing:.08em} .rx__proof{margin:20px 0 0;display:grid;gap:8px} .rx__proof img{display:block;width:100%;max-width:460px;height:auto;border-radius:8px;border:1px solid var(--line);cursor:zoom-in} .rx__proof figcaption{font:400 var(--t-micro) var(--mono);letter-spacing:.06em;color:var(--ink3);display:flex;gap:10px;flex-wrap:wrap;align-items:center} .rx__proof button{font:inherit;color:var(--ink2);background:none;border:1px solid var(--line2);border-radius:99px;padding:5px 10px;cursor:zoom-in;text-transform:uppercase;transition:border-color .2s,color .2s} .rx__proof button:hover{border-color:var(--ember);color:var(--ink)} .rx__note{grid-column:1/-1;margin:4px 0 0;font-size:var(--t-small);color:var(--ink3)} .rx__note a{color:var(--ink2)} @media (max-width:860px){ .rx{grid-template-columns:1fr;gap:14px} .rx__list{ max-height:none;overflow-x:auto;overflow-y:hidden;display:flex;gap:8px;padding:4px 40px 10px 2px; overscroll-behavior-x:contain;overscroll-behavior-y:auto;touch-action:pan-x pan-y; scroll-snap-type:x mandatory;scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 36px),transparent); } .rx__list::-webkit-scrollbar{display:none} .rx__tile{flex:0 0 auto;width:auto;grid-template-columns:30px auto;grid-template-rows:auto auto;gap:1px 10px;scroll-snap-align:start;border-color:var(--line);padding:8px 14px 8px 8px} .rx__av{width:30px;height:30px;font-size:12px;grid-row:1/3} .rx__meta span{display:none} .rx__stars{grid-column:2;font-size:11px} .rx__panel{position:static;min-height:0} .rx__pause{position:static;justify-self:end;margin:0} } /* ---------- step tiles in the bay ---------- The title is the button; the brief folds out under the lit step. */ .bay__btn{ display:block;width:100%;text-align:left;background:none;border:0;padding:0 26px 0 0;margin:0; color:inherit;font:inherit;cursor:pointer;position:relative; } .bay__btn .clip__name{margin-bottom:0} .bay__btn .clip__tc{color:var(--brass-lift)} .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .bay__btn::after{ content:"";position:absolute;right:4px;top:50%;width:8px;height:8px; border-right:1.5px solid var(--brass);border-bottom:1.5px solid var(--brass); transform:translateY(-70%) rotate(-45deg);transition:transform .3s,border-color .3s; } .bay__steps li.is-on .bay__btn::after{transform:translateY(-30%) rotate(45deg);border-color:var(--accent-text)} .bay__btn:focus-visible{outline:2px solid var(--brass-lift);outline-offset:6px;border-radius:6px} .bay__more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)} .bay__more>p{overflow:hidden;min-height:0;padding-top:0;transition:padding-top .45s} .bay__steps li.is-on .bay__more{grid-template-rows:1fr} .bay__steps li.is-on .bay__more>p{padding-top:8px} html:not(.js) .bay__more{grid-template-rows:1fr} html:not(.js) .bay__more>p{padding-top:8px} /* ---------- a real clip behind a home service card, on hover ---------- */ .svc-card>*{position:relative;z-index:1} .svc-card__vid,.svc-card__scrim{position:absolute;inset:0;z-index:0;opacity:0;transition:opacity .5s;pointer-events:none} .svc-card__vid{width:100%;height:100%;object-fit:cover;filter:saturate(.8)} .svc-card__scrim{background:linear-gradient(180deg,rgb(var(--void-rgb) / .25),rgb(var(--void-rgb) / .9) 72%)} .svc-card:hover .svc-card__vid,.svc-card:focus-visible .svc-card__vid{opacity:.34} .svc-card:hover .svc-card__scrim,.svc-card:focus-visible .svc-card__scrim{opacity:1} /* ---------- "From the work" strips on the services page ---------- */ .proof{margin-top:22px;display:grid;gap:10px} .proof__k{margin:0;font:500 var(--t-micro) var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass)} .proof__row{display:flex;gap:12px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;scrollbar-width:thin;align-items:flex-start} .proof__card{ flex:0 0 auto;width:236px;display:grid;gap:8px;background:none;border:0;padding:0;margin:0; text-align:left;color:inherit;font:inherit;cursor:pointer;scroll-snap-align:start;border-radius:10px;position:relative; } .proof__card--tall{width:150px} .proof__media{position:relative;display:block;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:var(--grade-deep);border:1px solid var(--line);transition:border-color .2s} .proof__card--tall .proof__media{aspect-ratio:9/16;width:96px} .proof__media picture,.proof__media img,.proof__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block} .proof__vid{opacity:0;transition:opacity .4s} .proof__vid.is-on{opacity:1} .proof__media .play-btn{width:34px;height:34px;transform:translate(-50%,-50%)} .proof__media .play-btn svg{width:14px;height:14px} .proof__dur{position:absolute;right:8px;bottom:8px;font:500 11px var(--mono);letter-spacing:.06em;color:var(--on-media);background:rgba(19,18,17,.6);padding:2px 6px;border-radius:4px} .proof__t{display:grid;gap:2px} .proof__t b{font:600 var(--t-small) var(--body);color:var(--ink);line-height:1.3} .proof__t span{font:400 var(--t-micro) var(--mono);color:var(--ink3);letter-spacing:.06em} .proof__card:hover .proof__media{border-color:var(--line2)} .proof__card:focus-visible{outline:2px solid var(--brass-lift);outline-offset:3px} /* light theme: the loops print onto the cream like ink instead of fading into it */ :root[data-theme="light"] .svc-card__vid{mix-blend-mode:multiply;filter:saturate(.7) contrast(1.05)} :root[data-theme="light"] .svc-card:hover .svc-card__vid,:root[data-theme="light"] .svc-card:focus-visible .svc-card__vid{opacity:.55} :root[data-theme="light"] .svc-card__scrim{background:linear-gradient(180deg,rgba(231,225,214,.15),rgba(231,225,214,.8) 72%)} /* ---------- the desk behind the chat and the export queue ---------- Outside the edit stage the screen used to be a bare panel. Now the phone on the desk sits behind the thread and the timeline behind the export queue, dimmed under a shade so the bubbles and the bars stay readable. */ .nle__amb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .6s;z-index:1;filter:saturate(.85)} .nle__amb.is-on{opacity:.62} .nle[data-stage="1"] .nle__amb{opacity:0!important} .nle__amb-shade{position:absolute;inset:0;z-index:2;opacity:0;transition:opacity .6s;pointer-events:none;background:linear-gradient(180deg,rgba(14,14,16,.2),rgba(14,14,16,.55) 55%,rgba(14,14,16,.82))} .nle:not([data-stage="1"]) .nle__amb-shade{opacity:1} .nle[data-stage="3"] .nle__amb-shade{background:linear-gradient(180deg,rgba(14,14,16,.8),rgba(14,14,16,.5) 55%,rgba(14,14,16,.25))} .bub{box-shadow:0 6px 18px -8px rgba(0,0,0,.6)} /* where a job starts: under the four steps */ .bay__cta{grid-column:2;display:flex;gap:10px;flex-wrap:wrap;margin-top:-6px} .bay__grid{grid-template-rows:1fr auto;align-content:center} .bay__grid .nle{grid-row:1/3;align-self:center} @media (max-width:880px){ .bay__cta{grid-column:1;margin-top:0} .bay__grid .nle{grid-row:auto} .bay__grid{grid-template-rows:none} } /* ---------- phone rhythm ---------- The desktop breathing room read as dead black voids between sections on a phone: a third less padding there, same order everywhere. */ @media (max-width:700px){ :root{--pad-sec:36px} .hero{padding-block:104px 34px} .sec-lead{margin-bottom:2px} }