/* ═══════════════════════════════════════════════════════════════════ DEEPSTILL, design system Source of truth: deepstill-site.html (approved mockup). Tokens, radii and motion are copied 1:1; everything below "subpages" extends the system for /cases, /about, /contact and the legal pages. Non-negotiables: no warm/brown tones · blue-family backdrops only · exactly one accent word per serif headline · quiet motion. ═══════════════════════════════════════════════════════════════════ */ :root{ --bg:#F5F3E9; --card:#FCFBF4; --line:#E4E0CF; --ink:#1F241E; --ink2:#4A4F48; --ink3:#82867B; --blue:#1B4F8C; --navy:#1A2A4A; --blue-soft:#A8B3C8; --glass:rgba(30,36,50,.72); --panel:#1A2A4A; --serif:"Gilda Display",Georgia,"Times New Roman",serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; --ease:cubic-bezier(.22,1,.36,1); } *{margin:0;padding:0;box-sizing:border-box;} html{scroll-behavior:smooth;} body{background:var(--bg);color:var(--ink);font-family:var(--sans); font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased;} ::selection{background:var(--blue);color:#F5F3E9;} .wrap{max-width:1200px;margin:0 auto;padding-left:36px;padding-right:36px;} @media(max-width:640px){.wrap{padding-left:20px;padding-right:20px;}} /* accessibility */ :focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:4px;} .bar-cta:focus-visible,.o-btn:focus-visible,.p-btn:focus-visible{outline-offset:2px;} #main:focus{outline:none;} .skip{position:absolute;left:-999px;top:0;z-index:100;background:var(--ink);color:#F2F0E6; padding:10px 18px;border-radius:0 0 12px 0;font-size:13px;text-decoration:none;} .skip:focus{left:0;} /* reveal states are gated on .js (set inline in ) so that content stays fully visible when JavaScript is unavailable */ .rv{transition:opacity 1s var(--ease),transform 1s var(--ease);} .js .rv{opacity:0;transform:translateY(22px);} .rv.in{opacity:1;transform:none;} .rv.d1{transition-delay:.09s}.rv.d2{transition-delay:.18s}.rv.d3{transition-delay:.27s} .rv.d4{transition-delay:.36s} /* ── top bar ── */ /* solid page colour, never translucent, no separator line */ .bar{position:fixed;inset:0 0 auto;z-index:60;background:var(--bg);} .bar-in{max-width:1200px;margin:0 auto;height:52px;padding:0 36px;display:flex; align-items:center;justify-content:space-between;position:relative;} @media(max-width:640px){.bar-in{height:48px;padding:0 20px;}} .wordmark{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none; font-family:var(--sans);font-size:15px;font-weight:600; letter-spacing:.11em;text-transform:uppercase;} /* No swap and no second asset: the D that is already the first letter of the wordmark stays put while the rest of the name folds into it, and the rule is then drawn across it. The mark is therefore always the wordmark's own font. */ .wm-d{position:relative;display:inline-block;line-height:1; transition:font-size .5s var(--ease),letter-spacing .5s var(--ease);} .wm-rest{display:inline-block;max-width:16ch;overflow:hidden;white-space:nowrap; transition:max-width .5s var(--ease),opacity .3s var(--ease);} /* A plain rule through the letter, no knocked-out gaps. The gaps needed a pixel each to read, which at bar size forced the whole band to about a fifth of the cap height and swallowed the D. Struck through, the band is the ink alone: under a tenth of the cap, and crisp at any size or pixel ratio. Sized in em so it holds those proportions as the letter grows. */ .wm-cut{position:absolute;left:-.16em;right:-.07em;top:.4325em;height:.057em; background:currentColor; transform:scaleX(0);transform-origin:left center; transition:transform .42s var(--ease);} /* barely larger than the wordmark it came out of: the mark should read as the same letter, emphasised, not as a different object. Struck rather than gapped, the rule stays crisp at this size. */ .bar.scrolled .wm-d{font-size:17px;letter-spacing:0;} .bar.scrolled .wm-rest{max-width:0;opacity:0;} .bar.scrolled .wm-cut{transform:scaleX(1);transition-delay:.18s;} .bar-right{display:flex;align-items:center;gap:28px;} .bar-nav{display:flex;align-items:center;gap:24px;} .bar-nav a{font-size:13.5px;font-weight:400;letter-spacing:0;text-transform:none; color:var(--ink);text-decoration:none;transition:transform .35s var(--ease);} .bar-nav a:hover{transform:scale(1.05);} .bar-nav a[aria-current="page"]{opacity:.55;} @media(max-width:700px){.bar-nav{display:none;}} /* ── icons: one inline-SVG set, no glyphs or emoji anywhere ── */ .ico{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6; stroke-linecap:round;stroke-linejoin:round;vertical-align:-.12em;} /* ── offerings mega-menu (desktop) / hamburger panel (mobile) ── */ .menu-btn{position:relative;display:inline-flex;align-items:center;gap:5px;background:none; border:0;padding:0;font-family:inherit;font-size:13.5px;font-weight:400;letter-spacing:0; text-transform:none;color:var(--ink);cursor:pointer;transition:transform .35s var(--ease);} /* while open, an invisible bridge keeps hover alive between trigger and window */ .bar.menu-open .menu-btn::after{content:"";position:absolute;top:100%;left:-16px;right:-16px; height:34px;} .menu-btn:hover{transform:scale(1.05);} .menu-btn[aria-expanded="true"]{opacity:.55;} .menu-btn .chev{width:12px;height:12px;transition:transform .35s var(--ease);} .menu-btn[aria-expanded="true"] .chev{transform:rotate(180deg);} .burger{display:none;width:34px;height:34px;border:1px solid var(--line);border-radius:10px; background:none;cursor:pointer;padding:0;position:relative;} .burger span{position:absolute;left:8px;width:16px;height:1.5px;background:var(--ink); transition:transform .35s var(--ease),opacity .25s;} .burger span:first-child{top:13px;} .burger span:last-child{top:19px;} .burger[aria-expanded="true"] span:first-child{transform:translateY(3px) rotate(45deg);} .burger[aria-expanded="true"] span:last-child{transform:translateY(-3px) rotate(-45deg);} @media(max-width:700px){.burger{display:block;}} /* a floating window anchored under the nav, never a full-width band */ .mega{position:absolute;top:calc(100% - 8px);right:36px;z-index:2; width:min(700px,calc(100vw - 40px));max-height:min(76vh,540px);overflow-y:auto; background:var(--card);border:1px solid var(--line);border-radius:22px; box-shadow:0 34px 80px -34px rgba(26,42,74,.4),0 4px 14px -8px rgba(26,42,74,.16); opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:top right; transition:opacity .35s var(--ease),transform .45s var(--ease),visibility .4s;} .bar.menu-open .mega{opacity:1;visibility:visible;transform:none;} /* On a phone it stops being a floating window and becomes a sheet that drops from the bar: full width, no side borders, square at the top so it reads as an extension of the bar rather than a card hovering under it. Inset by 20px with a border all the way round, it looked like a dialog that had missed. */ @media(max-width:700px){ .mega{left:0;right:0;top:100%;width:auto;max-width:none; border-left:0;border-right:0;border-top:0;border-radius:0 0 20px 20px; transform-origin:top center;transform:translateY(-8px);} .bar.menu-open .mega{transform:none;} } .mega-in{padding:22px 22px 24px;display:grid;grid-template-columns:1.25fr .75fr; gap:26px;align-items:start;} @media(max-width:640px){.mega-in{grid-template-columns:1fr;gap:20px;padding:18px 18px 22px;}} .mlabel{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink3);margin-bottom:10px;padding-left:14px;} /* offerings list, one focused column, no rules, hover surface */ .mnav a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px; padding:12px 14px;border-radius:14px;text-decoration:none; transition:background .3s var(--ease);} .mnav a:hover{background:rgba(27,79,140,.055);} /* the menu stays in Inter, the serif is for page headlines, not navigation */ .mnum{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--blue); line-height:1.5;min-width:20px;letter-spacing:.08em;} .mtxt b{display:block;font-family:var(--sans);font-weight:600;font-size:14.5px; line-height:1.35;color:var(--ink);letter-spacing:-.005em;} .mtxt>span{display:block;font-size:12.5px;color:var(--ink3);margin-top:1px;} .mnav a>.ico{width:15px;height:15px;color:var(--blue); opacity:0;transform:translateX(-5px);transition:opacity .3s,transform .35s var(--ease);} .mnav a:hover>.ico{opacity:1;transform:none;} .mall{margin-top:8px;display:inline-flex!important;align-items:center;gap:8px; font-size:13px;font-weight:600;color:var(--blue);grid-template-columns:none!important;} .mall .ico{width:14px;height:14px;opacity:1!important;transform:none!important;} /* CTA card, the dark surface, so the panel has one clear focal point */ .mcard{background:var(--panel);border-radius:20px;padding:26px 24px 24px;color:#F2F0E6;} .mcard .mlabel{color:var(--blue-soft);padding-left:0;margin-bottom:12px;} .mcard p{font-size:14px;line-height:1.5;color:#AEB6C6;margin-bottom:22px;} .mcard .p-btn{font-size:14px;padding:13px 22px;} .mmail{display:block;margin-top:18px;font-size:13px;color:#939CB0;text-decoration:none; border-bottom:1px solid rgba(242,240,230,.25);padding-bottom:3px;width:fit-content;} .mmail:hover{color:#F2F0E6;border-color:#F2F0E6;} /* the main nav collapses into the panel on small screens */ .mmobile{display:none;} @media(max-width:700px){ /* the main nav leads the sheet, then the offerings, then the CTA */ .mmobile{display:flex;flex-wrap:wrap;gap:10px 22px;order:-1;padding-bottom:18px; border-bottom:1px solid var(--line);} .mmobile a{font-size:12.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; color:var(--ink2);text-decoration:none;} .bar.menu-open .mega{max-height:calc(100vh - 68px);} .mega-in{padding-bottom:34px;} } .lang{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase; color:var(--ink3);text-decoration:none;border:1px solid var(--line);border-radius:7px; padding:3px 7px;line-height:1.3;transition:transform .35s var(--ease);} .lang:hover{transform:scale(1.05);} @media(max-width:640px){.lang{padding:4px 8px;font-size:11px;}} .bar-cta{display:inline-flex;align-items:center;gap:8px;background:var(--ink); color:#F5F3E9;font-size:13px;font-weight:500;text-decoration:none; padding:7px 14px;border-radius:8px;line-height:1.3; transition:transform .35s var(--ease);} .bar-cta:hover{transform:scale(1.05);} .bar-cta .arr{transition:transform .35s var(--ease);} .bar-cta:hover .arr{transform:translate(2px,-2px);} /* ── hero ── */ .hero{padding-top:190px;} .hero-grid{display:grid;grid-template-columns:1.62fr 1fr;gap:56px;align-items:end;} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:34px;}} h1{font-family:var(--serif);font-weight:400;font-size:clamp(44px,6vw,82px); line-height:1.16;letter-spacing:0;} h1 .acc{color:var(--blue);} .hero-side{font-size:20px;line-height:1.38;color:var(--ink);font-weight:500; max-width:34ch;padding-bottom:12px;} @media(max-width:900px){.hero-side{padding-bottom:0;}} /* ── media card ── */ .media{margin-top:70px;position:relative;border-radius:26px;overflow:hidden; aspect-ratio:16/8.6;transform:translateZ(0);} @media(max-width:700px){.media{aspect-ratio:4/3.4;}} .media .art{position:absolute;inset:-12%;will-change:transform;} .media:hover .art{transform:scale(1.015);} .art{transition:transform 1.2s var(--ease);} /* grain overlay removed: the tiled noise texture rendered as a visible square grid on some GPUs/zoom levels. The .grain class in markup is inert, backdrops rely on the gradients + vignette alone. */ .vig::before{content:"";position:absolute;inset:0;z-index:1; background:radial-gradient(120% 90% at 50% 42%,transparent 55%,rgba(8,13,26,.38));} .art-hero{background: radial-gradient(90% 120% at 24% 20%,#2A5A9C 0%,transparent 55%), radial-gradient(80% 110% at 78% 30%,#1B4F8C 0%,transparent 60%), radial-gradient(120% 90% at 50% 95%,#0C1526 0%,transparent 70%), linear-gradient(160deg,#1E3A66,#111C33 70%);} .chip{position:absolute;z-index:3;background:var(--glass);backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);border-radius:14px;padding:10px 18px; color:#F2F0E6;text-align:center;line-height:1.35;} .chip .t{font-size:13px;font-weight:600;letter-spacing:.02em;} .chip .s{font-size:11.5px;font-weight:400;color:#CBC9BE;letter-spacing:.04em;} .chip-tr{top:22px;right:22px;} .chip-bl{bottom:18px;left:18px;text-align:left;padding:9px 15px;} /* ── mock UI windows (the "videos" are mocks) ── */ .mockwin{position:absolute;z-index:2;left:50%;top:50%;transform:translate(-50%,-50%); width:min(700px,80%);background:#FDFCF6;border-radius:16px;overflow:hidden; box-shadow:0 46px 90px -34px rgba(8,14,28,.6),0 0 0 1px rgba(255,255,255,.08);} .mw-bar{display:flex;gap:6px;align-items:center;padding:14px 18px; border-bottom:1px solid #ECE8D8;background:#FBFAF1;} .mw-bar i{width:9px;height:9px;border-radius:50%;background:#DDD8C6;} .mw-bar span{font-size:11.5px;color:#8B8F80;margin-left:8px;letter-spacing:.03em;} .mw-body{padding:10px 24px 20px;} .st-row{display:flex;gap:12px;align-items:center;padding:14px 2px; border-bottom:1px solid #F1EEDF;font-size:14px;color:#3E4339;} .st-ic{width:20px;height:20px;border-radius:50%;flex:none;display:flex; align-items:center;justify-content:center;font-size:10px;color:#fff;background:var(--blue);} .st-ic.o{background:transparent;border:1.5px solid var(--blue);} .st-ic.o::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue);} .st-time{margin-left:auto;font-size:11px;color:#A6A99A;} .st-res{margin-top:14px;background:rgba(44,75,158,.08);color:var(--blue); font-weight:600;font-size:13.5px;padding:13px 17px;border-radius:10px; display:flex;justify-content:space-between;gap:10px;} /* ── hero mock scenes: one window, three acts. Scene cuts overlap with an opacity + blur crossfade, never a hard cut. Children stagger in via keyframes that only define their FROM state, so with animations off (reduced motion, no JS) everything sits in its final, visible state. ── */ .mw-scenes{position:relative;height:250px;} .scene{position:absolute;inset:0;padding:2px 24px 0; transition:opacity .75s var(--ease),filter .75s var(--ease),transform .75s var(--ease);} .js .scene{opacity:0;filter:blur(9px);transform:translateY(12px) scale(.992);pointer-events:none;} .js .scene.on{opacity:1;filter:blur(0);transform:none; transition-duration:.95s;transition-delay:.15s;} .sc-step{font-size:11px;font-weight:600;letter-spacing:.15em;text-transform:uppercase; color:#8B8F80;padding:10px 0 4px;} .scene .tri-row{font-size:13.5px;padding:12px 0;gap:10px;color:#3E4339;} .scene .tri-row .sub{font-size:12.5px;} .scene .pill{font-size:10px;padding:4px 10px;} .scene .doc-t{height:11px;width:52%;margin:16px 0 4px;} .scene .doc-l{height:8px;margin:11px 0;} .scene .doc-sum{font-size:13px;margin-top:12px;padding-top:12px;} .scene .doc-sum b{font-size:15px;} .st-ic.m{background:transparent;border:1.5px solid var(--blue);position:relative;} .st-ic.m .pend{width:6px;height:6px;border-radius:50%;background:var(--blue);} .st-ic.m .done{position:absolute;inset:-1.5px;border-radius:50%;background:var(--blue); color:#fff;display:flex;align-items:center;justify-content:center;font-size:10px;opacity:0;} @keyframes rowIn{from{opacity:0;transform:translateY(9px)}} @keyframes swapIn{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}} @keyframes pendOut{to{opacity:0}} /* child stagger only inside the main window, the side panels crossfade as a whole so repeated elements (chat bubbles) stay visually continuous */ .mw-main .scene.on>*{animation:rowIn .55s var(--ease) both;} .mw-main .scene.on>:nth-child(1){animation-delay:.1s} .mw-main .scene.on>:nth-child(2){animation-delay:.35s} .mw-main .scene.on>:nth-child(3){animation-delay:.75s} .mw-main .scene.on>:nth-child(4){animation-delay:1.15s} .mw-main .scene.on>:nth-child(5){animation-delay:1.65s} .mw-main .scene.on>:nth-child(6){animation-delay:2.15s} .mw-main .scene.on>:nth-child(7){animation-delay:2.65s} /* the "picked up" verdict lands after the system has read the inbox */ .sc-inbox.on>:nth-child(2) .pill{animation:swapIn .4s var(--ease) 1.6s both;} /* work rows flip pending → done just before the next step starts */ .sc-work.on>:nth-child(2) .done{animation:swapIn .32s var(--ease) 1.1s both;} .sc-work.on>:nth-child(3) .done{animation:swapIn .32s var(--ease) 1.55s both;} .sc-work.on>:nth-child(4) .done{animation:swapIn .32s var(--ease) 2s both;} .sc-work.on>:nth-child(5) .done{animation:swapIn .32s var(--ease) 2.5s both;} .sc-work.on>:nth-child(2) .pend{animation:pendOut .3s var(--ease) 1.1s forwards;} .sc-work.on>:nth-child(3) .pend{animation:pendOut .3s var(--ease) 1.55s forwards;} .sc-work.on>:nth-child(4) .pend{animation:pendOut .3s var(--ease) 2s forwards;} .sc-work.on>:nth-child(5) .pend{animation:pendOut .3s var(--ease) 2.5s forwards;} /* no JS: each scene group shows its .fb scene as a complete still */ html:not(.js) .scene:not(.fb){display:none;} html:not(.js) .st-ic.m .done{opacity:1;} html:not(.js) .st-ic.m .pend{opacity:0;} /* ── hero stage: layered composition. Main story window left; a floating assistant window and a glass "also running" panel share the same act clock, so the whole card is alive without a single hard cut. ── */ .stage{position:absolute;inset:0;z-index:2;} .mw-side,.tick,.toast{display:none;} @media(min-width:901px){ .mw-main{left:6.5%;top:50%;transform:translateY(-50%);width:min(600px,53%); transition:transform 1.3s var(--ease);} /* the story window shifts its weight a little with each act */ .stage.act1 .mw-main{transform:translate(10px,calc(-50% - 8px));} .stage.act2 .mw-main{transform:translate(-6px,calc(-50% + 5px));} .mw-side{display:block;left:auto;right:6%;top:17%;transform:none; width:clamp(270px,28%,330px); animation:panelIn .9s var(--ease) .5s both,drift 7s ease-in-out 1.6s infinite;} .tick{display:block;position:absolute;right:6%;bottom:12%; width:clamp(270px,28%,330px); animation:panelIn .9s var(--ease) 1s both,drift 9s ease-in-out 2.4s infinite;} .toast{display:flex;} } @keyframes drift{50%{transform:translateY(-7px)}} @keyframes panelIn{from{opacity:0;transform:translateY(16px);filter:blur(6px)}} /* quiet notification toasts, sliding through the empty bottom-left corner */ .toast{position:absolute;left:4%;bottom:9%;z-index:3;align-items:center;gap:9px; background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-radius:12px;padding:10px 15px;color:#F2F0E6;font-size:12px;font-weight:500; letter-spacing:.02em;pointer-events:none; opacity:0;transform:translateX(-16px);filter:blur(6px); transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease);} .toast.on{opacity:1;transform:none;filter:none;} .toast .tic{width:16px;height:16px;border-radius:50%;flex:none;background:var(--blue); color:#fff;font-size:9px;display:flex;align-items:center;justify-content:center;} .mw-side .mw-bar{padding:11px 14px;} .mw-side .mw-bar span{font-size:10px;} .mw-side .mw-scenes{height:150px;} .mw-side .scene{padding:4px 14px 0;} .mw-side .bub{font-size:11.5px;max-width:92%;margin:9px 0;padding:7px 11px;} .mw-side .src{font-size:9.5px;} .as-note{font-size:10px;color:#A6A99A;letter-spacing:.02em;margin:2px 0;} .tick{background:var(--glass);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); border-radius:14px;padding:13px 16px 12px;color:#F2F0E6;z-index:3;} .tick-label{font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:#CBC9BE;margin-bottom:8px;} .tick .mw-scenes{height:44px;} .tick .scene{padding:0;} .tick .t{font-size:13px;font-weight:600;letter-spacing:.02em;} .tick .s{font-size:11.5px;color:#CBC9BE;letter-spacing:.04em;} @media(max-width:700px){ .mockwin{width:93%;top:55%;} .mw-bar{padding:11px 14px;} .mw-body{padding:4px 14px 12px;} .mw-scenes{height:206px;} .scene{padding:0 14px;} .st-row{font-size:12px;padding:10px 2px;gap:9px;} .st-res{font-size:12px;padding:11px 14px;margin-top:11px;} .st-time{display:none;} .sc-step{font-size:9.5px;padding:8px 0 3px;} /* on the narrowest phones the brand chip would sit on the window chrome */ @media(max-width:420px){ .chip-tr{top:10px;right:10px;padding:6px 11px;} .chip-tr .s{display:none;} .mockwin{top:58%;} } .scene .tri-row{font-size:11.5px;padding:9px 0;} .scene .tri-row .sub{font-size:11px;} .scene .doc-t{margin:12px 0 2px;} .scene .doc-l{margin:9px 0;} .chip-tr{top:14px;right:14px;padding:8px 13px;} /* The bottom-left chip floats over the window. There is room for that beside a desktop mock and none at all on a phone, where it lands squarely on the conversation it is describing. The copy beside the mock already says it. */ .chip-bl{display:none;} } /* mini mocks inside tiles */ .mini{position:absolute;z-index:2;left:50%;top:43%;transform:translate(-50%,-50%); width:85%;background:#FDFCF6;border-radius:13px;overflow:hidden; box-shadow:0 30px 60px -24px rgba(8,14,28,.55);} .mini .mw-bar{padding:10px 13px;} .mini .mw-bar i{width:7px;height:7px;} .mini .mw-bar span{font-size:10px;margin-left:5px;} .mini .mw-body{padding:5px 15px 13px;} .tri-row{display:flex;align-items:center;gap:8px;padding:9px 0; border-bottom:1px solid #F1EEDF;font-size:11px;color:#3E4339;} .tri-row:last-child{border-bottom:none;} .tri-row b{font-weight:600;flex:none;} .tri-row .sub{color:#A6A99A;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .pill{margin-left:auto;flex:none;font-size:9px;font-weight:600;letter-spacing:.04em; padding:3px 9px;border-radius:999px;background:#EFEDDF;color:#6B6F60;text-transform:uppercase;} .pill.b{background:rgba(44,75,158,.1);color:var(--blue);} .doc-t{height:9px;width:56%;background:#E3DFC9;border-radius:5px;margin:12px 0 10px;} .doc-l{height:6px;background:#EFECDB;border-radius:4px;margin:7px 0;} .doc-sum{display:flex;justify-content:space-between;align-items:center; border-top:1px solid #F1EEDF;margin-top:11px;padding-top:10px;font-size:11px;} .doc-sum b{font-size:12.5px;} .bub{max-width:86%;font-size:10.5px;line-height:1.5;padding:8px 11px;border-radius:12px;margin:9px 0;} .bub.q{background:#EFEDDF;color:#4A4F42;margin-left:auto;border-bottom-right-radius:4px;} .bub.a{background:rgba(44,75,158,.08);color:#2E3440;border-bottom-left-radius:4px;} .src{display:inline-flex;align-items:center;gap:6px;font-size:9px;color:#6B6F60; border:1px solid #E8E4D4;border-radius:999px;padding:3px 9px;background:#FFF;} .src::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--blue);} /* trust row */ .trust{margin-top:26px;display:flex;gap:14px 34px;flex-wrap:wrap; font-size:11.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);} .trust span::before{content:"·";margin-right:10px;color:var(--blue);} /* ── section scaffolding ── */ section{padding-top:130px;} .label{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--ink3);margin-bottom:22px;} h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,54px); line-height:1.14;letter-spacing:0;max-width:22ch;} h2 .acc{color:var(--blue);} .sec-intro{margin-top:18px;font-size:17px;color:var(--ink2);max-width:56ch;} /* ── offers ── */ .offers{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;} @media(max-width:860px){.offers{grid-template-columns:1fr;}} /* the optional closing offer spans the ladder's full width */ .offer.wide{grid-column:1/-1;} @media(min-width:861px){ .offer.wide{display:grid;grid-template-columns:1fr 1fr;gap:0 44px;align-items:start;} .offer.wide h3{grid-column:1;max-width:14ch;} .offer.wide>p{grid-column:1;margin-bottom:0;} .offer.wide dl{grid-column:2;grid-row:1/4;margin-bottom:0;align-self:center;} .offer.wide .o-btn{grid-column:1;justify-self:start;margin-top:26px;} } .offer{background:var(--card);border:1px solid var(--line);border-radius:26px; padding:42px 40px 36px;position:relative; transition:transform .5s var(--ease),box-shadow .5s var(--ease);} .offer:hover{transform:translateY(-6px);box-shadow:0 30px 60px -30px rgba(26,42,74,.22);} .offer .o-chip{position:absolute;top:24px;right:24px;background:var(--glass); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); color:#F2F0E6;font-size:11.5px;font-weight:600;letter-spacing:.1em; padding:8px 14px;border-radius:12px;text-transform:uppercase;} /* title never reaches the absolutely positioned chip, at any width */ .offer h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.14; margin-bottom:14px;max-width:min(11ch,calc(100% - 150px));} .offer>p{font-size:15px;color:var(--ink2);margin-bottom:26px;max-width:42ch;} .offer dl{border-top:1px solid var(--line);margin-bottom:28px;} .offer dl div{display:flex;justify-content:space-between;gap:18px;padding:12px 0; border-bottom:1px solid var(--line);font-size:14.5px;} .offer dt{color:var(--ink2);flex:none;} .offer dd{font-weight:600;text-align:right;} /* on narrow cards the chip joins the flow instead of floating over the title */ @media(max-width:900px){ .offer{padding-top:34px;} .offer .o-chip{position:static;display:inline-block;margin-bottom:16px;} .offer h3{max-width:none;} } .offer dd.price{color:var(--blue);} .o-btn{display:inline-flex;align-items:center;gap:10px;background:var(--ink); color:#F2F0E6;font-size:14.5px;font-weight:500;text-decoration:none; padding:14px 24px;border-radius:12px;transition:transform .35s var(--ease);} .o-btn:hover{transform:scale(1.05);} .o-btn .arr{transition:transform .35s var(--ease);} .o-btn:hover .arr{transform:translateX(4px);} .retainer{margin-top:30px;text-align:center;font-size:15px;color:var(--ink2);} .retainer b{color:var(--ink);font-weight:600;} .retainer .p{color:var(--blue);font-weight:600;} .retainer a{color:var(--blue);} .retainer.small{margin-top:14px;font-size:13.5px;} /* ── work tiles ── */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:52px;} @media(max-width:900px){.tiles{grid-template-columns:1fr;}} .tile{position:relative;border-radius:22px;overflow:hidden;aspect-ratio:4/3;} .tile .art{position:absolute;inset:-12%;} .tile:hover .art{transform:scale(1.05);} .art-a{background: radial-gradient(90% 110% at 25% 25%,#2C4370 0%,transparent 58%), radial-gradient(90% 110% at 80% 75%,#0E1830 0%,transparent 65%), linear-gradient(150deg,#22355C,#101A30 75%);} .art-b{background: radial-gradient(90% 110% at 70% 20%,#2E66AC 0%,transparent 58%), radial-gradient(90% 110% at 20% 80%,#0F2B4E 0%,transparent 65%), linear-gradient(150deg,#1B4F8C,#123253 75%);} .art-c{background: radial-gradient(90% 110% at 30% 25%,#C3CBDB 0%,transparent 58%), radial-gradient(90% 110% at 80% 80%,#8C99B4 0%,transparent 65%), linear-gradient(150deg,#A8B3C8,#93A0B9 75%);} .more{display:inline-flex;align-items:center;gap:8px;margin-top:30px; font-size:14.5px;font-weight:600;color:var(--blue);text-decoration:none;} .more .arr{transition:transform .35s var(--ease);} .more:hover .arr{transform:translateX(4px);} /* ── method / principle / next-step rows ── */ .rows{margin-top:52px;border-top:1px solid var(--line);} .mrow{display:grid;grid-template-columns:110px 1fr auto;gap:30px;align-items:baseline; padding:30px 8px;border-bottom:1px solid var(--line);transition:background .3s;} .mrow:hover{background:rgba(252,251,244,.8);} @media(max-width:700px){.mrow{grid-template-columns:60px 1fr;} .mrow .meta{grid-column:2;justify-self:start;margin-top:2px;}} .mrow .num{font-family:var(--serif);font-size:34px;color:var(--blue);font-weight:400;} .mrow h3{font-size:17px;font-weight:600;margin-bottom:6px;} .mrow p{font-size:14.5px;color:var(--ink2);max-width:62ch;} .mrow .meta{font-size:11.5px;font-weight:600;letter-spacing:.14em;color:var(--ink3); text-transform:uppercase;white-space:nowrap;} /* ── proof ── */ .proof{display:grid;grid-template-columns:repeat(4,1fr);gap:36px;margin-top:56px;} @media(max-width:900px){.proof{grid-template-columns:1fr 1fr;gap:44px 28px;}} .pf .v{font-family:var(--serif);font-weight:400;font-size:clamp(46px,4.8vw,68px); line-height:1;letter-spacing:0;} .pf .v .a{color:var(--blue);} .pf .l{margin-top:12px;font-size:12px;font-weight:600;letter-spacing:.12em; text-transform:uppercase;color:var(--ink3);line-height:1.7;max-width:22ch;} /* ── quote ── */ .quote{text-align:center;padding-top:140px;} .quote .q{font-family:var(--serif);font-weight:400; font-size:clamp(34px,4.6vw,58px);line-height:1.15;} .quote .q .acc{color:var(--blue);} .quote p{margin:22px auto 0;font-size:16px;color:var(--ink2);max-width:52ch;} /* ── CTA panel ── */ .cta{padding-top:120px;padding-bottom:10px;} .panel{background:var(--panel);border-radius:30px;padding:96px 60px;text-align:center; position:relative;overflow:hidden;} @media(max-width:640px){.panel{padding:64px 26px;}} .panel::before{content:"";position:absolute;width:640px;height:420px;left:50%;top:-220px; transform:translateX(-50%);border-radius:50%; background:radial-gradient(ellipse,rgba(168,179,200,.16),transparent 65%);} .panel h2{color:#F2F0E6;margin:0 auto 16px;max-width:18ch;} .panel h2 .acc{color:var(--blue-soft);} .panel p{color:#AEB6C6;font-size:16px;margin-bottom:38px;} .p-btn{display:inline-flex;align-items:center;gap:10px;background:#F5F3E9;color:var(--ink); font-size:15px;font-weight:600;text-decoration:none;padding:16px 30px;border-radius:12px; transition:transform .35s var(--ease);position:relative;z-index:1;} /* the book-a-call CTA leads with its arrow: the button barely grows, the arrow does the moving */ .p-btn:hover{transform:scale(1.02);} .p-btn .arr{transition:transform .35s var(--ease);} .p-btn:hover .arr{transform:translateX(4px);} .panel .mail{display:block;margin-top:24px;font-size:13.5px;color:#939CB0;} .panel .mail a{color:#F2F0E6;text-decoration:none;border-bottom:1px solid rgba(242,240,230,.35);} .panel .mail a:hover{border-color:#F2F0E6;} /* ── footer ── */ footer{padding:56px 0 60px;} .foot{display:flex;justify-content:space-between;align-items:baseline;gap:20px;flex-wrap:wrap; font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);} .foot .wm{color:var(--ink);} .foot a{color:var(--ink3);text-decoration:none;margin-left:20px;transition:color .25s;} .foot a:hover{color:var(--ink);} @media(max-width:640px){.foot a{margin-left:0;margin-right:16px;}} @media(max-width:520px){.bar-cta{display:none;}} /* ── product spotlight: The Front Desk ── */ .spot{display:grid;grid-template-columns:1.05fr 1fr;gap:56px;align-items:center;margin-top:50px;} @media(max-width:900px){.spot{grid-template-columns:1fr;gap:32px;}} .spot .tile{aspect-ratio:4/3.5;} .spot .mini{width:88%;top:50%;} .spot .mini .mw-body{padding:8px 16px 14px;} .spot .mini .bub{font-size:11.5px;max-width:88%;margin:8px 0;} .spot .mini .src{font-size:9.5px;margin-bottom:4px;} .spot-pts{list-style:none;margin-top:26px;} .spot-pts li{display:flex;gap:13px;align-items:flex-start;padding:13px 0; border-top:1px solid var(--line);font-size:14.5px;color:var(--ink2);} .spot-pts li b{color:var(--ink);font-weight:600;} .spot-pts .ck{flex:none;width:20px;height:20px;border-radius:50%;background:rgba(27,79,140,.1); color:var(--blue);display:flex;align-items:center;justify-content:center;margin-top:1px;} .spot-pts .ck .ico{width:12px;height:12px;stroke-width:2.2;} .spot-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:30px;} .spot-note{font-size:13px;color:var(--ink3);max-width:26ch;} /* ── tabbed system explorer ── */ .tabs{display:flex;gap:4px;margin-top:44px;padding:5px;background:var(--card); border:1px solid var(--line);border-radius:15px;width:fit-content;max-width:100%; overflow-x:auto;-webkit-overflow-scrolling:touch;} .tabs button{display:inline-flex;align-items:center;gap:9px;white-space:nowrap; background:none;border:0;cursor:pointer;font-family:inherit;font-size:14px;font-weight:500; color:var(--ink2);padding:11px 20px;border-radius:11px; transition:background .35s var(--ease),color .3s,box-shadow .35s var(--ease), transform .35s var(--ease);} .tabs button .ico{width:16px;height:16px;color:var(--ink3);transition:color .3s;} .tabs button:hover{transform:scale(1.05);} .tabs button[aria-selected="true"]{background:var(--ink);color:#F2F0E6; box-shadow:0 6px 16px -8px rgba(31,36,30,.5);} .tabs button[aria-selected="true"] .ico{color:var(--blue-soft);} .tpanels{margin-top:26px;position:relative;} .tpanel{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:center;} @media(max-width:900px){.tpanel{grid-template-columns:1fr;gap:26px;}} .tpanel[hidden]{display:none;} .tpanel .tile{aspect-ratio:16/10;} .js .tpanel{animation:panelFade .6s var(--ease) both;} @keyframes panelFade{from{opacity:0;transform:translateY(10px)}} .tinfo h3{font-family:var(--serif);font-weight:400;font-size:clamp(24px,2.8vw,32px); line-height:1.16;margin-bottom:14px;} .tinfo p{font-size:15px;color:var(--ink2);max-width:44ch;margin-bottom:24px;} .tstats{display:flex;gap:36px;flex-wrap:wrap;} .tstats .pf .v{font-size:clamp(30px,3.2vw,40px);} .tstats .pf .l{max-width:16ch;} /* ── integrations: what it plugs into ── */ .plug{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:46px;} @media(max-width:900px){.plug{grid-template-columns:repeat(3,1fr);}} @media(max-width:560px){.plug{grid-template-columns:repeat(2,1fr);}} .plug div{background:var(--card);border:1px solid var(--line);border-radius:18px; padding:22px 16px 18px;text-align:center;transition:transform .4s var(--ease),border-color .3s;} .plug div:hover{transform:translateY(-4px);border-color:var(--blue-soft);} .plug .ico{width:26px;height:26px;stroke-width:1.3;color:var(--blue);margin-bottom:12px;} .plug b{display:block;font-size:13.5px;font-weight:600;color:var(--ink);} .plug span{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px;} .plug-note{margin-top:22px;font-size:14px;color:var(--ink2);} /* ── capability grid: denser than the offer cards, hairline-ruled ── */ .caps{display:grid;grid-template-columns:repeat(3,1fr);gap:0 44px;margin-top:52px; border-top:1px solid var(--line);} @media(max-width:900px){.caps{grid-template-columns:1fr 1fr;}} @media(max-width:640px){.caps{grid-template-columns:1fr;gap:0;}} .cap{padding:26px 0 24px;border-bottom:1px solid var(--line);} .cap .k{font-family:var(--serif);font-weight:400;font-size:19px;line-height:1.2; margin-bottom:7px;max-width:none;} .cap p{font-size:14px;color:var(--ink2);max-width:34ch;} .cap .tags{margin-top:12px;display:flex;flex-wrap:wrap;gap:6px;} .cap .tags span{font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase; color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:4px 10px;} /* ── handover checklist on a dark panel ── */ .hand{background:var(--panel);border-radius:30px;padding:70px 60px;margin-top:56px; position:relative;overflow:hidden;} @media(max-width:640px){.hand{padding:48px 26px;}} .hand::before{content:"";position:absolute;width:560px;height:380px;right:-140px;top:-200px; border-radius:50%;background:radial-gradient(ellipse,rgba(168,179,200,.14),transparent 65%);} .hand h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3.2vw,38px); line-height:1.16;color:#F2F0E6;max-width:20ch;position:relative;} .hand h3 .acc{color:var(--blue-soft);} .hand>p{color:#AEB6C6;font-size:15.5px;margin-top:14px;max-width:52ch;position:relative;} .hand ul{list-style:none;margin-top:38px;display:grid;grid-template-columns:1fr 1fr; gap:2px 44px;position:relative;} @media(max-width:700px){.hand ul{grid-template-columns:1fr;}} .hand li{display:flex;gap:12px;align-items:flex-start;padding:13px 0; border-top:1px solid rgba(242,240,230,.13);color:#E8E6DC;font-size:14.5px;} .hand li .ck{flex:none;width:19px;height:19px;border-radius:50%;background:var(--blue-soft); color:var(--panel);display:flex;align-items:center;justify-content:center;margin-top:2px;} .hand li .ck .ico{width:11px;height:11px;stroke-width:2.2;} /* ── FAQ: native details/summary, no JS ── */ .faq{margin-top:52px;border-top:1px solid var(--line);max-width:80ch;} .faq details{border-bottom:1px solid var(--line);} .faq summary{list-style:none;cursor:pointer;padding:24px 40px 24px 0;position:relative; font-size:17px;font-weight:600;color:var(--ink);transition:color .25s;} .faq summary h3{font:inherit;display:inline;} .faq summary::-webkit-details-marker{display:none;} .faq summary:hover{color:var(--blue);} .faq summary .chev{position:absolute;right:6px;top:26px;width:18px;height:18px;color:var(--ink3); transition:transform .35s var(--ease),color .25s;} .faq details[open] summary .chev{transform:rotate(180deg);color:var(--blue);} .faq .a{padding:0 60px 26px 0;font-size:15px;color:var(--ink2);max-width:66ch;} .faq .a a{color:var(--blue);} @media(max-width:640px){.faq .a{padding-right:0;}} /* ═══════════════════════ subpages ═══════════════════════ */ /* page hero (cases, about, contact, legal, 404) */ .page-hero{padding-top:180px;} .page-hero h1{font-size:clamp(40px,5.6vw,70px);line-height:1.14;max-width:18ch;} .page-hero .label{margin-bottom:18px;} /* cases */ .case{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;margin-top:64px;} .case:first-of-type{margin-top:56px;} @media(max-width:860px){.case{grid-template-columns:1fr;gap:26px;}} .case .tile{aspect-ratio:4/3.2;} /* case tiles are larger than the landing tiles, scale the minis up with them */ .case .mini{width:88%;} .case .mini .mw-bar{padding:12px 15px;} .case .mini .mw-bar span{font-size:11px;} .case .mini .mw-body{padding:6px 18px 15px;} .case .mini .tri-row{font-size:12px;padding:11px 0;} .case .mini .pill{font-size:10px;} .case .mini .bub{font-size:12px;} .case .mini .src{font-size:10px;} .case .mini .doc-sum{font-size:12px;} .case .mini .doc-sum b{font-size:14px;} .case .mini .doc-t{height:10px;margin:14px 0 12px;} .case .mini .doc-l{height:7px;margin:9px 0;} .case-flip .tile{order:2;} @media(max-width:860px){.case-flip .tile{order:0;}} .case-txt .label{margin-bottom:12px;} .case-txt h2,.case-txt h3{font-family:var(--serif);font-weight:400;font-size:clamp(26px,3vw,34px); line-height:1.16;margin-bottom:18px;max-width:none;} .tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--ink3);margin-bottom:4px;} .case-txt p.body{font-size:15px;color:var(--ink2);margin-bottom:16px;max-width:50ch;} .ba{display:flex;gap:44px;margin-top:10px;flex-wrap:wrap;} .ba .pf .v{font-size:clamp(34px,3.6vw,46px);} .ba .pf .l{max-width:18ch;} /* about, founders */ .founders{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:52px;} @media(max-width:860px){.founders{grid-template-columns:1fr;}} .mono{width:54px;height:54px;border-radius:50%;background:var(--navy);color:#F2F0E6; display:flex;align-items:center;justify-content:center;font-family:var(--serif); font-size:22px;margin-bottom:18px;} .founders h3{max-width:none;} section .trust{margin-top:48px;} /* section headings styled as caps labels (semantic h2, label look) */ h2.label{font-family:var(--sans);font-size:12px;line-height:1.7;max-width:none;} /* legal prose */ .prose{max-width:68ch;margin-top:44px;padding-bottom:20px;} .prose h2{font-size:clamp(22px,2.6vw,30px);margin-top:44px;max-width:none;} .prose h2:first-of-type{margin-top:34px;} .prose p,.prose li{font-size:15px;color:var(--ink2);margin:12px 0;} .prose ul{padding-left:20px;margin:12px 0;} .prose a{color:var(--blue);} .prose .todo{background:rgba(27,79,140,.07);border:1px dashed var(--blue);border-radius:12px; padding:12px 16px;color:var(--blue);font-size:14px;} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation:none!important;transition:none!important;} html{scroll-behavior:auto;} .rv,.js .rv{opacity:1;transform:none;} .st-ic.m .done{opacity:1;} .st-ic.m .pend{opacity:0;} .art{transform:none!important;} } /* The panel's button. Lives here because the answering field is on the home page as well as the product pages, and only site.css is on all of them. */ .xbtn{display:inline-flex;align-items:center;gap:9px;margin-top:26px; background:#F4F1E5;color:#16233D;border:0;border-radius:999px; padding:10px 20px;font-family:var(--sans);font-size:14px;font-weight:500; cursor:pointer;text-decoration:none;transition:transform .3s var(--ease);} .xbtn:hover{transform:scale(1.02);} .xbtn .ico{width:14px;height:14px;transition:transform .35s var(--ease);} .xbtn:hover .ico{transform:translateX(4px);}