/* ============================================================ Southern Tide Media — design v7 "INK DARK" APPROVED DIRECTION (2026-07-21). Supersedes v6 "Chart House". Structure & interaction rebuilt from measurements of two references Evans supplied — inbeat.agency (layout, multi-flavour mega-nav, pill buttons, portfolio filter badges) and black-n-orange.com (the colour balance). No third-party code, copy, assets or typefaces were used. Type: Anton (display) · DM Sans (body prose) · Inter (nav/UI/labels) Colour: the STM brand guide applied literally. White base, BLACK used as punctuation — the reference measures ~23% dark on its homepage and ~30% on interior pages, not dark-dominant. Buttons are black pills; orange is scarce, which is exactly why it reads loud. ⚠ THE CONSTRAINT THAT GOVERNS EVERYTHING (see brand-palette-constraints.md): no brand colour passes WCAG AA for text on a light background — teal 1.90, orange 2.74, gold 1.61. All three pass on black (11.07 / 7.67 / 13.04). So: · on LIGHT → brand colours are decorative ONLY (rules, fills, chips) and text is black or grey · on BLACK → brand colours may be used literally as text If you find yourself darkening a brand colour to make it readable, the layout is fighting the palette. Change the layout. Version history: this file also carried "Harbor" (teal-navy) and "Ink" (light black/orange) behind a preview picker. Both were retired 2026-07-21 — Harbor was built on a navy that is not in the brand guide and Ink relied on an invented #A34A00. Ink Dark is now the base. ============================================================ */ @font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap; src:url(/assets/fonts/anton.woff2) format('woff2');} @font-face{font-family:'DM Sans';font-style:normal;font-weight:400 700;font-display:swap; src:url(/assets/fonts/dmsans.woff2) format('woff2');} /* Inter is --ui, i.e. nearly every word of running text on the site, and Caveat is the sticky-note hand. Both were coming from fonts.googleapis.com: a render-blocking stylesheet on a third party, then the font files themselves from a SECOND third party (fonts.gstatic.com) — three extra connections in front of the largest element on the page. Self-hosted now, same as Anton/DM Sans/Plex Mono, from the latin subset. Both are OFL. Inter is the variable face, so 400-600 is one file. */ @font-face{font-family:'Inter';font-style:normal;font-weight:400 600;font-display:swap; src:url(/assets/fonts/inter.woff2) format('woff2');} @font-face{font-family:'Caveat';font-style:normal;font-weight:500;font-display:swap; src:url(/assets/fonts/caveat.woff2) format('woff2');} :root{ /* ---- surfaces: light base, black as punctuation ---- */ --paper:#FFFFFF; --paper-2:#EBEAE8; /* alternate light band (measured on the reference) */ --paper-3:#F8F7F5; /* a third, quieter light band for long interiors */ --card:#FFFFFF; --dark:#000000; --dark-2:#000000; /* ---- text ---- */ --ink:#000000; --body:#3A3A3A; --muted:#5A5A5A; --on-dark:#FFFFFF; --on-dark-muted:#B5B2AE; /* ---- accents ---- --accent is the LIGHT-surface accent and is deliberately near-black: nothing else in the palette can carry text there. */ --accent:#141414; --accent-deep:#000000; --accent-soft:#F2F1EF; /* The real brand colours. Legal as TEXT only on the black bands; on light surfaces use them as rules, fills and tints. */ --orange:#EE7F00; --teal:#66CCCC; --gold:#FCC400; --cta:#EE7F00; /* the accent-on-dark role — was misnamed --teal while Harbor was the base, which made every dark-surface rule read as if it were teal */ --on-dark-accent:#EE7F00; /* orange as a tint. The reference alternates #EBEAE8 and orange-at-14% cards down its interior pages; this is that fill. */ --orange-tint:rgba(238,127,0,.14); --orange-tint-2:rgba(238,127,0,.07); --line:#DCDBD8; --line-dark:rgba(255,255,255,.18); --r-pill:100px; --r-card:24px; /* hero-scale cards */ --r-sm:10px; /* interior content cards — the reference uses 8px */ --shadow:0 18px 40px rgba(0,0,0,.10); --shadow-lift:0 26px 56px rgba(0,0,0,.16); --container:1280px; --pad-sec:clamp(64px,7vw,96px); --ui:'Inter',system-ui,-apple-system,sans-serif; } /* The knockout mark ships for the dark FOOTER (used directly in the markup). The header is light, so it keeps the standard mark. */ .brand .logo-knockout{display:none} *{box-sizing:border-box} /* the filter hides cards with the hidden attribute; make sure no display rule further down can out-rank the UA default */ [hidden]{display:none!important} html{scroll-behavior:smooth} body{margin:0;background:var(--paper);color:var(--body); font-family:'DM Sans',system-ui,sans-serif;font-size:16.5px;line-height:1.65; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} img{max-width:100%;display:block} h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance} p{margin:0} a{color:var(--accent);text-decoration:none} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:3px} .wrap{max-width:var(--container);margin:0 auto;padding-left:32px;padding-right:32px} .display{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase; letter-spacing:.012em;line-height:1.05} /* eyebrow — Inter, tight, sentence case (replaces the mono label). The rule is orange on BOTH surfaces: decorative on light (legal), and the label itself only turns orange on the black bands. */ .eyebrow{font-family:var(--ui);font-weight:500;font-size:13px;letter-spacing:-.01em; color:var(--muted);display:inline-flex;align-items:center;gap:9px} .eyebrow::before{content:"";width:22px;height:1px;background:var(--orange);flex:none} .eyebrow--on-dark{color:var(--on-dark-muted)} .eyebrow--on-dark::before{background:var(--on-dark-accent)} /* colour must track the theme — a hardcoded #fff went white-on-white once --ink inverted for the dark version */ .skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper); padding:10px 16px;z-index:200} .skip:focus{left:12px;top:12px} /* ---------- buttons: pill, quiet, Inter ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px; font-family:var(--ui);font-weight:500;font-size:15px;letter-spacing:-.01em; border-radius:var(--r-pill);padding:13px 26px;cursor:pointer;border:1px solid transparent; text-decoration:none;transition:background .18s,color .18s,border-color .18s,transform .18s} .btn:hover{transform:translateY(-1px)} /* Buttons are BLACK pills. The reference has only four orange fills on its entire homepage — that scarcity is the whole reason the orange reads loud. ⚠ Orange is never a button LABEL colour: #EE7F00 under white text is 2.74:1. Where orange is a fill (the on-dark hover) the label goes black, 6.9:1. */ .btn--dark{background:#000000;color:#FFFFFF} .btn--dark:hover{background:#2A2A2A} .btn--cta{background:#000000;color:#FFFFFF} .btn--cta:hover{background:#2A2A2A} /* The WP content markup calls the primary button .btn--primary (20 of them across the interior pages) — a v6 class name. Without this it inherited a transparent fill and rendered as bare text inside pill padding. ⚠ Written as .btn.btn--primary on purpose: these buttons live INSIDE .page-content, and `.page-content a` (one class + one type) outranks a lone `.btn--primary` (one class). Two classes beats it back. */ .btn.btn--primary{background:#000000;color:#FFFFFF} .btn.btn--primary:hover{background:#2A2A2A} .btn--accent{background:var(--accent);color:#fff} .btn--accent:hover{background:var(--accent-deep)} .btn--ghost{background:transparent;color:#000000;border-color:#000000} .btn--ghost:hover{background:#000000;color:#FFFFFF} .btn--on-dark{background:#FFFFFF;color:#000000} .btn--on-dark:hover{background:var(--cta);color:#000000} .btn--ghost-dark{background:transparent;color:var(--on-dark);border-color:var(--line-dark)} .btn--ghost-dark:hover{border-color:var(--cta);color:var(--cta)} /* chips (service tags) */ .chip{display:inline-block;font-family:var(--ui);font-weight:500;font-size:12.5px; letter-spacing:-.01em;color:var(--accent);background:var(--accent-soft); border-radius:var(--r-pill);padding:5px 12px} .chip--plain{background:transparent;border:1px solid var(--line);color:var(--muted)} a.chip{transition:background .16s,color .16s} a.chip:hover{background:var(--dark);color:var(--on-dark)} .chip--on-dark{background:rgba(238,127,0,.14);color:var(--on-dark-accent)} /* the orange lives in the underline, not the text */ .golink{font-family:var(--ui);font-weight:500;font-size:14.5px;letter-spacing:-.01em; color:var(--accent);display:inline-flex;align-items:center;gap:7px; box-shadow:inset 0 -2px 0 0 var(--orange)} .golink i{font-style:normal;transition:transform .18s} a:hover .golink i,.golink:hover i{transform:translateX(4px)} /* ============================================================ NAV — sticky bone bar + three dropdown flavours ============================================================ */ .site-head{position:sticky;top:0;z-index:100;background:var(--paper); border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s} body.scrolled .site-head{border-bottom-color:var(--line);box-shadow:0 6px 24px rgba(0,0,0,.08)} .site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:24px; height:92px;position:relative} /* 62px matches the v6 beta header, which Evans preferred — the 44px mark read small against a 92px bar. Mobile steps down to 50px, same as v6. */ .brand img{height:62px;width:auto} .nav{display:flex;align-items:center;gap:4px} .nav-item{position:relative} .nav-link{display:inline-flex;align-items:center;gap:6px; font-family:var(--ui);font-weight:450;font-size:15px;letter-spacing:-.012em; color:var(--ink);padding:10px 14px;border-radius:var(--r-sm); background:none;border:0;cursor:pointer;font-feature-settings:"cv11"; transition:color .16s,background .16s} .nav-link:hover,.nav-item[data-open="true"] .nav-link{color:var(--accent);background:rgba(0,0,0,.05)} .nav-link .caret{width:9px;height:9px;flex:none;transition:transform .2s;opacity:.55} .nav-item[data-open="true"] .caret{transform:rotate(180deg)} .nav-cta{margin-left:10px} /* dropdown shell */ .dd{position:absolute;top:calc(100% + 10px);left:50%;transform:translate(-50%,6px); opacity:0;visibility:hidden;pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s; border-radius:var(--r-card);box-shadow:var(--shadow-lift);overflow:hidden;z-index:120} .nav-item[data-open="true"] .dd{opacity:1;visibility:visible;pointer-events:auto; transform:translate(-50%,0)} .dd::before{content:"";position:absolute;top:-10px;left:0;right:0;height:10px} /* Sheets — rebuilt 2026-07-22 on the measured inbeat dropdown pattern: one full-width sheet flush under the header (their wrapper: full-bleed, page tone, 39/38/40 padding, NO shadow — depth comes from the page-dim overlay, rgba(42,0,6,.5) + blur(6px) on theirs), cards (white on bone, r14, p18, 12px gap) with an icon + 18px title + wrapping pill sub-links (8/16px, r100, 14px/500). Ours inverts the tones for the white canvas: paper-2 cards on a white sheet, black-pill hovers. position:fixed escapes the .wrap positioning context for true full-bleed without the 100vw-scrollbar overflow; the mobile block BELOW overrides back to static, so these rules must stay above it. */ .dd--sheet{position:fixed;top:92px;left:0;right:0;transform:translateY(6px); background:var(--paper);border-bottom:1px solid var(--line); border-radius:0;box-shadow:0 24px 48px -28px rgba(0,0,0,.3); padding:34px 0 30px} .nav-item[data-open="true"] .dd--sheet{transform:translateY(0)} /* ⚠ the sheet's inner .wrap sits INSIDE .site-head, so `.site-head .wrap` (flex row, height:92px) applies to it too — which clips the cards to a 92px strip and parks the foot beside the grid. Undo all of it; this rule ties (0,2,0) and wins on file order. */ .dd--sheet .wrap{display:block;height:auto;position:static} /* kept for markup compat; sheets no longer depend on it */ .nav-item--wide{position:static} .sheet-grid{display:grid;gap:12px} .sheet-grid--svc{grid-template-columns:repeat(4,1fr)} .sheet-grid--ind{grid-template-columns:1fr 1fr 1fr 340px} .sheet-grid--work{grid-template-columns:300px 1fr} .nav-card{display:block;background:var(--paper-2);border-radius:14px; padding:18px 18px 20px} .nav-card__title{display:flex;align-items:center;gap:10px; font-family:var(--ui);font-weight:600;font-size:16.5px;letter-spacing:-.02em; color:var(--ink)} .nav-card__title svg{width:18px;height:18px;flex:none;color:var(--ink)} a.nav-card__title{box-shadow:none;transition:color .14s} a.nav-card__title:hover{color:var(--accent)} /* pass 4 polish 2026-08-21: one-line pillar blurb (same approved copy as the homepage pillar cards) so the sparser cards don't sit empty */ .nav-card__blurb{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.5;color:var(--muted);margin:8px 0 0} .nav-pills{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px} .nav-pill{display:inline-block;padding:7px 14px;border-radius:100px; background:var(--card);font-family:var(--ui);font-weight:500;font-size:13.5px; letter-spacing:-.01em;color:var(--ink);transition:background .14s,color .14s} .nav-pill:hover{background:var(--dark);color:#FFFFFF} /* industries: the whole card is the link */ a.nav-card{color:var(--body);transition:box-shadow .16s} a.nav-card:hover{box-shadow:var(--shadow)} a.nav-card p{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.5; color:var(--muted);margin-top:10px} a.nav-card .golink{display:inline-block;margin-top:12px;font-size:13.5px} .nav-aside-dark{background:var(--dark);border-radius:14px;padding:26px; color:var(--on-dark)} .nav-aside-dark h3{font-family:var(--ui);font-weight:600;font-size:12.5px; letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark-muted); margin:0 0 12px} .nav-aside-dark p{font-family:'DM Sans',sans-serif;font-size:13.5px; line-height:1.55;color:var(--on-dark-muted)} .nav-aside-dark .golink{display:inline-block;margin-top:14px;font-size:13.5px} .nav-aside{padding:4px 26px 0 0} .nav-aside h3{font-family:var(--ui);font-weight:600;font-size:12.5px; letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 12px} .nav-aside p{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.55; color:var(--muted)} .nav-aside .golink{display:block;width:max-content;margin-top:12px;font-size:14px} .sheet-foot{display:flex;align-items:center;justify-content:space-between;gap:16px; margin-top:18px;padding-top:16px;border-top:1px solid var(--line)} .sheet-foot p{font-family:var(--ui);font-size:13.5px;letter-spacing:-.01em;color:var(--muted)} /* the page-dim overlay. Lives inside the sticky header (z-index:-1 keeps it under the bar within the header's stacking context, which itself paints above the page). Toggled by the dropdown JS. */ .nav-dim{position:fixed;inset:0;z-index:-1;background:rgba(0,0,0,.45); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s} .nav-dim.on{opacity:1;visibility:visible} @media (max-width:920px){.nav-dim{display:none}} /* work: recent-work preview cards (grid refreshed from work.json at build) */ .dd-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .dd-card{display:block;border-radius:14px;overflow:hidden;background:var(--paper-2); transition:transform .18s,box-shadow .18s} .dd-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .dd-card img{width:100%;height:118px;object-fit:cover} .dd-card .c-body{padding:12px 14px 15px} .dd-card b{display:block;font-family:var(--ui);font-weight:600;font-size:14px; letter-spacing:-.012em;color:var(--ink)} .dd-card em{display:block;font-style:normal;font-family:'DM Sans',sans-serif;font-size:12.5px; color:var(--muted);margin-top:2px} /* mobile nav */ .nav-toggle{display:none;font-family:var(--ui);font-weight:500;font-size:14px; border:1px solid var(--line);background:none;color:var(--ink); padding:10px 16px;border-radius:var(--r-pill);cursor:pointer} /* ============================================================ SECTIONS ============================================================ */ .sec{padding:var(--pad-sec) 0} .sec--tight{padding:clamp(40px,4.5vw,60px) 0} .sec-head{max-width:760px;margin-bottom:44px} .sec-head h2{font-size:clamp(30px,3.6vw,46px);margin:14px 0 0} .sec-head p{margin-top:16px;font-size:17px;color:var(--body);max-width:60ch} .sec-head--center{margin-left:auto;margin-right:auto;text-align:center} .sec-head--center .eyebrow{justify-content:center} .sec-head--center p{margin-left:auto;margin-right:auto} /* ---------- hero ---------- Two columns, matching the reference's 517/493 split: copy left, a portrait card stack right. The reference's media well is 434x500 with overflow hidden, and the front card sits at ~0.71 portrait with the rest of the deck peeking out to the right and clipping at the container edge. */ .hero{padding:clamp(40px,4.6vw,64px) 0 clamp(44px,5vw,72px)} .hero-grid{display:grid;grid-template-columns:minmax(0,517fr) minmax(0,493fr); gap:clamp(30px,4vw,56px);align-items:center} .hero h1{font-size:clamp(38px,5.2vw,66px);margin:20px 0 0} .hero h1 .l2{display:block;font-family:'DM Sans',sans-serif;font-weight:400; text-transform:none;letter-spacing:-.02em;line-height:1.12; font-size:clamp(26px,3.3vw,42px);color:var(--accent);margin-top:12px} .hero .sub{margin:26px 0 32px;font-size:17.5px;max-width:56ch} .hero .sub strong{color:var(--ink);font-weight:700} .hero-actions{display:flex;flex-wrap:wrap;gap:12px} /* ---------- client logo grid ---------- Static grid rather than a scroller. Source logos are mixed colour/mono and range from 1:1 to 4:1, so each cell is a fixed optical box: grayscale to normalise, capped on BOTH height and width so the wide marks don't dominate the row. Colour returns on hover. */ .logos{padding:clamp(52px,6vw,84px) 0;border-top:1px solid var(--line)} /* an important subhead, not a caption (Brandon 2026-07-22: it was getting lost at 13px muted) */ .logos p{font-family:var(--ui);font-weight:600;font-size:clamp(22px,2.4vw,29px); letter-spacing:-.02em; color:var(--ink);text-align:center;margin-bottom:clamp(40px,4.5vw,60px)} /* Cross-fading logo wall: a fixed number of SLOTS, each holding several marks that fade between one another on a stagger — so the wall shows far more brands than it has cells, in the same footprint. */ .logo-grid{display:grid;grid-template-columns:repeat(5,1fr); gap:clamp(36px,4.2vw,56px) clamp(22px,2.8vw,40px); align-items:center;justify-items:center;margin:0 auto} .logo-slot{position:relative;width:100%;max-width:230px;height:98px} .logo-slot img{position:absolute;top:50%;left:50%;translate:-50% -50%; max-width:100%;width:auto;height:auto;object-fit:contain; /* Ink tone is baked into the assets now (luminance-to-alpha knockout, #111 ink), so no contrast hack here — it only crushed the soft anti-aliased edges. grayscale still normalises the one vector mark that carries colour. */ filter:grayscale(1); opacity:0;transition:opacity .8s ease,filter .2s} .logo-slot img.on{opacity:.95} .logo-slot img.on:hover{opacity:1;filter:none} /* Optical balance: capping every mark at the same HEIGHT makes square badges read ~4x lighter than wide wordmarks. Size by shape instead so each occupies roughly equal area. */ .logo-slot .lg-sq{max-height:78px} /* aspect <= 1.3 — square badges */ .logo-slot .lg-md{max-height:63px} /* aspect 1.3–2.2 — balanced marks */ .logo-slot .lg-wide{max-height:47px} /* aspect > 2.2 — long wordmarks */ @media (prefers-reduced-motion:reduce){ .logo-slot img{transition:none} } /* ---------- hero card stack ---------- Portrait deck in the hero's right column. The front card advances on an interval; the rest sit behind it, offset right and scaled down, clipped by the well. Geometry mirrors the reference: 434x500 well, ~0.71 front card. */ .hero-deck{position:relative;width:100%;max-width:434px;aspect-ratio:434/500; margin-left:auto;overflow:hidden} .hcard{position:absolute;top:50%;left:0;width:80%;aspect-ratio:5/7; border-radius:20px;overflow:hidden;background:var(--paper-2); box-shadow:inset 0 0 0 1px rgba(17,17,17,.12); text-decoration:none;display:block;transform-origin:center left; transition:transform .75s cubic-bezier(.4,0,.2,1),opacity .75s ease; will-change:transform,opacity} .hcard img{width:100%;height:100%;object-fit:cover} .hcard figcaption{position:absolute;left:0;right:0;bottom:0;padding:52px 22px 20px; background:linear-gradient(to top,rgba(0,0,0,.9),rgba(0,0,0,.5) 48%,transparent)} .hcard span{display:block;font-family:var(--ui);font-weight:450;font-size:13.5px; letter-spacing:-.01em;color:rgba(244,242,238,.86)} .hcard b{display:block;font-family:var(--ui);font-weight:600;font-size:16px; letter-spacing:-.015em;color:#fff;margin-top:1px} /* Deck positions — 0 is front, higher is further back and further right. The parked state is :not([data-pos]) rather than a bare .hcard override so it can never compete with the positioned states on specificity. */ .hcard[data-pos="0"]{transform:translate(0,-50%) scale(1);opacity:1;z-index:4} .hcard[data-pos="1"]{transform:translate(15%,-50%) scale(.955);opacity:1;z-index:3} .hcard[data-pos="2"]{transform:translate(27%,-50%) scale(.915);opacity:1;z-index:2} .hcard[data-pos="3"]{transform:translate(36%,-50%) scale(.885);opacity:.55;z-index:1} .hcard:not([data-pos]){transform:translate(36%,-50%) scale(.86);opacity:0;z-index:0} /* deck dot navigation — a grid SIBLING under the deck (the deck itself is an overflow:hidden well, which clipped the first attempt), matching the deck's width and centred under the front card (its left 80%) */ .hero-dots{grid-column:2;justify-self:end;width:min(434px,100%); padding-right:20%;display:flex;justify-content:center;gap:4px;margin-top:14px} .hero-dots button{width:22px;height:22px;padding:0;border:0;background:none; cursor:pointer;position:relative} .hero-dots button::after{content:"";position:absolute;inset:7px;border-radius:50%; background:rgba(0,0,0,.22);transition:background .16s,transform .16s} .hero-dots button:hover::after{background:rgba(0,0,0,.5)} .hero-dots button.on::after{background:var(--ink);transform:scale(1.3)} @media (prefers-reduced-motion:reduce){ .hcard{transition:none} } @media (prefers-reduced-motion:reduce){.logo-grid img{transition:none}} /* ---------- service pillar cards ---------- */ .pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .pillar{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:28px 26px 26px;display:flex;flex-direction:column; transition:transform .2s,box-shadow .2s,border-color .2s} .pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent} .pillar h3{font-family:var(--ui);font-weight:600;font-size:19px;letter-spacing:-.02em; margin-bottom:10px} .pillar p{font-size:14.5px;line-height:1.6;color:var(--body);flex:1} .pillar .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:20px} .pillar .golink{margin-top:18px} /* ---------- dark inset card ---------- */ .darkcard{background:var(--dark);border-radius:var(--r-card);color:var(--on-dark); padding:clamp(40px,5.5vw,84px) clamp(28px,4vw,64px);position:relative;overflow:hidden} .darkcard h2,.darkcard h3{color:var(--on-dark)} .darkcard p{color:var(--on-dark-muted)} .darkcard::after{content:"";position:absolute;right:-140px;top:-140px;width:420px;height:420px; border-radius:50%;background:radial-gradient(circle,rgba(238,127,0,.16),transparent 66%); pointer-events:none} .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,48px);position:relative} .trio > div{padding-top:24px;border-top:1px solid var(--line-dark)} .trio h3{font-size:clamp(21px,2.2vw,28px);font-family:var(--ui);font-weight:600; letter-spacing:-.02em;margin-bottom:12px} .trio p{font-size:15px;line-height:1.65} /* stat row */ .stats{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,44px); position:relative} .stats > div,.stats > a{border-top:1px solid var(--line-dark);padding-top:22px} .stats b{display:block;font-family:'Anton',sans-serif;font-weight:400; font-size:clamp(34px,4vw,52px);line-height:1;color:var(--on-dark-accent); font-variant-numeric:tabular-nums} .stats span{display:block;font-family:var(--ui);font-size:13.5px;letter-spacing:-.01em; color:var(--on-dark-muted);margin-top:10px} /* ---------- featured case study ---------- */ .feature{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,4vw,64px);align-items:center} .feature img{width:100%;height:auto;border-radius:var(--r-card);aspect-ratio:16/10;object-fit:cover} .feature h3{font-size:clamp(24px,2.8vw,34px);margin:14px 0 16px} .feature .metrics{display:flex;gap:40px;margin:28px 0 26px} .feature .metrics b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:44px; line-height:1;color:var(--ink)} .feature .metrics span{display:block;font-family:var(--ui);font-size:13.5px; letter-spacing:-.01em;color:var(--muted);margin-top:8px;max-width:18ch} /* ---------- work rail ---------- */ .rail{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .wcard{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--card); border:1px solid var(--line);transition:transform .2s,box-shadow .2s} .wcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .wcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .wcard .b{padding:20px 22px 22px} .wcard h3{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em; margin:10px 0 8px} .wcard p{font-size:14px;color:var(--body);line-height:1.6} /* ---------- testimonials ---------- */ .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .quote{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:30px 28px;display:flex;flex-direction:column;margin:0} .quote p{font-size:15.5px;line-height:1.7;color:var(--ink);flex:1} .quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px; padding-top:20px;border-top:1px solid var(--line)} .quote .av{width:40px;height:40px;border-radius:50%;background:var(--accent-soft); color:var(--accent);display:grid;place-items:center;flex:none; font-family:var(--ui);font-weight:600;font-size:16px} .quote b{display:block;font-family:var(--ui);font-weight:600;font-size:14.5px; letter-spacing:-.01em;color:var(--ink)} .quote em{display:block;font-style:normal;font-size:13px;color:var(--muted);margin-top:1px} /* ---------- insights ---------- */ .posts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pcard{display:block;border-radius:var(--r-card);overflow:hidden;background:var(--card); border:1px solid var(--line);transition:transform .2s,box-shadow .2s} .pcard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pcard img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover} .pcard .b{padding:22px 24px 24px} .pcard h3{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em; line-height:1.35;margin-bottom:10px} .pcard p{font-size:14px;color:var(--body);line-height:1.6;margin-bottom:14px} .pcard .meta{font-family:var(--ui);font-size:12.5px;letter-spacing:-.01em;color:var(--muted)} /* ---------- FAQ ---------- */ .faq{max-width:860px;margin:0 auto} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none;cursor:pointer;padding:22px 44px 22px 0;position:relative; font-family:var(--ui);font-weight:500;font-size:17px;letter-spacing:-.015em;color:var(--ink)} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";position:absolute;right:8px;top:50%;transform:translateY(-50%); font-family:var(--ui);font-weight:400;font-size:24px;color:var(--accent);line-height:1} .faq details[open] summary::after{content:"\2013"} .faq .a{padding:0 44px 24px 0;font-size:15.5px;line-height:1.7;color:var(--body)} /* ---------- CTA ---------- */ .cta-band{background:var(--dark);border-radius:var(--r-card);color:var(--on-dark); padding:clamp(44px,5.5vw,80px) clamp(28px,4vw,64px);text-align:center; position:relative;overflow:hidden} .cta-band::after{content:"";position:absolute;left:50%;bottom:-220px;transform:translateX(-50%); width:640px;height:440px;border-radius:50%; background:radial-gradient(circle,rgba(238,127,0,.16),transparent 68%);pointer-events:none} .cta-band h2{color:var(--on-dark);font-size:clamp(28px,3.6vw,46px);margin-bottom:18px;position:relative} .cta-band p{color:var(--on-dark-muted);max-width:60ch;margin:0 auto 30px;font-size:17px;position:relative} .cta-actions{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;position:relative} /* ---------- footer ---------- */ .site-foot{background:var(--dark-2);color:var(--on-dark);padding:64px 0 0;margin-top:var(--pad-sec)} .foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:40px;padding-bottom:48px} .foot-brand img{height:42px;width:auto;margin-bottom:18px} .foot-brand p{color:var(--on-dark-muted);font-size:14.5px;max-width:34ch} .foot-nap{margin-top:20px;font-family:var(--ui);font-size:14px;letter-spacing:-.01em; color:var(--on-dark-muted);line-height:1.9} .foot-nap a{color:var(--on-dark-accent)} .site-foot h3{font-family:var(--ui);font-weight:600;font-size:12.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:16px} .site-foot ul{list-style:none;margin:0;padding:0} .site-foot li{margin-bottom:9px} .site-foot li a{font-family:var(--ui);font-weight:450;font-size:14.5px;letter-spacing:-.012em; color:var(--on-dark);transition:color .16s} .site-foot li a:hover{color:var(--on-dark-accent)} .foot-bar{border-top:1px solid var(--line-dark);padding:22px 0 28px; display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between; font-family:var(--ui);font-size:13px;letter-spacing:-.01em;color:var(--on-dark-muted)} /* the policy links inherited the light-theme link colour (#141414) straight onto the black bar — 1.13:1, effectively invisible. Same treatment as the footer column links. */ .foot-bar a{color:var(--on-dark);transition:color .16s} .foot-bar a:hover,.foot-bar a:focus-visible{color:var(--on-dark-accent)} /* ---------- reveal ---------- */ .reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s ease} .reveal.in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- above-the-fold reveals ---------- .reveal starts at opacity:0 and waits for the IntersectionObserver to add .in. For content BELOW the fold that is the whole point. For the hero — which is on screen at load — it means the largest text on the page cannot be painted until the script at the end of has parsed and run, and LCP ignores an element at opacity:0 entirely. Measured on mobile 2026-08-23: FCP 1.4s but LCP 6.7s, with the LCP element being the hero's own

. So the hero animates from CSS instead, starting the moment the stylesheet is parsed. The visual result is the same entrance; .in still lands later and simply agrees with the end state. */ .hero .reveal,.ihero .reveal{animation:reveal-rise .6s ease .04s both} @keyframes reveal-rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} @media (prefers-reduced-motion:reduce){ .hero .reveal,.ihero .reveal{animation:none;opacity:1;transform:none} } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width:1080px){ .logo-grid{grid-template-columns:repeat(4,1fr)} .pillars{grid-template-columns:1fr 1fr} .stats{grid-template-columns:1fr 1fr;gap:28px} .foot-grid{grid-template-columns:1fr 1fr;gap:32px} } @media (max-width:920px){ .logo-grid{grid-template-columns:repeat(3,1fr)} .nav-toggle{display:inline-flex} .nav{display:none;position:absolute;top:100%;left:0;right:0;background:var(--paper); border-top:1px solid var(--line);border-bottom:1px solid var(--line); flex-direction:column;align-items:stretch;gap:2px;padding:14px 20px 20px; max-height:calc(100vh - 76px);overflow-y:auto;overscroll-behavior:contain} /* dvh where supported: on iOS 100vh is the CHROME-LESS height, so the open menu ran under the address bar and its last items were unreachable */ @supports (height:100dvh){.nav{max-height:calc(100dvh - 76px)}} .nav.open{display:flex} .site-head .wrap{position:relative;height:76px} /* ⚠ the sheets' inner .wrap is a DESCENDANT of .site-head, so the 76px header rule directly above clamped it too — and .dd's overflow:hidden then cropped the whole panel to one partial card (reported on iPhone, 2026-08-25). Re-assert auto height AFTER that rule: same specificity (0,2,0), later in the file, so it wins. The desktop `.dd--sheet .wrap` twin cannot do this job — it sits ABOVE this block. */ .dd .wrap{display:block;height:auto;position:static; padding-left:0;padding-right:0;max-width:none} .brand img{height:50px} .nav-link{width:100%;justify-content:space-between;font-size:16px;padding:13px 12px} .nav-cta{margin-left:0;margin-top:8px;justify-content:center} /* dropdowns become inline accordions on mobile */ .dd{position:static;transform:none;opacity:1;visibility:visible;pointer-events:auto; width:auto;box-shadow:none;border-radius:12px;display:none;margin:2px 0 8px} .nav-item[data-open="true"] .dd{display:block;transform:none} .dd--sheet{padding:10px 0 14px;border-bottom:0;box-shadow:none} .sheet-grid--svc,.sheet-grid--ind,.sheet-grid--work{grid-template-columns:1fr} .sheet-foot{flex-direction:column;align-items:flex-start;gap:8px} .nav-aside{padding:4px 0 0} .dd-cards{grid-template-columns:1fr 1fr} .hero-grid,.feature{grid-template-columns:1fr} /* deck drops under the copy and centres, keeping the reference proportions */ .hero-deck{margin:8px auto 0} .hero-dots{grid-column:auto;justify-self:center;margin:12px auto 0} .trio,.rail,.quotes,.posts{grid-template-columns:1fr} } @media (max-width:560px){ .wrap{padding-left:20px;padding-right:20px} /* Phone logo wall = a 2x3 WINDOW, not the full 15-slot wall (Brandon 2026-08-25). The behavior script re-deals every mark into these six visible slots, so the whole roster still cycles — it just does it in six frames instead of fifteen. Keep the count here and MOBILE_SLOTS in index.html's logo-wall script in sync. */ .logo-grid{grid-template-columns:repeat(2,1fr);gap:34px 18px} .logo-slot:nth-child(n+7){display:none} .pillars,.stats,.dd-cards{grid-template-columns:1fr} .foot-grid{grid-template-columns:1fr} .feature .metrics{gap:26px} .scard{width:78vw} } /* ============================================================ INTERIOR PAGES — v7 Ink Dark ------------------------------------------------------------ Everything below styles the generated interior pages (build.py -> lab-inbeat//). The homepage above is hand-built; nothing here is allowed to change it. Measured on black-n-orange.com's interior service pages (2026-07-21, viewport 1280): - section padding 92px top / 58px bottom, 50px side - prose column max-width ~760px, body 18.6px / 1.40 - content cards 8px radius (NOT the 24px hero radius) - cards alternate #EBEAE8 and orange-at-14% down the page - FAQ rows: white, 1px orange border, 8px radius - interiors run ~30% dark vs the homepage's 23% -- black is used harder here, but still as punctuation and on inbeat.agency/case-studies: - filter badges: 30px radius, 12px/24px pad, 48px tall, inactive = paper-2 fill, active = solid dark Rebuilt on STM tokens; no third-party code or assets used. ============================================================ */ /* leftovers folded down from the retired .theme-ink-dark layer */ .band-relief{background:var(--paper-2)} /* Work/insight screenshots are mostly pure white at the edge (luminance 255). Against a white canvas they would have no visible boundary at all, so every content image carries a hairline ring. */ .wcard img,.pcard img,.feature img,.dd-card img, .page-content img,.pf-card__media img,.bcard .media img{ box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)} /* aspect-ratio on an needs height:auto or the HTML height attribute wins and the image renders absurdly tall. This has bitten twice. */ .page-content img{height:auto;border-radius:var(--r-sm)} /* ---------- interior page hero ---------- Light, quiet, copy-led -- the reference's service pages open on white and save the black for further down. */ .ihero{padding:clamp(38px,4.4vw,60px) 0 clamp(30px,3.4vw,46px); border-bottom:1px solid var(--line)} .ihero-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,4vw,60px);align-items:center} .ihero-grid.is-solo{grid-template-columns:minmax(0,1fr);max-width:900px} .ihero h1{font-size:clamp(34px,4.6vw,58px);margin:18px 0 0} .ihero h1.long{font-size:clamp(30px,3.9vw,50px)} .ihero h1.longer{font-size:clamp(27px,3.3vw,42px)} .ihero .page-lede{margin-top:20px;font-size:18.5px;line-height:1.5;color:var(--body); max-width:58ch} .ihero .page-lede strong{color:var(--ink);font-weight:700} .ihero-media{border-radius:var(--r-card);overflow:hidden; box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)} .ihero-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover} /* the media slot can carry COPY instead of an image (/our-work/) */ .ihero-media--copy{border-radius:0;overflow:visible;background:none;box-shadow:none; align-self:center;display:flex;flex-direction:column;gap:14px; font-size:15px;line-height:1.62;color:var(--body)} .ihero-media--copy p{margin:0;max-width:56ch} .crumb{font-family:var(--ui);font-size:13px;letter-spacing:-.01em;color:var(--muted); margin-top:22px} .crumb a{color:var(--muted);box-shadow:inset 0 -1px 0 0 var(--line)} .crumb a:hover{color:var(--ink);box-shadow:inset 0 -1px 0 0 var(--orange)} .crumb .sep{margin:0 8px;opacity:.5} /* ---------- banded content ---------- The generator splits the page at each

and alternates the band tone, which is what produces the reference's interior rhythm. */ .iband{padding:clamp(48px,5.6vw,76px) 0} .iband--alt{background:var(--paper-2)} .iband--quiet{background:var(--paper-3)} .iband--dark{background:var(--dark);color:var(--on-dark)} .iband--dark h2,.iband--dark h3,.iband--dark h4,.iband--dark strong{color:var(--on-dark)} .iband--dark p,.iband--dark li{color:var(--on-dark-muted)} .iband--dark a{color:var(--on-dark-accent)} .iband:first-child{padding-top:clamp(40px,4.4vw,58px)} /* ---------- prose ---------- */ .page-content{font-size:17.5px;line-height:1.62;color:var(--body)} .page-content > .wrap > * + *{margin-top:20px} .page-content .wrap{max-width:var(--container)} .page-content p{max-width:70ch} .page-content a{color:var(--ink);box-shadow:inset 0 -2px 0 0 var(--orange)} .page-content a:hover{background:var(--orange-tint-2)} /* buttons are not prose links — no orange underline, no hover wash */ .page-content a.btn{box-shadow:none} .page-content a.btn:hover{background:#2A2A2A} .page-content strong{color:var(--ink);font-weight:700} .page-content ul,.page-content ol{margin:0;padding-left:22px;max-width:70ch} .page-content li{margin-bottom:8px} .page-content li::marker{color:var(--orange)} .page-content h3{font-family:var(--ui);font-weight:600;font-size:21px; letter-spacing:-.02em;line-height:1.28;margin-top:34px} .page-content h4{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.015em} .page-content small{font-size:13.5px;color:var(--muted)} .page-content .center{text-align:center} .page-content .grey,.page-content .gray{color:var(--muted)} .page-content .clearfix::after{content:"";display:table;clear:both} /* section heading -- the h2 that opens each band */ .subhead{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase; letter-spacing:.012em;line-height:1.05;color:var(--ink); font-size:clamp(26px,3.1vw,40px);margin:0 0 26px} .iband--dark .subhead{color:var(--on-dark)} /* Section-intro treatment (Brandon 2026-07-22, universal rule): the line of copy that directly follows a subhead reads darker than body text — full ink — and gets breathing room beneath it before the next element. One selector sweeps every page, including ones not yet rebuilt on v7. */ .page-content h2.subhead + p{color:var(--ink);margin-bottom:34px} .iband--dark h2.subhead + p{color:var(--on-dark)} /* lede paragraphs */ .lead,.rich-lede,.page-lede{font-size:19px;line-height:1.5;color:var(--body);max-width:62ch} .lead strong,.rich-lede strong,.page-lede strong{color:var(--ink);font-weight:700} /* ---------- svc-grid / svc-feature ---------- The reference alternates a neutral card and an orange-tinted card down the list; nth-child does that here without touching the content markup. */ .svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:none} .svc-feature{background:var(--paper-2);border-radius:var(--r-sm);padding:22px 22px 24px} .svc-feature:nth-child(2n){background:var(--orange-tint)} .svc-feature strong{display:block;font-family:var(--ui);font-weight:600;font-size:16.5px; letter-spacing:-.015em;color:var(--ink);margin-bottom:6px} .svc-feature span{display:block;font-size:14.5px;line-height:1.55;color:var(--body)} .iband--alt .svc-feature{background:var(--card)} .iband--alt .svc-feature:nth-child(2n){background:var(--orange-tint)} /* ---------- numbered process flow ---------- */ .svc-flow{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .svc-flow__step{background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);padding:22px 20px 24px} .iband--alt .svc-flow__step{border-color:transparent} .svc-flow__num{display:block;font-family:'Anton',sans-serif;font-size:30px;line-height:1; color:var(--ink);margin-bottom:12px; /* the orange is a rule under the number, never the number itself */ box-shadow:inset 0 -3px 0 0 var(--orange);width:max-content;padding-bottom:2px} .svc-flow__step strong{display:block;font-family:var(--ui);font-weight:600;font-size:16px; letter-spacing:-.015em;color:var(--ink);margin-bottom:6px} .svc-flow__step p{font-size:14.5px;line-height:1.55;margin:0} /* ---------- two-speed note ---------- */ .svc-ai{background:var(--dark);color:var(--on-dark);border-radius:var(--r-card); padding:clamp(28px,3.4vw,44px)} .svc-ai p{color:var(--on-dark-muted);max-width:78ch} .svc-ai strong{color:var(--on-dark)} .svc-ai .pill{background:rgba(238,127,0,.16);color:var(--on-dark-accent);border-color:transparent} /* ---------- pills / labels ---------- */ .pill{display:inline-block;font-family:var(--ui);font-weight:500;font-size:12px; letter-spacing:.02em;text-transform:uppercase;color:var(--ink); background:var(--accent-soft);border:1px solid var(--line); border-radius:var(--r-pill);padding:5px 13px} /* ---------- cross-links ---------- */ .svc-cross{display:flex;flex-wrap:wrap;gap:10px;margin-top:36px; padding-top:26px;border-top:1px solid var(--line)} .svc-cross a{font-family:var(--ui);font-weight:500;font-size:14.5px;letter-spacing:-.01em; color:var(--ink);background:var(--paper-2);border-radius:var(--r-pill); padding:10px 20px;box-shadow:none;transition:background .16s,color .16s} .svc-cross a:hover{background:var(--dark);color:var(--on-dark)} /* :not(:hover) — this rule ties on specificity with .svc-cross a:hover and comes later, so without it the hover state never paints on alt bands */ .iband--alt .svc-cross a:not(:hover){background:var(--card)} /* ---------- proof band ---------- Brand colours as NUMBERS. This is the one place they can be used literally, because the band is black: teal 11.07:1, orange 7.67:1, gold 13.04:1. On a light band all three fail, which is exactly why this band is black. */ .proof-band{background:var(--dark);color:var(--on-dark);border-radius:var(--r-card); padding:clamp(30px,3.4vw,44px) clamp(24px,3vw,40px); display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,40px)} .proof-band__s{border-top:1px solid var(--line-dark);padding-top:20px} .proof-band .n{display:block;font-family:'Anton',sans-serif;font-size:clamp(30px,3.4vw,46px); line-height:1;color:var(--on-dark);font-variant-numeric:tabular-nums} .proof-band .l{display:block;font-family:var(--ui);font-size:13.5px;letter-spacing:-.01em; color:var(--on-dark-muted);margin-top:10px;line-height:1.4} .proof-band .is-teal .n{color:var(--teal)} .proof-band .is-orange .n{color:var(--orange)} .proof-band .is-gold .n{color:var(--gold)} .proof-band .is-white .n{color:var(--on-dark)} /* ---------- result cards ---------- */ .result-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .result-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:26px 24px} .result-card .big{display:block;font-family:'Anton',sans-serif;font-size:44px;line-height:1; color:var(--ink);font-variant-numeric:tabular-nums} .result-card .cap{display:block;font-family:var(--ui);font-size:14px;letter-spacing:-.01em; color:var(--body);margin-top:12px;line-height:1.45} .result-card .who{display:block;font-size:13px;color:var(--muted);margin-top:10px; padding-top:10px;border-top:1px solid var(--line)} /* case-study stat cards: the result-card pattern, linkable. The stat is black on white — brand colours stay decorative here (the rule under .who). */ a.result-card{display:block;color:var(--body);box-shadow:none; transition:transform .2s,box-shadow .2s,border-color .2s} a.result-card:hover{transform:translateY(-4px);box-shadow:var(--shadow); border-color:transparent;background:var(--card)} .result-card--link .who{color:var(--ink);font-weight:500; border-top:2px solid var(--orange)} .result-cards--cases{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){.result-cards--cases{grid-template-columns:1fr 1fr}} @media (max-width:720px){.result-cards--cases{grid-template-columns:1fr}} /* the case-study page's headline band: same proof-band, stats can run larger because there are only three */ .proof-band--case{grid-template-columns:repeat(3,1fr);margin:6px 0 10px} .proof-band--case .n{font-size:clamp(34px,4vw,54px)} @media (max-width:720px){.proof-band--case{grid-template-columns:1fr}} /* ---------- case study: client logo, prominent in the hero ---------- Brandon 2026-07-22: the case pages sell STM's capability AND the calibre of client — the mark leads. Cut marks are dark ink on transparent; full colour, no grayscale here (this page is ABOUT them). */ .hero-clientlogo{height:64px;width:auto;max-width:260px;object-fit:contain; margin-bottom:18px} @media (max-width:560px){.hero-clientlogo{height:52px}} /* ---------- case study: hero chips ---------- */ .hero-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .hero-chips .chip{transition:background .16s,color .16s} .hero-chips .chip:hover{background:var(--dark);color:var(--on-dark)} /* ---------- case study: story split (image left, copy right) ---------- */ .case-story{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:clamp(26px,3.6vw,56px);align-items:start} .case-story__media{position:sticky;top:116px;border-radius:var(--r-card); overflow:hidden;box-shadow:inset 0 0 0 1px rgba(17,17,17,.14)} .case-story__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover; border-radius:0;box-shadow:none} .case-story__copy p{max-width:64ch} .case-story__copy p + p{margin-top:18px} @media (max-width:920px){ .case-story{grid-template-columns:1fr} .case-story__media{position:static;max-width:560px} } /* ---------- case study: process as a dark summary band ---------- Same facts as the Big Picture columns, deliberately different clothes — the homepage darkcard/trio grammar with big numerals, so it reads as a closing summary instead of an echo. */ .case-flow .trio > div{border-top:1px solid var(--line-dark);padding-top:22px} .case-flow__num{display:block;font-family:'Anton',sans-serif;font-size:30px; line-height:1;color:var(--on-dark-accent);margin-bottom:12px; font-variant-numeric:tabular-nums} .case-flow .trio h3{font-size:clamp(18px,1.9vw,22px)} /* ---------- case-study cards (insights-style, stat badge) ---------- */ /* (stat-badge overrides live BELOW the .bcard .date base rules — they tie on specificity, so file order decides; see the case-card block further down) */ /* ---------- quick contact on case pages ---------- */ .lead-form--quick{max-width:720px} .lead-form__intro{font-size:15.5px;line-height:1.6;color:var(--body); margin-bottom:18px;max-width:60ch} /* ---------- case study: Key Challenges / Results / Services ---------- The WitGroup reference's three-column band, on v7 tokens: columns with a top rule, Inter heads, orange markers. */ .kx-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px)} .kx-col{border-top:1px solid var(--line);padding-top:18px} /* icon chips — identical across every case study. Tint is a brand-colour FILL (legal on light); the stroke stays ink. */ .kx-ico{display:grid;place-items:center;width:44px;height:44px;border-radius:12px; margin-bottom:14px;color:var(--ink)} .kx-ico svg{width:22px;height:22px} .kx-ico--challenge{background:var(--orange-tint)} .kx-ico--results{background:rgba(102,204,204,.22)} .kx-ico--services{background:rgba(252,196,0,.24)} .kx-col h3{font-family:var(--ui);font-weight:600;font-size:16px;letter-spacing:-.015em; color:var(--ink);margin:0 0 12px} .kx-col ul{list-style:none;padding:0;margin:0} .kx-col li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.55; margin-bottom:9px;color:var(--body)} .kx-col li::before{content:"";position:absolute;left:0;top:.6em;width:8px;height:8px; border-radius:50%;background:var(--orange)} /* results column gets teal markers so the three columns scan apart */ .kx-col:nth-child(2) li::before{background:var(--teal)} .svc-flow--3{grid-template-columns:repeat(3,1fr)} @media (max-width:1080px){.kx-cols{grid-template-columns:1fr}} @media (max-width:720px){.svc-flow--3{grid-template-columns:1fr}} /* ---------- them / us comparison ---------- */ .compare{display:grid;grid-template-columns:1fr 1fr;gap:16px} .compare__c{border-radius:var(--r-sm);padding:26px 26px 28px} /* clean() rewrites every

to

to keep the heading order valid, so these components must be selected on BOTH tags — matching only h4 left the comparison card's heading at the default black, on a black card. */ .compare__c h3,.compare__c h4{font-family:var(--ui);font-weight:600;font-size:17px; letter-spacing:-.015em;margin:0 0 14px} .compare__c ul{padding-left:20px;margin:0} .compare__c li{font-size:15px;line-height:1.55} .compare__c--them{background:var(--paper-2)} .compare__c--them li::marker{color:var(--muted)} .compare__c--them h4,.compare__c--them li{color:var(--muted)} .compare__c--us{background:var(--dark);color:var(--on-dark)} .compare__c--us li{color:var(--on-dark)} .compare__c--us li::marker{color:var(--on-dark-accent)} /* Catch-all for every black surface that can contain WP content: headings there must invert. Cheaper and safer than chasing each tag per component — a heading that inherits the default #000 on black is invisible, and the content markup is not stable enough to enumerate. */ .compare__c--us,.psolve__col--s,.svc-ai,.funnel-ai,.project-quote, .proof-band,.plan-card--featured,.iband--dark,.darkcard{ --surface-dark:1} :is(.compare__c--us,.psolve__col--s,.svc-ai,.funnel-ai,.project-quote, .proof-band,.plan-card--featured,.iband--dark,.darkcard) :is(h1,h2,h3,h4,strong,b){ color:var(--on-dark)} /* links on those surfaces take the orange — 7.67:1 on black, and the only place in the palette a brand colour may legally carry text */ :is(.compare__c--us,.psolve__col--s,.svc-ai,.funnel-ai,.project-quote, .proof-band,.plan-card--featured,.iband--dark,.darkcard) a:not(.btn){ color:var(--on-dark-accent);box-shadow:none} /* ---------- problem / solution ---------- */ .psolve{display:grid;grid-template-columns:1fr 1fr;gap:16px} .psolve__col{border-radius:var(--r-sm);padding:26px 26px 28px;background:var(--paper-2)} .psolve__col h3{margin-top:0;margin-bottom:14px;font-size:18px} .psolve__col ul{padding-left:20px} .psolve__col li{font-size:15px;line-height:1.55} .psolve__col--p{color:var(--muted)} .psolve__col--p h3{color:var(--muted)} .psolve__col--s{background:var(--dark);color:var(--on-dark)} .psolve__col--s h3{color:var(--on-dark)} .psolve__col--s li{color:var(--on-dark)} .psolve__col--s li::marker{color:var(--on-dark-accent)} .iband--alt .psolve__col--p{background:var(--card)} /* ---------- alternating feature rows ---------- */ .feature-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(26px,3.6vw,56px);align-items:center;margin-top:40px} .feature-row--flip .feature-row__body{order:2} .feature-row__eyebrow{font-family:var(--ui);font-weight:500;font-size:13px; letter-spacing:-.01em;color:var(--muted);display:inline-flex;align-items:center;gap:9px} .feature-row__eyebrow::before{content:"";width:22px;height:1px;background:var(--orange)} .feature-row__body h3{margin-top:12px;font-size:clamp(21px,2.4vw,28px)} .feature-row__list{padding-left:20px;margin-top:16px} .feature-row__list li{font-size:15px} .feature-row__media{border-radius:var(--r-card);overflow:hidden;background:var(--paper-2); display:grid;place-items:center;min-height:240px;padding:28px} .feature-row__media svg{max-width:100%;height:auto} .feature-row__media--teal{background:rgba(102,204,204,.16)} .feature-row__media--orange{background:var(--orange-tint)} .feature-row__media--gold{background:rgba(252,196,0,.16)} .feature-row__badge{display:inline-block;font-family:var(--ui);font-weight:600;font-size:12px; letter-spacing:.02em;text-transform:uppercase;color:var(--ink); background:var(--card);border-radius:var(--r-pill);padding:5px 13px} /* ---------- funnel ---------- The content sets --accent inline per card (gold/teal/orange). It is used ONLY as the decorative top rule -- never as text, which would fail on white. */ .funnel{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .funnel-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:24px 22px 26px;border-top:3px solid var(--accent)} .funnel-card__num{display:block;font-family:var(--ui);font-weight:600;font-size:12.5px; letter-spacing:.06em;color:var(--muted)} .funnel-card__name{font-family:var(--ui);font-weight:600;font-size:19px;letter-spacing:-.02em; color:var(--ink);margin:8px 0 8px} .funnel-card p{font-size:14.5px;color:var(--body);margin:0} .funnel-ai{margin-top:16px;background:var(--dark);color:var(--on-dark-muted); border-radius:var(--r-sm);padding:22px 26px} .funnel-ai p{color:var(--on-dark-muted)} .funnel-ai strong{color:var(--on-dark-accent)} /* ---------- plans ---------- */ .plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch} .plan-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:26px 24px 28px;position:relative;display:flex;flex-direction:column} .iband--alt .plan-card:not(.plan-card--featured){border-color:transparent} .plan-card--featured{background:var(--dark);color:var(--on-dark);border-color:var(--dark)} .plan-card__badge{position:absolute;top:-11px;left:24px;font-family:var(--ui);font-weight:600; font-size:11.5px;letter-spacing:.04em;text-transform:uppercase; background:var(--orange);color:#111111;border-radius:var(--r-pill);padding:4px 12px} .plan-card__name{font-family:var(--ui);font-weight:600;font-size:19px;letter-spacing:-.02em; color:var(--ink)} .plan-card--featured .plan-card__name{color:var(--on-dark)} .plan-card__blurb{font-size:14px;color:var(--muted);margin-top:4px;min-height:2.8em} .plan-card--featured .plan-card__blurb{color:var(--on-dark-muted)} .plan-card__price{font-family:'Anton',sans-serif;font-size:38px;line-height:1;color:var(--ink); margin:16px 0 4px;font-variant-numeric:tabular-nums} .plan-card--featured .plan-card__price{color:var(--on-dark-accent)} .plan-card__price small{font-family:var(--ui);font-size:14px;font-weight:500;color:var(--muted)} .plan-card--featured .plan-card__price small{color:var(--on-dark-muted)} /* the save-vs-à-la-carte line is a selling point, not a footnote (Brandon 2026-07-22) — a bold chip; orange is a FILL here, which is legal on light */ .plan-card__value{display:inline-block;background:var(--orange-tint);color:var(--ink); font-family:var(--ui);font-weight:600;font-size:14.5px;letter-spacing:-.01em; padding:6px 12px;border-radius:8px;margin-bottom:16px} .plan-card--featured .plan-card__value{background:rgba(238,127,0,.22);color:var(--on-dark)} .plan-card__features{list-style:none;padding:0;margin:16px 0 20px;flex:1} .plan-card__features li{position:relative;padding-left:22px;font-size:14.5px;line-height:1.5} .plan-card__features li::before{content:"";position:absolute;left:0;top:.62em; width:9px;height:9px;border-radius:50%;background:var(--orange)} .plan-card--featured .plan-card__features li{color:var(--on-dark)} .plan-card--featured .btn.btn--primary{background:#FFFFFF;color:#000000} .plan-card--featured .btn.btn--primary:hover{background:var(--orange);color:#111111} .plans-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch; border:1px solid var(--line);border-radius:var(--r-sm)} .plans-table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.5px} .plans-table th,.plans-table td{padding:13px 16px;text-align:left; border-bottom:1px solid var(--line)} .plans-table thead th{font-family:var(--ui);font-weight:600;font-size:13px; letter-spacing:-.01em;color:var(--on-dark);background:var(--dark)} .plans-table tbody th{font-family:var(--ui);font-weight:500;color:var(--ink); background:var(--paper-2)} .plans-table td{color:var(--body)} .plans-table .p-price{font-family:var(--ui);font-weight:600;color:var(--ink)} .plans-table .yes{color:var(--ink);font-weight:700} .plans-table .no{color:var(--muted)} .plans-table tr:last-child th,.plans-table tr:last-child td{border-bottom:0} /* ---------- service v2 (Hawksem pattern): what's included ---------- */ .inc-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .inc-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:24px 24px 26px;position:relative} .iband--alt .inc-card{border-color:transparent} .inc-card__num{display:inline-grid;place-items:center;width:38px;height:38px; border-radius:10px;background:var(--orange-tint);font-family:'Anton',sans-serif; font-size:17px;color:var(--ink);margin-bottom:14px} .inc-card:nth-child(4n+2) .inc-card__num{background:rgba(102,204,204,.22)} .inc-card:nth-child(4n+3) .inc-card__num{background:rgba(252,196,0,.24)} .inc-card h3{font-family:var(--ui);font-weight:600;font-size:17.5px;letter-spacing:-.02em; margin:0 0 8px} .inc-card p{font-size:14.5px;line-height:1.6;color:var(--body);max-width:none} /* pillar-hub variant: the numbered card is a link to the service page. ⚠ .page-content a (one class + one type) outranks a lone .inc-card--link, so the resets below carry .page-content too — the .btn--primary trap. */ .page-content a.inc-card{box-shadow:none;color:var(--body); transition:border-color .16s,box-shadow .16s} .page-content a.inc-card:hover{background:var(--card);border-color:var(--ink); box-shadow:var(--shadow)} .inc-card .golink{display:inline-block;margin-top:12px;font-size:14px} /* ---------- service v2: dark pricing band ---------- */ .price-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.6vw,40px); position:relative} .price-card{border-top:1px solid var(--line-dark);padding-top:20px} .price-card b{display:block;font-family:'Anton',sans-serif;font-weight:400; font-size:clamp(24px,2.6vw,34px);line-height:1.1;color:var(--on-dark-accent)} .price-card__label{display:block;font-family:var(--ui);font-weight:600;font-size:13px; letter-spacing:.04em;text-transform:uppercase;color:var(--on-dark);margin:10px 0 8px} .price-card p{font-size:14.5px;line-height:1.6;color:var(--on-dark-muted)} /* the intro line lives inside the black box, bold white (Brandon 2026-07-22). ⚠ .darkcard p (0,1,1) paints muted; two classes here beat it back. */ .price-band .price-band__intro{color:#FFFFFF;font-weight:600;font-size:18.5px; line-height:1.6;max-width:820px;margin:0 0 30px;position:relative} .price-band__foot{margin-top:26px;padding-top:20px;border-top:1px solid var(--line-dark); display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap; font-family:var(--ui);font-size:14px;color:var(--on-dark-muted);position:relative} .price-band__foot p{color:var(--on-dark-muted);margin:0} /* the see-plans CTA button. ⚠ .page-content a.btn:hover (0,3,1) would paint the hover #2A2A2A under black text — the .btn--primary trap again, so the overrides here carry enough classes to win both states. */ .price-band .btn.btn--on-dark{background:#FFFFFF;color:#000000} .price-band .btn.btn--on-dark:hover{background:var(--cta);color:#000000} /* ---------- /plans/: the monthly-report band tiers ---------- */ .report-tiers{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,40px); position:relative} .report-tiers > div{border-top:1px solid var(--line-dark);padding-top:20px} .report-tiers h3{font-family:var(--ui);font-weight:600;font-size:13px; letter-spacing:.04em;text-transform:uppercase;margin:0 0 8px} .report-tiers p{font-size:14.5px;line-height:1.6;color:var(--on-dark-muted);max-width:none} @media (max-width:720px){.report-tiers{grid-template-columns:1fr}} /* ---------- service v2: phase timing tag ---------- */ .phase-when{font-style:normal;font-family:var(--ui);font-weight:500;font-size:12.5px; color:var(--muted);margin-left:8px} /* ---------- service v2: who-we-help verticals (dark) ---------- */ .vert-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative} .vert-cell{display:block;border:1px solid var(--line-dark);border-radius:var(--r-sm); padding:18px 18px 20px;color:var(--on-dark); transition:border-color .16s,background .16s} a.vert-cell:hover{border-color:var(--on-dark-accent);background:rgba(238,127,0,.08)} .vert-cell h3{font-family:var(--ui);font-weight:600;font-size:15.5px;letter-spacing:-.015em; color:var(--on-dark);margin:0 0 6px} .vert-cell p{font-size:13.5px;line-height:1.5;color:var(--on-dark-muted)} .vert-cell .golink{margin-top:12px;font-size:13.5px} .golink--on-dark{color:var(--on-dark);box-shadow:inset 0 -2px 0 0 var(--on-dark-accent)} @media (max-width:1080px){.vert-grid{grid-template-columns:1fr 1fr}} @media (max-width:720px){.inc-grid,.price-cards,.vert-grid{grid-template-columns:1fr}} /* ---------- notes, placeholders, quotes ---------- */ .note-band{background:var(--orange-tint);border-radius:var(--r-sm); padding:16px 20px;font-size:14.5px;line-height:1.55;color:var(--ink);max-width:none} .note-band strong{font-weight:700} .placeholder-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .ph-card{background:var(--paper-2);border-radius:var(--r-sm);padding:22px 22px 24px} .iband--alt .ph-card{background:var(--card)} .ph-card strong{display:block;font-family:var(--ui);font-weight:600;font-size:16px; letter-spacing:-.015em;color:var(--ink)} .ph-card span{display:block;font-size:14px;color:var(--muted);margin-top:3px} .ph-card em{display:block;font-style:normal;font-family:var(--ui);font-weight:500;font-size:14px; color:var(--ink);margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .project-quote{margin:0;background:var(--dark);color:var(--on-dark); border-radius:var(--r-card);padding:clamp(30px,3.6vw,48px)} .project-quote p{font-size:clamp(19px,2.1vw,25px);line-height:1.45;color:var(--on-dark); max-width:44ch} .project-quote cite,.project-quote footer{display:block;font-style:normal;font-family:var(--ui); font-size:14px;color:var(--on-dark-muted);margin-top:18px} /* ---------- website grader ---------- */ .grader-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:26px;max-width:520px} .grader-card__head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding-bottom:18px;border-bottom:1px solid var(--line)} .grader-card__head strong{font-family:var(--ui);font-weight:600;font-size:16px} .grader-card ul{list-style:none;padding:0;margin:18px 0 0} .grader-card li{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:11px 0;border-bottom:1px solid var(--line);font-size:15px} .grader-card li:last-child{border-bottom:0} .grade{display:inline-grid;place-items:center;min-width:34px;height:34px;padding:0 8px; border-radius:var(--r-sm);font-family:var(--ui);font-weight:700;font-size:15px; background:var(--paper-2);color:var(--ink)} .grade--big{min-width:60px;height:60px;font-size:26px} /* grade tints are FILLS with near-black labels -- a grade letter set in a brand colour on white would fail AA */ .grade--a{background:rgba(102,204,204,.30)} .grade--b{background:rgba(102,204,204,.18)} .grade--c{background:rgba(252,196,0,.30)} .grade--d{background:var(--orange-tint)} .grade--f{background:var(--dark);color:var(--on-dark)} /* ---------- contact ---------- */ .contact-steps{counter-reset:cs;list-style:none;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .contact-steps li{counter-increment:cs;background:var(--paper-2);border-radius:var(--r-sm); padding:22px 22px 24px;font-size:15px;line-height:1.55} .contact-steps li::before{content:counter(cs,decimal-leading-zero);display:block; font-family:'Anton',sans-serif;font-size:26px;color:var(--ink);margin-bottom:10px; box-shadow:inset 0 -3px 0 0 var(--orange);width:max-content} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px} .contact-tile{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); overflow:hidden} .contact-tile .cap{display:flex;justify-content:space-between;gap:14px; font-family:var(--ui);font-size:12.5px;letter-spacing:-.01em;color:var(--muted); padding:12px 22px;background:var(--paper-2);border-bottom:1px solid var(--line)} .contact-tile__body{padding:24px 22px 26px} .contact-big{display:inline-block;font-family:var(--ui);font-weight:600; font-size:clamp(19px,2.1vw,24px);letter-spacing:-.02em;color:var(--ink); box-shadow:inset 0 -2px 0 0 var(--orange);word-break:break-word} .contact-tile__body p{font-size:14.5px;color:var(--muted);margin-top:10px} .contact-info{font-size:15px} /* ---------- lead form ---------- */ .lead-form{background:var(--paper-2);border-radius:var(--r-card); padding:clamp(26px,3.2vw,40px);max-width:820px} .iband--alt .lead-form{background:var(--card)} .lead-form__row{display:grid;grid-template-columns:1fr 1fr;gap:16px} .lead-form label{display:block;font-family:var(--ui);font-weight:500;font-size:14px; letter-spacing:-.01em;color:var(--ink);margin-bottom:16px} .lead-form label em{font-style:normal;font-weight:400;color:var(--muted)} .lead-form input,.lead-form textarea{display:block;width:100%;margin-top:7px; font-family:'DM Sans',sans-serif;font-size:16px;color:var(--ink); background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm); padding:12px 14px;transition:border-color .16s,box-shadow .16s} .lead-form input:focus,.lead-form textarea:focus{outline:0;border-color:var(--ink); box-shadow:0 0 0 3px var(--orange-tint)} .lead-form textarea{resize:vertical} .lead-form select{display:block;width:100%;margin-top:7px;font:inherit;font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink)} .lead-form select:focus{outline:0;border-color:var(--ink)} .lead-form__qual{border:1px dashed var(--line);border-radius:12px;padding:14px 16px 4px;margin:6px 0 14px} .lead-form__qual legend{font-family:var(--ui);font-weight:600;font-size:14px;padding:0 6px} .lead-form__qual legend em{font-style:normal;font-weight:400;color:var(--muted)} .lead-form__qual label{margin-bottom:12px} .lead-form__qual-toggle{margin:0 0 12px} .lead-form__qual-toggle .linkbtn{background:none;border:0;padding:0;font-family:var(--ui);font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer} .lead-form__qual-toggle .linkbtn em{font-style:normal;color:var(--muted)} .lead-form__hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0} .lead-form__actions{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-top:8px} .lead-form__note{font-family:var(--ui);font-size:13px;color:var(--muted)} .lead-form__status{margin-top:14px;font-size:14.5px} .lead-form__status.is-err{color:#B3261E} /* ---------- portfolio: filter badges + grid ---------- Badge geometry measured on inbeat.agency/case-studies: 30px radius, 12px/24px padding, 48px tall, inactive on the paper-2 fill, active solid dark. */ .pf-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:30px} .pf-filter button{font-family:var(--ui);font-weight:500;font-size:14px;letter-spacing:-.01em; color:var(--ink);background:var(--paper-2);border:1px solid transparent; border-radius:30px;padding:12px 24px;cursor:pointer; transition:background .16s,color .16s,border-color .16s} .pf-filter button:hover{border-color:var(--ink)} .pf-filter button.is-on{background:var(--dark);color:var(--on-dark);border-color:var(--dark)} /* same tie as .svc-cross above: without :not(.is-on) the selected filter badge kept color:#fff but lost its black fill — white text on white */ .iband--alt .pf-filter button:not(.is-on){background:var(--card)} .pf-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .pf-card{margin:0;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden; transition:transform .2s,box-shadow .2s} .pf-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .pf-card__media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover; border-radius:0} .pf-card__body{padding:20px 22px 22px} .pf-card h3{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em; margin:0 0 8px;line-height:1.3} .pf-card__meta{display:block;font-family:var(--ui);font-size:13px;letter-spacing:-.01em; color:var(--muted)} .pf-card__result{display:inline-block;margin-top:12px;font-family:var(--ui);font-weight:500; font-size:13px;color:var(--ink);background:var(--orange-tint); border-radius:var(--r-pill);padding:5px 13px} /* ---------- case-study wall (/our-work/) ---------- Rebuilt from inbeat.agency/case-studies, which Evans picked. Measured on that page at 1280: 4-up grid, 14px gap, cards 299x450 (ratio .665), 14px radius, overflow hidden, full-bleed image behind a bottom scrim, and a caption translated down by the height of its result badge that slides up on hover. The slide-up here is a 0fr -> 1fr grid row rather than a measured pixel translate: the revealed line wraps to two lines on the longer client names, and a fixed translate would clip them. Rebuilt on STM tokens; no third-party code or assets used. */ .cs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .cs-card{position:relative;margin:0;aspect-ratio:299/450;border-radius:14px; overflow:hidden;background:var(--paper-2);isolation:isolate} /* ⚠ must be .cs-card .cs-shot, not .cs-shot: `.page-content img` is one class plus one type and outranks a lone class, so height:auto and the 10px prose radius were beating this and the image sat at its natural ratio inside the card instead of filling it. Same trap that hid .btn--primary. */ .cs-card .cs-shot{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; border-radius:0;box-shadow:none;transition:transform .5s cubic-bezier(.4,0,.2,1)} .cs-card:hover .cs-shot{transform:scale(1.04)} /* the scrim has to sit ABOVE the image and below the caption, hence z-index and the isolation on the card */ .cs-card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(to top,rgba(0,0,0,.93),rgba(0,0,0,.62) 38%, rgba(0,0,0,.12) 68%,rgba(0,0,0,0))} .cs-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:18px} .cs-body h3{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em; line-height:1.28;color:var(--on-dark);margin:0} /* The reveal — a max-height transition, verified in place: 0 collapsed, 50px revealed on the current captions. The ceiling only has to exceed the tallest caption. The box clips to its natural height, so the overshoot costs nothing visually; it only means the easing curve is sampled over a longer nominal range. ⚠ Measuring this needs `*{transition:none!important}` injected first. The browser pane throttles the tab, so a transition never advances and every read comes back as the start-of-transition value — a live max-height reveal measures 0 and looks like a broken rule. That cost a full debugging detour here; the 0fr -> 1fr grid variant was blamed and swapped out before the throttling was spotted. */ .cs-reveal{overflow:hidden;max-height:0; transition:max-height .32s cubic-bezier(.4,0,.2,1)} .cs-card:hover .cs-reveal,.cs-card:focus-within .cs-reveal{max-height:140px} .cs-meta{display:block;font-family:var(--ui);font-size:12.5px;letter-spacing:-.01em; color:var(--on-dark-muted);padding-top:9px} .cs-result{display:inline-block;margin-top:10px;font-family:var(--ui);font-weight:500; font-size:12px;letter-spacing:-.01em;color:#111111;background:var(--orange); border-radius:var(--r-pill);padding:4px 12px} /* the "Read the case study" chip on linked wall cards — white pill so it reads as navigation, not a result claim */ .cs-result--go{background:#FFFFFF;color:#111111;margin-left:8px} /* the logo slot, ready for when Brandon clears client-logo usage. The cut marks are DARK ink for light backgrounds, so they need knocking out to read over the scrim. */ .cs-logo{width:auto;max-height:26px;max-width:60%;margin-bottom:10px;opacity:.55; filter:brightness(0) invert(1);transition:opacity .3s;box-shadow:none} .cs-card:hover .cs-logo{opacity:1} /* Touch has no hover, and reduced motion should not gate content behind an animation — in both cases the reveal is simply always open. */ @media (hover:none){ .cs-reveal{max-height:140px} } @media (prefers-reduced-motion:reduce){ .cs-reveal{max-height:140px;transition:none} .cs-shot,.cs-card:hover .cs-shot{transition:none;transform:none} } /* the widget variant sits inside a prose band, so it runs a touch smaller and never more than four across */ .cs-grid--widget{grid-template-columns:repeat(4,1fr)} .cs-grid--widget .cs-card{aspect-ratio:1/1} @media (max-width:1080px){.cs-grid{grid-template-columns:repeat(3,1fr)}} @media (max-width:820px){.cs-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){ .cs-grid{grid-template-columns:1fr;gap:16px} .cs-card{aspect-ratio:4/3} } /* ---------- insights index + article ---------- */ .cards3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .bcard{display:block;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden;box-shadow:none; transition:transform .2s,box-shadow .2s} .bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);background:var(--card)} .bcard :is(h2,h3){font-family:var(--ui);font-weight:600;font-size:17.5px;letter-spacing:-.02em; line-height:1.32;padding:22px 22px 16px;margin:0} .bcard .media{position:relative} .bcard .media img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:0} .bcard .date{position:absolute;left:16px;bottom:16px;display:grid;place-items:center; width:56px;height:56px;background:var(--dark);color:var(--on-dark);border-radius:var(--r-sm); font-family:var(--ui);line-height:1.1} .bcard .date b{font-size:19px;font-weight:600} .bcard .date span{font-size:11px;letter-spacing:.06em;color:var(--on-dark-accent)} /* stat badge REVERSED per Brandon 2026-07-22: the black date square clipped wide stats ("599%", "13 yrs"). Now a white horizontal pill, black copy, auto width — ringed so it holds its edge over white-background images. ⚠ Must sit AFTER the .bcard .date base rules: (0,2,0) ties (0,2,0). */ .bcard .date--stat{width:auto;height:auto;min-width:0;padding:9px 16px; background:var(--card);color:var(--ink);border-radius:10px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14),0 4px 14px rgba(0,0,0,.18)} .bcard .date--stat b{font-size:18px;letter-spacing:-.01em;white-space:nowrap; color:var(--ink)} .bcard .body{padding:18px 22px 22px} .bcard .body p{font-size:14.5px;color:var(--body);margin-bottom:14px} .post-meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px} .article{max-width:74ch;font-size:18px;line-height:1.68} .article > * + *{margin-top:22px} .article h2{font-family:var(--ui);font-weight:600;font-size:clamp(22px,2.4vw,29px); letter-spacing:-.02em;line-height:1.25;margin-top:44px} .article h3{font-size:20px;margin-top:34px} .article blockquote{margin:0;padding:4px 0 4px 24px;border-left:3px solid var(--orange); font-size:19px;line-height:1.5;color:var(--ink)} .article img{border-radius:var(--r-sm)} /* ---------- generic card grids from the WP content ---------- */ .page-content .grid{display:grid;gap:16px} .page-content .grid--3{grid-template-columns:repeat(3,1fr)} .page-content .card{display:block;background:var(--card);border:1px solid var(--line); border-radius:var(--r-sm);padding:24px 22px 26px;box-shadow:none; transition:transform .2s,box-shadow .2s,border-color .2s} .page-content a.card{color:var(--body)} .page-content a.card:hover{transform:translateY(-4px);box-shadow:var(--shadow); border-color:transparent;background:var(--card)} .iband--alt .card{border-color:transparent} .card__title{font-family:var(--ui);font-weight:600;font-size:18px;letter-spacing:-.02em; color:var(--ink);margin:0 0 8px} .card__text{font-size:14.5px;line-height:1.55;color:var(--body);max-width:none} .card__more{display:inline-block;margin-top:16px;font-family:var(--ui);font-weight:500; font-size:14px;letter-spacing:-.01em;color:var(--ink); box-shadow:inset 0 -2px 0 0 var(--orange)} .service-card__icon{display:block;width:34px;height:3px;background:var(--orange); margin-bottom:16px} /* ---------- interior accordions ---------- /plans/ ships two
families that the homepage FAQ rules don't reach: .faq-list (the six real answers) and .svcx (the ten line-item explainers). Both take the reference's interior FAQ treatment, measured on black-n-orange.com: white row, 1px ORANGE border, 8px radius. Orange as a border is legal on light; orange as the label text would not be. */ .faq-list details,.svcx{background:var(--card);border:1px solid var(--orange); border-radius:var(--r-sm);margin-bottom:10px} .iband--alt .faq-list details,.iband--alt .svcx{background:var(--card)} .faq-list summary,.svcx > summary{list-style:none;cursor:pointer;position:relative; padding:18px 52px 18px 22px; font-family:var(--ui);font-weight:500;font-size:16.5px;letter-spacing:-.015em; color:var(--ink)} .faq-list summary::-webkit-details-marker, .svcx > summary::-webkit-details-marker{display:none} .faq-list summary::after,.svcx > summary::after{content:"+";position:absolute; right:20px;top:50%;transform:translateY(-50%); font-family:var(--ui);font-weight:400;font-size:24px;line-height:1;color:var(--ink)} .faq-list details[open] summary::after,.svcx[open] > summary::after{content:"\2013"} .faq-list details[open] summary,.svcx[open] > summary{ border-bottom:1px solid var(--line)} .faq-list details > p,.faq-list details > div{padding:18px 22px 22px; font-size:15.5px;line-height:1.65;color:var(--body);margin:0;max-width:78ch} /* the line-item explainer rows carry a number, a title and a plan chip */ .svcx > summary{display:grid;grid-template-columns:auto 1fr auto;align-items:center; gap:14px} .svcx__num{font-family:'Anton',sans-serif;font-size:17px;color:var(--ink); box-shadow:inset 0 -2px 0 0 var(--orange);padding-bottom:1px} .svcx__title{font-family:var(--ui);font-weight:600;letter-spacing:-.015em} .svcx__plans{font-family:var(--ui);font-weight:500;font-size:12px;letter-spacing:.02em; text-transform:uppercase;color:var(--muted);background:var(--paper-2); border-radius:var(--r-pill);padding:5px 12px;white-space:nowrap} .svcx__body{padding:18px 22px 22px} .svcx__body > * + *{margin-top:14px} .svcx__body p{font-size:15.5px;line-height:1.65;max-width:78ch} .svcx__body ul{padding-left:20px} .svcx__body li{font-size:15px;line-height:1.55} .svcx__note{font-size:14.5px;color:var(--muted);padding-top:14px; border-top:1px solid var(--line)} .svcx__go{display:inline-block;font-family:var(--ui);font-weight:500;font-size:14.5px; letter-spacing:-.01em;color:var(--ink);box-shadow:inset 0 -2px 0 0 var(--orange)} @media (max-width:720px){ .svcx > summary{grid-template-columns:auto 1fr;row-gap:8px} .svcx__plans{grid-column:2} } /* ---------- responsive ---------- */ @media (max-width:1080px){ .svc-grid,.svc-flow,.funnel,.plans-grid,.pf-grid,.cards3, .result-cards,.placeholder-cards,.contact-steps,.page-content .grid--3, .proof-band{grid-template-columns:1fr 1fr} .ihero-grid{grid-template-columns:1fr} .ihero-media{max-width:560px} } @media (max-width:720px){ .svc-grid,.svc-flow,.funnel,.plans-grid,.pf-grid,.cards3,.result-cards, .placeholder-cards,.contact-steps,.page-content .grid--3,.proof-band, .compare,.psolve,.contact-grid,.lead-form__row, .feature-row{grid-template-columns:1fr} .feature-row--flip .feature-row__body{order:0} .page-content{font-size:16.5px} .article{font-size:17px} } /* ---------- /our-work/: the lightbox ---------- One dialog per page, populated from the clicked card. Tall website comps keep their length and scroll inside .lb-scroll instead of shrinking to confetti; wide pieces fit the pane. */ .lb-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.78); -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .lb{position:fixed;inset:0;z-index:200;display:grid;place-items:center} .lb[hidden]{display:none} .lb-panel{position:relative;width:min(1240px,94vw);max-height:92vh; display:flex;flex-direction:column;background:var(--paper); border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(0,0,0,.5)} .lb-bar{display:flex;align-items:center;gap:18px;padding:14px 18px; border-bottom:1px solid var(--line);background:var(--paper)} .lb-cap{flex:1;min-width:0} .lb-cap b{display:block;font-family:var(--ui);font-weight:600;font-size:15.5px; letter-spacing:-.015em;color:var(--ink);white-space:nowrap;overflow:hidden; text-overflow:ellipsis} .lb-cap span{display:block;font-family:var(--ui);font-size:12.5px;color:var(--muted)} .lb-study{flex:none;font-size:13.5px} .lb-close{flex:none;width:38px;height:38px;border:1px solid var(--line); border-radius:50%;background:none;color:var(--ink);font-size:22px;line-height:1; cursor:pointer;transition:background .14s,color .14s} .lb-close:hover{background:var(--dark);color:#FFFFFF;border-color:var(--dark)} .lb-scroll{overflow:auto;-webkit-overflow-scrolling:touch;background:var(--paper-2)} .lb-scroll img{display:block;width:100%;height:auto;max-width:100%} .lb-prev,.lb-next{position:absolute;top:50%;transform:translateY(-50%); width:44px;height:44px;border-radius:50%;border:0;cursor:pointer; background:rgba(0,0,0,.72);color:#FFFFFF;font-size:19px; transition:background .14s} .lb-prev:hover,.lb-next:hover{background:var(--orange);color:#111111} .lb-prev{left:14px} .lb-next{right:14px} .lb-prev:focus-visible,.lb-next:focus-visible,.lb-close:focus-visible{ outline:2px solid var(--orange);outline-offset:2px} @media (max-width:720px){ .lb-panel{width:96vw;max-height:94vh} .lb-study{display:none} .lb-prev{left:8px}.lb-next{right:8px} } @media (prefers-reduced-motion:reduce){ .lb-backdrop{-webkit-backdrop-filter:none;backdrop-filter:none} } /* ---------- homepage: featured-case links + results-band cells ---------- Appended AFTER the dark-surface catch-all on purpose: .darkcard .stats a ties it at (0,2,1), so file order is what wins these back from orange. */ .feature-links{display:flex;flex-wrap:wrap;gap:8px 26px} .darkcard .stats a{display:block;color:inherit;box-shadow:none} .darkcard .stats a b{color:var(--on-dark);transition:color .16s} .darkcard .stats a:hover b{color:var(--on-dark-accent)} .stats a em{display:block;font-style:normal;font-family:var(--ui);font-weight:500; font-size:12.5px;color:var(--on-dark-accent);margin-top:8px} /* ---------- research modules (2026-08-09 service-page content project) ---------- Optional per-service blocks rendered by build.py service_body_v2 when the matching field exists in services.json (chat_demo / stats / compare intro reuses .compare above / month_log + mechanism reuse .svc-flow). */ /* simulated AI-answer widget — the category-wide unclaimed visual */ .ai-chat{padding:clamp(28px,3.5vw,44px) clamp(24px,3vw,40px);margin:28px 0 34px} .ai-chat__label{font-family:var(--ui);font-weight:500;font-size:12.5px;letter-spacing:.06em; text-transform:uppercase;color:var(--on-dark-muted);margin:0 0 18px} .ai-chat__q{background:rgba(255,255,255,.10);border-radius:var(--r-sm); padding:13px 18px;font-size:15px;color:var(--on-dark);max-width:480px;margin-left:auto} .ai-chat__a{background:rgba(255,255,255,.05);border:1px solid var(--line-dark); border-radius:var(--r-sm);padding:18px 22px;margin-top:14px; font-size:15px;line-height:1.7;color:var(--on-dark)} .ai-chat__a mark{background:none;color:var(--teal);font-weight:700; border-bottom:2px solid var(--teal);padding:0 1px} .ai-chat__src{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} .ai-chat__src span{font-family:var(--ui);font-size:12px;color:var(--on-dark-muted); border:1px solid var(--line-dark);border-radius:var(--r-pill);padding:4px 13px} /* sourced stat tiles — every number carries its source */ .stat-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 34px} .stat-cell{background:var(--dark);border-radius:var(--r-sm);padding:26px 26px 22px;color:var(--on-dark)} .stat-cell b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:38px; line-height:1;color:var(--teal);margin-bottom:10px} .stat-cell p{font-size:14.5px;line-height:1.55;color:var(--on-dark);margin:0} .stat-cell em{display:block;font-style:normal;font-family:var(--ui);font-size:12px; color:var(--on-dark-muted);margin-top:10px} /* annotated ad-unit mockup — the "show the thing" standard (2026-08-09). A styled illustrative browser frame, never a platform screenshot. */ .admock{position:relative;margin:8px 0 20px;border:1px solid var(--line); border-radius:var(--r-sm);overflow:hidden;background:var(--paper)} .admock__tag{position:absolute;top:9px;right:12px;z-index:2;font-family:var(--ui); font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase; color:#FFFFFF;background:var(--orange);border-radius:var(--r-pill);padding:4px 12px} .admock__bar{display:flex;align-items:center;gap:14px;background:var(--paper-2); padding:10px 16px;border-bottom:1px solid var(--line)} .admock__dots{display:flex;gap:5px} .admock__dots i{width:9px;height:9px;border-radius:50%;background:#C9C7C4;display:block} .admock__query{font-family:var(--ui);font-size:13.5px;color:var(--ink); background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill); padding:6px 16px;flex:0 1 380px} .admock__body{padding:clamp(18px,2.6vw,30px)} .admock__pin{display:inline-flex;align-items:center;justify-content:center; width:21px;height:21px;border-radius:50%;background:var(--orange);color:#FFFFFF; font-family:var(--ui);font-weight:700;font-size:11.5px;flex:0 0 21px} .admock__meta{display:flex;align-items:center;gap:8px;font-family:var(--ui); font-size:12px;color:var(--muted);margin-bottom:7px} .admock__meta b{color:var(--ink);font-weight:700} .admock__ad{border:1px solid var(--line);border-left:3px solid var(--orange); border-radius:var(--r-sm);padding:16px 18px;margin-bottom:16px;background:var(--orange-tint-2)} .admock__headline{display:flex;align-items:center;gap:8px;font-weight:600; font-size:16.5px;color:#1a3fa8;line-height:1.35;margin:2px 0 6px} .admock__headline--organic{color:var(--ink)} .admock__desc{font-size:13.5px;line-height:1.55;color:var(--body);margin:0 0 4px} .admock__links{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px} .admock__links span{font-family:var(--ui);font-size:12.5px;color:#1a3fa8; border:1px solid var(--line);border-radius:var(--r-pill);padding:4px 13px;background:var(--paper)} .admock__organic{border:1px solid var(--line);border-radius:var(--r-sm); padding:14px 18px;background:var(--paper-3)} .admock__sb{border:1px solid var(--line);border-left:3px solid var(--orange); border-radius:var(--r-sm);padding:14px 18px;margin-bottom:16px;background:var(--orange-tint-2)} .admock__sb-inner{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .admock__logo{width:44px;height:44px;border-radius:50%;background:var(--dark); color:var(--teal);font-family:'Anton',sans-serif;font-size:20px; display:inline-flex;align-items:center;justify-content:center;flex:0 0 44px} .admock__sb-copy{display:flex;flex-direction:column;min-width:200px;flex:1} .admock__sb-copy b{font-size:15.5px;color:var(--ink)} .admock__sb-copy em{font-style:normal;font-size:13px;color:var(--muted)} .admock__sb-cta{font-family:var(--ui);font-weight:600;font-size:13px;color:var(--paper); background:var(--ink);border-radius:var(--r-pill);padding:8px 18px;white-space:nowrap} .admock__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .admock__card{border:1px solid var(--line);border-radius:var(--r-sm); padding:12px 14px;display:flex;flex-direction:column;gap:6px;background:var(--paper)} .admock__thumb{height:86px;border-radius:8px;background:var(--paper-2); color:var(--muted);font-family:'Anton',sans-serif;font-size:26px; display:flex;align-items:center;justify-content:center} .admock__pname{font-size:13px;line-height:1.4;color:var(--ink)} .admock__stars{font-family:var(--ui);font-size:12px;color:#B07800} .admock__price{font-size:15px;color:var(--ink)} .admock-notes{list-style:none;counter-reset:amn;padding:0;margin:6px 0 24px} .admock-notes li{counter-increment:amn;display:flex;gap:12px;padding:10px 0; border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.6} .admock-notes li:last-child{border-bottom:0} .admock-notes li::before{content:counter(amn);flex:0 0 21px;height:21px; display:inline-flex;align-items:center;justify-content:center;border-radius:50%; background:var(--orange);color:#FFFFFF;font-family:var(--ui);font-weight:700; font-size:11.5px;margin-top:2px} .admock-notes b{color:var(--ink)} .admock__extra{font-size:13px;color:var(--muted);margin:-10px 0 24px} /* cluster-2 mockup kinds (2026-08-09): "vitals" (launch scorecard), "appstore" (a store listing) and "testlog" (the conversion test log). The research found no competitor page renders any of the three — same rules apply, styled illustration only, fictional brand, never a platform screenshot. */ .admock__meta--row{margin:22px 0 10px} .admock__scores{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:6px} .admock__score{border:1px solid var(--line);border-radius:var(--r-sm); padding:16px 14px;text-align:center;background:var(--paper-3)} .admock__score b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:32px; line-height:1;color:var(--ink);margin-bottom:7px} .admock__score span{font-family:var(--ui);font-size:12px;color:var(--muted)} .admock__vitals{width:100%;border-collapse:collapse;font-size:13.5px} .admock__vitals th{text-align:left;font-family:var(--ui);font-weight:600;font-size:13px; color:var(--ink);padding:10px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap} .admock__vitals td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line); color:var(--body);line-height:1.5} .admock__vitals tr:last-child th,.admock__vitals tr:last-child td{border-bottom:0} .admock__val{font-family:'Anton',sans-serif;font-size:19px;color:var(--ink);white-space:nowrap} .admock__flag{font-family:var(--ui);font-weight:600;font-size:12px;color:#1F6F4A; text-transform:uppercase;letter-spacing:.05em;white-space:nowrap} .admock__checks{list-style:none;padding:0;margin:4px 0 0;display:grid; grid-template-columns:1fr 1fr;gap:8px 20px} .admock__checks li{position:relative;padding-left:24px;font-size:13.5px;line-height:1.5; color:var(--body)} .admock__checks li::before{content:"\2713";position:absolute;left:0;top:0; font-weight:700;color:#1F6F4A} .admock__app{display:flex;align-items:center;gap:16px;border:1px solid var(--line); border-radius:var(--r-sm);padding:16px 18px;background:var(--paper-3)} .admock__appicon{width:66px;height:66px;flex:0 0 66px;border-radius:15px;background:var(--dark); color:var(--teal);font-family:'Anton',sans-serif;font-size:30px; display:inline-flex;align-items:center;justify-content:center} .admock__appcopy{display:flex;flex-direction:column;gap:3px;flex:1;min-width:180px} .admock__appcopy b{display:flex;align-items:center;gap:8px;font-size:16.5px;color:var(--ink)} .admock__appcopy em{font-style:normal;font-size:13.5px;color:var(--body)} .admock__appseller{font-family:var(--ui);font-size:12px;color:var(--muted)} .admock__appget{font-family:var(--ui);font-weight:700;font-size:13px;color:var(--paper); background:#1a3fa8;border-radius:var(--r-pill);padding:8px 22px;white-space:nowrap} .admock__appstats{display:flex;flex-wrap:wrap;gap:10px 34px;padding:14px 4px 0} .admock__appstats span{display:flex;align-items:center;gap:7px;font-family:var(--ui); font-size:11.5px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted)} .admock__appstats b{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:0; text-transform:none;color:var(--ink)} .admock__screens{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .admock__screen{border:1px solid var(--line);border-radius:12px;padding:12px; background:var(--paper);display:flex;flex-direction:column;gap:6px;min-height:132px} .admock__screen b{font-size:13px;color:var(--ink)} .admock__screen span{font-size:12px;line-height:1.45;color:var(--muted)} .admock__screenbar{display:block;height:5px;width:38px;border-radius:3px;background:var(--orange); margin-bottom:4px} .admock__whatsnew{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap; font-size:13.5px;color:var(--body);margin:20px 0 0;padding-top:14px; border-top:1px solid var(--line)} .admock__whatsnew b{color:var(--ink)} .admock__log{width:100%;border-collapse:collapse;font-size:13.5px} .admock__log th{text-align:left;font-family:var(--ui);font-weight:600;font-size:11.5px; letter-spacing:.05em;text-transform:uppercase;color:var(--muted); padding:0 12px 10px 0;border-bottom:2px solid var(--ink)} .admock__log td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line); color:var(--body);line-height:1.5;vertical-align:top} .admock__log tr:last-child td{border-bottom:0} .admock__log td:first-child{font-family:var(--ui);font-size:12.5px;color:var(--muted); white-space:nowrap} .admock__call{display:inline-block;font-family:var(--ui);font-weight:600;font-size:11.5px; letter-spacing:.04em;text-transform:uppercase;border-radius:var(--r-pill);padding:4px 12px; white-space:nowrap;background:var(--paper-2);color:var(--muted)} .admock__log tr.is-win .admock__call{background:#E4F1E9;color:#1F6F4A} .admock__log tr.is-loss .admock__call{background:var(--orange-tint);color:#9A4A10} .admock__tally{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:20px} .admock__tally div{background:var(--dark);border-radius:var(--r-sm);padding:16px 18px; color:var(--on-dark)} .admock__tally b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:26px; line-height:1;color:var(--teal);margin-bottom:6px} .admock__tally span{font-family:var(--ui);font-size:12px;color:var(--on-dark-muted); line-height:1.4;display:block} /* cluster-3 mockup kinds (2026-08-10): "flow" (the lifecycle automation nobody draws — 0 of 10 pages), "deliver" (an SPF/DKIM/DMARC panel — 0 of 10) and "pipeline" (a CRM board — 0 of 5 CRM pages). Same rules: styled illustration, fictional brand, one row/card deliberately left in a bad state. */ .admock__flow{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .admock__node{position:relative;border:1px solid var(--line);border-left:3px solid var(--orange); border-radius:var(--r-sm);padding:14px 16px;background:var(--paper-3)} .admock__node b{display:block;font-size:14.5px;color:var(--ink);padding-right:42px;margin-bottom:4px} .admock__nodeshare{position:absolute;top:12px;right:12px;font-family:'Anton',sans-serif; font-size:17px;color:var(--orange);line-height:1} .admock__nodetrig{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);margin-bottom:8px} .admock__node ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:3px} .admock__node li{font-size:12.5px;line-height:1.45;color:var(--body)} .admock__branch{display:flex;align-items:flex-start;gap:10px;font-size:13.5px;line-height:1.6; color:var(--body);margin:16px 0 0} .admock__auth{width:100%;border-collapse:collapse;font-size:13.5px} .admock__auth th{text-align:left;font-family:var(--ui);font-weight:600;font-size:13px; color:var(--ink);padding:10px 12px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap} .admock__auth td{padding:10px 12px 10px 0;border-bottom:1px solid var(--line); color:var(--body);line-height:1.5} .admock__auth tr:last-child th,.admock__auth tr:last-child td{border-bottom:0} .admock__auth tr.is-todo .admock__flag{color:#9A4A10} .admock__clients{display:flex;flex-wrap:wrap;gap:8px} .admock__clients span{font-family:var(--ui);font-size:12.5px;color:var(--body); border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 15px;background:var(--paper-3)} .admock__board{display:grid;grid-template-columns:repeat(5,minmax(148px,1fr));gap:10px; overflow-x:auto} .admock__col{background:var(--paper-2);border-radius:var(--r-sm);padding:10px; display:flex;flex-direction:column;gap:8px} .admock__col header{display:flex;flex-direction:column;gap:2px;padding:2px 4px 8px; border-bottom:1px solid var(--line)} .admock__col header b{font-family:var(--ui);font-size:11.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ink)} .admock__col header span{font-family:'Anton',sans-serif;font-size:16px;color:var(--muted)} .admock__deal{background:var(--paper);border:1px solid var(--line);border-radius:8px; padding:9px 11px;display:flex;flex-direction:column;gap:3px} .admock__deal.is-stalled{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__deal b{font-size:12.5px;line-height:1.35;color:var(--ink)} .admock__dealval{font-family:'Anton',sans-serif;font-size:15px;color:var(--ink)} .admock__dealmeta{font-family:var(--ui);font-size:11px;color:var(--muted)} .admock__dealnext{font-size:11.5px;line-height:1.4;color:var(--body)} /* cluster-4 mockup kinds (2026-08-11): "reviews" (the review-and-reply pair — 4 of 10 pages sell review response, 0 render one), "listings" (a NAP-accuracy panel — 4 sell listings management, 0 show one), "calendar" (4 name a content calendar, 0 draw one) and "postset" (1 of 5 social pages shows a sample post, so this one is table stakes). Same rules as every other kind: styled illustration, fictional brand, and at least one thing visibly unfinished. */ .admock__revs{display:grid;grid-template-columns:1fr 1fr;gap:14px} .admock__rev{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px; background:var(--paper-3);display:flex;flex-direction:column} .admock__rev.is-queued{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__revhead{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px} .admock__revstars{color:#B07800;font-size:14px;letter-spacing:.05em} .admock__revplat{font-family:var(--ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase; color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill);padding:2px 9px; background:var(--paper)} .admock__revwhen{font-family:var(--ui);font-size:11.5px;color:var(--muted);margin-left:auto} .admock__revwho{font-size:13px;color:var(--ink);margin-bottom:4px} .admock__revtext{font-size:13px;line-height:1.55;color:var(--body);margin:0 0 12px} .admock__reply{border-left:2px solid var(--teal);padding:8px 0 2px 12px;margin-top:auto} .admock__reply p{font-size:12.5px;line-height:1.55;color:var(--body);margin:6px 0 6px} .admock__replymeta{font-family:var(--ui);font-weight:600;font-size:11px;letter-spacing:.04em; text-transform:uppercase;color:#1F6F4A} .admock__reply--queued .admock__replymeta{color:#9A4A10} .admock__replysign{font-family:var(--ui);font-size:11.5px;color:var(--muted)} .admock__listings{width:100%;border-collapse:collapse;font-size:13px} .admock__listings th{text-align:left;font-family:var(--ui);font-weight:600;font-size:11.5px; letter-spacing:.04em;text-transform:uppercase;color:var(--ink);padding:9px 10px 9px 0; border-bottom:1px solid var(--line);white-space:nowrap} .admock__listings tbody th{font-size:13px;text-transform:none;letter-spacing:0;font-weight:500} .admock__listings td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);color:var(--body)} .admock__listings tbody tr:last-child th,.admock__listings tbody tr:last-child td{border-bottom:0} .admock__listings tr.is-bad,.admock__listings tr.is-none{background:var(--orange-tint)} .admock__nap{text-align:center;font-weight:700;width:52px} .admock__nap.is-ok{color:#1F6F4A} .admock__nap.is-bad{color:#9A4A10} .admock__nap.is-none{color:var(--muted)} .admock__napnote{font-family:var(--ui);font-size:11.5px;color:var(--muted);line-height:1.45} .admock__cal{display:flex;flex-direction:column;gap:10px} .admock__calweek{background:var(--paper-2);border-radius:var(--r-sm);padding:10px 12px} .admock__calweek header{font-family:var(--ui);font-size:11.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--ink);padding-bottom:8px;margin-bottom:8px; border-bottom:1px solid var(--line)} .admock__calcells{display:grid;grid-template-columns:repeat(5,1fr);gap:8px} .admock__cell{background:var(--paper);border:1px solid var(--line);border-radius:8px; padding:8px 10px;display:flex;flex-direction:column;gap:5px;min-height:74px} .admock__cell.is-review{border-left:3px solid var(--teal)} .admock__cell.is-need{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__cell.is-hold{border-style:dashed;background:transparent;justify-content:center} .admock__cellchips{display:flex;flex-wrap:wrap;gap:4px} .admock__cellchips i{font-style:normal;font-family:var(--ui);font-size:10px;letter-spacing:.03em; text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:var(--r-pill); padding:1px 7px} .admock__celltopic{font-size:11.5px;line-height:1.4;color:var(--body)} .admock__cell.is-hold .admock__celltopic{color:var(--muted);font-style:italic} .admock__posts{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .admock__post{border:1px solid var(--line);border-radius:var(--r-sm);padding:12px; background:var(--paper-3);display:flex;flex-direction:column;gap:6px} .admock__postart{display:flex;align-items:flex-end;justify-content:flex-start;height:104px; border-radius:8px;background:var(--paper-2);color:var(--muted);font-family:var(--ui); font-size:11px;letter-spacing:.05em;text-transform:uppercase;padding:9px 11px} .admock__post b{font-size:13px;color:var(--ink)} .admock__postcap{font-size:12px;line-height:1.5;color:var(--body);margin:0} .admock__postmeta{font-family:var(--ui);font-size:11.5px;color:var(--muted);margin-top:auto} .admock__ab{display:grid;grid-template-columns:1fr 1fr;gap:12px} .admock__abv{border:1px solid var(--line);border-radius:var(--r-sm);padding:13px 15px; background:var(--paper-3)} .admock__abv.is-win{border-left:3px solid var(--teal)} .admock__abv p{font-size:12.5px;line-height:1.5;color:var(--body);margin:0 0 10px} .admock__abv b{font-family:'Anton',sans-serif;font-weight:400;font-size:24px;color:var(--ink); display:block;line-height:1} .admock__abv span{font-family:var(--ui);font-size:11.5px;color:var(--muted)} /* editdiff — cluster 5, 2026-08-12. The AI draft beside the published line. The "was" side is deliberately muted and the "now" side carries the teal rule: the eye should land on what a human decided, not on what a model wrote. */ .admock__diffs{display:flex;flex-direction:column;gap:12px} .admock__diff{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; background:var(--paper-3)} .admock__diffside{padding:12px 14px} .admock__diffside span{display:block;font-family:var(--ui);font-weight:600;font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px} .admock__diffside p{margin:0;font-size:12.5px;line-height:1.55} .admock__diffside--was{background:var(--paper-2);border-bottom:1px solid var(--line)} .admock__diffside--was p{color:var(--muted)} .admock__diffside--now{border-left:3px solid var(--teal)} .admock__diffside--now p{color:var(--ink)} .admock__diffwhy{margin:0;padding:9px 14px;border-top:1px solid var(--line); background:var(--paper-2);font-family:var(--ui);font-size:11.5px;line-height:1.5;color:var(--muted)} .admock__facts{width:100%;border-collapse:collapse;margin-top:4px} .admock__facts th{text-align:left;font-family:var(--ui);font-weight:500;font-size:12.5px; color:var(--ink);padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:top} .admock__facts td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line); font-family:var(--ui);font-size:11.5px;color:var(--muted);line-height:1.45;vertical-align:top} .admock__facts tbody tr:last-child th,.admock__facts tbody tr:last-child td{border-bottom:0} .admock__facts tr.is-cut{background:var(--orange-tint)} .admock__facts tr.is-ok .admock__flag{color:#1F6F4A} .admock__facts tr.is-fix .admock__flag,.admock__facts tr.is-cut .admock__flag{color:#9A4A10} /* brandbook — cluster 5, 2026-08-12. The guidelines spread nobody renders. Lockup tiles are portrait-leaning on purpose: the aspect ratio reads as printed collateral before anyone gets to the caption. */ .admock__locks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .admock__lock{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--paper-3); padding:12px;display:flex;flex-direction:column;gap:7px} .admock__lockart{display:flex;align-items:center;justify-content:center;min-height:112px; border-radius:8px;background:var(--paper-2);font-family:'Anton',sans-serif;font-weight:400; font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);text-align:center; padding:12px;line-height:1.3} .admock__lock b{font-size:12.5px;color:var(--ink)} .admock__locknote{font-family:var(--ui);font-size:11.5px;line-height:1.45;color:var(--muted)} .admock__swatches{display:grid;grid-template-columns:repeat(4,1fr);gap:10px} .admock__swatch{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden; background:var(--paper-3)} .admock__swatch>span{display:block;height:52px} .admock__swatch b{display:block;font-size:12px;color:var(--ink);padding:8px 10px 0} .admock__swatch em{display:block;font-style:normal;font-family:var(--ui);font-size:10.5px; line-height:1.5;color:var(--muted);padding:2px 10px 9px} .admock__type{width:100%;border-collapse:collapse} .admock__type th{text-align:left;font-family:var(--ui);font-weight:600;font-size:11px; letter-spacing:.05em;text-transform:uppercase;color:var(--muted);padding:9px 10px 9px 0; border-bottom:1px solid var(--line);white-space:nowrap;vertical-align:middle} .admock__type td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);vertical-align:middle} .admock__type tbody tr:last-child th,.admock__type tbody tr:last-child td{border-bottom:0} .admock__typespec{font-family:var(--ui);font-size:11.5px;color:var(--muted);white-space:nowrap} .admock__typesample{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;color:var(--ink); line-height:1.2} .admock__rules{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:9px} .admock__rules li{font-size:12px;line-height:1.5;color:var(--body);border:1px solid var(--line); border-radius:var(--r-sm);padding:10px 12px;background:var(--paper-3)} .admock__rules li span{display:block;font-family:var(--ui);font-weight:600;font-size:10.5px; letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px} .admock__rules li.is-do{border-left:3px solid var(--teal)} .admock__rules li.is-do span{color:#1F6F4A} .admock__rules li.is-dont{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__rules li.is-dont span{color:#9A4A10} /* cluster-6 mockup kinds (2026-08-13): "carelog" (the monthly care report — 1 of 16 sourced pages renders one, and it is the $9/month provider), "findings" (an audit findings sheet — 0 of 16, in a category that sells the document itself for four figures) and "report" (the monthly marketing report, drawn deliberately as a DOCUMENT: narrative above the numbers, a work list nobody else shows, and one finding that is bad news). Same house rules — styled illustration, Pelican Point, and at least one thing visibly imperfect. */ .admock__care td:nth-child(2){font-family:var(--ui);font-size:12.5px;color:var(--muted); white-space:nowrap} .admock__care td:last-child{font-family:var(--ui);font-size:12px;color:var(--muted); white-space:nowrap} .admock__log tr.is-pass .admock__call{background:#E4F1E9;color:#1F6F4A} .admock__log tr.is-held .admock__call{background:var(--orange-tint);color:#9A4A10} .admock__log tr.is-held{background:var(--orange-tint)} .admock__log tr.is-back .admock__call{background:var(--teal-tint,#E3F0EF);color:#14625C} .admock__log tr.is-hold .admock__call{background:var(--orange-tint);color:#9A4A10} .admock__hours{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px; background:var(--paper-3)} .admock__hoursbar{height:12px;border-radius:var(--r-pill);background:var(--paper-2); overflow:hidden;margin-bottom:12px} .admock__hoursbar span{display:block;height:100%;background:var(--teal);border-radius:var(--r-pill)} .admock__hours ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px} .admock__hours li{font-size:12.5px;line-height:1.5;color:var(--body)} .admock__hours b{color:var(--ink);font-family:var(--ui);font-size:11.5px;letter-spacing:.03em; text-transform:uppercase;margin-right:8px} .admock__decide{display:grid;grid-template-columns:1fr 1fr;gap:12px} .admock__decision{border:1px solid var(--line);border-left:3px solid var(--orange); border-radius:var(--r-sm);background:var(--orange-tint);padding:13px 15px} .admock__decision b{display:block;font-size:13px;color:var(--ink);margin-bottom:5px} .admock__decision p{margin:0 0 8px;font-size:12.5px;line-height:1.55;color:var(--body)} .admock__decidecost{font-family:var(--ui);font-weight:600;font-size:11.5px;letter-spacing:.04em; text-transform:uppercase;color:#9A4A10} .admock__board--3{grid-template-columns:repeat(3,minmax(180px,1fr))} .admock__find{gap:5px} .admock__find.is-now{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__find.is-next{border-left:3px solid var(--ink)} .admock__find.is-later{border-left:3px solid var(--line)} .admock__find.is-fine{border-left:3px solid var(--teal);background:var(--teal-tint,#E3F0EF)} .admock__findev{font-family:var(--ui);font-size:11px;line-height:1.45;color:var(--muted)} .admock__cover{display:flex;flex-wrap:wrap;gap:8px} .admock__cover span{display:flex;flex-direction:column;gap:2px;font-size:12.5px;color:var(--ink); border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 13px;background:var(--paper-3)} .admock__cover i{font-style:normal;font-family:var(--ui);font-size:10.5px;letter-spacing:.04em; text-transform:uppercase;color:var(--muted)} .admock__cover span.is-clear{border-left:3px solid var(--teal)} .admock__cover span.is-issue{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__cover span.is-notsold{border-style:dashed} .admock__cover span.is-notsold i{color:#9A4A10} .admock__exec{border-left:3px solid var(--ink);padding:2px 0 2px 16px;margin:4px 0 18px} .admock__exec p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink)} .admock__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .admock__kpi{border:1px solid var(--line);border-radius:var(--r-sm);padding:14px 16px; background:var(--paper-3);display:flex;flex-direction:column;gap:3px} .admock__kpiname{font-family:var(--ui);font-size:11px;letter-spacing:.05em;text-transform:uppercase; color:var(--muted)} .admock__kpi b{font-family:'Anton',sans-serif;font-weight:400;font-size:28px;line-height:1.05; color:var(--ink)} .admock__kpiyoy{font-family:var(--ui);font-weight:600;font-size:12px;color:#1F6F4A} .admock__kpimom{font-family:var(--ui);font-size:11px;color:#A9A6A2} .admock__seasonal{font-size:12px;line-height:1.55;color:var(--muted);margin:10px 0 0} .admock__recs{display:flex;flex-direction:column;gap:11px} .admock__rec{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--r-sm); background:var(--paper-3);padding:13px 15px} .admock__rec.is-bad{border-left-color:var(--orange);background:var(--orange-tint)} .admock__rec b{display:block;font-size:13.5px;color:var(--ink);margin-bottom:5px} .admock__rec p{margin:0 0 9px;font-size:12.5px;line-height:1.55;color:var(--body)} .admock__recask{display:block;font-family:var(--ui);font-weight:600;font-size:11.5px; letter-spacing:.03em;color:var(--ink)} .admock__companion{border:1px dashed var(--line);border-radius:var(--r-sm);padding:12px 15px; margin-top:18px;background:var(--paper-2)} .admock__companion b{font-size:12.5px;color:var(--muted);margin-left:6px} .admock__companion p{margin:6px 0 0;font-size:12px;line-height:1.55;color:var(--muted)} @media (min-width:721px){ .admock__diff{display:grid;grid-template-columns:1fr 1fr} .admock__diffside--was{border-bottom:0;border-right:1px solid var(--line)} .admock__diffwhy{grid-column:1 / -1} } @media (max-width:1080px){ .stat-trio{grid-template-columns:1fr 1fr} .admock__scores,.admock__tally{grid-template-columns:1fr 1fr} .admock__locks{grid-template-columns:1fr 1fr} .admock__swatches{grid-template-columns:1fr 1fr} .admock__screens{grid-template-columns:1fr 1fr} .admock__flow{grid-template-columns:1fr 1fr} .admock__calcells{grid-template-columns:repeat(3,1fr)} .admock__kpis{grid-template-columns:1fr 1fr} } @media (max-width:720px){ .stat-trio{grid-template-columns:1fr} .ai-chat__q{max-width:100%} .admock__grid{grid-template-columns:1fr} .admock__query{flex-basis:100%} .admock__tag{position:static;display:inline-block;margin:10px 12px 0} .admock{display:flex;flex-direction:column} .admock__checks{grid-template-columns:1fr} .admock__app{flex-wrap:wrap} .admock__vitals,.admock__log{display:block;overflow-x:auto;white-space:nowrap} .admock__vitals td,.admock__log td{white-space:normal;min-width:120px} .admock__flow{grid-template-columns:1fr} .admock__auth{display:block;overflow-x:auto} .admock__auth td{min-width:150px} .admock__revs,.admock__ab{grid-template-columns:1fr} .admock__posts{grid-template-columns:1fr} .admock__calcells{grid-template-columns:1fr 1fr} .admock__listings{display:block;overflow-x:auto;white-space:nowrap} .admock__listings .admock__napnote{white-space:normal;min-width:170px} .admock__locks,.admock__swatches,.admock__rules{grid-template-columns:1fr} .admock__facts,.admock__type{display:block;overflow-x:auto} .admock__facts td,.admock__type td{min-width:130px} .admock__decide,.admock__kpis{grid-template-columns:1fr} .admock__cover span{width:100%} .admock__log--opts{display:block;overflow-x:auto} .admock__log--opts td,.admock__log--opts th{min-width:132px} .admock__log--opts td:first-child{min-width:150px} } /* cluster-7 mockup kinds (2026-08-16): "measureplan" (the measurement plan — 0 of 3 dedicated analytics agencies in the sweep render a dashboard, a report or a plan), "options" (the four-option decision table, the research's highest-value single module, carrying the time-to-impact column exactly 1 of 15 providers publishes) and "sessionnotes" (what actually arrives after a consulting session — named by 13 of 15 providers, rendered by none). All three reuse the existing admock furniture; the only new rule is the wider decision table, whose first column is an option name rather than the muted date the base .admock__log assumes. */ .admock__log--opts td:first-child{font-family:var(--ui);font-weight:600;font-size:13px; color:var(--ink);white-space:normal} .admock__log--opts td{vertical-align:top;font-size:12.5px} .admock__log--opts tr.is-win td:first-child{color:var(--ink)} /* cluster 8 (2026-08-17): "alert" — the change-only alert email the buyer actually receives (0 of 12 brand-protection pages show one) — and "handoff", the boundary of our job drawn as a bar between what we do and what the client decides (6 of 12 pages hide it; 0 draw it). */ .admock__subject p{font-family:var(--ui);font-weight:600;font-size:14px} .admock__ad--alert{margin:12px 0 14px} .admock__ad--alert .admock__headline mark{background:var(--orange-tint);color:#9A4A10; padding:0 3px;border-radius:3px} .admock__triage li.is-door{border-left:3px solid var(--ink)} .admock__triage li.is-door span{color:var(--ink)} .admock__triage li.is-who{border-left:3px solid var(--teal)} .admock__triage li.is-who span{color:#1F6F4A} .admock__triage li.is-rec{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__triage li.is-rec span{color:#9A4A10} .admock__log--alert td:first-child{font-family:var(--ui);font-weight:600;font-size:12.5px; color:var(--ink);white-space:normal} .admock__log--alert tr.is-flag .admock__call{background:var(--orange-tint);color:#9A4A10} .admock__log--alert tr.is-ok .admock__call{background:#E4F1E9;color:#1F6F4A} .admock__log--alert tr.is-info .admock__call{background:var(--paper-3);color:var(--muted)} .admock__handoff{display:grid;grid-template-columns:3fr auto 2fr;gap:14px;align-items:stretch; margin:6px 0 4px} .admock__hsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:9px} .admock__hstep{border:1px solid var(--line);border-left:3px solid var(--teal); border-radius:var(--r-sm);padding:12px 13px;background:var(--paper-3)} .admock__hstep b{display:block;font-family:var(--ui);font-weight:700;font-size:12px; letter-spacing:.06em;text-transform:uppercase;color:var(--ink)} .admock__hstep em{display:block;font-style:normal;font-family:var(--ui);font-size:10.5px; letter-spacing:.04em;text-transform:uppercase;color:#1F6F4A;margin:3px 0 7px} .admock__hstep p{margin:0;font-size:12px;line-height:1.5;color:var(--body)} .admock__hbar{display:flex;flex-direction:column;justify-content:center;align-items:center; text-align:center;min-width:112px;padding:14px 12px;border-left:4px double var(--ink); border-right:4px double var(--ink);background:var(--paper-2)} .admock__hbar b{font-family:'Anton',sans-serif;font-weight:400;font-size:17px; text-transform:uppercase;letter-spacing:.04em;color:var(--ink);margin-top:6px} .admock__hbar span{font-family:var(--ui);font-size:10.5px;line-height:1.4;color:var(--muted); margin-top:5px} .admock__houts{display:grid;gap:9px} .admock__hout{border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px} .admock__hout b{display:block;font-family:var(--ui);font-weight:600;font-size:12.5px;color:var(--ink)} .admock__hout p{margin:3px 0 0;font-size:11.5px;line-height:1.45;color:var(--muted)} .admock__hout.is-none{border-left:3px solid var(--line)} .admock__hout.is-you{border-left:3px solid var(--orange);background:var(--orange-tint)} .admock__hout.is-atty{border-left:3px solid var(--ink)} .admock__log--who td:first-child{font-family:var(--ui);font-weight:600;font-size:12.5px; color:var(--ink);white-space:normal} .admock__log--who td{text-align:center;font-size:12px} .admock__log--who td:first-child{text-align:left} .admock__log--who .admock__call.is-yes{background:#E4F1E9;color:#1F6F4A} .admock__log--who .admock__call.is-no{background:var(--paper-3);color:var(--muted)} .admock__log--who .admock__call.is-note{background:var(--orange-tint);color:#9A4A10; white-space:normal;text-align:left} @media (max-width:820px){ .admock__handoff{grid-template-columns:1fr} .admock__hsteps{grid-template-columns:1fr} .admock__hbar{border-left:0;border-right:0;border-top:4px double var(--ink); border-bottom:4px double var(--ink);padding:10px} .admock__log--alert,.admock__log--who{display:block;overflow-x:auto} .admock__log--alert td,.admock__log--who td{min-width:110px} } /* ============================================================ DESIGN-INSPIRATION PASS — Brandon 2026-08-09 (reference doc: stm-wordpress-sites/sites/southerntidemedia.com/design-inspiration-2026-08.md) 1) FULL-BLEED DARK BANDS (Disruptive reference — "content full width, ours feels like a narrow column"). The big dark modules break out of the column edge-to-edge; the padding calc puts their inner content back on the original column grid, so nothing else moves. At <1280px the bleed equals the wrap's own 32px gutter exactly. overflow-x:clip on
eats the half-scrollbar overshoot that 50vw carries; clip (unlike hidden) creates no scroll container, so position:sticky descendants (case-story__media) keep working. */ main{overflow-x:clip} .page-content .darkcard,.page-content .proof-band,.cta-band--page{ border-radius:0; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding-left:calc(50vw - 50% + clamp(28px,4vw,64px)); padding-right:calc(50vw - 50% + clamp(28px,4vw,64px))} .page-content .proof-band,.page-content .ai-chat{ padding-left:calc(50vw - 50% + clamp(24px,3vw,40px)); padding-right:calc(50vw - 50% + clamp(24px,3vw,40px))} /* 2) TECH-STACK PILL BAND (9AM reference) — real platforms only, per-service in services.json `stack`; engines set on /ai-visibility/. */ .tool-pills{display:flex;flex-wrap:wrap;gap:12px;margin:4px 0 8px} .tool-pills span{font-family:var(--ui);font-weight:500;font-size:14.5px;color:var(--ink); border:1px solid var(--line);border-radius:var(--r-pill);padding:12px 24px; background:var(--paper)} .tool-pills__note{font-family:var(--ui);font-size:13.5px;color:var(--muted); margin-top:14px;max-width:70ch} /* 3) PORTAL DASHBOARD MOCKUP (/ai-visibility/portal/ — Power Digital /omega/ + WebFX OmniSEO references). Rides the .admock frame; fictional Pelican Point data, "Illustrative example" tag on the frame per standard #4. .aivd-yes is a UI green (like the serp mock's link blue), not brand teal — brand colours never carry text on light. */ .aivd-top{display:grid;grid-template-columns:minmax(170px,auto) 1fr; gap:clamp(14px,2vw,24px);align-items:stretch;margin-bottom:16px} .aivd-score{background:var(--dark);border-radius:var(--r-sm);color:var(--on-dark); padding:18px 22px;display:flex;flex-direction:column;justify-content:center;gap:6px; position:relative} .aivd-score b{font-family:'Anton',sans-serif;font-weight:400;font-size:56px;line-height:1; color:var(--teal)} .aivd-score span{font-family:var(--ui);font-size:12.5px;line-height:1.45;color:var(--on-dark-muted)} .aivd-score .admock__pin{position:absolute;top:10px;right:10px} .aivd-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:12px} .aivd-kpis>div{border:1px solid var(--line);border-radius:var(--r-sm);padding:16px 18px; position:relative} .aivd-kpis b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:32px; line-height:1.05;color:var(--ink)} .aivd-kpis span{font-family:var(--ui);font-size:12px;line-height:1.45;color:var(--muted); display:block;margin-top:7px} .aivd-kpis .admock__pin{position:absolute;top:12px;right:12px} .aivd-scroll{overflow-x:auto;margin:0 0 6px} .aivd-table{width:100%;min-width:640px;border-collapse:collapse;font-family:var(--ui); font-size:13px} .aivd-table th,.aivd-table td{padding:9px 12px;border-top:1px solid var(--line); text-align:left;white-space:nowrap} .aivd-table thead th{border-top:0;font-size:11.5px;letter-spacing:.05em; text-transform:uppercase;color:var(--muted)} .aivd-table tbody th{font-weight:500;color:var(--ink);white-space:normal;min-width:220px} .aivd-yes{color:#0E7A6E;font-weight:600} .aivd-no{color:var(--muted)} @media (max-width:860px){ .aivd-top{grid-template-columns:1fr} .aivd-kpis{grid-template-columns:1fr 1fr} } /* 4) SHAPED / LAYERED IMAGERY (Tinuiti + Power Digital references — "images aren't just square"). Interior hero photos and case-story photos get an offset brand-colour frame peeking out bottom-right. The clip moves from the container to the image so the frame can live outside the box; z-index:0 on the container keeps the -1 frame above band backgrounds. */ .ihero-media:not(.ihero-media--copy){overflow:visible;box-shadow:none; position:relative;z-index:0} .ihero-media:not(.ihero-media--copy) img{border-radius:var(--r-card)} .ihero-media:not(.ihero-media--copy)::before{content:"";position:absolute;inset:0; border-radius:var(--r-card);box-shadow:inset 0 0 0 1px rgba(17,17,17,.14); pointer-events:none;z-index:1} .ihero-media:not(.ihero-media--copy)::after{content:"";position:absolute; inset:22px -14px -14px 22px;border:2px solid var(--teal); border-radius:var(--r-card);z-index:-1} .case-story__media{overflow:visible;box-shadow:none;z-index:0} .case-story__media img{border-radius:var(--r-card)} .case-story__media::before{content:"";position:absolute;inset:0; border-radius:var(--r-card);box-shadow:inset 0 0 0 1px rgba(17,17,17,.14); pointer-events:none;z-index:1} .case-story__media::after{content:"";position:absolute; inset:22px -14px -14px 22px;border:2px solid var(--orange); border-radius:var(--r-card);z-index:-1} @media (max-width:920px){ .ihero-media:not(.ihero-media--copy)::after,.case-story__media::after{ inset:14px -10px -10px 14px} } /* 5) ORBIT DIAGRAM (Wpromote Polaris reference) — the portal's monthly loop as a ring graphic. Brand colours as dot FILLS only; all text is ink. */ .aiv-orbit{margin:34px auto 6px;max-width:520px;text-align:center} .aiv-orbit svg{width:100%;height:auto;display:block} .aiv-orbit .ring{fill:none;stroke:var(--line)} .aiv-orbit .core{fill:var(--dark)} .aiv-orbit .core-label{fill:#FFFFFF;font-family:var(--ui);font-size:15px; font-weight:600;letter-spacing:.01em} .aiv-orbit .dot-teal{fill:var(--teal)} .aiv-orbit .dot-orange{fill:var(--orange)} .aiv-orbit .dot-gold{fill:var(--gold)} .aiv-orbit .dot-ink{fill:var(--ink)} .aiv-orbit .leader{stroke:var(--muted);stroke-dasharray:2 4;stroke-width:1.5;fill:none} .aiv-orbit .lbl{fill:var(--ink);font-family:var(--ui);font-size:13.5px; font-weight:700;letter-spacing:.09em} .aiv-orbit figcaption{font-family:var(--ui);font-size:13.5px;color:var(--muted); margin-top:14px} /* ============================================================ DESIGN PASS 3 — COMPONENT LIBRARY (2026-08-18) Brandon's correction: pass 1 changed the wallpaper (full-bleed bands), not the furniture. Service pages were a stack of identical iband rectangles. These are the actual TREATMENTS from his 18 reference screenshots — stm-wordpress-sites/sites/southerntidemedia.com/design-refs/ — rebuilt in the Ink Dark vocabulary. Palette law still governs: brand colours are text ONLY on black; on light they are fills, rules, chips. Each service page now runs 7–8 DIFFERENT shapes top to bottom. ============================================================ */ /* ---- ref 12 · Thrive proposal bar → the "Enter your website" bar under the H1. Single field, feeds Growth Engine (GET → /contact-us/?site=…; the contact form prefills). No full header form (decided 2026-08-18). ---- */ .url-bar{display:flex;gap:10px;margin-top:22px;max-width:560px} .url-bar input{flex:1;min-width:0;height:52px;padding:0 18px;border:1.5px solid var(--line); border-radius:var(--r-pill);font-family:var(--ui);font-size:15px;color:var(--ink); background:var(--paper);outline:none;transition:border-color .16s,box-shadow .16s} .url-bar input::placeholder{color:var(--muted)} .url-bar input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,0,0,.08)} .url-bar .btn{height:52px;white-space:nowrap;padding:0 22px} .url-bar__note{font-family:var(--ui);font-size:12.5px;color:var(--muted);margin:8px 0 0} @media (max-width:560px){.url-bar{flex-direction:column}.url-bar .btn{width:100%}} /* ---- ref 6 · 9AM stat row: hairline rules, big numbers, no boxes. Replaces the three black stat tiles that opened every page. Numbers are ink on light (brand colours can't carry text here) — the orange rule is the accent. ---- */ .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 34px} .stat-row .stat-cell{background:none;color:var(--ink);border-radius:0; padding:26px 28px 24px;border-left:1px solid var(--line)} .stat-row .stat-cell:first-child{border-left:0;padding-left:0} .stat-row .stat-cell b{color:var(--ink);font-size:clamp(34px,3.6vw,46px);position:relative; padding-top:14px} .stat-row .stat-cell b::before{content:"";position:absolute;left:0;top:0;width:28px;height:3px; background:var(--orange)} .stat-row .stat-cell p{color:var(--body)} .stat-row .stat-cell em{color:var(--muted)} @media (max-width:720px){.stat-row{grid-template-columns:1fr} .stat-row .stat-cell{border-left:0;padding-left:0;border-top:1px solid var(--line)} .stat-row .stat-cell:first-child{border-top:0}} /* ---- ref 9 · NP Digital: prose left, "Focus areas" link-list card right. The card carries the deep links (service-page standard #2) and one CTA. ---- */ .split-side{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:clamp(28px,4vw,64px);align-items:start} .split-side > div:first-child > p:last-child{margin-bottom:0} .focus-card{background:var(--paper-2);border-radius:var(--r-sm);padding:28px 30px 30px} .iband--alt .focus-card{background:var(--paper)} .focus-card h3{font-family:var(--ui);font-weight:700;font-size:14px;letter-spacing:.06em; text-transform:uppercase;margin:0 0 16px;color:var(--ink)} .focus-card ul{list-style:none;margin:0 0 22px;padding:0} .focus-card li{padding:9px 0;border-top:1px solid rgba(0,0,0,.07)} .focus-card li:first-child{border-top:0;padding-top:0} .focus-card li a{display:flex;align-items:baseline;gap:10px;font-family:var(--ui); font-weight:500;font-size:15px;color:var(--ink);text-decoration:none;box-shadow:none} .focus-card li a::before{content:"\203A";color:var(--orange);font-size:20px;line-height:1; transform:translateY(1px);transition:transform .16s} .focus-card li a:hover::before{transform:translate(4px,1px)} .focus-card li a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px;box-shadow:none} .focus-card li.is-here a{font-weight:700} .focus-card li.is-here a::after{content:"you are here";font-weight:500;font-size:11.5px; color:var(--muted);margin-left:auto;padding-left:10px} .focus-card .btn.btn--dark{width:100%;color:#FFFFFF;box-shadow:none} .focus-card .btn.btn--dark:hover{background:#2A2A2A;color:#FFFFFF} @media (max-width:920px){.split-side{grid-template-columns:1fr}} /* ---- ref 10 · Power Digital 3-tone cards: light / orange-tint / ink, glyph top-left. "What's included" — tones cycle so an 8-item grid reads as a pattern, not a list. Text on the tint is ink; on the black card it's white. ---- */ .tone-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tone-card{border-radius:var(--r-sm);padding:26px 26px 28px;position:relative; background:var(--paper-2);color:var(--ink);scroll-margin-top:110px} .tone-card:nth-child(3n+2){background:var(--orange-tint)} .tone-card:nth-child(3n+3){background:var(--dark);color:var(--on-dark)} .iband--alt .tone-card:nth-child(3n+1){background:var(--paper)} .tone-card__num{display:block;font-family:'Anton',sans-serif;font-size:15px;letter-spacing:.06em; color:var(--muted);margin-bottom:14px} .tone-card:nth-child(3n+3) .tone-card__num{color:var(--teal)} .tone-card h3{font-family:var(--ui);font-weight:600;font-size:17.5px;letter-spacing:-.02em; margin:0 0 8px;color:inherit} .tone-card p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0;max-width:none} .tone-card:nth-child(3n+3) p{color:var(--on-dark-muted)} .tone-card:nth-child(3n+3) a{color:var(--on-dark-accent)} @media (max-width:1080px){.tone-cards{grid-template-columns:1fr 1fr} .tone-card:nth-child(3n+2),.tone-card:nth-child(3n+3){background:var(--paper-2);color:var(--ink)} .tone-card:nth-child(3n+3) p{color:var(--body)}.tone-card:nth-child(3n+3) .tone-card__num{color:var(--muted)} .tone-card:nth-child(4n+2){background:var(--orange-tint)} .tone-card:nth-child(4n+3){background:var(--dark);color:var(--on-dark)} .tone-card:nth-child(4n+3) p{color:var(--on-dark-muted)} .tone-card:nth-child(4n+3) .tone-card__num{color:var(--teal)}} @media (max-width:720px){.tone-cards{grid-template-columns:1fr}} /* ---- ref 6 · Hawke saturated band: white icon cards on a full-bleed brand colour. Teal as a FILL with ink text is legal (black on #66CCCC ≈ 11:1); the cards are white so the band reads as colour relief between the ink sections. ---- */ .iband--teal{background:var(--teal);color:var(--ink)} .iband--teal .subhead,.iband--teal h2.subhead + p{color:var(--ink)} .iband--teal p{color:var(--ink)} .benefit-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px} .benefit-cards--3{grid-template-columns:repeat(3,1fr)} .benefit-card{background:var(--paper);border-radius:var(--r-sm);padding:26px 24px 28px; color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.08)} .benefit-card__glyph{display:inline-grid;place-items:center;width:44px;height:44px; border-radius:12px;background:var(--dark);color:var(--teal);font-family:'Anton',sans-serif; font-size:18px;margin-bottom:16px} .benefit-card strong{display:block;font-family:var(--ui);font-weight:600;font-size:16.5px; letter-spacing:-.02em;margin-bottom:8px} .benefit-card p{font-size:14.5px;line-height:1.55;color:var(--body);margin:0} .iband--teal .benefit-card p{color:var(--body)} @media (max-width:1080px){.benefit-cards{grid-template-columns:1fr 1fr}} @media (max-width:720px){.benefit-cards,.benefit-cards--3{grid-template-columns:1fr}} /* ---- ref 7 · Wpromote dot-glyph columns: paired colour dots as section markers, no card chrome. Used for the timeline phases. Dots are FILLS. ---- */ .glyph-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,3.4vw,52px)} .glyph-col{border-top:1px solid var(--line);padding-top:22px} .glyph-col .dots{display:flex;margin-bottom:22px} .glyph-col .dots i{width:30px;height:30px;border-radius:50%;display:block} .glyph-col .dots i + i{margin-left:-6px} .glyph-col:nth-child(3n+1) .dots i:first-child{background:var(--dark)} .glyph-col:nth-child(3n+1) .dots i:last-child{background:var(--orange)} .glyph-col:nth-child(3n+2) .dots i:first-child{background:var(--teal)} .glyph-col:nth-child(3n+2) .dots i:last-child{background:var(--dark)} .glyph-col:nth-child(3n+3) .dots i:first-child{background:var(--gold)} .glyph-col:nth-child(3n+3) .dots i:last-child{background:var(--orange)} .glyph-col strong{display:block;font-family:var(--ui);font-weight:700;font-size:19px; letter-spacing:-.025em;line-height:1.25;margin-bottom:6px;color:var(--ink)} .glyph-col .phase-when{display:block;font-family:var(--ui);font-weight:500;font-style:normal; font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin:0 0 12px} .glyph-col p{font-size:15px;line-height:1.6;color:var(--body);margin:0} @media (max-width:720px){.glyph-cols{grid-template-columns:1fr}} /* ---- ref 16 · Straight North "When you win, we win": client + two ▲ stat chips + view-story link. Public-tier numbers only (ratios/deltas/multiples). ---- */ .win-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .win-card{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line); border-radius:var(--r-card);padding:28px 26px 26px;text-align:center;color:var(--body); transition:transform .2s,box-shadow .2s,border-color .2s} a.win-card{text-decoration:none;box-shadow:none} a.win-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent; color:var(--body)} .win-card__head{font-family:var(--ui);font-weight:700;font-size:19px;letter-spacing:-.025em; color:var(--ink);line-height:1.25;margin:0 0 4px} .win-card__sub{font-family:var(--ui);font-size:14px;color:var(--muted);margin:0 0 20px} .win-chip{background:var(--paper-2);border-radius:var(--r-sm);padding:16px 14px 14px;margin-top:10px} .win-chip b{display:block;font-family:'Anton',sans-serif;font-weight:400; font-size:clamp(30px,3vw,40px);line-height:1;color:var(--ink);font-variant-numeric:tabular-nums} .win-chip b::before{content:"\25B2";font-family:var(--ui);font-size:12px;color:var(--orange); vertical-align:middle;margin-right:8px;position:relative;top:-6px} .win-chip.is-down b::before{content:"\25BC"} .win-chip.is-flat b::before{content:"\25CF"} .win-chip span{display:block;font-family:var(--ui);font-weight:600;font-size:11.5px; letter-spacing:.06em;text-transform:uppercase;color:var(--body);margin-top:8px;line-height:1.35} .win-card__logo{margin:22px auto 0;height:38px;display:flex;align-items:center;justify-content:center} .win-card__logo img{max-height:38px;width:auto;max-width:170px;object-fit:contain} .win-card__logo--pill{background:var(--dark);border-radius:var(--r-pill);padding:10px 20px;height:auto} .win-card__logo--pill img{max-height:22px} .win-card__logo b{font-family:'Anton',sans-serif;font-size:20px;letter-spacing:.02em; text-transform:uppercase;color:var(--ink)} .win-card .golink{margin:18px auto 0;font-size:13px;font-weight:700;letter-spacing:.06em; text-transform:uppercase} @media (max-width:1080px){.win-cards{grid-template-columns:1fr 1fr}} @media (max-width:720px){.win-cards{grid-template-columns:1fr}} /* ---- ref 18 · Sticky-note testimonials: taped paper, handwriting, no portraits. Real quotes only. Photo-free by design — none of the three testimonials has a usable portrait, and this treatment doesn't need one. ---- */ .sn-wall{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px); padding:22px 0 8px} .sn-note{position:relative;background:var(--paper);padding:52px 30px 34px;min-height:220px; box-shadow:0 12px 30px rgba(0,0,0,.10),0 1px 2px rgba(0,0,0,.06); transform:rotate(var(--tilt,0deg));display:flex;flex-direction:column;justify-content:center} .sn-note:nth-child(3n+1){--tilt:-1.4deg;background:#FFFDF2} .sn-note:nth-child(3n+2){--tilt:.9deg; background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px);background-size:100% 26px} .sn-note:nth-child(3n){--tilt:-.6deg; background-image:linear-gradient(rgba(102,204,204,.28) 1px,transparent 1px), linear-gradient(90deg,rgba(102,204,204,.28) 1px,transparent 1px);background-size:22px 22px} .iband--alt .sn-note{background-color:var(--paper)} .sn-note::before,.sn-note::after{content:"";position:absolute;top:-12px;width:96px;height:26px; background:rgba(238,127,0,.45);opacity:.85;transform:rotate(-3deg); clip-path:polygon(2% 0,98% 3%,100% 100%,0 96%)} .sn-note::before{left:20px} .sn-note::after{right:20px;transform:rotate(4deg);background:rgba(102,204,204,.55)} .sn-note:nth-child(3n+2)::before,.sn-note:nth-child(3n+2)::after{background:rgba(252,196,0,.6)} .sn-note:nth-child(3n)::before{background:rgba(102,204,204,.55)} .sn-note:nth-child(3n)::after{background:rgba(0,0,0,.18)} .sn-note p{font-family:'Caveat','Segoe Script','Bradley Hand',cursive;font-size:24px;line-height:1.35; color:var(--ink);margin:0;flex:1} .sn-note:nth-child(3n+2) p{font-family:'Anton',sans-serif;font-size:19px;letter-spacing:.03em; text-transform:uppercase;line-height:1.5} .sn-note figcaption{margin-top:18px;font-family:var(--ui);font-size:13px;color:var(--muted)} .sn-note figcaption b{display:block;font-weight:600;color:var(--ink);font-size:14px} @media (max-width:920px){.sn-wall{grid-template-columns:1fr;max-width:520px;margin:0 auto}} @media (prefers-reduced-motion:reduce){.sn-note{transform:none}} /* ---- ref 9 · Power Digital photo + floating dark chart card. Rounded photo, ink card overlapping the corner, a chip label riding the top-left. ---- */ .photo-float{position:relative;padding:0 0 60px 0;max-width:640px} .photo-float__img{border-radius:var(--r-card);overflow:hidden;width:82%; aspect-ratio:1/1;background:var(--paper-2);position:relative;z-index:1} .photo-float__img img{width:100%;height:100%;object-fit:cover;display:block} .photo-float__frame{position:absolute;left:12%;top:-14px;width:76%;height:82%; border:2px solid var(--teal);border-radius:var(--r-card);z-index:0;pointer-events:none} .photo-float__tag{position:absolute;left:-14px;top:22px;z-index:3;background:var(--paper); border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:8px 16px; font-family:var(--ui);font-weight:500;font-size:14px;color:var(--ink)} .photo-float__card{position:absolute;right:0;bottom:0;z-index:2;width:62%; background:var(--dark);color:var(--on-dark);border-radius:var(--r-sm);padding:22px 24px 20px; box-shadow:var(--shadow)} .photo-float__card h4,.photo-float__card h3{font-family:var(--ui);font-weight:600;font-size:15px; margin:0 0 14px;color:var(--on-dark);letter-spacing:-.01em} .photo-float__card .n{display:block;font-family:'Anton',sans-serif; font-size:clamp(30px,3.4vw,44px);line-height:1;color:var(--teal)} .photo-float__card .l{display:block;font-family:var(--ui);font-size:12.5px; color:var(--on-dark-muted);margin-top:8px;line-height:1.4} .photo-float__card svg{display:block;width:100%;height:auto;margin-top:12px} @media (max-width:560px){.photo-float__card{width:74%;position:relative;margin:-40px 0 0 auto} .photo-float{padding-bottom:0}} /* ---- ref 13 · WebFX 4-card differentiator: icon top-left, title, blurb; light cards with a soft shadow. Icons are tinted brand FILLS with ink strokes. ---- */ .diff-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .diff-card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card); padding:28px 26px 30px;box-shadow:0 8px 24px rgba(0,0,0,.05)} .diff-card__icon{width:52px;height:52px;border-radius:14px;display:grid;place-items:center; margin-bottom:22px;background:rgba(102,204,204,.28)} .diff-card:nth-child(2) .diff-card__icon{background:var(--orange-tint)} .diff-card:nth-child(3) .diff-card__icon{background:rgba(252,196,0,.3)} .diff-card:nth-child(4) .diff-card__icon{background:var(--paper-2)} .diff-card__icon svg{width:26px;height:26px;stroke:var(--ink);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round} .diff-card :is(h2,h3){font-family:var(--ui);font-weight:600;font-size:18px;letter-spacing:-.02em; margin:0 0 10px;line-height:1.3} .diff-card p{font-size:14.5px;line-height:1.6;color:var(--body);margin:0} @media (max-width:1080px){.diff-cards{grid-template-columns:1fr 1fr}} @media (max-width:600px){.diff-cards{grid-template-columns:1fr}} /* ---- ref 12 · 9AM dashboard-in-gradient card. The gradient is the frame; the dashboard inside stays a white product surface. Brand-only gradient. ---- */ .dash-grad{border-radius:var(--r-card);padding:clamp(18px,2.6vw,34px); background:linear-gradient(135deg,#66CCCC 0%,#EE7F00 55%,#FCC400 100%); box-shadow:var(--shadow)} .dash-grad > .admock{margin:0;box-shadow:0 20px 50px rgba(0,0,0,.18)} .dash-grad__cap{font-family:var(--ui);font-size:12.5px;color:var(--ink);opacity:.8; margin:12px 4px 0} /* ---- ref 05 · Disruptive DIY / With us / For you tier band: B&W photo-topped cards on black, orange pill CTA. For /plans/ and pillar hubs. ---- */ .tier-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} .tier-card{background:var(--paper-2);border-radius:var(--r-sm);overflow:hidden; display:flex;flex-direction:column;color:var(--ink)} .tier-card img{width:100%;aspect-ratio:16/8;object-fit:cover;filter:grayscale(1);display:block} .tier-card__body{padding:24px 26px 28px;display:flex;flex-direction:column;flex:1} .tier-card h3{font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase; font-size:24px;letter-spacing:.01em;margin:0 0 10px} .tier-card p{font-size:15px;line-height:1.6;color:var(--body);margin:0 0 20px} .tier-card .btn{margin-top:auto;width:100%;background:var(--cta);color:var(--ink);border-color:var(--cta)} .tier-card .btn:hover{background:var(--dark);color:var(--on-dark);border-color:var(--dark)} @media (max-width:920px){.tier-cards{grid-template-columns:1fr}} /* ---- ref 17 · Straight North phone-mockup dark band (insights / newsletter). ---- */ .phone-band{background:var(--dark);border-radius:var(--r-card);color:var(--on-dark); display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(24px,3vw,48px); align-items:center;padding:clamp(28px,3.4vw,44px) clamp(24px,3vw,44px);overflow:hidden} .phone-band h2{color:var(--on-dark);font-family:var(--ui);font-weight:600;letter-spacing:-.02em; font-size:clamp(24px,2.8vw,34px);text-transform:none;margin:0 0 6px} .phone-band p{color:var(--on-dark-muted);font-size:17px;margin:0 0 22px} .phone-band form{display:flex;gap:10px;max-width:520px} .phone-band input{flex:1;height:52px;border-radius:12px;border:1px solid var(--line-dark); background:rgba(255,255,255,.06);color:var(--on-dark);padding:0 18px;font-family:var(--ui);font-size:15px} .phone-band input::placeholder{color:var(--on-dark-muted)} .phone-band .btn{height:52px;background:var(--cta);color:var(--ink);border-color:var(--cta)} .phone-mock{width:min(100%,260px);aspect-ratio:9/18.5;border-radius:34px;background:#111; border:6px solid #2a2a2a;box-shadow:0 30px 60px rgba(0,0,0,.4); transform:rotate(-8deg) translateY(10px);overflow:hidden;position:relative;margin:0 auto} .phone-mock::before{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%); width:90px;height:22px;background:#000;border-radius:12px;z-index:2} .phone-mock > img{width:100%;height:100%;object-fit:cover;object-position:top} @media (max-width:820px){.phone-band{grid-template-columns:1fr} .phone-mock{transform:none;max-height:260px;aspect-ratio:auto;border-radius:24px 24px 0 0; border-bottom:0}} @media (prefers-reduced-motion:reduce){.phone-mock{transform:none}} /* ---- ref 03 · Disruptive stat-led split hero: giant number, circle photo. For pillar hubs / homepage. Number in Anton, second line in orange ON BLACK. ---- */ .stat-hero{background:var(--dark);border-radius:var(--r-card);color:var(--on-dark); display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px); align-items:center;padding:clamp(34px,4.4vw,64px) clamp(26px,4vw,64px);overflow:hidden} .stat-hero .big{font-family:'Anton',sans-serif;text-transform:uppercase;line-height:.98; font-size:clamp(40px,6vw,84px);color:var(--on-dark);margin:0 0 20px} .stat-hero .big em{display:block;font-style:normal;color:var(--orange)} .stat-hero p{color:var(--on-dark);font-size:17.5px;max-width:52ch;margin:0 0 26px} .stat-hero p mark{background:none;color:var(--orange);font-weight:600} .stat-hero__photo{width:min(100%,420px);aspect-ratio:1/1;border-radius:50%;overflow:hidden; margin:0 auto;border:6px solid rgba(255,255,255,.08)} .stat-hero__photo img{width:100%;height:100%;object-fit:cover;display:block} @media (max-width:920px){.stat-hero{grid-template-columns:1fr} .stat-hero__photo{width:min(100%,280px)}} /* ---- rhythm helper: sections that carry their own dark/teal card don't need a tinted band behind them ---- */ .iband--plain{background:var(--paper)} /* ---- pass 3b (2026-08-18, Brandon: "numbered everything reads redundant; fewer sections; colour, images, pop") ---- */ .tone-card__num{display:none} .tone-card__dash{display:block;width:28px;height:3px;background:var(--orange);margin-bottom:16px} .tone-card:nth-child(3n+3) .tone-card__dash{background:var(--teal)} .benefit-card__glyph svg{width:22px;height:22px;stroke:var(--teal);fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} .band-pills__label{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.08em; text-transform:uppercase;margin:34px 0 12px;color:var(--ink)} .tool-pills--on-teal span{background:var(--paper);border-color:transparent;color:var(--ink)} .iband--teal .tool-pills__note{color:var(--ink);opacity:.8} /* the annotated mockup on the black band */ .iband--dark .admock{border-color:transparent;box-shadow:0 30px 70px rgba(0,0,0,.45)} .iband--dark .admock-notes li{border-bottom-color:var(--line-dark);color:var(--on-dark-muted)} .iband--dark .admock-notes b{color:var(--on-dark)} .iband--dark .admock__extra{color:var(--on-dark-muted)} .iband--dark .darkcard{border:1px solid var(--line-dark)} /* timeline: photo left, phases right */ .split-side--photo{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center; gap:clamp(32px,5vw,80px)} .split-side--photo .photo-float{margin:14px 0 0 14px} .pf-bars{display:grid;gap:8px} .pf-bar{position:relative;height:34px;border-radius:8px;background:rgba(255,255,255,.08);overflow:hidden} .pf-bar::before{content:"";position:absolute;inset:0;width:var(--w);background:var(--teal);opacity:.9} .pf-bar:nth-child(2)::before{background:var(--orange)} .pf-bar:nth-child(3)::before{background:var(--gold)} .pf-bar span,.pf-bar em{position:relative;z-index:1;font-family:var(--ui);font-size:12.5px; line-height:34px;font-style:normal;color:var(--ink);font-weight:600;padding:0 12px} .pf-bar em{position:absolute;right:0;top:0;color:var(--on-dark);font-weight:500;padding-right:12px} .phase-list{display:grid;gap:18px;margin-top:22px} .phase-item{border-left:3px solid var(--line);padding-left:18px} .phase-item:nth-child(1){border-color:var(--teal)} .phase-item:nth-child(2){border-color:var(--orange)} .phase-item:nth-child(3){border-color:var(--gold)} .phase-item strong{display:block;font-family:var(--ui);font-weight:700;font-size:17px; letter-spacing:-.02em;color:var(--ink);margin-bottom:4px} .phase-item .phase-when{font-family:var(--ui);font-weight:500;font-style:normal;font-size:12.5px; letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-left:8px} .phase-item p{font-size:15px;line-height:1.6;color:var(--body);margin:0} @media (max-width:920px){.split-side--photo{grid-template-columns:1fr} .split-side--photo .photo-float{max-width:520px;margin:14px auto 0}} /* two-column FAQ */ .faq-list--2col{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start} .faq-list--2col details{margin:0} @media (max-width:820px){.faq-list--2col{grid-template-columns:1fr}} /* ---- pass 3c: the "What's included" composition (text left, photo right) ---- */ .split-side--rev .photo-float{order:2;margin:14px 0 0 auto} .split-side--rev.split-side--photo{margin-bottom:34px;align-items:start} .split-side--rev .photo-float__card .n{font-size:clamp(26px,2.6vw,36px);letter-spacing:-.01em} .split-side--rev > div:first-child{order:1} .split-side--rev.split-side--photo{grid-template-columns:minmax(0,5fr) minmax(0,6fr)} .focus-list__label{font-family:var(--ui);font-weight:700;font-size:12.5px;letter-spacing:.08em; text-transform:uppercase;color:var(--ink);margin:26px 0 12px} .focus-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px} .focus-list li{border-left:3px solid var(--line);padding:4px 0 4px 14px;font-family:var(--ui); font-weight:500;font-size:15px} .focus-list li:nth-child(4n+1){border-color:var(--teal)} .focus-list li:nth-child(4n+2){border-color:var(--orange)} .focus-list li:nth-child(4n+3){border-color:var(--gold)} .focus-list li:nth-child(4n+4){border-color:var(--ink)} .focus-list li a{color:var(--ink);text-decoration:none;box-shadow:none} .focus-list li a:hover{text-decoration:underline;text-underline-offset:3px;box-shadow:none} .focus-list li.is-here{font-weight:700} .focus-list li.is-here span::after{content:"you are here";font-weight:500;font-size:11.5px; color:var(--muted);margin-left:10px} .photo-float__card .golink{display:inline-flex;margin-top:14px;font-size:13.5px} .photo-float__card .golink--on-dark{color:var(--on-dark)} @media (max-width:920px){.split-side--rev .photo-float{order:0;margin:14px auto 0} .split-side--rev.split-side--photo{grid-template-columns:1fr} .focus-list{grid-template-columns:1fr}} @media (max-width:560px){.focus-list{grid-template-columns:1fr}} /* ---- pass 3d: dashboard collage (Tinuiti "Blisspoint" reference) + coloured focus pills ---- */ .chip--teal{background:rgba(102,204,204,.32);color:var(--ink)} .chip--orange{background:var(--orange-tint);color:var(--ink)} .chip--gold{background:rgba(252,196,0,.34);color:var(--ink)} .chip--inkt{background:var(--paper-2);color:var(--ink)} .chip--here{background:var(--dark);color:var(--on-dark)} .focus-chips{display:flex;flex-wrap:wrap;gap:8px} .focus-chips .chip{font-size:13.5px;padding:7px 14px;box-shadow:none;text-decoration:none} .focus-chips a.chip:hover{background:var(--dark);color:var(--on-dark);box-shadow:none} .dash-collage{position:relative;width:100%;max-width:580px;margin:0 0 18px;padding:18px 0 14px; font-family:var(--ui);order:0;justify-self:start} .dc-screen{position:relative;width:95%;background:var(--paper);border-radius:14px; box-shadow:0 30px 60px rgba(0,0,0,.18),0 2px 6px rgba(0,0,0,.08);overflow:hidden; transform:perspective(1200px) rotateY(-7deg) rotateX(2deg) rotate(-1.5deg);transform-origin:left center} .dc-bar{display:flex;align-items:center;gap:6px;background:var(--dark);padding:10px 14px} .dc-bar i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.35)} .dc-bar span{margin-left:8px;color:var(--on-dark-muted);font-size:11px;letter-spacing:.01em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dc-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding:14px 12px 10px} .dc-tile{border:1px solid var(--line);border-radius:8px;padding:9px 9px 6px;min-width:0} .dc-tile__l{display:block;font-size:9.5px;color:var(--muted);letter-spacing:.02em; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dc-tile b{display:block;font-family:'Anton',sans-serif;font-weight:400;font-size:16px;line-height:1.1; color:var(--ink);margin-top:2px} .dc-tile em{display:block;font-style:normal;font-size:9.5px;font-weight:600;margin:2px 0 4px} .dc-tile svg{display:block;width:100%;height:24px} .is-up{color:#1D8A5A}.is-down{color:var(--orange)} .dc-bars{display:flex;align-items:flex-end;gap:5px;height:132px;padding:0 12px 18px} .dc-bars i{flex:1;height:var(--h);background:var(--teal);border-radius:3px 3px 0 0;opacity:.85} .dc-bars i:nth-child(3n){background:var(--orange)} .dc-pill{position:absolute;background:var(--paper);border-radius:var(--r-pill);padding:9px 16px; box-shadow:0 12px 30px rgba(0,0,0,.14);font-size:14px;color:var(--body);white-space:nowrap; display:inline-flex;align-items:center;gap:6px} .dc-pill b{font-family:'Anton',sans-serif;font-weight:400;font-size:19px;color:var(--ink);letter-spacing:.01em} .dc-pill i{font-style:normal;font-weight:700} .dc-pill--a{right:-6px;top:6px} .dc-pill--b{left:-18px;bottom:30%} .dc-pill--c{right:-10px;bottom:-4px} .dc-card{position:absolute;right:-8px;bottom:-2%;width:50%;background:var(--paper);border-radius:12px; padding:12px 14px 10px;box-shadow:0 18px 40px rgba(0,0,0,.16)} .dc-card__l{display:block;font-size:11px;font-weight:600;color:var(--ink);margin-bottom:6px} .dc-card svg{display:block;width:100%;height:52px} .dc-price{position:absolute;right:0;bottom:0;width:48%;z-index:3} .dc-tag{position:absolute;right:0;top:0;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);background:var(--paper);border:1px solid var(--line);border-radius:var(--r-pill); padding:4px 10px} @media (max-width:920px){.dash-collage{margin:24px auto 30px;max-width:520px}} @media (max-width:560px){.dc-tiles{grid-template-columns:1fr 1fr}.dc-pill{font-size:12px;padding:7px 12px} .dc-pill b{font-size:16px}.dc-price{width:56%}} /* ---- pass 3e: entry price beside the comparison; pill colour = pillar ---- */ .compare--3{grid-template-columns:1fr 1fr .78fr} .compare__c--price{background:var(--teal);color:var(--ink);display:flex;flex-direction:column} .compare__c--price h4{color:var(--ink);font-size:13px;letter-spacing:.06em;text-transform:uppercase} .compare__c--price .n{display:block;font-family:'Anton',sans-serif;font-size:clamp(28px,2.8vw,40px); line-height:1.05;color:var(--ink);margin:2px 0 6px} .compare__c--price .l{display:block;font-family:var(--ui);font-weight:600;font-size:13px;color:var(--ink); margin-bottom:12px} .compare__c--price p{font-size:14px;line-height:1.55;color:var(--ink);opacity:.85;margin:0 0 18px;flex:1} .compare__c--price .btn.btn--dark{color:#fff;box-shadow:none;align-self:flex-start} @media (max-width:1080px){.compare--3{grid-template-columns:1fr 1fr} .compare__c--price{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap;align-items:center;gap:8px 22px} .compare__c--price h4{width:100%;margin:0}.compare__c--price p{flex:1 1 260px;margin:0} .compare__c--price .n{margin:0}} @media (max-width:720px){.compare--3{grid-template-columns:1fr} .compare__c--price{flex-direction:column;align-items:flex-start}} /* ---- pass 3f: per-service collage bodies (the image must be logical to the service) ---- */ .dc-body{min-height:240px;max-height:330px;overflow:hidden;padding:12px;font-family:var(--ui);color:var(--ink)} .dash-collage--dash .dc-body{padding:0} .dc-lines{display:block} .dc-lines i{display:block;height:7px;border-radius:4px;background:var(--paper-2);margin:6px 0} .dc-lines.is-edit i{background:rgba(102,204,204,.55)} /* serp */ .dc-serp__q{border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 12px;font-size:12px; color:var(--muted);margin-bottom:12px} .dc-serp__r{display:flex;gap:10px;padding:9px 8px;border-radius:8px;align-items:flex-start} .dc-serp__r.is-us{background:rgba(102,204,204,.18);outline:2px solid var(--teal)} .dc-serp__r b{display:block;font-size:12.5px;font-weight:600;color:#1a0dab;line-height:1.3} .dc-serp__r.is-us b{color:var(--ink)} .dc-serp__r > div{flex:1;min-width:0} .dc-serp__rank{flex:0 0 26px;height:26px;border-radius:50%;background:var(--paper-2);display:grid; place-items:center;font-size:11px;font-weight:700} .dc-serp__r.is-us .dc-serp__rank{background:var(--dark);color:var(--teal)} /* answer */ .dc-answer__q{background:var(--paper-2);border-radius:14px 14px 14px 4px;padding:10px 12px;font-size:12.5px; font-weight:600;max-width:78%;margin-bottom:12px} .dc-answer__a{border:1px solid var(--line);border-radius:14px 14px 4px 14px;padding:12px;font-size:12px} .dc-answer__a mark{background:rgba(102,204,204,.45);color:var(--ink);font-weight:700;padding:1px 6px;border-radius:4px} .dc-answer__src{display:flex;gap:6px;margin-top:10px} .dc-answer__src span{font-size:10.5px;border:1px solid var(--line);border-radius:var(--r-pill);padding:3px 8px;color:var(--muted)} /* doc */ .dc-doc{position:relative} .dc-doc__t{font-weight:700;font-size:13px;margin-bottom:8px} .dc-doc__tag{position:absolute;right:0;top:0;font-size:10.5px;font-weight:700;background:var(--dark); color:var(--teal);border-radius:var(--r-pill);padding:4px 9px} /* pipeline */ .dc-pipe{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;height:100%} .dc-pipe__col{background:var(--paper-3);border-radius:8px;padding:8px;min-height:230px} .dc-pipe__col.is-hot{background:var(--orange-tint)} .dc-pipe__col > span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-bottom:8px} .dc-pipe__card{display:block;background:var(--paper);border-radius:6px;padding:8px;margin-bottom:6px; box-shadow:0 1px 3px rgba(0,0,0,.08)} .dc-pipe__card b{display:block;height:7px;width:70%;background:var(--paper-2);border-radius:4px} .dc-pipe__card em{display:block;height:6px;width:45%;background:var(--paper-2);border-radius:4px;margin-top:5px} /* flow */ .dc-flow{display:flex;align-items:center;gap:6px;height:100%;min-height:230px} .dc-flow__n{flex:1;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px 8px; text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.06)} .dc-flow__n span{display:block;font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em} .dc-flow__n b{display:block;font-size:12px;margin:4px 0 6px} .dc-flow__n em{font-style:normal;font-size:16px;color:var(--orange)} .dc-flow__arr{width:14px;height:2px;background:var(--ink);position:relative;flex:none} .dc-flow__arr::after{content:"";position:absolute;right:-1px;top:-4px;border:5px solid transparent;border-left-color:var(--ink)} /* reviews */ .dc-rev{display:grid;grid-template-columns:1fr 1fr;gap:8px} .dc-rev__big{grid-row:1 / span 2;background:var(--dark);color:var(--on-dark);border-radius:10px;padding:16px; display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center} .dc-rev__big b{font-family:'Anton',sans-serif;font-size:44px;line-height:1} .dc-rev__big span{color:var(--gold);font-size:16px;margin:6px 0 4px} .dc-rev__big em{font-style:normal;font-size:11px;color:var(--on-dark-muted)} .dc-rev__c{border:1px solid var(--line);border-radius:8px;padding:8px 10px} .dc-rev__c > span:first-child{color:var(--gold);font-size:12px} .dc-rev__c b{display:inline-block;font-size:10px;background:rgba(102,204,204,.35);border-radius:var(--r-pill); padding:2px 8px;margin-top:4px} /* watch */ .dc-watch__r{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:11px 8px; border-bottom:1px solid var(--line);font-size:12.5px} .dc-watch__r:last-child{border-bottom:0} .dc-watch__r b{font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 9px} .dc-watch__r b.is-flag{background:var(--orange);color:var(--ink)} .dc-watch__r b.is-ok{background:var(--paper-2);color:var(--muted)} /* browser */ .dc-site{display:grid;grid-template-columns:1fr 92px;gap:12px;align-items:center;min-height:230px} .dc-site__page{border:1px solid var(--line);border-radius:8px;padding:10px;display:grid; grid-template-columns:repeat(3,1fr);gap:8px} .dc-site__hero{grid-column:1 / -1;height:70px;border-radius:6px;background:linear-gradient(135deg,var(--teal),var(--orange))} .dc-site__col{height:64px;border-radius:6px;background:var(--paper-2)} .dc-site__score{position:relative;text-align:center} .dc-site__score svg{width:92px;height:92px;transform:rotate(-90deg)} .dc-site__score .bg{fill:none;stroke:var(--paper-2);stroke-width:3.5} .dc-site__score .fg{fill:none;stroke:#1D8A5A;stroke-width:3.5;stroke-linecap:round} .dc-site__score b{position:absolute;left:0;right:0;top:26px;font-family:'Anton',sans-serif;font-size:28px} .dc-site__score span{display:block;font-size:10.5px;color:var(--muted);margin-top:-2px} /* phone */ .dc-phone{display:grid;grid-template-columns:120px 1fr;gap:16px;align-items:center;min-height:230px} .dc-phone__f{border:5px solid #1a1a1a;border-radius:22px;background:var(--paper);padding:26px 10px 12px;position:relative; min-height:220px} .dc-phone__notch{position:absolute;left:50%;top:6px;transform:translateX(-50%);width:44px;height:8px;background:#1a1a1a;border-radius:6px} .dc-phone__f b{display:block;font-size:12px;margin-bottom:6px} .dc-phone__btn{display:block;margin-top:10px;background:var(--dark);color:var(--on-dark);border-radius:var(--r-pill); text-align:center;font-style:normal;font-size:11px;padding:6px} .dc-phone__side span{display:block;font-size:11px;color:var(--muted)} .dc-phone__side b{display:block;font-family:'Anton',sans-serif;font-size:34px;line-height:1.1;margin:4px 0} .dc-phone__side em{font-style:normal;font-size:11px;color:var(--muted)} /* checklist */ .dc-check__r{display:flex;align-items:center;gap:10px;padding:10px 6px;border-bottom:1px solid var(--line);font-size:12.5px} .dc-check__r:last-child{border-bottom:0} .dc-check__r i{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-style:normal; font-size:12px;font-weight:700} .dc-check__r i.is-ok{background:rgba(102,204,204,.4);color:var(--ink)} .dc-check__r i.is-warn{background:var(--orange);color:var(--ink)} /* roadmap */ .dc-road{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;min-height:230px} .dc-road__col{background:var(--paper-3);border-radius:8px;padding:8px} .dc-road__col:first-child{background:rgba(102,204,204,.22)} .dc-road__col span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase; color:var(--muted);margin-bottom:8px} .dc-road__col b{display:block;background:var(--paper);border-radius:6px;padding:8px;font-size:11.5px;font-weight:600; margin-bottom:6px;box-shadow:0 1px 3px rgba(0,0,0,.08)} /* board */ .dc-board{display:grid;grid-template-columns:1fr 1fr;gap:10px;min-height:230px} .dc-board__logo{grid-row:1 / span 2;background:var(--dark);color:var(--teal);border-radius:10px;display:grid; place-items:center;font-family:'Anton',sans-serif;font-size:56px} .dc-board__sw{display:flex;gap:6px} .dc-board__sw i{flex:1;height:44px;border-radius:8px} .dc-board__type b{font-family:'Anton',sans-serif;font-size:30px;line-height:1} .dc-board__type span{display:block;font-size:11px;color:var(--muted)} .dc-board__tiles{grid-column:1 / -1;display:flex;gap:8px} .dc-board__tiles i{flex:1;height:44px;border-radius:8px;background:var(--paper-2)} .dc-board__tiles i:nth-child(2){background:var(--orange-tint)} /* grid */ .dc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .dc-grid__p{aspect-ratio:1/1;border-radius:8px;background:var(--t);position:relative} .dc-grid__p em{position:absolute;left:8px;bottom:6px;font-style:normal;font-size:10.5px;background:rgba(255,255,255,.85); border-radius:var(--r-pill);padding:2px 7px} /* ---- pillar hubs: linkable tone cards; win cards on the teal band ---- */ a.tone-card{display:block;text-decoration:none;box-shadow:none;transition:transform .2s,box-shadow .2s} a.tone-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)} a.tone-card .golink{display:inline-block;margin-top:14px;font-size:14px} a.tone-card:nth-child(3n+3) .golink{color:var(--on-dark)} .iband--teal .win-card{border-color:transparent;box-shadow:0 10px 30px rgba(0,0,0,.10)} .iband--teal .win-chip{background:var(--paper-3)} /* ---- batch 2 (2026-08-18): /plans/ /about/ /insights/ /our-work/ ---- */ .teal-note{background:var(--paper);border-radius:var(--r-sm);padding:18px 22px;font-size:15px;line-height:1.6; color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.08);margin-top:18px} .tier-cards--4{grid-template-columns:repeat(4,1fr)} @media (max-width:1080px){.tier-cards--4{grid-template-columns:1fr 1fr}} @media (max-width:640px){.tier-cards--4{grid-template-columns:1fr}} .tier-card .btn{color:var(--ink);box-shadow:none;text-decoration:none} .tone-cards--4{grid-template-columns:repeat(4,1fr)} .tone-cards--4 .tone-card:nth-child(3n+2),.tone-cards--4 .tone-card:nth-child(3n+3){background:var(--paper-2);color:var(--ink)} .tone-cards--4 .tone-card:nth-child(3n+3) p{color:var(--body)} .tone-cards--4 .tone-card:nth-child(4n+2){background:var(--orange-tint)} .tone-cards--4 .tone-card:nth-child(4n+3){background:var(--dark);color:var(--on-dark)} .tone-cards--4 .tone-card:nth-child(4n+3) p{color:var(--on-dark-muted)} .tone-cards--4 .tone-card:nth-child(4n+3) .tone-card__dash{background:var(--teal)} .tone-cards--4 .tone-card:nth-child(4n+4){background:rgba(102,204,204,.22)} @media (max-width:1080px){.tone-cards--4{grid-template-columns:1fr 1fr}} @media (max-width:640px){.tone-cards--4{grid-template-columns:1fr}} .pf-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px} .pf-stat b{display:block;font-family:'Anton',sans-serif;font-size:clamp(24px,2.4vw,32px);line-height:1;color:var(--teal)} .pf-stat:nth-child(2) b{color:var(--orange)}.pf-stat:nth-child(3) b{color:var(--gold)}.pf-stat:nth-child(4) b{color:var(--on-dark)} .pf-stat span{display:block;font-family:var(--ui);font-size:11.5px;color:var(--on-dark-muted);margin-top:4px;line-height:1.35} /* device frames on the work wall */ .cs-card[data-cat="Websites"] .cs-shot{margin-top:22px;height:calc(100% - 22px)} .cs-card[data-cat="Websites"]::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:#1a1a1a;z-index:1} .cs-card[data-cat="Websites"]::after{content:"";position:absolute;left:12px;top:8px;width:6px;height:6px;border-radius:50%; background:#EE7F00;box-shadow:12px 0 0 #FCC400,24px 0 0 #66CCCC;z-index:2} .cs-card[data-cat="Apps"]{border:8px solid #1a1a1a;border-radius:28px} .cs-card[data-cat="Apps"]::before{content:"";position:absolute;left:50%;top:6px;transform:translateX(-50%);width:60px;height:10px; background:#1a1a1a;border-radius:8px;z-index:2} .iband--alt .tier-card{background:var(--paper)} .phone-mock__page{background:var(--paper);height:100%;padding:34px 14px 14px;font-family:var(--ui);color:var(--ink)} .phone-mock__logo{height:22px!important;width:auto!important;display:block;margin-bottom:16px;object-fit:contain} .phone-mock__page b{display:block;font-family:'Anton',sans-serif;font-weight:400;text-transform:uppercase;font-size:24px;line-height:1} .phone-mock__page span{display:block;font-size:11px;color:var(--muted);margin:4px 0 12px} .phone-mock__hero{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block} .phone-mock__page em{display:block;font-style:normal;font-weight:600;font-size:12.5px;line-height:1.35;margin:10px 0 8px} .phone-mock__page i{display:block;height:6px;border-radius:4px;background:var(--paper-2);margin:6px 0;width:92%} .phone-mock__page i:nth-of-type(2){width:80%}.phone-mock__page i:nth-of-type(3){width:60%} /* about: homepage deck in the interior hero; big numbers card */ .ihero-media--copy .hero-deck{margin:0 0 0 auto} @media (max-width:920px){.ihero-media--copy .hero-deck{margin:24px auto 0}} .numbers-card{padding:clamp(28px,3.4vw,44px);border-radius:var(--r-card);position:relative;overflow:hidden} .numbers-card h3{font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase; color:var(--on-dark-muted);margin:0 0 22px;position:relative} .pf-stats--lg{gap:26px 28px;position:relative} .pf-stats--lg .pf-stat b{font-size:clamp(40px,4.6vw,64px)} .pf-stats--lg .pf-stat span{font-size:13.5px;margin-top:8px} .work-cta{margin-top:16px;font-size:15.5px} .work-cta .golink{font-size:15px} /* the About numbers card sits INSIDE the split grid — opt out of the pass-1 full-bleed */ .page-content .darkcard.numbers-card{border-radius:var(--r-card);margin:0;padding:clamp(28px,3.4vw,44px)} /* ---- TideIQ page ---- */ .tiq-mark{position:relative;background:var(--dark);border-radius:var(--r-card);padding:clamp(34px,4vw,56px) clamp(28px,3.4vw,48px); color:var(--on-dark);overflow:hidden;min-height:300px;display:flex;flex-direction:column;justify-content:flex-end} .tiq-mark__word{font-family:'Anton',sans-serif;font-size:clamp(56px,6.4vw,92px);line-height:.95;letter-spacing:.01em; text-transform:uppercase;position:relative;z-index:1} .tiq-mark__word b{color:var(--teal);font-weight:400} .ihero-media .tiq-mark__img,.tiq-mark__img{display:block;width:min(100%,520px);height:auto;aspect-ratio:auto;object-fit:contain;position:relative;z-index:1;margin-bottom:6px} .lead-form__row--3{grid-template-columns:1fr 1fr 1fr} .lead-form select[multiple]{height:auto;padding:8px 10px} @media (max-width:760px){.lead-form__row--3{grid-template-columns:1fr}} .tiq-mark__sub{display:block;font-family:var(--ui);font-size:13.5px;color:var(--on-dark-muted);margin-top:14px;position:relative;z-index:1} .tiq-mark__rings{position:absolute;right:-120px;top:-120px;width:420px;height:420px} .tiq-mark__rings i{position:absolute;inset:0;border-radius:50%;border:2px solid rgba(102,204,204,.35)} .tiq-mark__rings i:nth-child(2){inset:48px;border-color:rgba(238,127,0,.35)} .tiq-mark__rings i:nth-child(3){inset:96px;border-color:rgba(252,196,0,.35)} .iband--teal .tool-pills span{background:var(--paper)} .tool-pills--lg span{font-size:15px;padding:10px 18px} .split-side--photo .aiv-orbit{margin:0;max-width:520px} .note-band + .dash-grad{margin-top:26px} .tiq-mark__word sup{font-family:var(--ui);font-size:.22em;vertical-align:top;position:relative;top:.55em;margin-left:.1em;color:var(--on-dark-muted)} .band-pills__intro{margin:-4px 0 14px;font-size:15px} .iband--teal .band-pills__intro a{color:var(--ink)} /* homepage: teal results band with win cards; 4-up variant */ .sec--teal{background:var(--teal)} .sec--teal .sec-head p{color:var(--ink)} .win-cards--4{grid-template-columns:repeat(4,1fr)} .win-cards--4 .win-card{padding:24px 18px 22px} .win-cards--4 .win-card__head{font-size:17px} @media (max-width:1080px){.win-cards--4{grid-template-columns:1fr 1fr}} @media (max-width:640px){.win-cards--4{grid-template-columns:1fr}} .sec .sn-wall{max-width:1100px;margin:0 auto} /* TideIQ reachability: nav pill, AI Visibility hero line, AI Services hub callout */ .nav-pill--tiq{background:var(--dark);color:var(--on-dark)} .nav-pill--tiq:hover{background:var(--teal);color:var(--ink)} .hero-tiq{font-family:var(--ui);font-size:14px;color:var(--body);margin:14px 0 0} .hero-tiq a{color:var(--ink);box-shadow:none;text-decoration:none} .hero-tiq a:hover{text-decoration:underline;text-underline-offset:3px} .hero-tiq b{font-weight:700} .tiq-callout{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(18px,3vw,40px);align-items:center; background:var(--dark);color:var(--on-dark);border-radius:var(--r-card);padding:clamp(22px,3vw,34px) clamp(22px,3vw,40px); margin-top:22px;text-decoration:none;box-shadow:none;transition:transform .2s,box-shadow .2s} .tiq-callout:hover{transform:translateY(-3px);box-shadow:var(--shadow);color:var(--on-dark)} .tiq-callout__mark{font-family:'Anton',sans-serif;font-size:clamp(34px,3.6vw,48px);line-height:1;text-transform:uppercase; letter-spacing:.01em;color:var(--on-dark)} .tiq-callout__mark b{color:var(--teal);font-weight:400} .tiq-callout__mark sup{font-family:var(--ui);font-size:.22em;vertical-align:top;position:relative;top:.55em;color:var(--on-dark-muted)} .tiq-callout__copy{font-size:15px;line-height:1.55;color:var(--on-dark-muted);max-width:60ch} .tiq-callout__copy strong{color:var(--on-dark);display:block;margin-bottom:4px} @media (max-width:920px){.tiq-callout{grid-template-columns:1fr;text-align:left}} /* ============================================================ DESIGN PASS 4 (2026-08-21) — Brandon's remaining screenshot treatments A. Services sheet: recent case-study card + preview CTA (08-18 decision) B. ref 14 Ignite: homepage operators band as an animated dashboard split C. ref 11 Power Digital: photo-card carousel on the big pillar hubs ============================================================ */ /* ---- A. nav sheet extras ---- */ .sheet-extra{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px} .sheet-case{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center; background:var(--dark);color:var(--on-dark);border-radius:14px;padding:14px 18px; transition:box-shadow .16s,transform .16s} .sheet-case:hover{box-shadow:var(--shadow);transform:translateY(-2px)} .sheet-case__logo{display:flex;align-items:center;justify-content:center;background:#FFFFFF; border-radius:8px;padding:6px 10px;min-width:64px;height:46px} .sheet-case__logo img{max-height:30px;width:auto;max-width:110px} .sheet-case__logo b{font-family:var(--ui);font-weight:600;font-size:13px;color:var(--ink)} .sheet-case__eyebrow{display:block;font-family:var(--ui);font-size:11.5px;letter-spacing:.04em; text-transform:uppercase;color:var(--on-dark-muted)} .sheet-case__body > b{display:block;font-family:var(--ui);font-weight:600;font-size:15px; letter-spacing:-.015em;color:var(--on-dark);margin-top:3px;line-height:1.3} .sheet-case__stat{display:block;font-family:var(--ui);font-size:12.5px;color:var(--on-dark-muted); margin-top:5px} .sheet-case__stat strong{color:var(--teal);font-weight:600;margin-right:4px} .sheet-cta{display:flex;align-items:center;justify-content:space-between;gap:16px; background:var(--orange-tint);border-radius:14px;padding:14px 18px} .sheet-cta b{display:block;font-family:var(--ui);font-weight:600;font-size:15px;letter-spacing:-.015em;color:var(--ink)} .sheet-cta p{font-family:'DM Sans',sans-serif;font-size:13.5px;line-height:1.45;color:var(--muted);margin-top:3px} .sheet-cta .btn{flex:none;white-space:nowrap} @media (max-width:1080px){.sheet-cta{flex-direction:column;align-items:flex-start}} @media (max-width:920px){.sheet-extra{grid-template-columns:1fr}.sheet-case{grid-template-columns:1fr}} /* ---- B. operators band: Ignite split ---- */ .ops-split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,4.5vw,72px);align-items:center} .ops-dash{position:relative;aspect-ratio:5/4;font-family:var(--ui)} .ops-card{position:absolute;border-radius:14px;background:var(--paper);color:var(--ink); padding:16px 18px 14px;box-shadow:0 24px 60px rgba(0,0,0,.55);letter-spacing:-.01em} .ops-card--main{left:0;top:15%;width:82%;padding-bottom:12px} .ops-card b,.ops-card em,.ops-card span{color:var(--ink)} .ops-card--gauge b,.ops-card--gauge small{color:var(--on-dark-muted)} .ops-card__head{display:block} .ops-card__head b{font-weight:600;font-size:14px} .ops-card__head span{display:block;font-size:11.5px;color:var(--muted)!important;margin-top:1px} .ops-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:12px 0 10px} .ops-stats span{display:block;font-size:10.5px;color:var(--muted)!important} .ops-stats b{display:block;font-size:18px;font-weight:600;line-height:1.15;margin-top:2px} .ops-stats em{display:inline-block;font-style:normal;font-size:10.5px;font-weight:600;margin-top:3px; padding:1px 6px;border-radius:100px;background:var(--paper-2);color:var(--ink)} .ops-stats em.is-up{background:rgba(102,204,204,.35)} .ops-stats em.is-down{background:rgba(252,196,0,.35)} .ops-line{display:block;width:100%;height:auto;aspect-ratio:420/150;overflow:visible} .ops-line__grid line{stroke:var(--line);stroke-width:1} .ops-line__area{fill:var(--teal);opacity:0;transition:opacity 1.2s ease 1s} .ops-line__path{fill:none;stroke:var(--teal);stroke-width:3;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.7s cubic-bezier(.4,0,.2,1) .35s} .ops-line__path--2{stroke:var(--orange);stroke-width:2.5;transition-delay:.6s} .ops-axis{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted);margin-top:6px} .ops-card--bars{right:0;top:0;width:34%;padding-bottom:16px} .ops-card--bars b{display:block;font-size:13px;font-weight:600;margin-bottom:12px} .ops-bars{display:flex;align-items:flex-end;gap:7%;height:88px} .ops-bars i{flex:1;height:calc(var(--h)*100%);border-radius:4px 4px 2px 2px;background:var(--ink); transform:scaleY(0);transform-origin:bottom;transition:transform .75s cubic-bezier(.2,.7,.2,1)} .ops-bars i:nth-child(even){background:var(--gold)} .ops-bars i:last-child{background:var(--orange)} .ops-bars i:nth-child(2){transition-delay:.08s}.ops-bars i:nth-child(3){transition-delay:.16s} .ops-bars i:nth-child(4){transition-delay:.24s}.ops-bars i:nth-child(5){transition-delay:.32s} .ops-bars i:nth-child(6){transition-delay:.4s} .ops-card--gauge{right:3%;bottom:3%;width:38%;background:#0E0E0E;border:1px solid var(--line-dark); color:var(--on-dark);text-align:center;padding-bottom:16px} .ops-card--gauge b{display:block;font-size:12.5px;font-weight:600;color:var(--on-dark-muted)} .ops-gauge{display:block;width:72%;margin:10px auto 0;overflow:visible} .ops-gauge path{fill:none;stroke-width:10;stroke-linecap:round} .ops-gauge__bg{stroke:rgba(255,255,255,.14)} .ops-gauge__val{stroke:var(--orange);stroke-dasharray:1;stroke-dashoffset:1; transition:stroke-dashoffset 1.5s cubic-bezier(.4,0,.2,1) .5s} .ops-card--gauge .ops-gauge__num{display:block;font-family:'Anton',sans-serif;font-size:30px;line-height:1;margin-top:-14px;color:var(--teal)} .ops-card--gauge small{display:block;font-size:11px;color:var(--on-dark-muted);margin-top:6px} /* animate in when the reveal observer flips the band to .in */ .ops-split.in .ops-line__path{stroke-dashoffset:0} .ops-split.in .ops-line__area{opacity:.16} .ops-split.in .ops-bars i{transform:scaleY(1)} .ops-split.in .ops-gauge__val{stroke-dashoffset:.54} @keyframes ops-float{from{translate:0 0}to{translate:0 -9px}} @keyframes ops-float-2{from{translate:0 0}to{translate:0 7px}} .ops-split.in .ops-card--gauge{animation:ops-float 3.6s ease-in-out 1.8s infinite alternate} .ops-split.in .ops-card--bars{animation:ops-float-2 4.4s ease-in-out 1.2s infinite alternate} .ops-copy .eyebrow{margin-bottom:14px} .ops-copy h2{color:var(--on-dark);font-size:clamp(28px,3.1vw,42px)} .ops-list{list-style:none;margin:26px 0 0;padding:0} .ops-list li{padding:16px 0 0;margin-top:16px;border-top:1px solid var(--line-dark)} .ops-list li:first-child{margin-top:0} .ops-list h3{font-family:var(--ui);font-weight:600;font-size:17.5px;letter-spacing:-.02em;color:var(--on-dark);margin:0 0 6px} .ops-list p{font-size:14.5px;line-height:1.6;color:var(--on-dark-muted);margin:0} .ops-copy .btn{margin-top:26px} @media (max-width:920px){ .ops-split{grid-template-columns:1fr;gap:36px} .ops-dash{aspect-ratio:4/3;max-width:520px;margin:0 auto;width:100%} } @media (max-width:560px){ .ops-stats b{font-size:15px}.ops-card{padding:12px 13px 10px}.ops-bars{height:64px} .ops-gauge__num{font-size:24px} } @media (prefers-reduced-motion:reduce){ .ops-line__path,.ops-line__area,.ops-bars i,.ops-gauge__val{transition:none} .ops-line__path{stroke-dashoffset:0}.ops-line__area{opacity:.16}.ops-bars i{transform:none} .ops-gauge__val{stroke-dashoffset:.54} .ops-split.in .ops-card--gauge,.ops-split.in .ops-card--bars{animation:none} } /* ---- C. hub service carousel (Power Digital ref 11) ---- */ .svc-carousel{position:relative} .svc-carousel__track{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;padding:4px 4px 16px;cursor:grab;scrollbar-width:none;-ms-overflow-style:none} .svc-carousel__track::-webkit-scrollbar{display:none} .svc-carousel__track.is-drag{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto;user-select:none} .svc-slide{flex:0 0 300px;scroll-snap-align:start;border-radius:var(--r-sm);overflow:hidden; background:var(--paper-2);color:var(--ink);display:flex;flex-direction:column; transition:transform .18s,box-shadow .18s} .svc-slide:hover{transform:translateY(-3px);box-shadow:var(--shadow)} .svc-slide:nth-child(3n+2){background:var(--orange-tint)} .svc-slide:nth-child(3n+3){background:var(--dark);color:var(--on-dark)} .iband--alt .svc-slide:nth-child(3n+1){background:var(--paper)} .svc-slide img{width:100%;aspect-ratio:16/10;object-fit:cover;pointer-events:none} .svc-slide__body{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1} .svc-slide h3{font-family:var(--ui);font-weight:600;font-size:17px;letter-spacing:-.02em;margin:0 0 8px;color:inherit} .svc-slide p{font-size:14px;line-height:1.55;color:var(--body);margin:0;flex:1;max-width:none} .svc-slide:nth-child(3n+3) p{color:var(--on-dark-muted)} .svc-slide .golink{margin-top:14px;font-size:14px} .svc-slide:nth-child(3n+3) .golink{color:var(--on-dark-accent)} .svc-carousel__nav{display:flex;align-items:center;gap:14px;margin-top:4px} .svc-carousel__btn{width:40px;height:40px;border-radius:50%;border:1px solid var(--line);background:var(--paper); color:var(--ink);cursor:pointer;font-size:18px;line-height:1;display:inline-flex;align-items:center; justify-content:center;transition:background .14s,color .14s,opacity .14s} .svc-carousel__btn:hover{background:var(--dark);color:#FFFFFF} .svc-carousel__btn[disabled]{opacity:.3;cursor:default} .svc-carousel__btn[disabled]:hover{background:var(--paper);color:var(--ink)} .svc-carousel__bar{flex:1;height:3px;background:var(--line);border-radius:2px;overflow:hidden} .svc-carousel__bar i{display:block;height:100%;width:30%;background:var(--ink);border-radius:2px; transition:transform .12s linear,width .12s linear} @media (max-width:560px){.svc-slide{flex-basis:78vw}} /* ---- 2026-08-22 (Brandon): animate the "What's included" collages the way the homepage "How we work" split animates — lines draw, bars grow, rings sweep, rows stagger in, pills pop then float. Each kind gets a sequence that reads as the service doing its work. The collage carries .reveal, so the shared IntersectionObserver adds .in once (reduced motion: .in is added immediately and every transition/animation below is switched off). Before .in, nothing is drawn. ---- */ .dash-collage.reveal{transform:none} .dash-collage.reveal .dc-screen{opacity:0;transform:perspective(1200px) rotateY(-16deg) rotateX(5deg) rotate(-3deg) translateY(18px); transition:opacity .7s ease,transform 1s cubic-bezier(.2,.7,.2,1)} .dash-collage.reveal.in .dc-screen{opacity:1;transform:perspective(1200px) rotateY(-7deg) rotateX(2deg) rotate(-1.5deg)} .dash-collage.reveal .dc-bar span{opacity:0;transition:opacity .6s ease .5s} .dash-collage.reveal.in .dc-bar span{opacity:1} /* floating stat pills: pop in after the screen, then drift like the homepage cards */ .dash-collage.reveal .dc-pill{opacity:0;transform:translateY(12px) scale(.9);transition:opacity .5s ease,transform .6s cubic-bezier(.2,.8,.2,1.2)} .dash-collage.reveal .dc-pill--a{transition-delay:.7s}.dash-collage.reveal .dc-pill--b{transition-delay:.9s}.dash-collage.reveal .dc-pill--c{transition-delay:1.1s} .dash-collage.reveal.in .dc-pill{opacity:1;transform:none} @keyframes dc-float-a{from{translate:0 0}to{translate:0 -8px}} @keyframes dc-float-b{from{translate:0 0}to{translate:0 6px}} .dash-collage.reveal.in .dc-pill--a{animation:dc-float-a 3.8s ease-in-out 1.9s infinite alternate} .dash-collage.reveal.in .dc-pill--b{animation:dc-float-b 4.6s ease-in-out 2.2s infinite alternate} .dash-collage.reveal.in .dc-pill--c{animation:dc-float-a 4.2s ease-in-out 2.5s infinite alternate} /* generic building blocks: skeleton lines grow from the left, rows slide in, items pop */ .dash-collage.reveal .dc-lines i{transform:scaleX(0);transform-origin:left center;transition:transform .55s cubic-bezier(.2,.7,.2,1),background-color .4s} .dash-collage.reveal.in .dc-lines i{transform:scaleX(1)} .dash-collage.reveal .dc-lines i:nth-child(1){transition-delay:.55s}.dash-collage.reveal .dc-lines i:nth-child(2){transition-delay:.7s} .dash-collage.reveal .dc-lines i:nth-child(3){transition-delay:.85s}.dash-collage.reveal .dc-lines i:nth-child(4){transition-delay:1s} .dash-collage.reveal .dc-lines:nth-of-type(2) i{transition-delay:1.05s}.dash-collage.reveal .dc-lines:nth-of-type(2) i:nth-child(2){transition-delay:1.2s} .dash-collage.reveal .dc-lines:nth-of-type(3) i{transition-delay:1.35s}.dash-collage.reveal .dc-lines:nth-of-type(3) i:nth-child(2){transition-delay:1.5s}.dash-collage.reveal .dc-lines:nth-of-type(3) i:nth-child(3){transition-delay:1.65s} .dash-collage.reveal .dc-lines:nth-of-type(4) i{transition-delay:1.8s} .dash-collage.reveal .dc-lines.is-edit i{background:var(--paper-2)} .dash-collage.reveal.in .dc-lines.is-edit i{background:rgba(102,204,204,.55);transition-delay:2s} @keyframes dc-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.08);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes dc-nudge{0%,100%{transform:translateX(0)}30%{transform:translateX(-3px)}60%{transform:translateX(3px)}} /* dash: tiles rise, sparklines draw (teal / orange / gold / ink), bars grow in brand colours */ .dash-collage--dash.reveal .dc-tile{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease} .dash-collage--dash.reveal .dc-tile:nth-child(1){transition-delay:.35s}.dash-collage--dash.reveal .dc-tile:nth-child(2){transition-delay:.45s} .dash-collage--dash.reveal .dc-tile:nth-child(3){transition-delay:.55s}.dash-collage--dash.reveal .dc-tile:nth-child(4){transition-delay:.65s} .dash-collage--dash.reveal.in .dc-tile{opacity:1;transform:none} .dash-collage--dash.reveal .dc-tile polyline{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.1s ease} .dash-collage--dash.reveal .dc-tile polygon{opacity:0;transition:opacity .8s ease} .dash-collage--dash.reveal .dc-tile:nth-child(1) polyline{transition-delay:.7s}.dash-collage--dash.reveal .dc-tile:nth-child(2) polyline{transition-delay:.85s} .dash-collage--dash.reveal .dc-tile:nth-child(3) polyline{transition-delay:1s}.dash-collage--dash.reveal .dc-tile:nth-child(4) polyline{transition-delay:1.15s} .dash-collage--dash.reveal .dc-tile polygon{transition-delay:1.5s} .dash-collage--dash.reveal.in .dc-tile polyline{stroke-dashoffset:0} .dash-collage--dash.reveal.in .dc-tile polygon{opacity:1} .dash-collage--dash .dc-tile:nth-child(2) polyline{stroke:var(--orange)}.dash-collage--dash .dc-tile:nth-child(2) polygon{fill:rgba(238,127,0,.22)} .dash-collage--dash .dc-tile:nth-child(3) polyline{stroke:var(--gold)}.dash-collage--dash .dc-tile:nth-child(3) polygon{fill:rgba(252,196,0,.26)} .dash-collage--dash .dc-tile:nth-child(4) polyline{stroke:var(--ink)}.dash-collage--dash .dc-tile:nth-child(4) polygon{fill:rgba(17,17,17,.12)} .dash-collage--dash .dc-bars i:nth-child(3n+2){background:var(--gold)} .dash-collage--dash.reveal .dc-bars i{transform:scaleY(0);transform-origin:bottom;transition:transform .6s cubic-bezier(.2,.7,.2,1)} .dash-collage--dash.reveal.in .dc-bars i{transform:scaleY(1)} .dash-collage--dash.reveal .dc-bars i:nth-child(1){transition-delay:.8s}.dash-collage--dash.reveal .dc-bars i:nth-child(2){transition-delay:.86s} .dash-collage--dash.reveal .dc-bars i:nth-child(3){transition-delay:.92s}.dash-collage--dash.reveal .dc-bars i:nth-child(4){transition-delay:.98s} .dash-collage--dash.reveal .dc-bars i:nth-child(5){transition-delay:1.04s}.dash-collage--dash.reveal .dc-bars i:nth-child(6){transition-delay:1.1s} .dash-collage--dash.reveal .dc-bars i:nth-child(7){transition-delay:1.16s}.dash-collage--dash.reveal .dc-bars i:nth-child(8){transition-delay:1.22s} .dash-collage--dash.reveal .dc-bars i:nth-child(9){transition-delay:1.28s}.dash-collage--dash.reveal .dc-bars i:nth-child(10){transition-delay:1.34s} .dash-collage--dash.reveal .dc-bars i:nth-child(11){transition-delay:1.4s}.dash-collage--dash.reveal .dc-bars i:nth-child(12){transition-delay:1.46s} /* serp: the query types in, results slide in, our result lights up last */ .dash-collage--serp.reveal .dc-serp__q{opacity:0;transform:translateY(-6px);transition:opacity .5s ease .35s,transform .5s ease .35s} .dash-collage--serp.reveal.in .dc-serp__q{opacity:1;transform:none} .dash-collage--serp.reveal .dc-serp__r{opacity:0;transform:translateX(-14px);transition:opacity .5s ease,transform .5s ease,box-shadow .6s ease} .dash-collage--serp.reveal .dc-serp__r:nth-of-type(2){transition-delay:.6s}.dash-collage--serp.reveal .dc-serp__r:nth-of-type(3){transition-delay:.8s}.dash-collage--serp.reveal .dc-serp__r:nth-of-type(4){transition-delay:1s} .dash-collage--serp.reveal.in .dc-serp__r{opacity:1;transform:none} @keyframes dc-glow{0%{box-shadow:0 0 0 0 rgba(102,204,204,.55)}100%{box-shadow:0 0 0 14px rgba(102,204,204,0)}} .dash-collage--serp.reveal.in .dc-serp__r.is-us{animation:dc-glow 1.4s ease-out 1.5s 2} .dash-collage--serp.reveal .dc-serp__r.is-us .dc-serp__rank{transform:scale(.6);transition:transform .5s cubic-bezier(.2,.8,.2,1.4) 1.4s} .dash-collage--serp.reveal.in .dc-serp__r.is-us .dc-serp__rank{transform:scale(1)} /* answer: question bubble, then the answer writes itself and the brand gets highlighted */ .dash-collage--answer.reveal .dc-answer__q{opacity:0;transform:translateX(-10px);transition:opacity .5s ease .35s,transform .5s ease .35s} .dash-collage--answer.reveal .dc-answer__a{opacity:0;transform:translateY(8px);transition:opacity .5s ease .75s,transform .5s ease .75s} .dash-collage--answer.reveal.in .dc-answer__q,.dash-collage--answer.reveal.in .dc-answer__a{opacity:1;transform:none} .dash-collage--answer.reveal .dc-lines i{transition-delay:1s}.dash-collage--answer.reveal .dc-lines i:nth-child(2){transition-delay:1.15s}.dash-collage--answer.reveal .dc-lines i:nth-child(3){transition-delay:1.3s} .dash-collage--answer.reveal .dc-lines:nth-of-type(2) i{transition-delay:1.75s}.dash-collage--answer.reveal .dc-lines:nth-of-type(2) i:nth-child(2){transition-delay:1.9s}.dash-collage--answer.reveal .dc-lines:nth-of-type(2) i:nth-child(3){transition-delay:2.05s} .dash-collage--answer.reveal .dc-answer__a mark{background:linear-gradient(rgba(102,204,204,.45),rgba(102,204,204,.45)) no-repeat left center/0% 100%;transition:background-size .6s ease 1.45s} .dash-collage--answer.reveal.in .dc-answer__a mark{background-size:100% 100%} .dash-collage--answer.reveal .dc-answer__src span{opacity:0;transform:scale(.8);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.8,.2,1.3)} .dash-collage--answer.reveal .dc-answer__src span:nth-child(1){transition-delay:2.3s}.dash-collage--answer.reveal .dc-answer__src span:nth-child(2){transition-delay:2.45s}.dash-collage--answer.reveal .dc-answer__src span:nth-child(3){transition-delay:2.6s} .dash-collage--answer.reveal.in .dc-answer__src span{opacity:1;transform:none} /* doc: the draft writes, the edits tint, the tag lands */ .dash-collage--doc.reveal .dc-doc__t{opacity:0;transition:opacity .5s ease .4s}.dash-collage--doc.reveal.in .dc-doc__t{opacity:1} .dash-collage--doc.reveal .dc-doc__tag{opacity:0;transform:translateY(-8px) scale(.9);transition:opacity .4s ease 2.3s,transform .5s cubic-bezier(.2,.8,.2,1.3) 2.3s} .dash-collage--doc.reveal.in .dc-doc__tag{opacity:1;transform:none} /* pipeline: columns rise, cards drop in left to right, the warm column warms */ .dash-collage--pipeline.reveal .dc-pipe__col{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease,background-color .6s ease} .dash-collage--pipeline.reveal .dc-pipe__col:nth-child(1){transition-delay:.35s}.dash-collage--pipeline.reveal .dc-pipe__col:nth-child(2){transition-delay:.45s} .dash-collage--pipeline.reveal .dc-pipe__col:nth-child(3){transition-delay:.55s}.dash-collage--pipeline.reveal .dc-pipe__col:nth-child(4){transition-delay:.65s} .dash-collage--pipeline.reveal.in .dc-pipe__col{opacity:1;transform:none} .dash-collage--pipeline.reveal .dc-pipe__col.is-hot{background:var(--paper-3)} .dash-collage--pipeline.reveal.in .dc-pipe__col.is-hot{background:var(--orange-tint);transition-delay:1.6s} .dash-collage--pipeline.reveal .dc-pipe__card{opacity:0;transform:translateY(-10px);transition:opacity .4s ease,transform .45s cubic-bezier(.2,.8,.2,1.2)} .dash-collage--pipeline.reveal .dc-pipe__card:nth-of-type(1){transition-delay:.9s}.dash-collage--pipeline.reveal .dc-pipe__card:nth-of-type(2){transition-delay:1.05s}.dash-collage--pipeline.reveal .dc-pipe__card:nth-of-type(3){transition-delay:1.2s} .dash-collage--pipeline.reveal .dc-pipe__col:nth-child(2) .dc-pipe__card{transition-delay:1.25s}.dash-collage--pipeline.reveal .dc-pipe__col:nth-child(2) .dc-pipe__card:nth-of-type(2){transition-delay:1.4s} .dash-collage--pipeline.reveal .dc-pipe__col:nth-child(3) .dc-pipe__card{transition-delay:1.5s}.dash-collage--pipeline.reveal .dc-pipe__col:nth-child(3) .dc-pipe__card:nth-of-type(2){transition-delay:1.65s} .dash-collage--pipeline.reveal .dc-pipe__col:nth-child(4) .dc-pipe__card{transition-delay:1.85s} .dash-collage--pipeline.reveal.in .dc-pipe__card{opacity:1;transform:none} .dash-collage--pipeline .dc-pipe__col:nth-child(4) .dc-pipe__card{border-left:3px solid var(--gold)} /* flow: each step pops, the arrow between draws, the envelope nods */ .dash-collage--flow.reveal .dc-flow__n{opacity:0;transform:scale(.88);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1.25)} .dash-collage--flow.reveal .dc-flow__arr{transform:scaleX(0);transform-origin:left center;transition:transform .4s ease} .dash-collage--flow.reveal .dc-flow__n:nth-child(1){transition-delay:.4s}.dash-collage--flow.reveal .dc-flow__arr:nth-child(2){transition-delay:.8s} .dash-collage--flow.reveal .dc-flow__n:nth-child(3){transition-delay:1s}.dash-collage--flow.reveal .dc-flow__arr:nth-child(4){transition-delay:1.4s} .dash-collage--flow.reveal .dc-flow__n:nth-child(5){transition-delay:1.6s}.dash-collage--flow.reveal .dc-flow__arr:nth-child(6){transition-delay:2s} .dash-collage--flow.reveal .dc-flow__n:nth-child(7){transition-delay:2.2s} .dash-collage--flow.reveal.in .dc-flow__n{opacity:1;transform:none}.dash-collage--flow.reveal.in .dc-flow__arr{transform:scaleX(1)} @keyframes dc-nod{0%,100%{transform:translateY(0)}40%{transform:translateY(-4px)}} .dash-collage--flow.reveal.in .dc-flow__n em{display:inline-block;animation:dc-nod .7s ease 2.8s 1} .dash-collage--flow .dc-flow__n:nth-child(1){border-color:var(--teal)}.dash-collage--flow .dc-flow__n:nth-child(7){border-color:var(--orange)} /* reviews: the rating lands, the stars fill gold, the replies slide in */ .dash-collage--reviews.reveal .dc-rev__big{opacity:0;transform:scale(.92);transition:opacity .5s ease .4s,transform .6s cubic-bezier(.2,.8,.2,1.2) .4s} .dash-collage--reviews.reveal.in .dc-rev__big{opacity:1;transform:none} .dash-collage--reviews.reveal .dc-rev__big > span,.dash-collage--reviews.reveal .dc-rev__c > span:first-child{ background:linear-gradient(var(--gold),var(--gold)) no-repeat left center/0% 100%,linear-gradient(rgba(128,128,128,.35),rgba(128,128,128,.35)); -webkit-background-clip:text;background-clip:text;color:transparent;transition:background-size 1.1s ease .9s} .dash-collage--reviews.reveal.in .dc-rev__big > span,.dash-collage--reviews.reveal.in .dc-rev__c > span:first-child{background-size:100% 100%,100% 100%} .dash-collage--reviews.reveal .dc-rev__c{opacity:0;transform:translateX(12px);transition:opacity .5s ease,transform .5s ease} .dash-collage--reviews.reveal .dc-rev__c:nth-child(2){transition-delay:.8s}.dash-collage--reviews.reveal .dc-rev__c:nth-child(3){transition-delay:1.05s} .dash-collage--reviews.reveal.in .dc-rev__c{opacity:1;transform:none} .dash-collage--reviews.reveal .dc-rev__c b{opacity:0;transform:scale(.8);transition:opacity .4s ease 1.9s,transform .4s cubic-bezier(.2,.8,.2,1.3) 1.9s} .dash-collage--reviews.reveal .dc-rev__c:nth-child(3) b{transition-delay:2.1s} .dash-collage--reviews.reveal.in .dc-rev__c b{opacity:1;transform:none} /* watch: findings come in one by one; flags pulse, cleared items settle */ .dash-collage--watch.reveal .dc-watch__r{opacity:0;transform:translateX(-12px);transition:opacity .45s ease,transform .45s ease} .dash-collage--watch.reveal .dc-watch__r:nth-child(1){transition-delay:.4s}.dash-collage--watch.reveal .dc-watch__r:nth-child(2){transition-delay:.6s} .dash-collage--watch.reveal .dc-watch__r:nth-child(3){transition-delay:.8s}.dash-collage--watch.reveal .dc-watch__r:nth-child(4){transition-delay:1s} .dash-collage--watch.reveal.in .dc-watch__r{opacity:1;transform:none} .dash-collage--watch.reveal .dc-watch__r b{opacity:0;transform:scale(.7);transition:opacity .35s ease,transform .4s cubic-bezier(.2,.8,.2,1.4)} .dash-collage--watch.reveal .dc-watch__r:nth-child(1) b{transition-delay:1.2s}.dash-collage--watch.reveal .dc-watch__r:nth-child(2) b{transition-delay:1.4s} .dash-collage--watch.reveal .dc-watch__r:nth-child(3) b{transition-delay:1.6s}.dash-collage--watch.reveal .dc-watch__r:nth-child(4) b{transition-delay:1.8s} .dash-collage--watch.reveal.in .dc-watch__r b{opacity:1;transform:none} @keyframes dc-flagpulse{0%{box-shadow:0 0 0 0 rgba(238,127,0,.6)}100%{box-shadow:0 0 0 10px rgba(238,127,0,0)}} .dash-collage--watch.reveal.in .dc-watch__r b.is-flag{animation:dc-flagpulse 1.2s ease-out 2s 2} .dash-collage--watch .dc-watch__r b.is-ok{background:rgba(102,204,204,.3);color:var(--ink)} /* browser: the page blocks build, the score ring sweeps */ .dash-collage--browser.reveal .dc-site__page{opacity:0;transition:opacity .5s ease .35s}.dash-collage--browser.reveal.in .dc-site__page{opacity:1} .dash-collage--browser.reveal .dc-site__hero{transform:scaleX(0);transform-origin:left center;transition:transform .7s cubic-bezier(.2,.7,.2,1) .6s} .dash-collage--browser.reveal .dc-site__col{transform:scaleY(0);transform-origin:top center;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .dash-collage--browser.reveal .dc-site__col:nth-of-type(2){transition-delay:1.1s}.dash-collage--browser.reveal .dc-site__col:nth-of-type(3){transition-delay:1.25s}.dash-collage--browser.reveal .dc-site__col:nth-of-type(4){transition-delay:1.4s} .dash-collage--browser.reveal.in .dc-site__hero,.dash-collage--browser.reveal.in .dc-site__col{transform:none} .dash-collage--browser.reveal .dc-site__score .fg{stroke-dasharray:0 100;transition:stroke-dasharray 1.4s cubic-bezier(.2,.7,.2,1) 1s} .dash-collage--browser.reveal.in .dc-site__score .fg{stroke-dasharray:96 100} .dash-collage--browser.reveal .dc-site__score b,.dash-collage--browser.reveal .dc-site__score span{opacity:0;transition:opacity .5s ease 2s} .dash-collage--browser.reveal.in .dc-site__score b,.dash-collage--browser.reveal.in .dc-site__score span{opacity:1} .dash-collage--browser .dc-site__col:nth-of-type(2){background:rgba(102,204,204,.35)}.dash-collage--browser .dc-site__col:nth-of-type(4){background:rgba(252,196,0,.35)} /* phone: the screen builds, the button lights up, the store rating lands */ .dash-collage--phone.reveal .dc-phone__f{opacity:0;transform:translateY(16px);transition:opacity .5s ease .35s,transform .6s cubic-bezier(.2,.7,.2,1) .35s} .dash-collage--phone.reveal.in .dc-phone__f{opacity:1;transform:none} .dash-collage--phone.reveal .dc-phone__f b{opacity:0;transition:opacity .4s ease .8s}.dash-collage--phone.reveal.in .dc-phone__f b{opacity:1} .dash-collage--phone.reveal .dc-lines i{transition-delay:.95s}.dash-collage--phone.reveal .dc-lines i:nth-child(2){transition-delay:1.1s} .dash-collage--phone.reveal .dc-lines i:nth-child(3){transition-delay:1.25s}.dash-collage--phone.reveal .dc-lines i:nth-child(4){transition-delay:1.4s} .dash-collage--phone .dc-phone__btn{background:var(--orange);color:var(--ink);font-weight:700} .dash-collage--phone.reveal .dc-phone__btn{opacity:0;transform:scale(.85);transition:opacity .4s ease 1.7s,transform .45s cubic-bezier(.2,.8,.2,1.3) 1.7s} .dash-collage--phone.reveal.in .dc-phone__btn{opacity:1;transform:none} .dash-collage--phone.reveal .dc-phone__side > *{opacity:0;transform:translateX(10px);transition:opacity .45s ease,transform .45s ease} .dash-collage--phone.reveal .dc-phone__side span{transition-delay:1.9s}.dash-collage--phone.reveal .dc-phone__side b{transition-delay:2.05s}.dash-collage--phone.reveal .dc-phone__side em{transition-delay:2.2s} .dash-collage--phone.reveal.in .dc-phone__side > *{opacity:1;transform:none} /* checklist: rows arrive, each tick pops, the warning nudges */ .dash-collage--checklist.reveal .dc-check__r{opacity:0;transform:translateX(-10px);transition:opacity .4s ease,transform .4s ease} .dash-collage--checklist.reveal .dc-check__r:nth-child(1){transition-delay:.4s}.dash-collage--checklist.reveal .dc-check__r:nth-child(2){transition-delay:.55s} .dash-collage--checklist.reveal .dc-check__r:nth-child(3){transition-delay:.7s}.dash-collage--checklist.reveal .dc-check__r:nth-child(4){transition-delay:.85s}.dash-collage--checklist.reveal .dc-check__r:nth-child(5){transition-delay:1s} .dash-collage--checklist.reveal.in .dc-check__r{opacity:1;transform:none} .dash-collage--checklist.reveal .dc-check__r i{opacity:0;transform:scale(.5)} .dash-collage--checklist.reveal.in .dc-check__r i{animation:dc-pop .5s cubic-bezier(.2,.8,.2,1.2) forwards} .dash-collage--checklist.reveal.in .dc-check__r:nth-child(1) i{animation-delay:1.1s}.dash-collage--checklist.reveal.in .dc-check__r:nth-child(2) i{animation-delay:1.3s} .dash-collage--checklist.reveal.in .dc-check__r:nth-child(3) i{animation-delay:1.5s}.dash-collage--checklist.reveal.in .dc-check__r:nth-child(4) i{animation-delay:1.7s} .dash-collage--checklist.reveal.in .dc-check__r:nth-child(5) i{animation:dc-pop .5s cubic-bezier(.2,.8,.2,1.2) 1.9s forwards,dc-nudge .6s ease 2.6s 1} .dash-collage--checklist .dc-check__r i.is-ok{background:var(--teal)} /* roadmap: columns rise, items slide in; this month teal, next gold */ .dash-collage--roadmap.reveal .dc-road__col{opacity:0;transform:translateY(10px);transition:opacity .5s ease,transform .5s ease} .dash-collage--roadmap.reveal .dc-road__col:nth-child(1){transition-delay:.35s}.dash-collage--roadmap.reveal .dc-road__col:nth-child(2){transition-delay:.5s}.dash-collage--roadmap.reveal .dc-road__col:nth-child(3){transition-delay:.65s} .dash-collage--roadmap.reveal.in .dc-road__col{opacity:1;transform:none} .dash-collage--roadmap.reveal .dc-road__col b{opacity:0;transform:translateX(-8px);transition:opacity .4s ease,transform .4s ease} .dash-collage--roadmap.reveal .dc-road__col:nth-child(1) b:nth-of-type(1){transition-delay:.9s}.dash-collage--roadmap.reveal .dc-road__col:nth-child(1) b:nth-of-type(2){transition-delay:1.05s} .dash-collage--roadmap.reveal .dc-road__col:nth-child(2) b:nth-of-type(1){transition-delay:1.25s}.dash-collage--roadmap.reveal .dc-road__col:nth-child(2) b:nth-of-type(2){transition-delay:1.4s} .dash-collage--roadmap.reveal .dc-road__col:nth-child(3) b:nth-of-type(1){transition-delay:1.6s} .dash-collage--roadmap.reveal.in .dc-road__col b{opacity:1;transform:none} .dash-collage--roadmap .dc-road__col:nth-child(2){background:rgba(252,196,0,.2)} /* board: the mark drops in, the palette fans out, the type and tiles follow */ .dash-collage--board.reveal .dc-board__logo{opacity:0;transform:scale(.85);transition:opacity .5s ease .35s,transform .6s cubic-bezier(.2,.8,.2,1.2) .35s} .dash-collage--board.reveal.in .dc-board__logo{opacity:1;transform:none} .dash-collage--board.reveal .dc-board__sw i{transform:scaleY(0);transform-origin:bottom;transition:transform .45s cubic-bezier(.2,.8,.2,1.2)} .dash-collage--board.reveal .dc-board__sw i:nth-child(1){transition-delay:.8s}.dash-collage--board.reveal .dc-board__sw i:nth-child(2){transition-delay:.92s} .dash-collage--board.reveal .dc-board__sw i:nth-child(3){transition-delay:1.04s}.dash-collage--board.reveal .dc-board__sw i:nth-child(4){transition-delay:1.16s} .dash-collage--board.reveal.in .dc-board__sw i{transform:none} .dash-collage--board.reveal .dc-board__type{opacity:0;transform:translateY(8px);transition:opacity .5s ease 1.4s,transform .5s ease 1.4s} .dash-collage--board.reveal.in .dc-board__type{opacity:1;transform:none} .dash-collage--board.reveal .dc-board__tiles i{opacity:0;transform:translateY(8px);transition:opacity .45s ease,transform .45s ease} .dash-collage--board.reveal .dc-board__tiles i:nth-child(1){transition-delay:1.7s}.dash-collage--board.reveal .dc-board__tiles i:nth-child(2){transition-delay:1.85s}.dash-collage--board.reveal .dc-board__tiles i:nth-child(3){transition-delay:2s} .dash-collage--board.reveal.in .dc-board__tiles i{opacity:1;transform:none} .dash-collage--board .dc-board__tiles i:nth-child(3){background:rgba(102,204,204,.35)} /* grid: posts tile in, the likes land after */ .dash-collage--grid.reveal .dc-grid__p{opacity:0;transform:scale(.7);transition:opacity .45s ease,transform .5s cubic-bezier(.2,.8,.2,1.25)} .dash-collage--grid.reveal .dc-grid__p:nth-child(1){transition-delay:.4s}.dash-collage--grid.reveal .dc-grid__p:nth-child(2){transition-delay:.52s} .dash-collage--grid.reveal .dc-grid__p:nth-child(3){transition-delay:.64s}.dash-collage--grid.reveal .dc-grid__p:nth-child(4){transition-delay:.76s} .dash-collage--grid.reveal .dc-grid__p:nth-child(5){transition-delay:.88s}.dash-collage--grid.reveal .dc-grid__p:nth-child(6){transition-delay:1s} .dash-collage--grid.reveal.in .dc-grid__p{opacity:1;transform:none} .dash-collage--grid.reveal .dc-grid__p em{opacity:0;transform:translateY(6px);transition:opacity .4s ease 1.5s,transform .4s ease 1.5s} .dash-collage--grid.reveal.in .dc-grid__p em{opacity:1;transform:none} /* reduced motion: end states only */ @media (prefers-reduced-motion:reduce){ .dash-collage.reveal *,.dash-collage.reveal *::after{transition:none!important;animation:none!important} .dash-collage.reveal .dc-screen,.dash-collage.reveal .dc-pill,.dash-collage.reveal .dc-lines i,.dash-collage.reveal .dc-tile, .dash-collage.reveal .dc-tile polygon,.dash-collage.reveal .dc-bars i,.dash-collage.reveal [class*="dc-"]{opacity:1;transform:none} } /* ---- Testimonial carousel (2026-08-25) --------------------------------- The wall was a fixed 3-up grid, which capped the section at three quotes. It is now a scroll-snap track so the client-words section can hold as many reviews as we collect. Appended deliberately AFTER the original .sn-wall grid rules (and their media queries) so these win without !important. Native overflow scrolling means it still swipes on touch with JS disabled. */ .sn-carousel{position:relative} .sn-wall{ --sn-gap:clamp(22px,3vw,44px); /* held in a var: a clamp() nested inside calc() inside the `flex` shorthand does not parse, and the basis silently falls back to content width (416px not 336px) */ display:flex; grid-template-columns:none; max-width:1100px; margin:0 auto; gap:var(--sn-gap); overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth; padding:22px 10px 14px; /* room for the tilt + drop shadow */ scrollbar-width:none; -ms-overflow-style:none; } .sn-wall::-webkit-scrollbar{display:none} .sn-wall > .sn-note{ margin-left:0; margin-right:0; /* the note carries a 40px side margin, which was harmless inside a grid cell but adds 80px to every flex item */ flex:0 0 auto; /* width, not flex-basis: a percentage width on a flex item resolves against the container content box reliably */ width:calc((100% - 2*var(--sn-gap)) / 3); scroll-snap-align:start; } @media (max-width:920px){ .sn-wall{max-width:520px} .sn-wall > .sn-note{width:100%} } /* Controls */ .sn-nav{display:flex; align-items:center; justify-content:center; gap:18px; margin-top:10px} .sn-arrow{ width:44px; height:44px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font-size:18px; line-height:1; cursor:pointer; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .18s,border-color .18s; } .sn-arrow:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)} .sn-arrow:focus-visible{outline:2px solid var(--orange); outline-offset:3px} .sn-arrow[disabled]{opacity:.32; cursor:default} .sn-arrow[disabled]:hover{background:var(--paper); color:var(--ink); border-color:var(--line)} .sn-dots{display:flex; gap:9px} .sn-dot{ width:9px; height:9px; padding:0; border-radius:50%; cursor:pointer; border:0; background:rgba(0,0,0,.20); transition:background .18s, transform .18s; } .sn-dot[aria-current="true"]{background:var(--orange); transform:scale(1.28)} .sn-dot:focus-visible{outline:2px solid var(--orange); outline-offset:3px} @media (prefers-reduced-motion:reduce){ .sn-wall{scroll-behavior:auto} }