/* Self-hosted webfonts: Space Grotesk, Instrument Sans, IBM Plex Mono. All are used under the SIL Open Font License, which permits this. These rules sit at the top of the stylesheet on purpose, so the browser makes one CSS request instead of two. The url() paths are relative to this file. Two of these faces are also preloaded from each page's ; preloading more than that delays the first paint rather than helping it. */ /* IBM Plex Mono latin-ext */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-ext-400.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Mono latin */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-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; } /* IBM Plex Mono latin-ext */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-ext-500.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Mono latin */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-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; } /* IBM Plex Mono latin-ext */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-ext-600.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* IBM Plex Mono latin */ @font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:600; font-display:swap; src:url(../assets/fonts/ibm-plex-mono-latin-600.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; } /* Instrument Sans latin-ext */ @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/instrument-sans-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Instrument Sans latin */ @font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700; font-display:swap; src:url(../assets/fonts/instrument-sans-latin.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; } /* Space Grotesk latin-ext */ @font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../assets/fonts/space-grotesk-latin-ext.woff2) format("woff2"); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Space Grotesk latin */ @font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:300 700; font-display:swap; src:url(../assets/fonts/space-grotesk-latin.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; } /* ========================================================================== Atminas Creatives. Static site stylesheet (dark 2026). Deep near-black ground, monochrome text, one accent (electric indigo). Quiet chrome, hairline rules, no glow stacks. The work is the hero. This is the only stylesheet; every page links it. ========================================================================== */ :root{ --bg:#0a0a0c; --bg-2:#0e0e11; --surface:#111114; --surface-2:#15151a; --ink:#f4f4f5; --ink-2:#a1a1aa; /* Was #71717a, which measured 4.09:1 on --bg and failed WCAG AA for the small mono labels it carries (kickers, dates, captions). Now 5.20:1. */ --ink-3:#8a8a94; --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.14); /* Three accent tokens, because one cannot satisfy both directions: --accent decoration only. Borders, the hero bloom, the cohort bar. --accent-text accent-coloured TEXT. 6.08:1 on --bg and 5.59:1 on the lightest surface (--surface-2), so it passes AA wherever it lands. Plain --accent as text was 4.60:1 on --bg but only 4.38:1 on --surface, which failed. --accent-btn surfaces with WHITE text on them. 5.15:1. White on plain --accent was 4.30:1 and failed AA at button type sizes. */ --accent:#4f6bff; --accent-text:#6d85ff; --accent-btn:#4360e8; --accent-btn-hover:#4c68ee; --accent-2:#7c8dff; --accent-soft:rgba(79,107,255,.14); --font-display:"Space Grotesk","Instrument Sans",ui-sans-serif,system-ui,sans-serif; --font-body:"Instrument Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --wrap:1128px; --gut:clamp(18px,4vw,28px); --ease:cubic-bezier(.22,1,.36,1); --r-m:14px; --head-h:76px; } /* Base */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font:400 1rem/1.7 var(--font-body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } /* Film grain over everything, the cheapest cinematic touch */ body::after{ content:""; position:fixed;inset:0;z-index:999;pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E"); opacity:.04; } img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:500;line-height:1.1;letter-spacing:-.03em} h1{font-size:clamp(2.6rem,6.2vw,4.15rem);line-height:1.02} h2{font-size:clamp(1.9rem,3.6vw,2.7rem);line-height:1.06} h3{font-size:1.2rem;font-weight:560;letter-spacing:-.02em} p{margin:0} a{color:inherit;text-decoration:none} ul,ol{margin:0;padding:0;list-style:none} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0} input,select,textarea{font:inherit} ::selection{background:rgba(79,107,255,.3)} :focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px} .wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)} .section{padding-block:clamp(68px,8.5vw,116px)} .lead{font-size:clamp(1.02rem,1.6vw,1.2rem);line-height:1.65;color:var(--ink-2)} .mono{font-family:var(--font-mono)} /* Utilities. These replace the inline style attributes that used to be scattered through the markup. They are not tidiness for its own sake: a strict Content-Security -Policy with style-src 'self' and no 'unsafe-inline' refuses to apply inline style attributes, so anything that has to vary per element has to be a class. Delays are named for their value in milliseconds so the intent stays obvious. */ .d60{--d:60ms} .d80{--d:80ms} .d120{--d:120ms} .d140{--d:140ms} .d160{--d:160ms} .d180{--d:180ms} .d200{--d:200ms} .d240{--d:240ms} .mt-14{margin-top:14px} .mt-22{margin-top:22px} .mt-24{margin-top:24px} .mt-26{margin-top:26px} .mt-30{margin-top:30px} .mt-34{margin-top:34px} .mt-sect{margin-top:clamp(24px,4vw,40px)} .mb-0{margin-bottom:0} .pt-0{padding-top:0} .pt-tight{padding-top:clamp(40px,5vw,68px)} .mw-42{max-width:42ch} .mw-440{max-width:440px} .self-end{justify-self:end} .img-top{object-position:top} .media-square{aspect-ratio:1/1;max-width:440px} .media-4-3{aspect-ratio:4/3} .p-plain{font-size:1rem;color:var(--ink-2)} /* Drops the vertical padding .tlink carries when the link sits inside a line of body copy and the padding would open up the paragraph leading. */ .tlink-flush{padding:0} .body-sm{font-size:.92rem;line-height:1.7;color:var(--ink-2)} /* Standalone eyebrow label, for headings outside the .info-list context. */ .eyebrow{ display:block; font:500 .68rem/1.6 var(--font-mono); letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); } /* Strips the label's normal casing/letter-spacing for the "(optional)" hints. */ .lbl-min{text-transform:none;letter-spacing:0} /* Utilities */ .sr-only{ position:absolute;width:1px;height:1px;margin:-1px;padding:0; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; } /* Kicker: indexed label that opens each section */ .kicker{ display:flex;align-items:center;gap:12px; font:500 .72rem/1 var(--font-mono); letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3); } .kicker .kn{color:var(--accent-text)} .kicker::after{content:"";width:34px;height:1px;background:var(--line-2)} /* Section head */ .sect-head{max-width:720px;margin-bottom:clamp(36px,5vw,60px)} .sect-head .kicker{margin-bottom:22px} .sect-head h2{margin-bottom:16px} .sect-head.split{ max-width:none; display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end; } .sect-head.split .lead{max-width:52ch} /* Buttons and links */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:10px; min-height:47px;padding:12px 26px;border-radius:999px; background:var(--accent-btn);color:#fff; font:600 .93rem/1 var(--font-body);letter-spacing:.01em; transition:background .25s var(--ease),transform .2s var(--ease); white-space:nowrap; } .btn:hover{background:var(--accent-btn-hover)} .btn:active{transform:scale(.98)} .btn .ar{transition:transform .25s var(--ease)} .btn:hover .ar{transform:translateX(3px)} .btn-ghost{ background:transparent;color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2); } .btn-ghost:hover{background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink);color:var(--ink)} .btn-light{background:var(--accent-btn);color:#fff} .btn-light:hover{background:var(--accent-btn-hover);color:#fff} .btn-ghost-light{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)} .btn-ghost-light:hover{box-shadow:inset 0 0 0 1px var(--ink-2);background:var(--surface-2)} .btn-sm{min-height:41px;padding:9px 19px;font-size:.86rem} .tlink{ display:inline-flex;align-items:center;gap:8px; font:600 .93rem/1 var(--font-body);color:var(--ink-2); padding-block:6px; transition:color .2s var(--ease); } .tlink .ar{transition:transform .25s var(--ease)} .tlink:hover{color:var(--accent-text)} .tlink:hover .ar{transform:translateX(3px)} /* Header: translucent, hairline on scroll */ .site-head{ position:sticky;top:0;z-index:60; background:rgba(10,10,12,.72); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); border-bottom:1px solid transparent; transition:border-color .3s var(--ease),box-shadow .3s var(--ease),background .3s var(--ease); } .site-head.scrolled{ border-bottom-color:var(--line); box-shadow:0 12px 32px -24px rgba(0,0,0,.8); } .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--head-h)} .brand{display:inline-flex;align-items:center;color:var(--ink)} .brand img{height:26px;width:auto;display:block} .nav{display:flex;align-items:center;gap:4px} .nav a{ position:relative;display:inline-flex;align-items:center;min-height:44px; padding:8px 13px;border-radius:6px; font:500 .9rem/1 var(--font-body);color:var(--ink-2); transition:color .2s var(--ease); } .nav a:hover{color:var(--ink)} .nav a[aria-current="page"]{color:var(--ink)} .nav a[aria-current="page"]::after{ content:"";position:absolute;left:13px;right:13px;bottom:6px;height:2px; background:var(--accent-btn);border-radius:2px; } .bar-cta{display:flex;align-items:center;gap:10px} .nav-toggle{ display:none;place-items:center; width:44px;height:44px;border-radius:8px; box-shadow:inset 0 0 0 1px var(--line-2); color:var(--ink); } .nav-toggle:hover{box-shadow:inset 0 0 0 1px var(--ink-2)} .nav-toggle svg{width:18px;height:18px} .nav-toggle .ic-x{display:none} .nav-open .nav-toggle .ic-x{display:block} .nav-open .nav-toggle .ic-menu{display:none} .mnav{ display:none; position:absolute;inset:var(--head-h) 0 auto 0; background:rgba(10,10,12,.96); border-bottom:1px solid var(--line); padding:10px var(--gut) 28px; } .nav-open .mnav{display:block} .mnav a{ display:flex;align-items:center;justify-content:space-between; min-height:52px;padding:6px 2px; border-bottom:1px solid var(--line); font-family:var(--font-display);font-size:1.35rem;font-weight:520;color:var(--ink); } .mnav a .mono{font:500 .7rem/1 var(--font-mono);color:var(--ink-3);letter-spacing:.12em} .mnav .mnav-cta{display:grid;gap:10px;margin-top:18px} .mnav .mnav-meta{margin-top:18px;font:500 .74rem/1.6 var(--font-mono);color:var(--ink-3)} /* Page head (inner pages) */ .page-head{padding:clamp(44px,6.5vw,84px) 0 clamp(34px,4.5vw,52px);border-bottom:1px solid var(--line)} .page-head .kicker{margin-bottom:20px} .page-head .grid{display:grid;grid-template-columns:1.35fr 1fr;gap:clamp(24px,4vw,64px);align-items:end} .page-head h1{max-width:16ch} .page-head .lead{max-width:46ch;justify-self:end} .crumbs{display:flex;gap:10px;font:500 .74rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)} .crumbs a:hover{color:var(--accent-text)} /* Hero (home) */ .hero{padding-top:clamp(52px,7.5vw,96px);position:relative;overflow:hidden;isolation:isolate} /* one soft accent bloom behind the hero, never repeated elsewhere */ .hero::before{ content:"";position:absolute;top:-180px;right:-120px;z-index:-1; width:640px;height:640px;border-radius:50%; background:radial-gradient(circle,rgba(79,107,255,.16),transparent 62%); pointer-events:none; } .hero .kicker{margin-bottom:26px} .hero h1{max-width:19ch} .hero .hero-row{display:grid;grid-template-columns:1.4fr 1fr;gap:clamp(24px,4vw,72px);align-items:end;margin-bottom:clamp(36px,5vw,56px)} .hero .hero-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .hero-note{ font:500 .74rem/1.9 var(--font-mono);color:var(--ink-3);letter-spacing:.04em; border-top:1px solid var(--line);padding-top:18px;align-self:end; } .hero-note b{color:var(--ink-2);font-weight:500} .hero-media{position:relative} .media{ position:relative;overflow:hidden;border-radius:var(--r-m); background-color:#14141a; background-size:cover,cover; background-position:center,center; border:1px solid var(--line); } .media > img{width:100%;height:100%;object-fit:cover;display:block} .media::after{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.5)); pointer-events:none; } .hero-media .media{aspect-ratio:21/9;min-height:300px} .media-cap{ display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px; padding:14px 2px 0; font:500 .72rem/1.5 var(--font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3); } /* Tools marquee */ .marquee{ overflow:hidden;border-block:1px solid var(--line); padding-block:18px;margin-top:clamp(56px,7vw,88px); } .marquee-track{display:flex;width:max-content;animation:mq 42s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-seg{display:flex;align-items:center;flex:none} .marquee-seg span{ display:inline-flex;align-items:center;gap:14px;padding-inline:22px; font:500 .8rem/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-2);white-space:nowrap; } .marquee-seg span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)} @keyframes mq{to{transform:translateX(-50%)}} /* Stats */ .stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)} .stat{padding:26px 20px 0 0} .stat + .stat{border-left:1px solid var(--line);padding-left:22px} .stat b{ display:block;font-family:var(--font-display);font-weight:540; font-size:clamp(2.1rem,4vw,3rem);line-height:1;letter-spacing:-.02em; color:var(--ink);font-variant-numeric:tabular-nums; } .stat span{ display:block;margin-top:10px; font:500 .72rem/1.5 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3); } /* Service rows (home overview and services index) */ .srows{border-top:1px solid var(--line-2)} .srow{ display:grid;grid-template-columns:72px 1.05fr 1.5fr auto;gap:clamp(14px,2.5vw,32px); align-items:baseline;padding:clamp(20px,2.6vw,30px) 4px; border-bottom:1px solid var(--line); transition:background .25s var(--ease); } .srow:hover{background:var(--surface)} .srow .sn{font:500 .78rem/1 var(--font-mono);color:var(--accent-text)} .srow h3{font-size:clamp(1.15rem,1.9vw,1.45rem);transition:color .2s var(--ease)} .srow:hover h3{color:var(--accent-2)} .srow p{font-size:.94rem;color:var(--ink-2)} .srow .tlink{justify-self:end} .srow .tlink .ar{opacity:.5} .srow:hover .tlink .ar{opacity:1} /* Service detail blocks (services page) */ .svc{display:grid;grid-template-columns:1fr 1.5fr;gap:clamp(24px,4vw,72px);padding-block:clamp(40px,5vw,64px);border-top:1px solid var(--line)} .svc:first-of-type{border-top:0;padding-top:0} .svc .svc-side{position:sticky;top:calc(var(--head-h) + 24px);align-self:start} .svc .sn{font:500 .78rem/1 var(--font-mono);color:var(--accent-text);display:block;margin-bottom:14px} .svc h2{font-size:clamp(1.6rem,2.6vw,2.1rem);margin-bottom:14px} .svc .tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px} .svc .svc-body p{color:var(--ink-2);max-width:58ch} .svc .svc-body > p + p{margin-top:14px} .list-ticks{margin-top:26px;border-top:1px solid var(--line)} .list-ticks li{ display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line); font-size:.95rem;color:var(--ink-2); } .list-ticks li::before{content:"→";color:var(--accent-text);font-weight:600;line-height:1.6} .svc-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:26px} .pill{ display:inline-flex;align-items:center;min-height:30px;padding:5px 13px; border:1px solid var(--line-2);border-radius:999px; font:500 .72rem/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-2); text-transform:uppercase; } /* Work grid */ .filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(30px,4vw,44px)} .chip{ min-height:41px;padding:9px 17px;border-radius:999px; box-shadow:inset 0 0 0 1px var(--line-2); font:500 .85rem/1 var(--font-body);color:var(--ink-2); transition:all .2s var(--ease); } .chip:hover{box-shadow:inset 0 0 0 1px var(--ink-2);color:var(--ink)} .chip[aria-pressed="true"]{background:var(--accent-btn);color:#fff;box-shadow:inset 0 0 0 1px var(--accent)} .work-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,26px)} .tile{display:flex;flex-direction:column;gap:14px} .tile.hide{display:none} .tile .media{aspect-ratio:4/3;transition:filter .35s var(--ease);filter:saturate(.9)} .tile .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .tile:hover .media img{transform:scale(1.035)} .tile:hover .media{filter:saturate(1)} @media (prefers-reduced-motion:reduce){ .tile .media{filter:none} } .tile-meta{display:grid;gap:5px;padding-inline:2px} .tile-meta .row{display:flex;justify-content:space-between;gap:12px} .tile-meta .cat{font:500 .68rem/1.6 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)} .tile-meta .yr{font:500 .68rem/1.6 var(--font-mono);letter-spacing:.1em;color:var(--ink-3)} .tile-meta h3{font-size:1.16rem} .tile-meta p{font-size:.9rem;color:var(--ink-3);line-height:1.55} .tile-type .media{ display:flex;flex-direction:column;justify-content:space-between; aspect-ratio:4/3;padding:22px; background:var(--surface-2); border:1px solid var(--line); } .tile-type .media::after{display:none} .tile-type .media .tt-top{font:500 .68rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .tile-type .media h4{ font-family:var(--font-display);font-weight:540;color:var(--ink); font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.15;letter-spacing:-.02em; } .tile-type .media .tt-sub{font:500 .74rem/1.5 var(--font-mono);color:var(--ink-3)} /* Featured case study */ .case{border-block:1px solid var(--line);padding-block:clamp(48px,6vw,80px)} .case-grid{display:grid;grid-template-columns:1fr 2fr;gap:clamp(28px,5vw,80px)} .case h3{font-size:clamp(1.6rem,2.6vw,2.15rem);margin:12px 0 16px} .case-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,40px)} .case-col{border-top:1px solid var(--line-2);padding-top:18px} .case-col b{ display:block;font:500 .7rem/1 var(--font-mono);letter-spacing:.16em; text-transform:uppercase;color:var(--accent-text);margin-bottom:12px; } .case-col p{font-size:.93rem;color:var(--ink-2)} /* Split feature (academy teaser, studio block) */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center} .split .media{aspect-ratio:4/3} /* The founder portrait opts out of the 4:3 default. This needs its own rule: the shape utilities (.media-square) are declared earlier in the file, so at equal specificity .split .media would otherwise win and squash the portrait. */ .split .media.media-square{aspect-ratio:1/1} .split .split-body h2{margin-bottom:16px} .split .split-body .lead{margin-bottom:26px} .courselist{border-top:1px solid var(--line-2);margin-top:34px} .courselist a{ display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:baseline; padding:16px 2px;border-bottom:1px solid var(--line); transition:background .2s var(--ease); } .courselist a:hover{background:var(--surface)} .courselist .cl-n{font:500 .74rem/1 var(--font-mono);color:var(--accent-text)} .courselist .cl-t{font-family:var(--font-display);font-weight:560;font-size:1.05rem;color:var(--ink)} .courselist .cl-d{font:500 .72rem/1 var(--font-mono);letter-spacing:.06em;color:var(--ink-3);text-transform:uppercase} /* Course detail blocks (academy page) */ .course{ display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(24px,4vw,64px); background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m); padding:clamp(24px,3.5vw,40px);margin-bottom:22px; } .course.hot{border-color:var(--accent)} .course-top{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:14px} .course .sn{font:500 .78rem/1 var(--font-mono);color:var(--accent-text)} .tag{ display:inline-flex;align-items:center;min-height:26px;padding:4px 12px;border-radius:999px; background:var(--accent-btn);color:#fff; font:600 .68rem/1 var(--font-mono);letter-spacing:.1em;text-transform:uppercase; } .course h3{font-size:clamp(1.45rem,2.2vw,1.8rem);margin-bottom:14px} .course .course-desc{color:var(--ink-2);font-size:.97rem;max-width:52ch} .course .course-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px} .course .course-foot{display:flex;flex-wrap:wrap;align-items:center;gap:18px;margin-top:26px} .course .price{font:500 .8rem/1 var(--font-mono);color:var(--ink-3)} .course .price b{font-family:var(--font-display);font-weight:560;font-size:1.05rem;color:var(--ink);letter-spacing:0} .mods{border-top:1px solid var(--line)} .mods li{ display:grid;grid-template-columns:34px 1fr;gap:10px; padding:10px 0;border-bottom:1px solid var(--line);font-size:.9rem;color:var(--ink-2); } .mods .mn{font:500 .7rem/1.8 var(--font-mono);color:var(--accent-text)} /* Steps (free demo, process) */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,28px)} .step{border-top:1px solid var(--line-2);padding-top:20px} .step .st-n{font:500 .74rem/1 var(--font-mono);color:var(--accent-text);display:block;margin-bottom:12px} .step h3{font-size:1.08rem;margin-bottom:6px} .step p{font-size:.9rem;color:var(--ink-3)} .steps-4{grid-template-columns:repeat(4,1fr)} /* FAQ */ .faq-group{margin-bottom:clamp(36px,5vw,56px)} .faq-group > b{ display:block;font:500 .72rem/1 var(--font-mono);letter-spacing:.16em; text-transform:uppercase;color:var(--accent-text);margin-bottom:8px; } .faq-group > p{font-size:.95rem;color:var(--ink-3);margin-bottom:18px;max-width:52ch} .faq-item{border-top:1px solid var(--line)} .faq-item:last-child{border-bottom:1px solid var(--line)} .faq-q{ display:flex;align-items:center;justify-content:space-between;gap:18px; width:100%;min-height:60px;padding:16px 0;text-align:left; font:600 1.02rem/1.45 var(--font-body);color:var(--ink); transition:color .2s var(--ease); } .faq-q:hover{color:var(--accent-text)} .faq-ic{position:relative;flex:none;width:34px;height:34px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--line-2);transition:all .3s var(--ease)} .faq-ic::before,.faq-ic::after{ content:"";position:absolute;top:50%;left:50%; width:12px;height:1.5px;background:var(--ink-2); transform:translate(-50%,-50%); transition:transform .3s var(--ease),background .3s var(--ease); } .faq-ic::after{transform:translate(-50%,-50%) rotate(90deg)} .faq-item.open .faq-ic{background:var(--accent-btn);box-shadow:inset 0 0 0 1px var(--accent)} .faq-item.open .faq-ic::before,.faq-item.open .faq-ic::after{background:#fff} .faq-item.open .faq-ic::after{transform:translate(-50%,-50%) rotate(0deg)} .faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)} .faq-item.open .faq-a{grid-template-rows:1fr} .faq-a > div{overflow:hidden} .faq-a p{padding:0 52px 22px 0;max-width:60ch;color:var(--ink-2);font-size:.95rem} /* Forms */ .form{display:grid;gap:18px} .f-field label{ display:block;margin-bottom:8px; font:500 .7rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3); } .f-field input,.f-field select,.f-field textarea{ width:100%;min-height:48px;padding:12px 15px; background:var(--surface);border:1px solid var(--line-2);border-radius:10px; color:var(--ink);font-size:.95rem; transition:border-color .2s var(--ease),box-shadow .2s var(--ease); } .f-field textarea{min-height:120px;resize:vertical} .f-field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);background-position:calc(100% - 21px) 55%,calc(100% - 16px) 55%;background-size:5px 5px;background-repeat:no-repeat} .f-field input:focus,.f-field select:focus,.f-field textarea:focus{ outline:none;border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); } .f-field .hint{margin-top:7px;font:400 .78rem/1.5 var(--font-body);color:var(--ink-3)} .form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px} .form-foot small{font-size:.8rem;color:var(--ink-3)} /* Conditional fields (.f-field[data-show-on]) are toggled with the `hidden` attribute. State it explicitly: the UA rule is [hidden]{display:none}, but any later `display` declaration of equal specificity would beat it. No .f-field rule sets `display` today, so this stays a plain declaration. */ .form [hidden]{display:none} /* Consent row. Required checkbox gating the contact form, linking to the privacy policy. Kept out of .f-field so it does not pick up the uppercase mono label treatment the inputs use. */ .consent{display:flex;gap:11px;align-items:flex-start} .consent input{ flex:none;width:19px;height:19px;margin:2px 0 0; accent-color:var(--accent-btn);cursor:pointer; } .consent label{font-size:.85rem;line-height:1.6;color:var(--ink-2);cursor:pointer} .consent a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px} .consent a:hover{text-decoration-thickness:2px} .form-success{display:none;text-align:center;padding:clamp(32px,5vw,56px) 12px} .form.sent .form-success{display:block;animation:fadeUp .5s var(--ease)} .form.sent .form-fields{display:none} .form-success .fs-ic{ width:52px;height:52px;margin:0 auto 20px;border-radius:50%; display:grid;place-items:center;background:var(--accent-btn);color:#fff; font-size:1.2rem; } .form-success h3{font-size:1.5rem;margin-bottom:10px} .form-success p{color:var(--ink-2);max-width:44ch;margin:0 auto 22px} .form-success p a{color:var(--accent-text);text-decoration:underline;text-underline-offset:2px} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} /* Inline newsletter (footer) */ .nl{display:flex;gap:8px;margin-top:16px} .nl input{ flex:1;min-width:0;min-height:46px;padding:10px 14px; background:var(--surface);border:1px solid var(--line-2);border-radius:9px; color:var(--ink);font-size:.9rem; } .nl input::placeholder{color:var(--ink-3)} .nl input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .nl button{ flex:none;width:46px;height:46px;border-radius:9px; background:var(--accent-btn);color:#fff; display:grid;place-items:center;font-size:1rem; transition:background .2s var(--ease); } .nl button:hover{background:var(--accent-btn-hover)} .nl-done{display:none;margin-top:16px;font:500 .82rem/1.5 var(--font-mono);color:var(--accent-text)} .nl-done a{color:inherit;text-decoration:underline;text-underline-offset:2px} .nl-wrap.done .nl{display:none} .nl-wrap.done .nl-done{display:block} /* CTA band (the whole site is dark; the band is one step up) */ .band-dark{ background:var(--bg-2); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .band-dark .kicker{color:var(--ink-3)} .band-dark .kicker .kn{color:var(--accent-text)} .cta-band{padding-block:clamp(72px,9vw,120px)} .cta-band h2{max-width:17ch;margin-bottom:18px} .cta-band .lead{color:var(--ink-2);max-width:52ch} .cta-band .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px} .cta-band .cta-meta{ display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:44px;padding-top:24px;border-top:1px solid var(--line); font:500 .78rem/1.6 var(--font-mono);color:var(--ink-3); } .cta-band .cta-meta a:hover{color:var(--ink)} /* Contact layout */ .contact-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:start} .info-card{border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface);padding:clamp(22px,3vw,32px)} .info-card + .info-card{margin-top:18px} .info-list li{display:grid;gap:3px;padding:14px 0;border-bottom:1px solid var(--line)} .info-list li:last-child{border-bottom:0;padding-bottom:0} .info-list .k{font:500 .68rem/1.6 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)} .info-list .v{font-size:1rem;color:var(--ink)} .info-list a.v:hover{color:var(--accent-text)} .hours{display:flex;justify-content:space-between;gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.92rem;color:var(--ink-2)} .hours:last-child{border-bottom:0} .hours b{font:500 .74rem/1.9 var(--font-mono);color:var(--ink-3);font-weight:500} /* Footer */ .site-foot{background:var(--bg);color:var(--ink);overflow:hidden;border-top:1px solid var(--line)} .foot-top{ display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:clamp(28px,4vw,56px); padding-block:clamp(56px,7vw,84px); } .foot-brand .brand{color:var(--ink);font-size:1.3rem} .foot-brand p{margin-top:16px;max-width:34ch;font-size:.92rem;line-height:1.7;color:var(--ink-3)} .socials{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:24px} .socials a{ font:500 .76rem/1 var(--font-mono);letter-spacing:.08em;color:var(--ink-3); min-height:32px;display:inline-flex;align-items:center;gap:6px; transition:color .2s var(--ease); } .socials a:hover{color:var(--accent-text)} .foot-col b{ display:block;font:500 .68rem/1 var(--font-mono);letter-spacing:.18em; text-transform:uppercase;color:var(--ink-3);margin-bottom:18px; } .foot-col li{margin-bottom:2px} .foot-col a{ display:inline-flex;align-items:center;min-height:34px; font-size:.92rem;color:var(--ink-2);transition:color .2s var(--ease); } .foot-col a:hover{color:var(--ink)} .foot-col .fc-note{font-size:.85rem;line-height:1.7;color:var(--ink-3)} .foot-bottom{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px; border-top:1px solid var(--line); padding-block:22px; font:400 .76rem/1.6 var(--font-mono);color:var(--ink-3); } .foot-bottom a:hover{color:var(--ink)} .foot-bottom .fb-links{display:flex;flex-wrap:wrap;gap:20px} .foot-mark{ display:block;text-align:center; font-family:var(--font-display);font-weight:600;letter-spacing:-.02em; font-size:clamp(4.5rem,17vw,13rem);line-height:.78; color:var(--ink);opacity:.05;user-select:none;pointer-events:none; transform:translateY(12%); } /* Motion. Content is hidden for the reveal only when JS is present (html.js). Scripting disabled means nothing is ever hidden, so the page stays readable. Note this class is set by an inline head script that runs whether or not js/main.js loads, while only main.js adds the .in class that reveals these elements. So a script that 404s, hangs or throws would otherwise leave the page blank. The guard for that lives in the same inline script: main.js sets a `booted` flag on documentElement, and if it is absent two seconds later the script reveals everything and only the animation is lost. Reduced-motion users are covered separately, in the media query near the end of this file. */ html.js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s var(--ease),transform .7s var(--ease);transition-delay:var(--d,0ms)} html.js .rv.in{opacity:1;transform:none} /* Responsive */ @media (max-width:1020px){ .nav{display:none} .bar-cta .btn{display:none} .nav-toggle{display:grid} .work-grid{grid-template-columns:repeat(2,1fr)} .stats{grid-template-columns:repeat(2,1fr);row-gap:34px} .stat:nth-child(3){border-left:0;padding-left:0} .steps-4{grid-template-columns:repeat(2,1fr)} .svc{grid-template-columns:1fr;gap:22px} .svc .svc-side{position:static} .case-grid{grid-template-columns:1fr;gap:28px} .foot-top{grid-template-columns:1fr 1fr} .page-head .grid{grid-template-columns:1fr;gap:18px} .page-head .lead{justify-self:start} .contact-grid{grid-template-columns:1fr} .srow{grid-template-columns:52px 1fr auto} .srow p{grid-column:2 / -1;grid-row:2} } @media (max-width:680px){ .brand img{height:22px} .hero .hero-row{grid-template-columns:1fr;gap:28px} .hero-media .media{aspect-ratio:16/10;min-height:0} .split{grid-template-columns:1fr;gap:26px} .work-grid{grid-template-columns:1fr} .course{grid-template-columns:1fr} .steps,.steps-4{grid-template-columns:1fr} .case-cols{grid-template-columns:1fr;gap:22px} .stats{grid-template-columns:1fr 1fr} .foot-top{grid-template-columns:1fr} .srow{grid-template-columns:40px 1fr} .srow .tlink{display:none} .sect-head.split{grid-template-columns:1fr;align-items:start} } @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} html.js .rv{opacity:1;transform:none} .marquee-track{animation:none;flex-wrap:wrap;width:auto} } /* ========================================================================== Retention upgrades (added later, kept dark + on-brand) Skip link, trust bar, guarantee band, cohort strip, alumni outcomes, testimonials grid, WhatsApp float, back-to-top, sticky mobile CTA. ========================================================================== */ /* Skip link, first thing a keyboard user hits */ .skip-link{ position:absolute;left:12px;top:-44px;z-index:200; padding:10px 14px;border-radius:8px; background:var(--accent-btn);color:#fff; font:600 .82rem/1 var(--font-body); transition:top .2s var(--ease); } .skip-link:focus{top:12px;outline:none;box-shadow:0 0 0 3px var(--accent-soft)} /* "Trusted by" logo bar on the home page. Hairline chips, no fake brand art. */ .trustbar{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 26px; padding-block:18px;border-block:1px solid var(--line); font:500 .76rem/1.4 var(--font-mono);letter-spacing:.1em; text-transform:uppercase;color:var(--ink-3); } .trustbar b{color:var(--ink-2);font-weight:500;margin-right:6px;letter-spacing:.14em} .trustbar span{white-space:nowrap;display:inline-flex;align-items:center;gap:10px} .trustbar span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--line-2)} .trustbar span:last-child::after{display:none} /* Repeat-customer / "Why teams come back" row of plain benefit cards */ .retention{ display:grid;grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line-2); } .retention > div{ padding:24px 22px 6px 0;border-bottom:1px solid var(--line); } .retention > div + div{border-left:1px solid var(--line);padding-left:22px} .retention h3{ font-family:var(--font-body);font-weight:500;font-size:1.02rem;letter-spacing:-.01em; color:var(--ink);margin-bottom:6px; } .retention p{font-size:.88rem;line-height:1.6;color:var(--ink-2);max-width:30ch} @media (max-width:1020px){ .retention{grid-template-columns:repeat(2,1fr)} .retention > div:nth-child(3){border-left:0;padding-left:0} } @media (max-width:680px){ .retention{grid-template-columns:1fr} .retention > div{border-left:0!important;padding-left:0!important} } /* Academy: next cohort urgency strip (sticky-feeling callout above courses) */ .cohort-strip{ display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px 22px; padding:18px 22px;margin-bottom:clamp(28px,4vw,44px); background:var(--surface);border:1px solid var(--line-2);border-radius:var(--r-m); position:relative;overflow:hidden; } .cohort-strip::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent-btn); } .cohort-strip .cs-l{display:grid;gap:4px;min-width:0} .cohort-strip .cs-l b{font:600 1rem/1.3 var(--font-body);color:var(--ink)} .cohort-strip .cs-l small{font:500 .74rem/1.4 var(--font-mono);color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase} .cohort-strip .cs-meta{ display:flex;flex-wrap:wrap;gap:6px 16px; font:500 .78rem/1.5 var(--font-mono);color:var(--ink-2); } .cohort-strip .cs-meta b{color:var(--accent-text);font-weight:600} .cohort-strip .cs-cta{flex:none} /* Alumni outcome stats (academy): outcome numbers, not just alumni count */ .outcomes{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line-2)} .outcomes > div{padding:24px 22px 6px 0} .outcomes > div + div{border-left:1px solid var(--line);padding-left:22px} .outcomes b{ display:block;font-family:var(--font-display);font-weight:540; font-size:clamp(1.7rem,3vw,2.3rem);line-height:1;letter-spacing:-.02em;color:var(--ink); font-variant-numeric:tabular-nums; } .outcomes span{display:block;margin-top:8px;font-size:.85rem;line-height:1.55;color:var(--ink-2);max-width:24ch} .outcomes em{ display:block;font:500 .68rem/1.4 var(--font-mono);letter-spacing:.1em;text-transform:uppercase; color:var(--ink-3);margin-top:10px;font-style:normal; } @media (max-width:1020px){.outcomes{grid-template-columns:repeat(2,1fr)}} @media (max-width:680px){.outcomes{grid-template-columns:1fr}.outcomes > div{border-left:0!important;padding-left:0!important}} /* Testimonials grid: three short quotes with attribution, on the home page */ .tgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .tcard{ border:1px solid var(--line);border-radius:var(--r-m);background:var(--surface); padding:clamp(20px,2.6vw,28px);display:flex;flex-direction:column;gap:14px; } .tcard blockquote{ margin:0;font:500 1.02rem/1.55 var(--font-body);color:var(--ink);letter-spacing:-.01em; } .tcard .twho{ display:flex;align-items:center;gap:12px;margin-top:auto;padding-top:14px; border-top:1px solid var(--line); font-size:.86rem;color:var(--ink-2); } .tcard .twho b{color:var(--ink);font-weight:500;display:block} .tcard .twho small{font:500 .68rem/1.4 var(--font-mono);color:var(--ink-3);letter-spacing:.1em;text-transform:uppercase} @media (max-width:1020px){.tgrid{grid-template-columns:1fr}} /* Floating WhatsApp button (bottom-left, never on top of mobile sticky CTA on small screens) */ .wa-float{ position:fixed;left:18px;bottom:18px;z-index:70; display:inline-flex;align-items:center;gap:10px; padding:12px 16px;border-radius:999px; background:#25D366;color:#0a0a0c; font:600 .86rem/1 var(--font-body); box-shadow:0 14px 30px -12px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08); transition:transform .2s var(--ease),background .2s var(--ease); } .wa-float:hover{background:#1ebe5d;transform:translateY(-2px)} .wa-float svg{width:18px;height:18px;flex:none} .wa-float .wa-text{display:inline} @media (max-width:680px){ .wa-float{bottom:78px;left:14px;padding:11px 14px} .wa-float .wa-text{display:none} .wa-float{padding:11px} } /* Back-to-top, appears after the user scrolls past the hero */ .to-top{ position:fixed;right:18px;bottom:18px;z-index:70; width:44px;height:44px;border-radius:50%; display:grid;place-items:center; background:var(--surface);color:var(--ink); box-shadow:inset 0 0 0 1px var(--line-2),0 14px 30px -12px rgba(0,0,0,.6); opacity:0;transform:translateY(8px);pointer-events:none; transition:opacity .25s var(--ease),transform .25s var(--ease),background .2s var(--ease); } .to-top.show{opacity:1;transform:none;pointer-events:auto} .to-top:hover{background:var(--surface-2)} .to-top svg{width:16px;height:16px} @media (max-width:680px){.to-top{bottom:78px}} /* Sticky mobile CTA bar (only on screens < 720px, only after the user scrolls past the hero) */ .mob-cta{ position:fixed;left:0;right:0;bottom:0;z-index:65; display:none; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); background:rgba(10,10,12,.96); border-top:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transform:translateY(100%);transition:transform .3s var(--ease); } .mob-cta.show{transform:none} .mob-cta-inner{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mob-cta a{ display:inline-flex;align-items:center;justify-content:center;gap:8px; min-height:44px;padding:10px 14px;border-radius:999px; font:600 .84rem/1 var(--font-body);white-space:nowrap; } .mob-cta a:first-child{background:var(--accent-btn);color:#fff} .mob-cta a:last-child{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-2)} @media (max-width:720px){ .mob-cta{display:block} body{padding-bottom:64px} body.nav-open{padding-bottom:0} } /* Form helper: native validity gets a visible red border on invalid */ .f-field input:invalid:not(:placeholder-shown), .f-field textarea:invalid:not(:placeholder-shown), .f-field select:invalid:not(:focus){ border-color:rgba(255,90,90,.55); } .f-field .req{color:var(--accent-text);font-weight:600} /* "Reply in 2 hours" reassurance row inside the contact page */ .reply-promise{ display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px; padding:14px 18px;margin-bottom:24px; background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m); font:500 .82rem/1.5 var(--font-body);color:var(--ink-2); } .reply-promise b{color:var(--ink);font-weight:600;display:inline-flex;align-items:center;gap:8px} .reply-promise b::before{ content:"";width:8px;height:8px;border-radius:50%;background:#22c55e; box-shadow:0 0 0 3px rgba(34,197,94,.18); } /* The hero media frame. This used to carry a .play overlay reading "Watch the 90 second reel" over a still image, with no video anywhere on the site. It was aria-hidden, so screen readers never announced it, but sighted visitors saw a play button that did nothing when clicked. Removed rather than faked. If a reel URL is ever added, reinstate it as a real or