/* ============================================================ MAINSTAY STUDIO — styles.css Palette Four schemes, switchable via data-scheme on — see section 1 Mark Next Wave — gradient ring, twin waves, N monogram Type Montserrat (display/UI) / Inter (body) / JetBrains Mono (figures) Signature The growth ledger — dot-leader rules with tabular figures ============================================================ */ /* ---------- 1. tokens ---------- */ /* ---- colour schemes (swap with data-scheme on ) ---- */ :root,[data-scheme="teal"]{ --brand-deep:#152238; --brand-1:#0F8B8D; --brand-2:#54D2C8; --brand-cta:#F05A5A; --hero-a:#152238; --hero-b:#0D1B2A; --hero-c:#123047; --hero-ink:#F8FAFC; --hero-ink-soft:rgba(248,250,252,.92); --hero-card:color-mix(in srgb,var(--hero-b) 74%,transparent); --hero-line:rgba(248,250,252,.16); --hero-dots:rgba(248,250,252,.22); --band-ink:#F8FAFC; --band-ink-soft:rgba(248,250,252,.9); --photo-filter:saturate(.72) contrast(1.06) brightness(.82); } [data-scheme="cobalt"]{ --brand-deep:#0A2540; --brand-1:#0055FF; --brand-2:#5B9BFF; --brand-cta:#FF5A5F; --hero-a:#0A2540; --hero-b:#010B19; --hero-c:#0C3563; } [data-scheme="emerald"]{ --brand-deep:#0A2A24; --brand-1:#0D9488; --brand-2:#10B981; --brand-cta:#F87171; --hero-a:#0A3D2E; --hero-b:#04201A; --hero-c:#0B4A3A; } [data-scheme="midnight"]{ --brand-deep:#0B0F1A; --brand-1:#0F8B9D; --brand-2:#54D2C8; --brand-cta:#F05A5A; --hero-a:#111624; --hero-b:#070A12; --hero-c:#16283A; } [data-scheme="porcelain"]{ --brand-deep:#0E1A24; --brand-1:#0B6E8F; --brand-2:#109FC4; --brand-cta:#F0564A; --hero-a:#0E1A24; --hero-b:#0A141C; --hero-c:#132A38; --hero-ink:#FFFFFF; --hero-ink-soft:rgba(255,255,255,.9); --hero-card:color-mix(in srgb,var(--hero-b) 74%,transparent); --hero-line:rgba(248,250,252,.16); --hero-dots:rgba(248,250,252,.22); --band-ink:#F8FAFC; --band-ink-soft:rgba(248,250,252,.9); --photo-filter:saturate(.42) contrast(.94) brightness(.9); } [data-scheme="sunset"]{ --brand-deep:#1B1533; --brand-1:#E0723C; --brand-2:#F6B24A; --brand-cta:#EF4B6B; --hero-a:#241A45; --hero-b:#150F28; --hero-c:#3A2148; --photo-filter:saturate(1.05) contrast(1.08) brightness(.86) hue-rotate(-28deg); } [data-scheme="slate"]{ --brand-deep:#14181D; --brand-1:#5B7A8C; --brand-2:#9DBBCB; --brand-cta:#D9613F; --hero-a:#1A1F26; --hero-b:#0E1216; --hero-c:#242C34; --photo-filter:saturate(.28) contrast(1.1) brightness(.84); } :root{ --paper:#F8FAFC; --raise:#FFFFFF; --sink:#EEF2F7; --ink:var(--brand-deep); --muted:#2C3E52; --rule:rgba(21,34,56,.2); --rule-soft:rgba(21,34,56,.12); --marine:var(--brand-deep); --verd:var(--brand-1); --brass:var(--brand-cta); --aqua:var(--brand-2); --btn-fg:#FFFFFF; --shadow-sm:0 1px 2px rgba(12,18,16,.05); --shadow:0 1px 2px rgba(12,18,16,.05), 0 12px 32px -18px rgba(12,18,16,.35); --shadow-lg:0 2px 4px rgba(12,18,16,.06), 0 30px 60px -30px rgba(12,18,16,.45); --max:1180px; --gut:clamp(1.25rem,4vw,3rem); --disp:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; --body:"Inter",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif; --ui:"Montserrat","Helvetica Neue",Helvetica,Arial,sans-serif; --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; --ease:cubic-bezier(.22,.7,.3,1); } [data-theme="dark"]{ --paper:var(--hero-b); --raise:var(--hero-a); --sink:var(--brand-deep); --ink:#FFFFFF; --muted:#E6EDF4; --rule:rgba(248,250,252,.22); --rule-soft:rgba(248,250,252,.12); --marine:var(--hero-c); --verd:var(--brand-2); --brass:var(--brand-cta); --aqua:var(--brand-2); --btn-fg:#FFFFFF; --shadow-sm:0 1px 2px rgba(0,0,0,.4); --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -22px rgba(0,0,0,.8); --shadow-lg:0 2px 6px rgba(0,0,0,.5), 0 40px 70px -35px rgba(0,0,0,.9); } [data-theme="dark"][data-scheme="porcelain"]{ --paper:#0E1A24; --raise:#152838; --sink:#0A141C; --ink:#FFFFFF; --muted:#E6EDF4; --rule:rgba(248,250,252,.22); --rule-soft:rgba(248,250,252,.12); } /* ---------- 2. base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:hidden; max-width:100%} @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} } body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; transition:background .4s var(--ease), color .4s var(--ease); } img,svg{max-width:100%; display:block} a{color:inherit} :focus-visible{outline:2px solid var(--verd); outline-offset:3px; border-radius:3px} ::selection{background:var(--verd); color:var(--btn-fg)} .skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.7rem 1rem;z-index:300;text-decoration:none} .skip:focus{left:.5rem;top:.5rem} .vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} /* ---------- 3. type ---------- */ h1,h2,h3,h4,h5{font-family:var(--disp); font-weight:700; letter-spacing:-.025em; line-height:1.12; margin:0; color:var(--ink)} h1{font-size:clamp(2.35rem,5.4vw,4.1rem); font-weight:800; letter-spacing:-.035em; line-height:1.06} h2{font-size:clamp(1.95rem,4vw,3.05rem)} h3{font-size:clamp(1.28rem,2.2vw,1.68rem); letter-spacing:-.022em} h4{font-size:1.05rem; letter-spacing:-.012em; font-weight:600} h5{font-size:.94rem; letter-spacing:-.005em; font-weight:600} p{margin:0 0 1.1em} p:last-child{margin-bottom:0} .lede{font-size:clamp(1.14rem,1.8vw,1.4rem); line-height:1.5; color:color-mix(in srgb,var(--ink) 72%, var(--muted)); max-width:48ch} .small{font-size:.93rem} .dim{color:var(--muted)} .mono{font-family:var(--mono)} .eyebrow{ font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.17em; text-transform:uppercase; color:color-mix(in srgb,var(--verd) 22%, var(--ink)); display:flex; align-items:center; gap:.6rem; margin:0 0 1.1rem; } .eyebrow::before{content:""; width:1.6rem; height:1px; background:currentColor; opacity:.55; flex-shrink:0} .eyebrow.center{justify-content:center} .pill{ display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); border:1px solid var(--rule); border-radius:999px; padding:.28rem .68rem; margin-bottom:1.1rem; } .quote{ font-family:var(--disp); font-size:clamp(1.32rem,2.5vw,1.95rem); font-weight:400; letter-spacing:-.028em; line-height:1.28; max-width:36ch; margin:0; } .quote cite{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); font-style:normal; margin-top:1.2rem; } /* ---------- 4. layout ---------- */ .wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); min-width:0; width:100%} .wrap.narrow{max-width:820px} .band{padding-block:clamp(3.4rem,7.5vw,6.2rem); border-top:2px solid var(--rule)} .band.flush{border-top:none} .band.sink{background:var(--sink); border-top:2px solid var(--rule)} .grid{display:grid; gap:clamp(1.4rem,2.8vw,2.4rem)} .g2{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(3,minmax(0,1fr))} .g4{grid-template-columns:repeat(4,minmax(0,1fr))} .split{display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1fr); gap:clamp(1.8rem,4.5vw,4.2rem); align-items:start} .split.even{grid-template-columns:repeat(2,minmax(0,1fr))} .split.wide-left{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)} .center{text-align:center} .center .lede{margin-inline:auto} .stack-sm > * + *{margin-top:.9rem} @media(max-width:980px){ .g4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:860px){ .g2,.g3,.split,.split.even,.split.wide-left{grid-template-columns:minmax(0,1fr)} .g4{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .g4{grid-template-columns:minmax(0,1fr)} } .rule-line{height:1px; background:var(--rule-soft); margin-block:clamp(2.2rem,5vw,3.6rem)} /* ---------- 5. header ---------- */ header.site{ --bar-h:66px; overflow-anchor:none; position:sticky; top:0; z-index:100; background:color-mix(in srgb,var(--paper) 85%,transparent); backdrop-filter:saturate(170%) blur(14px); -webkit-backdrop-filter:saturate(170%) blur(14px); border-bottom:1px solid var(--rule-soft); transition:box-shadow .3s var(--ease), background .3s var(--ease); } header.site[data-shrunk="true"]{--bar-h:54px; box-shadow:0 1px 20px -8px rgba(0,0,0,.28)} header.site[data-mega-open="true"]{background:var(--paper)} .bar{display:flex; align-items:center; gap:1.2rem; height:var(--bar-h); max-width:var(--max); margin-inline:auto; padding-inline:var(--gut); transition:height .34s var(--ease)} header.site[data-shrunk="true"] .brand .mk{width:auto; height:28px} header.site[data-shrunk="true"] .wordmark b{font-size:1.08rem} header.site[data-shrunk="true"] .wordmark i{font-size:.7rem; margin-top:.16rem} .brand{ display:inline-flex; align-items:center; gap:.55rem; text-decoration:none; font-family:var(--disp); font-weight:800; letter-spacing:-.045em; font-size:1.22rem; flex-shrink:0; } /* -- Next Wave mark: gradient ring, twin waves, N monogram -- */ img.mk,.mk{height:38px; width:auto; flex-shrink:0; object-fit:contain; display:block; max-width:none} .mk-ring{fill:none; stroke:url(#nwg); stroke-width:5} .mk-w1{fill:var(--brand-1); opacity:.95} .mk-w2{fill:var(--brand-2); opacity:.9} .mk-n{fill:none; stroke:var(--ink); stroke-width:8.6; stroke-linecap:butt; stroke-linejoin:miter} .on-dark .mk-n,.hero.dark .mk-n,footer.site .mk-n{stroke:#F8FAFC} .brand .mk{transition:transform .45s var(--ease)} .brand:hover .mk{transform:scale(1.07)} .mk-lg{width:clamp(92px,12vw,136px); height:auto} .mk-lg .mk-n{stroke-dasharray:190; stroke-dashoffset:190; animation:mkDraw 1s var(--ease) .25s forwards} .mk-lg .mk-w1,.mk-lg .mk-w2{animation:mkSwell .9s var(--ease) both} @keyframes mkDraw{to{stroke-dashoffset:0}} @keyframes mkSwell{from{transform:translateY(14%); opacity:0}to{transform:none; opacity:.95}} .wordmark{display:flex; flex-direction:column; line-height:1} .wordmark b{font-family:var(--disp); font-weight:800; letter-spacing:.04em; font-size:1.22rem; text-transform:uppercase} .wordmark i{font-family:var(--disp); font-weight:700; font-style:normal; font-size:.78rem; letter-spacing:.12em; color:var(--verd); margin-top:.22rem; text-transform:uppercase} .logo-hero{display:flex; align-items:center; gap:clamp(1rem,2vw,1.7rem)} .logo-hero .wm{font-family:var(--disp); font-weight:800; letter-spacing:-.05em; font-size:clamp(2.6rem,5.5vw,4.2rem); line-height:.9} .logo-hero .wm span{display:block; font-family:var(--mono); font-weight:400; font-size:clamp(.6rem,1vw,.72rem); letter-spacing:.4em; color:var(--muted); margin-top:.7rem} nav.main{display:flex; gap:.1rem; margin-left:auto; flex-wrap:nowrap; align-items:center} nav.main a.sec{display:none} nav.main a, nav.main .mega-trigger{ font-family:var(--ui); font-weight:600; font-size:.72rem; letter-spacing:.13em; text-transform:uppercase; text-decoration:none; padding:.5rem .05rem; margin-inline:.55rem; color:var(--muted); background:none; border:0; cursor:pointer; white-space:nowrap; position:relative; transition:color .2s; } nav.main a::after, nav.main .mega-trigger::after{ content:""; position:absolute; left:0; right:0; bottom:.15rem; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left center; transition:transform .28s var(--ease); } nav.main a:hover, nav.main .mega-trigger:hover, nav.main .mega-trigger[aria-expanded="true"], nav.main a[aria-current="page"]{color:var(--ink); background:transparent} nav.main a:hover::after, nav.main .mega-trigger:hover::after, nav.main .mega-trigger[aria-expanded="true"]::after, nav.main a[aria-current="page"]::after{transform:scaleX(1)} .tools{display:flex; align-items:center; gap:.5rem; flex-shrink:0} .toggle,.burger{ width:35px; height:35px; display:grid; place-items:center; border:1px solid var(--rule); background:transparent; color:var(--ink); border-radius:8px; cursor:pointer; font-size:.95rem; padding:0; } .toggle:hover,.burger:hover{border-color:var(--verd); color:var(--verd)} .burger{display:none} @media(max-width:1180px){ .burger{display:grid} nav.main a.sec{display:block} nav.main .mega-trigger{display:none} nav.main{ position:fixed; inset:var(--bar-h) 0 auto 0; flex-direction:column; background:var(--paper); border-bottom:1px solid var(--rule); padding:.5rem var(--gut) 1.3rem; gap:.05rem; display:none; box-shadow:var(--shadow); max-height:calc(100vh - var(--bar-h)); overflow-y:auto; flex-wrap:nowrap; } nav.main.open{display:flex} nav.main a{padding:.7rem .35rem; font-size:.82rem; margin-inline:0; letter-spacing:.1em; text-transform:uppercase} nav.main a::after{display:none} .bar .hide-sm{display:none} } .mega{position:absolute; left:0; right:0; top:100%; background:var(--paper); border-bottom:1px solid var(--rule); box-shadow:0 24px 40px -28px rgba(0,0,0,.4); opacity:0; transform:translateY(-8px); pointer-events:none; transition:opacity .26s var(--ease), transform .26s var(--ease); z-index:101} .mega[data-open="true"]{opacity:1; transform:none; pointer-events:auto} .mega-grid{display:grid; grid-template-columns:1.1fr 1.1fr .95fr; gap:clamp(1.6rem,4vw,3.4rem); padding-block:clamp(1.8rem,3.4vw,2.8rem)} .mega-col h2{font-family:var(--disp); font-weight:800; font-size:clamp(1.35rem,2.1vw,1.85rem); letter-spacing:-.035em; text-transform:none; color:var(--col-accent,var(--verd)); margin-bottom:1.1rem; padding-bottom:.7rem; border-bottom:1px solid var(--rule-soft); line-height:1.1} .mega-col ul{list-style:none; margin:0; padding:0} .mega-col li + li{margin-top:.15rem} .mega-col a{display:block; text-decoration:none; padding:.55rem .6rem; margin-inline:-.6rem; border-radius:8px; transition:background .18s} .mega-col a:hover{background:var(--rule-soft)} .mega-col a b{display:block; font-family:var(--ui); font-weight:600; font-size:.95rem; color:var(--ink); letter-spacing:-.005em; text-transform:none} .mega-col a span{display:block; font-size:.84rem; color:var(--muted); margin-top:.12rem; line-height:1.4; letter-spacing:0; text-transform:none; font-weight:400} .mega-feature{display:block; text-decoration:none; border:1px solid var(--rule); border-radius:14px; overflow:hidden; background:var(--raise); transition:border-color .2s, transform .2s var(--ease); padding-bottom:1.2rem} .mega-feature:hover{border-color:var(--verd); transform:translateY(-2px)} .mega-shot{display:block; height:132px; position:relative; overflow:hidden; background:linear-gradient(140deg,var(--hero-a),var(--hero-c) 60%,var(--brand-1))} .mega-shot img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block} .mega-shot::after{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(to bottom,transparent 45%,color-mix(in srgb,var(--raise) 88%,transparent))} .mega-shot--emblem{background:#1F4038} .mega-shot--emblem img{object-fit:contain; padding:10px; object-position:center} .mega-shot--emblem::after{display:none} .mega-feature .kick{display:block; font-family:var(--ui); font-weight:700; font-size:.62rem; letter-spacing:.17em; text-transform:uppercase; color:var(--brass); margin:1rem 1.2rem .5rem} .mega-feature b{display:block; font-family:var(--disp); font-weight:600; font-size:1.05rem; color:var(--ink); margin:0 1.2rem .4rem; letter-spacing:-.01em; text-transform:none} .mega-feature .desc{display:block; font-size:.86rem; color:var(--muted); margin:0 1.2rem; line-height:1.45; letter-spacing:0; text-transform:none; font-weight:400} .mega-feature .go{display:inline-block; font-family:var(--ui); font-weight:700; font-size:.68rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verd); margin:.9rem 1.2rem 0} .mega-scrim{position:fixed; right:0; bottom:0; left:0; top:var(--bar-h); background:rgba(0,0,0,.28); opacity:0; pointer-events:none; transition:opacity .26s var(--ease); z-index:99} .mega-scrim[data-open="true"]{opacity:1; pointer-events:auto} @media(max-width:1180px){ .mega, .mega-scrim{display:none} } @media(max-width:1340px){ .mega-grid{grid-template-columns:1fr 1fr .9fr; gap:2rem} } .cus-emblem{display:block; width:min(240px,72%); height:auto; margin:0 auto; filter:drop-shadow(0 12px 24px rgba(31,64,56,.35))} .cus-emblem-frame{background:#1F4038; border-radius:18px; padding:clamp(1.2rem,3vw,2rem); display:grid; place-items:center; border:1px solid var(--rule)} .lock-cus{background:#1F4038; color:#FAF7F2} .lock-cus .cus-mark{width:min(220px,58cqw); height:auto; margin-bottom:3cqw; filter:drop-shadow(0 8px 18px rgba(0,0,0,.28))} .lock-cus .name{font-family:var(--disp); font-weight:400; font-style:italic; font-size:7cqw; letter-spacing:-.03em; line-height:1.1; color:#F3EDDC} .lock-cus .tag{font-family:var(--disp); font-style:italic; font-size:3cqw; color:#C4CCC2; letter-spacing:-.02em; margin-top:2cqw} /* ---------- 6. buttons ---------- */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font-family:var(--ui); font-weight:700; font-size:.76rem; letter-spacing:.09em; text-transform:uppercase; text-decoration:none; padding:.85rem 1.4rem; border-radius:6px; border:1px solid transparent; cursor:pointer; transition:transform .16s var(--ease), background .2s, border-color .2s, color .2s, box-shadow .2s; line-height:1.2; } .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} .btn-primary{background:var(--brass); color:#fff} .btn-primary:hover{background:#D94848; box-shadow:0 10px 24px -10px rgba(240,90,90,.7)} .btn-ghost{border-color:var(--rule); color:var(--ink); background:transparent} .btn-ghost:hover{border-color:var(--verd); color:var(--verd)} .btn-quiet{color:var(--verd); padding-inline:0; background:none; text-transform:none; letter-spacing:0; font-size:.9rem} .btn-quiet:hover{color:var(--marine)} .btn.sm{padding:.55rem .88rem; font-size:.85rem} .btn.lg{padding:.9rem 1.5rem; font-size:1rem} .btn.block{width:100%} .btn .arw{transition:transform .2s var(--ease)} .btn:hover .arw{transform:translateX(3px)} .cta-row{display:flex; gap:.7rem; flex-wrap:wrap; margin-top:2rem} .cta-row.center{justify-content:center} /* ---------- 7. the growth ledger (signature) ---------- */ .ledger{ border:1px solid var(--rule); border-radius:16px; background:var(--raise); padding:1.15rem 1.25rem 1rem; box-shadow:var(--shadow); font-family:var(--ui); } .ledger-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; font-family:var(--ui); font-weight:800; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink); padding-bottom:.7rem; margin-bottom:.15rem; border-bottom:2px solid color-mix(in srgb,var(--verd) 45%, var(--rule)); } .lrow{ display:flex; align-items:baseline; gap:.75rem; padding:.78rem 0; font-size:.95rem; border-bottom:1px solid var(--rule-soft); } .lrow:last-of-type{border-bottom:none} .lrow .lbl{ color:var(--ink); min-width:0; font-family:var(--body); font-weight:500; letter-spacing:0; } .lrow .dots{ flex:1; border-bottom:1px dotted color-mix(in srgb,var(--ink) 18%, transparent); transform:translateY(-.28em); min-width:1rem; opacity:.7; } .lrow .fig{ font-family:var(--disp); font-weight:800; font-size:1.02rem; letter-spacing:-.02em; color:var(--brass); white-space:nowrap; font-variant-numeric:tabular-nums; } .lrow.total{border-top:1px solid var(--rule); border-bottom:none; margin-top:.35rem; padding-top:.9rem} .lrow.total .lbl{color:var(--ink); font-weight:700} .lrow.total .fig{font-size:1.12rem; color:var(--ink)} .ledger-foot{ font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:color-mix(in srgb,var(--ink) 72%, var(--muted)); padding:.85rem .85rem .7rem; margin-top:.55rem; border-top:none; border-radius:10px; background:color-mix(in srgb,var(--verd) 10%, var(--sink)); } /* ---------- 8. cards ---------- */ .card{ border:1px solid var(--rule); border-radius:14px; background:var(--raise); padding:1.5rem; transition:border-color .22s, transform .22s var(--ease), box-shadow .22s; } a.card{text-decoration:none; display:block} a.card:hover,.card.hover:hover{border-color:var(--verd); transform:translateY(-3px); box-shadow:var(--shadow)} .card.dashed{border-style:dashed} .card > .num{ font-family:var(--disp); font-weight:800; font-size:clamp(1.02rem,1.5vw,1.22rem); letter-spacing:-.02em; color:color-mix(in srgb,var(--verd) 30%, var(--ink)); line-height:1.2; display:block; margin-bottom:.4rem; max-width:100%; overflow-wrap:anywhere; } .card h3,.card h4{margin-bottom:.55rem} .card h3,.price h3,.step h3{font-family:var(--disp); font-size:1.06rem; letter-spacing:-.012em; font-weight:600} .card h3.mini,h3.mini{font-size:.93rem; letter-spacing:-.005em; font-weight:600} .faq-group h2{font-size:clamp(1.15rem,1.8vw,1.35rem); margin-bottom:.4rem} .card p{color:color-mix(in srgb,var(--ink) 70%, var(--muted)); font-size:1rem; line-height:1.5} .card .icon{width:26px; height:26px; margin-bottom:1rem; color:var(--verd)} .tags{display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1.1rem} .tag{ font-family:var(--mono); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:.25rem .58rem; } .tag.solid{background:var(--marine); color:var(--btn-fg); border-color:transparent} /* ---------- 9. hero ---------- */ .hero{padding-block:clamp(3.2rem,8vw,6rem) clamp(2.8rem,6vw,4.6rem); position:relative; overflow:hidden} .hero::before{ content:""; position:absolute; top:0; left:calc(var(--gut) - 1px); width:1px; height:100%; background:linear-gradient(var(--verd),transparent); opacity:.32; transform-origin:top; animation:drawStay 1.1s var(--ease) both; } @keyframes drawStay{from{transform:scaleY(0)}to{transform:scaleY(1)}} @media(prefers-reduced-motion:reduce){ .hero::before{animation:none} } .hero h1 .thin{font-weight:800; font-style:normal; letter-spacing:-.035em; color:var(--aqua)} .hero-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(1.8rem,4.5vw,3.8rem); align-items:end} .hero-grid > div{max-width:38rem} @media(max-width:900px){ .hero-grid{grid-template-columns:minmax(0,1fr)} } .strip{display:flex; flex-wrap:wrap; gap:clamp(1.4rem,4vw,2.6rem); margin-top:3rem; padding-top:1.6rem; border-top:1px solid var(--rule-soft)} .strip div{min-width:0} .strip .k{ font-family:var(--mono); font-size:1.45rem; font-weight:500; color:var(--ink); letter-spacing:-.02em; display:block; font-variant-numeric:tabular-nums; } .strip .v{font-family:var(--mono); font-size:.66rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)} .page-head{padding-block:clamp(2.8rem,6.5vw,4.6rem) clamp(1.6rem,3vw,2.4rem)} /* ---------- 10. device mockups (rendered work previews) ---------- */ .showcase{position:relative; padding-bottom:2.5rem} .device{ border-radius:12px; border:1px solid var(--rule); overflow:hidden; background:var(--raise); box-shadow:var(--shadow-lg); } .chrome{display:flex; align-items:center; gap:.45rem; padding:.5rem .65rem; border-bottom:1px solid var(--rule); background:var(--sink)} .chrome i{width:8px; height:8px; border-radius:50%; background:var(--rule); display:block; flex-shrink:0} .chrome .urlbar{ flex:1; font-family:var(--mono); font-size:.6rem; letter-spacing:.02em; padding:.24rem .6rem; border-radius:5px; background:var(--paper); color:var(--muted); border:1px solid var(--rule-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; margin-left:.3rem; } .screen{position:relative; overflow:hidden; aspect-ratio:16/10.6; container-type:inline-size} /* ---------- 11. process rail ---------- */ .rail{position:relative; padding-left:2.6rem} .rail::before{content:""; position:absolute; left:8px; top:.6rem; bottom:.6rem; width:1px; background:var(--rule)} .step{position:relative; padding-bottom:2.1rem} .step:last-child{padding-bottom:0} .step::before{ content:""; position:absolute; left:-2.6rem; top:.4rem; width:17px; height:17px; border-radius:50%; background:var(--paper); border:1px solid var(--rule); } .step::after{content:""; position:absolute; left:calc(-2.6rem + 5px); top:calc(.4rem + 5px); width:7px; height:7px; border-radius:50%; background:var(--brass)} .step .n{font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; color:var(--verd); display:block; margin-bottom:.4rem} .step p{color:var(--muted); font-size:.95rem} .step .when{font-family:var(--mono); font-size:.69rem; color:var(--muted); margin-top:.5rem; display:block} /* ---------- 12. pricing ---------- */ .price{border:1px solid var(--rule); border-radius:16px; background:var(--raise); padding:1.7rem; display:flex; flex-direction:column} .price.feature{border-color:var(--verd); box-shadow:var(--shadow); position:relative} .price.feature::after{ content:"Most chosen"; position:absolute; top:-.72rem; left:1.7rem; background:var(--marine); color:var(--btn-fg); font-family:var(--mono); font-size:.61rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .62rem; border-radius:5px; } .price .plan{font-family:var(--mono); font-size:.68rem; letter-spacing:.17em; text-transform:uppercase; color:var(--brass)} .price .amt{font-family:var(--disp); font-size:2.45rem; font-weight:800; letter-spacing:-.045em; margin:.55rem 0 .2rem; line-height:1} .price .amt span{font-family:var(--mono); font-size:.75rem; font-weight:400; letter-spacing:.08em; color:var(--muted)} .price ul{list-style:none; margin:1.3rem 0; padding:0; flex:1} .price li{position:relative; padding-left:1.4rem; margin-bottom:.58rem; font-size:.97rem; color:var(--muted)} .price li::before{content:"—"; position:absolute; left:0; color:var(--brass); font-family:var(--mono)} /* ---------- 13. interactive tools ---------- */ .tool{border:1px solid var(--rule); border-radius:16px; background:var(--raise); padding:clamp(1.3rem,3vw,2rem); box-shadow:var(--shadow)} .tool-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.85fr); gap:clamp(1.5rem,3.5vw,2.6rem); align-items:start} @media(max-width:860px){ .tool-grid{grid-template-columns:minmax(0,1fr)} } .opt-group{margin-bottom:1.5rem} .opt-group > legend, .opt-group > .glabel{ font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.7rem; display:block; padding:0; } .opts{display:flex; flex-wrap:wrap; gap:.5rem; border:0; padding:0; margin:0} .opt{position:relative} .opt input{position:absolute; opacity:0; width:100%; height:100%; margin:0; cursor:pointer} .opt span{ display:block; border:1px solid var(--rule); border-radius:9px; padding:.55rem .85rem; font-size:.88rem; cursor:pointer; transition:border-color .18s, background .18s, color .18s; user-select:none; } .opt input:checked + span{border-color:var(--verd); background:color-mix(in srgb,var(--verd) 12%,transparent); color:var(--ink)} .opt input:focus-visible + span{outline:2px solid var(--verd); outline-offset:2px} .opt span small{display:block; font-family:var(--mono); font-size:.65rem; color:var(--muted); letter-spacing:.06em; margin-top:.15rem} .range-row{display:flex; align-items:center; gap:1rem} input[type=range]{flex:1; accent-color:var(--verd); height:4px} .range-val{font-family:var(--mono); font-size:.9rem; color:var(--brass); min-width:3.5rem; text-align:right; font-variant-numeric:tabular-nums} .gauge{display:flex; align-items:center; gap:1.2rem; margin-bottom:1.2rem} .gauge svg{width:96px; height:96px; flex-shrink:0; transform:rotate(-90deg)} .gauge .track{fill:none; stroke:var(--rule); stroke-width:7} .gauge .fill{fill:none; stroke:var(--verd); stroke-width:7; stroke-linecap:round; transition:stroke-dashoffset .7s var(--ease), stroke .4s} .gauge .score{font-family:var(--disp); font-size:2.4rem; font-weight:800; letter-spacing:-.04em; line-height:1} .gauge .score small{font-family:var(--mono); font-size:.72rem; font-weight:400; color:var(--muted); letter-spacing:.1em; display:block; margin-top:.3rem} .verdict{font-size:.95rem; color:var(--muted); margin:0} .audit-q{border-top:1px solid var(--rule-soft); padding:.85rem 0; display:flex; align-items:center; gap:1rem; justify-content:space-between} .audit-q label{font-size:.94rem; cursor:pointer; flex:1} .switch{display:inline-flex; gap:.35rem; flex-shrink:0} .switch label{cursor:pointer} .switch input{position:absolute; opacity:0; width:0; height:0} .switch span{ display:block; font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; border:1px solid var(--rule); border-radius:7px; padding:.3rem .6rem; transition:.18s; user-select:none; } .switch input:checked + span{border-color:var(--verd); background:var(--verd); color:var(--btn-fg)} .switch input:focus-visible + span{outline:2px solid var(--verd); outline-offset:2px} /* ---------- 14. faq ---------- */ details.faq{border-bottom:1px solid var(--rule-soft); padding:1.1rem 0} details.faq summary{ cursor:pointer; list-style:none; font-family:var(--disp); font-weight:600; font-size:1.06rem; letter-spacing:-.02em; display:flex; justify-content:space-between; gap:1.5rem; align-items:baseline; } details.faq summary::-webkit-details-marker{display:none} details.faq summary::after{content:"+"; font-family:var(--mono); color:var(--verd); font-size:1.1rem; flex-shrink:0} details.faq[open] summary::after{content:"\2013"} details.faq p{margin:.9rem 0 0; color:var(--muted); font-size:1rem; max-width:72ch} .faq-group + .faq-group{margin-top:2.6rem} /* ---------- 15. forms ---------- */ .field{display:flex; flex-direction:column; gap:.4rem; margin-bottom:1.05rem} .field label{font-family:var(--mono); font-size:.67rem; letter-spacing:.15em; text-transform:uppercase; color:var(--muted)} .field input,.field select,.field textarea{ font-family:var(--ui); font-size:.97rem; color:var(--ink); background:var(--paper); border:1px solid var(--rule); border-radius:9px; padding:.72rem .85rem; width:100%; transition:border-color .18s, box-shadow .18s; } .field textarea{min-height:132px; resize:vertical} .field input:focus,.field select:focus,.field textarea:focus{ outline:none; border-color:var(--verd); box-shadow:0 0 0 3px color-mix(in srgb,var(--verd) 18%,transparent); } .field .hint{font-size:.8rem; color:var(--muted); font-family:var(--body); letter-spacing:0; text-transform:none} .field.error input,.field.error select,.field.error textarea{border-color:#C0392B} .field .err{font-size:.8rem; color:#C0392B; font-family:var(--body); letter-spacing:0; text-transform:none; display:none} .field.error .err{display:block} .form-note{font-size:.88rem; color:var(--muted); margin-top:1rem} /* ---------- 16. lists ---------- */ .hairline-list{list-style:none; margin:0; padding:0} .hairline-list li{border-top:1px solid var(--rule-soft); padding:.85rem 0; display:flex; gap:1rem; align-items:baseline; font-size:1rem} .hairline-list li .mono{font-size:.69rem; letter-spacing:.14em; color:var(--brass); flex-shrink:0; width:2.2rem} .check{list-style:none; margin:0; padding:0} .check li{position:relative; padding-left:1.6rem; margin-bottom:.6rem; font-size:.95rem; color:var(--muted)} .check li::before{content:"\2713"; position:absolute; left:0; color:var(--verd); font-family:var(--mono); font-size:.85rem} /* ---------- 17. footer ---------- */ footer.site{border-top:1px solid var(--rule); padding-block:3.2rem 2rem; margin-top:2rem} .foot-grid{display:grid; grid-template-columns:1.6fr repeat(3,minmax(0,1fr)); gap:2rem} @media(max-width:860px){ .foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } .foot-mini{display:none} @media(max-width:700px){ footer.site{padding-block:2.1rem 1.35rem} .foot-grid{grid-template-columns:minmax(0,1fr); gap:0} .foot-grid > div:not(:first-child){display:none} .foot-mini{ display:flex; flex-wrap:wrap; gap:.4rem 1rem; margin-top:1.05rem; } .foot-mini a{ font-family:var(--ui); font-size:.8rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .foot-base{margin-top:1.35rem; padding-top:1rem; flex-direction:column; gap:.35rem} } footer.site h2{ font-family:var(--mono); font-size:.67rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); font-weight:400; margin-bottom:.9rem; } footer.site ul{list-style:none; margin:0; padding:0} footer.site li{margin-bottom:.45rem} footer.site a{font-family:var(--ui); font-size:.88rem; text-decoration:none; color:var(--muted); transition:color .18s} footer.site a:hover{color:var(--ink)} .foot-base{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-top:2.8rem; padding-top:1.4rem; border-top:1px solid var(--rule-soft); font-family:var(--mono); font-size:.69rem; letter-spacing:.08em; color:var(--muted); } /* ---------- 18. motion ---------- */ .rise{opacity:0; transform:translateY(18px); transition:opacity .65s var(--ease), transform .65s var(--ease)} .rise.in{opacity:1; transform:none} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important} .rise{opacity:1; transform:none} } /* ---------- 19. print ---------- */ @media print{ header.site,footer.site,.cta-row,.tool{display:none} body{background:#fff; color:#000; font-size:11pt} .band{padding-block:1rem; border:0} } /* ============================================================ 20. WORK PRODUCT COMPONENTS (case studies) ============================================================ */ /* -- brand board -- */ .board{display:grid; grid-template-columns:1.15fr 1fr; border:1px solid var(--rule); border-radius:14px; overflow:hidden; box-shadow:var(--shadow-lg)} .board > *{min-width:0} @media(max-width:760px){ .board{grid-template-columns:minmax(0,1fr)} } .board-logo{padding:clamp(1.8rem,4vw,3.2rem); display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; min-height:270px; container-type:inline-size} .board-side{display:flex; flex-direction:column; background:var(--raise)} .board-row{padding:1.15rem 1.3rem; border-bottom:1px solid var(--rule)} .board-row:last-child{border-bottom:none; flex:1} .board-row .k{font-family:var(--mono); font-size:.61rem; letter-spacing:.18em; text-transform:uppercase; color:var(--muted); margin-bottom:.75rem; display:block} .swatches{display:flex; gap:.45rem} .sw{flex:1; min-width:0} .sw i{display:block; height:42px; border-radius:5px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)} .sw b{display:block; font-family:var(--mono); font-size:.56rem; letter-spacing:.04em; color:var(--ink); margin-top:.4rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis} .sw em{display:block; font-family:var(--mono); font-size:.56rem; color:var(--muted); font-style:normal} .specimen{line-height:1.1} .specimen .big{font-size:1.85rem; letter-spacing:-.03em; display:block} .specimen .meta{font-family:var(--mono); font-size:.62rem; letter-spacing:.1em; color:var(--muted); margin-top:.5rem; display:block} /* Plow King lockup */ .lock-pk{background:linear-gradient(165deg,#12304A,#0B2137); color:#EAF2F8} .lock-pk .crown{width:20cqw; max-width:120px; color:#E8C563; margin-bottom:4cqw} .lock-pk .name{font-family:var(--disp); font-weight:800; font-size:8.5cqw; letter-spacing:-.03em; line-height:.95} .lock-pk .of{font-family:var(--mono); font-size:2.6cqw; letter-spacing:.28em; max-width:100%; overflow-wrap:anywhere; color:#C9D3DA; margin:2.5cqw 0 4cqw} .lock-pk .banner{background:#C8202E; color:#fff; font-family:var(--mono); font-size:2.5cqw; letter-spacing:.14em; padding:1.6cqw 3cqw; border-radius:2px; max-width:100%; overflow-wrap:anywhere} /* Italy Travel Finds lockup */ .lock-itf{background:#F0EADF; color:#33352F} .lock-itf .route{width:14cqw; max-width:84px; color:#C6A15B; margin-bottom:3.5cqw} .lock-itf .name{font-family:var(--disp); font-weight:400; font-size:8cqw; letter-spacing:-.035em; line-height:1; color:#5D7355} .lock-itf .rule{width:16cqw; height:1px; background:#C6A15B; margin:4cqw 0} .lock-itf .tag{font-family:var(--disp); font-style:italic; font-size:3.4cqw; color:#6E5442; letter-spacing:-.02em} /* -- print & product collateral -- */ .collateral{display:flex; gap:1.4rem; flex-wrap:wrap; align-items:flex-start} .piece-wrap{text-align:center; font-family:var(--ui)} .piece{border-radius:6px; overflow:hidden; box-shadow:var(--shadow-lg); position:relative; container-type:inline-size; margin-inline:auto} .piece-cap{font-family:var(--mono); font-size:.59rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.75rem} .hanger{width:132px; aspect-ratio:1/2.55; border-radius:6px 6px 4px 4px} .hanger::after{content:""; position:absolute; top:7cqw; left:50%; transform:translateX(-50%); width:26cqw; height:26cqw; border-radius:50%; background:var(--paper); box-shadow:inset 0 0 0 1px rgba(0,0,0,.12)} .flyer{width:200px; aspect-ratio:8.5/11} .bcard{width:206px; aspect-ratio:3.5/2} .cover{width:150px; aspect-ratio:3/4} /* Plow King print faces */ .pk-print{font-family:var(--ui); background:linear-gradient(170deg,#12304A,#0B2137); color:#EAF2F8; height:100%; padding:8cqw 7cqw; display:flex; flex-direction:column; text-align:center} .hanger .pk-print{padding-top:38cqw} .pk-print .kick{font-family:var(--mono); font-size:3.2cqw; letter-spacing:.16em; color:#E8C563; margin-bottom:3cqw} .pk-print .big{font-family:var(--disp); font-weight:800; font-size:9cqw; letter-spacing:-.035em; line-height:.94; margin-bottom:3.5cqw} .pk-print .sub{font-size:3.6cqw; color:rgba(234,242,248,.75); line-height:1.35; margin-bottom:auto} .pk-print .band{background:#C8202E; color:#fff; font-family:var(--mono); font-size:3.2cqw; letter-spacing:.08em; padding:2.6cqw; border-radius:2px; margin-top:4cqw} .pk-print .num{font-family:var(--mono); font-size:3.6cqw; letter-spacing:.06em; margin-top:3cqw; color:#C9D3DA} .flyer .pk-print .big{font-size:8cqw} .bcard-face{background:linear-gradient(120deg,#12304A,#0B2137); color:#EAF2F8; height:100%; padding:7cqw; display:flex; flex-direction:column; justify-content:space-between} .bcard-face .top{display:flex; align-items:center; gap:2.5cqw} .bcard-face svg{width:9cqw; color:#E8C563; flex-shrink:0} .bcard-face .nm{font-family:var(--disp); font-weight:800; font-size:6cqw; letter-spacing:-.03em} .bcard-face .dt{font-family:var(--mono); font-size:3cqw; color:#C9D3DA; line-height:1.7} /* Italy guide covers */ .cover-face{font-family:var(--ui); height:100%; padding:9cqw 8cqw; display:flex; flex-direction:column; color:#F5F1E8; position:relative} .cover-face::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.12),rgba(0,0,0,.4))} .cover-face > *{position:relative; z-index:1} .cover-face .brand{font-family:var(--mono); font-size:3.4cqw; letter-spacing:.2em; opacity:.85; margin-bottom:auto} .cover-face .ttl{font-family:var(--disp); font-weight:400; font-size:11cqw; letter-spacing:-.035em; line-height:.98} .cover-face .sub{font-family:var(--mono); font-size:3.2cqw; letter-spacing:.14em; margin-top:3cqw; color:#E3C888} .cv1{background:linear-gradient(160deg,#5D7355,#2F3F31)} .cv2{background:linear-gradient(160deg,#A8674A,#5C3628)} .cv3{background:linear-gradient(160deg,#4E6C7A,#26363D)} /* -- workflow diagram -- */ .flow{display:grid; gap:.65rem} .flow-step{display:flex; gap:.9rem; align-items:flex-start; border:1px solid var(--rule); border-radius:11px; padding:.85rem 1.05rem; background:var(--raise); position:relative} .flow-step .fn{font-family:var(--mono); font-size:.61rem; letter-spacing:.13em; color:var(--brass); flex-shrink:0; padding-top:.25rem; width:2rem} .flow-step .ft{font-weight:600; font-size:.94rem; display:block} .flow-step .fd{font-size:.86rem; color:var(--muted); display:block; margin-top:.15rem} .flow-step + .flow-step::before{content:""; position:absolute; left:1.95rem; top:-.65rem; height:.65rem; width:1px; background:var(--rule)} .flow-step.auto{border-style:dashed} .flow-step.gate{border-color:var(--verd)} .flow-step.gate .fn{color:var(--verd)} /* -- deliverable index -- */ .deliv{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:0; border:1px solid var(--rule); border-radius:12px; overflow:hidden} .deliv div{padding:.9rem 1.05rem; border-right:1px solid var(--rule-soft); border-bottom:1px solid var(--rule-soft); font-size:.87rem} .deliv div span{display:block; font-family:var(--mono); font-size:.58rem; letter-spacing:.14em; text-transform:uppercase; color:var(--brass); margin-bottom:.3rem} /* -- section numbering for case-study chapters -- */ .chapter{margin-top:clamp(2.6rem,6vw,4.2rem)} .chapter-head{display:flex; align-items:baseline; gap:1rem; margin-bottom:1.3rem} .chapter-head .cn{font-family:var(--mono); font-size:.68rem; letter-spacing:.18em; color:var(--brass); flex-shrink:0} .chapter-head h3{font-size:clamp(1.35rem,2.4vw,1.85rem); letter-spacing:-.028em} .chapter-head::after{content:""; flex:1; height:1px; background:var(--rule-soft)} /* ============================================================ 21. CASE STUDY SECTIONING ============================================================ */ .case{position:relative; padding-block:clamp(3rem,7vw,5.5rem); border-top:1px solid var(--rule)} .case::before{content:""; position:absolute; inset:0 0 auto 0; height:4px; background:var(--case-accent,var(--verd))} .case.tint{background:var(--case-tint,transparent)} .case-open{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.4rem); align-items:start; margin-bottom:clamp(2rem,4vw,3rem)} .case-no{font-family:var(--disp); font-weight:800; font-size:clamp(3.4rem,8vw,6.2rem); line-height:.8; letter-spacing:-.06em; color:var(--case-accent,var(--verd)); opacity:.22} .case-meta{display:flex; flex-wrap:wrap; gap:.4rem .5rem; margin-top:1rem} .case-meta span{font-family:var(--mono); font-size:.62rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule); border-radius:999px; padding:.26rem .6rem} .case-divider{display:flex; align-items:center; gap:1.2rem; padding-block:clamp(2rem,5vw,3.4rem)} .case-divider::before,.case-divider::after{content:""; flex:1; height:1px; background:var(--rule)} .case-divider span{font-family:var(--mono); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:var(--muted)} @media(max-width:640px){ .case-open{grid-template-columns:1fr} } /* ============================================================ 22. INTERACTIVE PROCESS STEPPER ============================================================ */ .stepper{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:clamp(1.6rem,4vw,3.2rem); align-items:start} @media(max-width:900px){ .stepper{grid-template-columns:minmax(0,1fr)} } .steplist{position:relative; list-style:none; margin:0; padding:0 0 0 2.4rem} .steplist::before{content:""; position:absolute; left:9px; top:.9rem; bottom:.9rem; width:2px; background:var(--rule); border-radius:2px} .steplist::after{content:""; position:absolute; left:9px; top:.9rem; width:2px; height:var(--progress,0%); background:var(--verd); border-radius:2px; transition:height .55s var(--ease)} .steplist li{margin-bottom:.15rem} .steplist button{ all:unset; display:block; width:100%; box-sizing:border-box; cursor:pointer; padding:.72rem .9rem; border-radius:10px; position:relative; font-family:var(--ui); font-size:.97rem; font-weight:600; color:var(--muted); transition:background .2s, color .2s; } .steplist button::before{ content:""; position:absolute; left:-2.4rem; top:50%; transform:translateY(-50%); width:20px; height:20px; border-radius:50%; background:var(--paper); border:2px solid var(--rule); transition:border-color .25s, background .25s, transform .25s; } .steplist button::after{ content:""; position:absolute; left:calc(-2.4rem + 6px); top:50%; transform:translateY(-50%) scale(0); width:8px; height:8px; border-radius:50%; background:var(--verd); transition:transform .25s var(--ease); } .steplist button:hover{color:var(--ink); background:var(--rule-soft)} .steplist button .sn{font-family:var(--mono); font-size:.63rem; letter-spacing:.15em; color:var(--brass); display:block; margin-bottom:.15rem} .steplist li.done button::before{border-color:var(--verd)} .steplist li.on button{color:var(--ink); background:var(--rule-soft)} .steplist li.on button::before{border-color:var(--verd); transform:translateY(-50%) scale(1.12)} .steplist li.on button::after{transform:translateY(-50%) scale(1)} .steppanel{border:1px solid var(--rule); border-radius:16px; background:var(--raise); padding:clamp(1.4rem,3vw,2.1rem); box-shadow:var(--shadow); min-height:270px} .steppanel .pn{font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; color:var(--brass); display:block; margin-bottom:.7rem} .steppanel h3{margin-bottom:.8rem; font-size:clamp(1.3rem,2.3vw,1.75rem)} .steppanel p{color:var(--muted); font-size:1rem} .steppanel .when{display:inline-block; font-family:var(--mono); font-size:.66rem; letter-spacing:.13em; text-transform:uppercase; color:var(--ink); border:1px solid var(--rule); border-radius:999px; padding:.3rem .7rem; margin-top:.4rem} .steppanel .deliv-line{margin-top:1.3rem; padding-top:1.1rem; border-top:1px solid var(--rule-soft); font-family:var(--mono); font-size:.72rem; letter-spacing:.06em; color:var(--muted)} .steppanel .deliv-line b{color:var(--ink); font-weight:500} .stepfade{animation:stepIn .4s var(--ease) both} @keyframes stepIn{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}} .stepctl{display:flex; align-items:center; gap:.6rem; margin-top:1.4rem} .stepctl button{ all:unset; cursor:pointer; font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); border:1px solid var(--rule); border-radius:8px; padding:.42rem .7rem; } .stepctl button:hover{border-color:var(--verd); color:var(--verd)} .stepctl .count{font-family:var(--mono); font-size:.68rem; color:var(--muted); margin-left:auto} /* ============================================================ 23. MASCOT ============================================================ */ .mascot{display:block; height:auto} .mascot-row{display:flex; gap:clamp(.8rem,2vw,1.6rem); align-items:flex-end; flex-wrap:wrap} .mascot-row figure{margin:0; text-align:center; flex:1; min-width:120px} .mascot-row img{width:100%; max-width:190px; margin-inline:auto} .mascot-row figcaption{font-family:var(--mono); font-size:.58rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-top:.6rem} .mascot-sheet{border:1px solid var(--rule); border-radius:14px; background:#fff; padding:clamp(.8rem,2vw,1.6rem); box-shadow:var(--shadow-lg)} .mascot-cta{display:flex; align-items:flex-end; gap:1.4rem} .mascot-cta img{width:clamp(120px,18vw,190px); flex-shrink:0} @media(max-width:620px){ .mascot-cta img{display:none} } /* ============================================================ 24. SERVICE ARTIFACTS ============================================================ */ .maplist{border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--raise); font-family:var(--ui)} .maplist .mrow{display:flex; align-items:center; gap:.85rem; padding:.8rem 1rem; border-bottom:1px solid var(--rule-soft)} .maplist .mrow:last-child{border-bottom:none} .maplist .rank{font-family:var(--mono); font-size:.7rem; width:1.6rem; height:1.6rem; display:grid; place-items:center; border-radius:6px; background:var(--rule-soft); color:var(--muted); flex-shrink:0} .maplist .mrow.you .rank{background:var(--marine); color:var(--btn-fg)} .maplist .mrow.you{background:color-mix(in srgb,var(--verd) 9%,transparent)} .maplist .biz{font-size:.9rem; font-weight:600; flex:1; min-width:0} .maplist .stars{font-family:var(--mono); font-size:.68rem; color:var(--brass); flex-shrink:0} .bars{display:flex; align-items:flex-end; gap:.5rem; height:150px; padding:1.2rem 1rem .6rem; border:1px solid var(--rule); border-radius:12px; background:var(--raise)} .bars div{flex:1; background:var(--rule-soft); border-radius:4px 4px 0 0; position:relative; display:flex; align-items:flex-end; justify-content:center} .bars div b{position:absolute; bottom:-1.35rem; font-family:var(--mono); font-size:.58rem; color:var(--muted); font-weight:400} .bars div.hi{background:var(--verd)} .bars div.hi::after{content:""; position:absolute; inset:0; border-radius:4px 4px 0 0} /* ============================================================ 25. SERVICES LAYOUT ============================================================ */ .svc{border-top:1px solid var(--rule-soft); padding-block:clamp(3rem,6.5vw,5.4rem)} .svc-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.2rem,3vw,2.6rem); align-items:start; margin-bottom:clamp(1.8rem,4vw,2.8rem)} .svc-no{font-family:var(--disp); font-weight:800; font-size:clamp(3rem,6.5vw,5rem); line-height:.78; letter-spacing:-.06em; color:var(--verd); opacity:.28} .svc-head h2{margin-bottom:.9rem} .svc-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(1.4rem,3.5vw,2.6rem); align-items:start} @media(max-width:880px){ .svc-grid{grid-template-columns:minmax(0,1fr)} .svc-head{grid-template-columns:1fr} } .svc-art{border:1px solid var(--rule); border-radius:14px; background:var(--raise); padding:1.3rem; box-shadow:var(--shadow-sm)} .svc-art > .cap{font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:1rem} /* identity kit artifact */ .kit{display:grid; gap:.85rem} .kit .tile{background:var(--marine); border-radius:9px; padding:1.15rem; display:flex; align-items:center; gap:.7rem; justify-content:center} .kit .tile .mk{width:40px; height:40px} .kit .tile b{font-family:var(--disp); font-weight:800; letter-spacing:-.04em; font-size:1.15rem; color:var(--btn-fg)} [data-theme="dark"] .kit .tile{background:#08201F} [data-theme="dark"] .kit .tile b{color:#EDEFEC} .kit .strip2{display:flex; gap:.4rem} .kit .strip2 i{flex:1; height:26px; border-radius:5px} .kit .spec{font-family:var(--disp); font-size:1.45rem; letter-spacing:-.03em; line-height:1.05} .kit .spec em{font-style:normal; font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; color:var(--muted); display:block; margin-top:.45rem} /* page architecture artifact */ .arch{display:grid; gap:.4rem; font-family:var(--ui)} .arch div{border:1px solid var(--rule); border-radius:7px; padding:.5rem .75rem; font-size:.78rem; color:var(--muted); display:flex; justify-content:space-between; gap:.6rem; align-items:center} .arch div b{font-weight:600; color:var(--ink); font-size:.82rem} .arch div em{font-family:var(--mono); font-style:normal; font-size:.58rem; letter-spacing:.1em; color:var(--brass)} .arch div.hero{background:var(--marine); border-color:transparent; padding-block:1.05rem} .arch div.hero b,.arch div.hero{color:var(--btn-fg)} .arch div.hero em{color:#E8C563} [data-theme="dark"] .arch div.hero b,[data-theme="dark"] .arch div.hero{color:#EDEFEC} /* ============================================================ 26. NEW WAVE — dark hero, wave motifs, pillar band ============================================================ */ .hero.dark{ background:linear-gradient(155deg,var(--hero-a) 0%,var(--hero-b) 52%,var(--hero-c) 100%); color:var(--hero-ink); position:relative; overflow:hidden; isolation:isolate; } .hero.dark::before{display:none} .hero.dark::after{ content:""; position:absolute; right:-12%; top:-28%; width:62%; aspect-ratio:1; background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--brand-2) 24%,transparent),transparent 62%); z-index:-1; pointer-events:none; } .hero.dark .lede{color:var(--hero-ink-soft)} .hero.dark .eyebrow{color:var(--aqua)} .hero.dark h1{color:#FFFFFF; font-weight:800} .hero.dark h1 .thin{color:var(--aqua); font-style:normal; font-weight:800} .hero.dark .strip{border-top-color:var(--hero-line)} .hero.dark .strip .k{color:var(--hero-ink)} .hero.dark .strip .v{color:var(--hero-ink-soft)} .hero.dark .ledger{ background:rgba(255,255,255,.055); border-color:rgba(255,255,255,.15); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); box-shadow:0 24px 50px -28px rgba(0,0,0,.8); } .hero.dark .ledger-head,.hero.dark .ledger-foot,.hero.dark .lrow .lbl{color:var(--hero-ink-soft)} .hero.dark .ledger-head,.hero.dark .ledger-foot{border-color:var(--hero-line)} .hero.dark .lrow{border-bottom-color:var(--hero-line)} .hero.dark .lrow .dots{border-bottom-color:var(--hero-dots)} .hero.dark .lrow .fig{color:var(--aqua)} .hero.dark .btn-ghost{border-color:color-mix(in srgb,var(--hero-ink) 42%,transparent); color:var(--hero-ink)} .hero.dark .btn-ghost:hover{border-color:var(--aqua); color:var(--aqua)} .hero-wave{position:absolute; left:0; right:0; bottom:-1px; width:100%; height:clamp(60px,9vw,120px); z-index:-1} .hero-wave path{fill:var(--paper)} .hero-wave .w-a{fill:color-mix(in srgb,var(--brand-1) 34%,transparent)} .hero-wave .w-b{fill:color-mix(in srgb,var(--brand-2) 24%,transparent)} /* section separator */ .wavesep{display:block; width:100%; height:clamp(34px,4.5vw,64px); margin-bottom:-1px} .wavesep path{fill:var(--sink)} .wavesep.up path{fill:var(--paper)} /* four-pillar band, styled after the brand board footer strip */ .pillars{background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 60%,var(--hero-c)); color:var(--band-ink); position:relative; overflow:hidden} .pillars::after{ content:""; position:absolute; right:-8%; bottom:-40%; width:52%; aspect-ratio:1; background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 22%,transparent),transparent 62%); pointer-events:none; } .pillar-grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(1.4rem,3vw,2.6rem); position:relative; z-index:1} @media(max-width:900px){ .pillar-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:520px){ .pillar-grid{grid-template-columns:minmax(0,1fr)} } .pillar svg{width:34px; height:34px; color:var(--aqua); margin-bottom:1rem} .pillar h3{color:var(--band-ink); font-size:.86rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:.6rem; font-weight:700} .pillar p{color:var(--band-ink-soft); font-size:.93rem; margin:0} /* coral dot separators, as on the boards */ .dotlist{display:flex; flex-wrap:wrap; gap:.5rem .9rem; align-items:center; font-family:var(--ui); font-weight:600; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)} .dotlist i{width:5px; height:5px; border-radius:50%; background:var(--brass); display:block; flex-shrink:0} .hero.dark .dotlist{color:var(--hero-ink-soft)} /* teal accent rule under section headings */ .band h2 + .lede{margin-top:1rem} .accent-rule{width:52px; height:3px; background:linear-gradient(90deg,var(--verd),var(--aqua)); border-radius:2px; margin:1.1rem 0 0} /* dark footer, per the brand board */ footer.site{ background:linear-gradient(160deg,var(--hero-a) 0%,var(--hero-b) 60%,var(--hero-c) 100%); color:#F8FAFC; border-top:none; margin-top:0; position:relative; overflow:hidden; } footer.site::after{ content:""; position:absolute; right:-6%; bottom:-45%; width:46%; aspect-ratio:1; background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 18%,transparent),transparent 62%); pointer-events:none; } footer.site .wrap{position:relative; z-index:1} footer.site h2{color:rgba(248,250,252,.82)} footer.site a{color:rgba(248,250,252,.9)} footer.site a:hover{color:var(--aqua)} footer.site .small,footer.site .dim{color:rgba(248,250,252,.84)} footer.site .brand{color:#fff} footer.site .wordmark i{color:var(--aqua)} footer.site .foot-base{border-top-color:rgba(248,250,252,.22); color:rgba(248,250,252,.8)} /* ============================================================ 27. TWO PRACTICES — division headers, contrast band, revenue mix ============================================================ */ .practice{position:relative; padding-block:clamp(2.6rem,5vw,4rem) 0} .practice-head{display:grid; grid-template-columns:auto 1fr; gap:clamp(1.1rem,2.6vw,2.2rem); align-items:start} .practice-no{ font-family:var(--disp); font-weight:800; font-size:clamp(2.4rem,5vw,3.8rem); line-height:.8; letter-spacing:-.05em; color:var(--practice-accent,var(--verd)); opacity:.3; } .practice-tag{ display:block; font-family:var(--disp); font-weight:800; font-size:clamp(1.85rem,4.2vw,2.85rem); letter-spacing:-.045em; text-transform:none; color:var(--practice-accent,var(--verd)); border:0; border-radius:0; padding:0 0 .55rem; margin-bottom:.85rem; line-height:1.05; border-bottom:3px solid currentColor; } .practice-tag::before{display:none} .practice-head h2{margin-bottom:.8rem} .practice-head .lede{max-width:54ch} .practice-rule{height:3px; border-radius:2px; margin-top:1.4rem; background:linear-gradient(90deg,var(--practice-accent,var(--verd)),transparent)} @media(max-width:700px){ .practice-head{grid-template-columns:1fr} } /* dark contrast band */ .contrast{background:linear-gradient(150deg,var(--hero-a),var(--hero-b) 62%,var(--hero-c)); color:var(--band-ink); position:relative; overflow:hidden} .contrast::after{content:""; position:absolute; left:-10%; top:-35%; width:48%; aspect-ratio:1; background:radial-gradient(circle,color-mix(in srgb,var(--brand-2) 20%,transparent),transparent 62%); pointer-events:none} .contrast .wrap{position:relative; z-index:1} .contrast h2{color:var(--band-ink)} .contrast .lede{color:var(--band-ink-soft)} .contrast .eyebrow{color:var(--aqua)} .vs{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(1rem,2.4vw,1.8rem); margin-top:2.4rem} @media(max-width:860px){ .vs{grid-template-columns:minmax(0,1fr)} } .vs > div{border:1px solid color-mix(in srgb,var(--band-ink) 18%,transparent); border-radius:14px; padding:1.5rem; background:color-mix(in srgb,var(--band-ink) 5%,transparent)} .vs > div.win{border-color:var(--aqua); background:color-mix(in srgb,var(--brand-2) 11%,transparent)} .vs h3{font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--band-ink-soft); margin-bottom:.9rem; font-weight:700} .vs.win h3,.vs > div.win h3{color:var(--aqua)} .vs p{color:var(--band-ink-soft); font-size:.97rem; margin:0} .vs ul{list-style:none; margin:.2rem 0 0; padding:0} .vs li{position:relative; padding-left:1.3rem; margin-bottom:.55rem; font-size:.95rem; color:var(--band-ink-soft)} .vs li::before{content:"\2013"; position:absolute; left:0; color:rgba(248,250,252,.4)} .vs > div.win li::before{content:"\2713"; color:var(--aqua)} .credential{ display:flex; gap:1.1rem; align-items:center; margin-top:2.4rem; padding:1.2rem 1.4rem; border:1px solid color-mix(in srgb,var(--brand-2) 38%,transparent); border-radius:14px; background:color-mix(in srgb,var(--brand-2) 9%,transparent); } .credential .badge{ font-family:var(--ui); font-weight:800; font-size:.82rem; letter-spacing:.1em; color:var(--hero-b); background:var(--aqua); border-radius:8px; padding:.6rem .7rem; flex-shrink:0; line-height:1; } .credential p{margin:0; color:var(--band-ink-soft); font-size:.97rem} /* revenue-mix artifact */ .mix{display:grid; gap:.7rem; font-family:var(--ui)} .mix .row{display:grid; grid-template-columns:8.5rem 1fr auto; gap:.8rem; align-items:center} .mix .row span{font-size:.8rem; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap} .mix .row i{height:16px; border-radius:4px; background:var(--rule-soft); display:block; position:relative; overflow:hidden} .mix .row i::after{content:""; position:absolute; inset:0 auto 0 0; width:var(--w,40%); border-radius:4px; background:linear-gradient(90deg,var(--verd),var(--aqua))} .mix .row.dim i::after{background:var(--muted); opacity:.4} .mix .row b{font-family:var(--mono); font-size:.72rem; color:var(--brass); font-weight:500; white-space:nowrap} .mix .row.dim b{color:var(--muted)} .mix .note{font-size:.84rem; color:var(--muted); margin-top:.5rem; font-family:var(--body)} @media(max-width:480px){ .mix .row{grid-template-columns:6.5rem 1fr auto} } /* ============================================================ 28. LIVE-SITE SCREENSHOTS (replaces the CSS recreations) ============================================================ */ .screen.shot{aspect-ratio:auto; max-height:clamp(380px,52vw,780px); overflow:hidden; background:var(--sink)} .screen.shot img{width:100%; height:auto; display:block} .shot-fade{position:absolute; left:0; right:0; bottom:0; height:110px; pointer-events:none; background:linear-gradient(transparent,var(--raise))} .visit{ display:inline-flex; align-items:center; gap:.5rem; font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.11em; text-transform:uppercase; color:var(--verd); text-decoration:none; margin-top:.9rem; border-bottom:1px solid transparent; padding-bottom:.15rem; } .visit:hover{border-bottom-color:var(--verd)} .visit::after{content:"\2197"; font-size:.9em; transition:transform .2s var(--ease)} .visit:hover::after{transform:translate(2px,-2px)} .showcase figcaption{display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; align-items:baseline; justify-content:space-between} .shotgrid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(1.2rem,2.6vw,2rem)} @media(max-width:820px){ .shotgrid{grid-template-columns:minmax(0,1fr)} } /* ============================================================ 29. SCHEME PREVIEWER (delete this block and the matching markup + JS once a palette is chosen — see README) ============================================================ */ .schemer{ position:fixed; right:max(.7rem, env(safe-area-inset-right)); bottom:max(.7rem, env(safe-area-inset-bottom)); z-index:200; display:flex; align-items:center; flex-wrap:nowrap; gap:.45rem; background:var(--raise); border:1px solid var(--rule); border-radius:999px; padding:.38rem .42rem; box-shadow:var(--shadow-lg); font-family:var(--ui); max-width:calc(100vw - 1.4rem); } .scheme-toggle{ width:38px; height:38px; min-width:38px; min-height:38px; border-radius:50%; border:2px solid rgba(21,34,56,.2); cursor:pointer; padding:0; position:relative; background:linear-gradient(135deg,#0F8B8D,#54D2C8); box-shadow:inset 0 0 0 3px var(--raise); } .scheme-toggle::after{ content:""; position:absolute; right:3px; bottom:3px; width:9px; height:9px; border-radius:50%; background:var(--paper); box-shadow:0 0 0 1.5px rgba(21,34,56,.35); } .schemer[data-open="true"] .scheme-toggle{border-color:var(--ink)} .scheme-swatches{display:none; align-items:center; gap:.4rem} .schemer[data-open="true"] .scheme-swatches{display:flex} .schemer button[data-scheme]{ width:32px; height:32px; min-width:32px; min-height:32px; flex:0 0 32px; border-radius:50%; border:2px solid rgba(21,34,56,.18); cursor:pointer; padding:0; transition:transform .18s var(--ease), border-color .18s, box-shadow .18s; position:relative; } .schemer button[data-scheme]:hover{transform:scale(1.1)} .schemer button[data-scheme][aria-pressed="true"]{border-color:var(--ink); box-shadow:0 0 0 3px color-mix(in srgb,var(--verd) 35%,transparent)} .schemer button[data-scheme]::after{ content:attr(data-label); position:absolute; bottom:130%; left:50%; transform:translateX(-50%); background:var(--ink); color:var(--paper); font-size:.6rem; letter-spacing:.08em; padding:.25rem .5rem; border-radius:5px; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .18s; } .schemer button[data-scheme]:hover::after{opacity:1} .sw-teal{background:linear-gradient(135deg,#0F8B8D,#54D2C8)} .sw-cobalt{background:linear-gradient(135deg,#0055FF,#5B9BFF)} .sw-emerald{background:linear-gradient(135deg,#0D9488,#10B981)} .sw-midnight{background:linear-gradient(135deg,#0B0F1A,#54D2C8)} .sw-porcelain{background:linear-gradient(135deg,#EDF3F7,#109FC4)} .sw-sunset{background:linear-gradient(135deg,#E0723C,#F6B24A)} .sw-slate{background:linear-gradient(135deg,#5B7A8C,#9DBBCB)} @media print{ .schemer{display:none} } @media(max-width:520px){ .schemer[data-open="true"]{ flex-wrap:wrap; justify-content:flex-end; max-width:min(92vw, 292px); border-radius:18px; } .schemer[data-open="true"] .scheme-swatches{flex-wrap:wrap; justify-content:flex-end} } @media(max-width:1180px){ .bar a.btn-primary{display:inline-flex !important; white-space:nowrap} } @media(max-width:420px){ .wordmark b{font-size:1.02rem; letter-spacing:.03em} .wordmark i{font-size:.66rem; letter-spacing:.08em} .bar a.btn-primary.sm{padding:.48rem .62rem; font-size:.72rem} } /* ---- linked-revenue readability layer ---- */ .band.air{ background:color-mix(in srgb,var(--sink) 55%, var(--raise)); color:var(--ink); border-top:2px solid color-mix(in srgb,var(--verd) 45%, var(--rule)); } .band.air h1,.band.air h2,.band.air h3{color:var(--ink)} .card{ box-shadow:0 10px 32px -20px rgba(21,34,56,.28); border:1px solid color-mix(in srgb,var(--ink) 22%, transparent); } .card:has(> .num) h3{ padding-bottom:.55rem; border-bottom:1px solid color-mix(in srgb,var(--verd) 30%,transparent); } .steplist button .sn{ font-family:var(--disp); font-weight:800; font-size:1.28rem; letter-spacing:-.04em; color:color-mix(in srgb,var(--verd) 55%, var(--aqua)); text-transform:none; } .hscroll{ display:flex; gap:1rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:.15rem 0 1.15rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; max-width:100%; overscroll-behavior-x:contain; } .hscroll::-webkit-scrollbar{height:6px} .hscroll::-webkit-scrollbar-thumb{background:var(--verd); border-radius:99px} .hscroll > *{flex:0 0 min(86%, 320px); min-width:0; max-width:100%; scroll-snap-align:start} @media(min-width:1100px){ .hscroll.cols-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); overflow:visible; margin-inline:0; padding:.15rem 0} .hscroll.cols-4 > *{flex:none; max-width:none} } .ind-card{padding:0; overflow:hidden; display:flex; flex-direction:column; min-width:0; max-width:100%} .ind-shot{position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--sink)} @media(min-width:700px){ .ind-shot{aspect-ratio:4/3} } .ind-shot::after{content:""; position:absolute; inset:auto 0 0; height:48%; background:linear-gradient(to top,rgba(21,34,56,.52),transparent); pointer-events:none} .ind-shot img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .45s var(--ease)} .ind-card:hover .ind-shot img{transform:scale(1.05)} @media(prefers-reduced-motion:reduce){.ind-card:hover .ind-shot img{transform:none}} .ind-shot .num{ position:absolute; left:.7rem; bottom:.4rem; margin:0; display:block; font-family:var(--disp); font-weight:800; font-size:clamp(1.35rem,4vw,2.1rem); letter-spacing:-.06em; line-height:.8; color:#F8FAFC; text-shadow:0 10px 26px rgba(21,34,56,.55); z-index:1 } .ind-body{padding:.85rem 1rem 1rem} .ind-body h3{margin:0 0 .3rem; padding:0; border:0} .ind-body p{margin:0} .hscroll-mobile{display:grid; gap:1rem} @media(max-width:700px){ .hscroll-mobile{ display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; gap:1rem; grid-template-columns:none; padding-bottom:1.1rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin; max-width:100%; overscroll-behavior-x:contain; } .hscroll-mobile > *{flex:0 0 min(86%, 300px); min-width:0; max-width:100%; scroll-snap-align:start} } .lr-step{ display:flex; gap:1.15rem; align-items:flex-start; background:var(--raise); border:1px solid var(--rule); border-radius:16px; padding:1.35rem 1.4rem 1.25rem; box-shadow:0 10px 32px -20px rgba(21,34,56,.28); } .lr-step .n{ font-family:var(--disp); font-weight:800; font-size:clamp(2.8rem,7vw,4.2rem); line-height:.8; letter-spacing:-.07em; color:color-mix(in srgb,var(--verd) 50%, var(--aqua)); flex-shrink:0; min-width:1.15ch; } .lr-step h3{ font-size:1.12rem; margin:0 0 .45rem; padding-bottom:.45rem; border-bottom:1px solid color-mix(in srgb,var(--verd) 28%,transparent); } .lr-step p{margin:0; color:var(--muted); font-size:.95rem} .quote-banner{ background:linear-gradient(100deg,var(--brand-deep) 0%, color-mix(in srgb,var(--brand-1) 42%, var(--brand-deep)) 100%); color:#F8FAFC; padding:clamp(1.35rem,3.2vw,2.1rem) var(--gut); position:relative; overflow:hidden; } .quote-banner::before{ content:"“"; position:absolute; left:max(.7rem, var(--gut)); top:-.2em; font-family:var(--disp); font-weight:800; font-size:clamp(3.6rem,8vw,5.5rem); line-height:1; color:color-mix(in srgb,var(--brand-2) 22%, transparent); pointer-events:none; } .quote-banner blockquote{margin:0 auto; max-width:40rem; text-align:center; position:relative} .quote-banner p{ font-family:var(--disp); font-weight:600; font-style:italic; font-size:clamp(1.08rem,2.1vw,1.45rem); letter-spacing:-.02em; line-height:1.35; margin:0; color:#F8FAFC; } .quote-attr{ display:flex; align-items:center; justify-content:center; gap:.7rem; margin-top:.95rem; text-align:left; } .quote-mark{ width:38px; height:38px; border-radius:50%; display:grid; place-items:center; flex-shrink:0; border:1px solid rgba(248,250,252,.18); } .quote-mark svg{width:18px; height:18px; display:block} .quote-mark img{width:26px; height:26px; object-fit:contain; display:block} .quote-mark--pk{background:#12304A; color:#E8C563} .quote-mark--itf{background:#F0EADF; color:#C6A15B} .quote-mark--cus{background:#1F4038; padding:7px} .quote-mark--pb{background:#152238; padding:6px} .quote-attr cite{display:block; font-style:normal; margin:0} .quote-attr cite b{ display:block; font-family:var(--disp); font-weight:800; font-size:.95rem; letter-spacing:-.02em; color:#F8FAFC; line-height:1.15; } .quote-attr cite span{ display:block; margin-top:.18rem; font-family:var(--ui); font-weight:700; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--aqua); } .work-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem} @media(max-width:900px){ .work-grid{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; gap:1rem; padding:0 0 1.15rem; -webkit-overflow-scrolling:touch; max-width:100%; overscroll-behavior-x:contain} .work-card{flex:0 0 min(86%,340px); min-width:0; max-width:100%; scroll-snap-align:start} } a.work-card{padding:0; overflow:hidden; display:flex; flex-direction:column; color:inherit} .work-shot{aspect-ratio:16/10; overflow:hidden; background:var(--sink); position:relative} .work-shot img{width:100%; height:100%; object-fit:cover; object-position:top center; display:block} .work-shot--emblem{display:grid; place-items:center; background:#1F4038} .work-shot--emblem img{width:min(58%,180px); height:auto; object-fit:contain} .work-body{padding:1.1rem 1.2rem 1.25rem; display:flex; flex-direction:column; flex:1} .work-logo{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; margin-bottom:.7rem} .work-logo svg{width:18px; height:18px} .work-logo--pk{background:#12304A; color:#E8C563} .work-logo--itf{background:#F0EADF; color:#C6A15B} .work-logo--cus{background:#1F4038} .work-logo--cus img{width:24px; height:24px; object-fit:contain} .work-logo--pb{background:#152238; padding:6px} .work-logo--pb img{width:22px; height:24px; object-fit:contain} .work-shot--poolbid{background:#152238} .mega-shot--poolbid{background:#152238} .mega-shot--poolbid img{object-fit:contain; padding:16px; object-position:center} .mega-shot--poolbid::after{display:none} .lock-pb{background:linear-gradient(165deg,#152238,#1a3548); color:#F8FAFC} .lock-pb .pb-mark{width:min(132px,40cqw); height:auto; margin-bottom:3cqw} .lock-pb .name{font-family:var(--disp); font-weight:800; font-size:7.6cqw; letter-spacing:-.03em; line-height:.95} .lock-pb .tag{font-family:var(--mono); font-size:2.4cqw; letter-spacing:.16em; color:#54D2C8; margin-top:2.2cqw; max-width:100%; overflow-wrap:anywhere} .quote-mark--pb{background:#152238; padding:6px} .quote-mark--pb img{width:22px; height:24px} .work-carousel .ind-btn{width:44px; height:44px} .work-carousel .ind-nav{margin-top:.9rem} .work-track{align-items:stretch} .work-body h3{margin:0 0 .4rem; padding:0; border:0; font-size:1.12rem} .work-body p{margin:0 0 1rem; flex:1} .work-go{font-family:var(--ui); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--verd)} .ind-carousel{position:relative; overflow:hidden; max-width:100%; min-width:0} .ind-track{ display:flex; gap:.75rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; padding:0 0 1rem; scrollbar-width:none; -webkit-overflow-scrolling:touch; max-width:100%; overscroll-behavior-x:contain; } .ind-track::-webkit-scrollbar{display:none} .ind-track > *{flex:0 0 100%; min-width:0; max-width:100%; scroll-snap-align:start} @media(min-width:900px){ .ind-track > *{flex:0 0 calc((100% - 1.5rem) / 3); max-width:none} } .ind-nav{display:flex; align-items:center; justify-content:center; gap:.85rem} .ind-dots{display:flex; gap:.42rem; align-items:center} .ind-dots button{ width:9px; height:9px; border-radius:50%; border:0; padding:0; cursor:pointer; background:color-mix(in srgb,var(--ink) 18%, transparent); } .ind-dots button[aria-current="true"]{background:var(--verd); width:22px; border-radius:99px} .ind-nav .ind-btn{ width:40px; height:40px; border-radius:50%; border:1px solid var(--rule); background:var(--raise); color:var(--ink); cursor:pointer; font-size:1.05rem; line-height:1; } @media(max-width:900px){ .pillar-grid{display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; gap:1rem; grid-template-columns:none; padding-bottom:.6rem; -webkit-overflow-scrolling:touch; max-width:100%; overscroll-behavior-x:contain} .pillar{flex:0 0 min(86%,300px); min-width:0; max-width:100%; scroll-snap-align:start} } /* ============================================================ 30. HERO MEDIA LAYERS ============================================================ */ .hero-glow{position:absolute; inset:-20% -10%; z-index:-3; pointer-events:none; background:radial-gradient(42% 46% at 74% 24%,color-mix(in srgb,var(--brand-2) 26%,transparent),transparent 70%), radial-gradient(38% 40% at 18% 74%,color-mix(in srgb,var(--brand-1) 22%,transparent),transparent 70%); animation:swellglow 24s ease-in-out infinite alternate} @keyframes swellglow{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-3%,2%,0) scale(1.09)}} .hero-video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; opacity:.55} @media(prefers-reduced-motion:reduce){ .hero-video{display:none} } /* ============================================================ 31. CINEMATIC HERO TREATMENT Matching the shot brief: deep navy base to luminous cyan crest, cool teal shadows, anamorphic flare, fine 35mm grain and a slow push-in over the client's own footage. ============================================================ */ /* slow cinematic push-in across the whole backdrop */ @keyframes pushin{from{transform:scale(1.14)}to{transform:scale(1)}} /* crest luminance: the tops of the swells read brighter than the troughs */ /* anamorphic flare — a horizontal cyan streak at the crest */ .hero-flare{ position:absolute; left:50%; top:34%; width:82%; height:2.5px; z-index:-2; transform:translate(-50%,-50%); pointer-events:none; border-radius:50%; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--brand-2) 70%,transparent) 22%, #EAFEFF 50%,color-mix(in srgb,var(--brand-2) 70%,transparent) 78%,transparent); filter:blur(7px); opacity:.34; animation:flare 17s ease-in-out infinite; } .hero-flare::after{ content:""; position:absolute; left:50%; top:50%; width:20%; height:150px; transform:translate(-50%,-50%); border-radius:50%; background:radial-gradient(ellipse,color-mix(in srgb,var(--brand-2) 40%,transparent),transparent 68%); filter:blur(22px); } @keyframes flare{0%,100%{opacity:.18; transform:translate(-50%,-50%) scaleX(.92)} 45%{opacity:.42; transform:translate(-50%,-50%) scaleX(1.05)}} position:absolute; bottom:-6%; border-radius:50%; display:block; background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.75),color-mix(in srgb,var(--brand-2) 45%,transparent) 55%,transparent 72%); box-shadow:inset 0 0 4px rgba(255,255,255,.4); animation:rise linear infinite; } 12%{opacity:.75} 85%{opacity:.5} 100%{transform:translateY(-74vh) translateX(22px); opacity:0} } /* fine 35mm grain */ .hero-grain{ position:absolute; inset:-120px; z-index:-1; pointer-events:none; opacity:.14; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain .6s steps(1) infinite; } @keyframes grain{ 0%{transform:translate(0,0)} 20%{transform:translate(-6%,4%)} 40%{transform:translate(5%,-5%)} 60%{transform:translate(-4%,-3%)} 80%{transform:translate(6%,3%)} 100%{transform:translate(0,0)} } @media(prefers-reduced-motion:reduce){ } @media(max-width:640px){ .hero-grain{opacity:.1} /* ============================================================ 32. PHOTOGRAPHIC HERO A real frame sits under the coded layers. It is tinted with the scheme's deep colour so it follows the palette switcher, and darkened on the left where the headline sits. ============================================================ */ .hero-photo{ position:absolute; inset:0; z-index:-4; overflow:hidden; pointer-events:none; } .hero-photo::before{ content:""; position:absolute; inset:-4%; background:url("assets/img/img-91ce6b300108.webp") center 42%/cover no-repeat; filter:var(--photo-filter); animation:kenburns 42s ease-out both; } @keyframes kenburns{from{transform:scale(1.12) translateX(1.5%)}to{transform:scale(1) translateX(0)}} /* tint toward the active scheme, heaviest behind the copy */ .hero-photo::after{ content:""; position:absolute; inset:0; background: linear-gradient(100deg,var(--hero-a) 0%,color-mix(in srgb,var(--hero-a) 88%,transparent) 34%, color-mix(in srgb,var(--hero-a) 58%,transparent) 62%,color-mix(in srgb,var(--hero-b) 66%,transparent) 100%), linear-gradient(to bottom,color-mix(in srgb,var(--hero-b) 55%,transparent) 0%,transparent 26%, transparent 62%,var(--hero-b) 100%); } /* the coded swells now read as motion over the photo, not as the subject */ .hero.has-photo .hero.has-photo .hero.has-photo .hero.has-photo .hero.has-photo .hero-glow{opacity:.45} .hero.has-photo .hero.has-photo .hero-grain{opacity:.11} @media(prefers-reduced-motion:reduce){ .hero-photo::before{animation:none; transform:none} } /* the glass ledger needs a floor once a photo is behind it */ .hero.has-photo .ledger{ background:var(--hero-card); border-color:color-mix(in srgb,var(--hero-ink) 22%,transparent); box-shadow:0 30px 60px -30px rgba(0,0,0,.9); } .hero.has-photo .ledger-head,.hero.has-photo .ledger-foot,.hero.has-photo .lrow .lbl{color:var(--hero-ink-soft)} /* deepen the right side so the crest cannot fight the card */ .hero.has-photo .hero-photo::after{ background: linear-gradient(100deg,var(--hero-a) 0%,color-mix(in srgb,var(--hero-a) 90%,transparent) 32%, color-mix(in srgb,var(--hero-a) 66%,transparent) 58%,color-mix(in srgb,var(--hero-b) 80%,transparent) 100%), radial-gradient(58% 62% at 78% 58%,color-mix(in srgb,var(--hero-b) 62%,transparent),transparent 72%), linear-gradient(to bottom,color-mix(in srgb,var(--hero-b) 58%,transparent) 0%,transparent 26%, transparent 58%,var(--hero-b) 100%); } /* --- porcelain: a light hero needs the footer to stay anchored --- */ [data-scheme="porcelain"] .hero.dark::after{ background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--brand-2) 16%,transparent),transparent 62%); } [data-scheme="porcelain"] .hero-wave path{fill:var(--paper)} [data-scheme="porcelain"] .hero-grain{opacity:.07; mix-blend-mode:multiply} [data-scheme="porcelain"] .hero-flare{opacity:.16} [data-scheme="porcelain"] [data-scheme="porcelain"] .hero.has-photo .ledger{box-shadow:0 24px 50px -28px rgba(14,26,36,.35)} [data-scheme="porcelain"] .hero.dark .btn-ghost:hover{border-color:var(--brand-1); color:var(--brand-1)} [data-scheme="porcelain"] footer.site,[data-scheme="porcelain"] .pillars,[data-scheme="porcelain"] .contrast{ --band-ink:#F8FAFC; --band-ink-soft:rgba(248,250,252,.9); background:linear-gradient(150deg,#0E1A24,#0A1219 62%,#132A38); color:#F8FAFC; } [data-scheme="porcelain"] footer.site h2{color:rgba(248,250,252,.82)} [data-scheme="porcelain"] footer.site a{color:rgba(248,250,252,.9)} [data-scheme="porcelain"] footer.site .brand{color:#fff} [data-scheme="porcelain"] footer.site .mk-n{stroke:#F8FAFC} .sw-porcelain{background:linear-gradient(135deg,#FFFFFF,#109FC4); box-shadow:inset 0 0 0 1px rgba(14,26,36,.18)} .sw-sunset{background:linear-gradient(135deg,#E0723C,#F6B24A)} .sw-slate{background:linear-gradient(135deg,#5B7A8C,#9DBBCB)}