/* skin.css v1: design pass from the frontend-design skill. Loaded last on every page.
   To undo: roll back to dpl_5UMrve5NXWMUqys8pVW2zRG5NbuU, or remove the skin.css and Google Fonts links from the pages.
   Plan: Bricolage Grotesque carries the whole page (heavy and tight for display, regular for text), Instrument Serif is the quiet voice for taglines and reassurance lines, paper is a faint green-grey so white surfaces rise from it, the nav and the menu are dark glass. */
:root{--paper:#F6F7F4;--glass:rgba(29,29,31,.72);--glass-ink:#F5F5F7;--glass-line:rgba(255,255,255,.1);
  --font-display:"Bricolage Grotesque",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Bricolage Grotesque",ui-sans-serif,"Helvetica Neue",Arial,sans-serif;
  --font-serif:"Instrument Serif",ui-serif,Georgia,serif}
body{font-optical-sizing:auto;-webkit-font-smoothing:antialiased}

/* nav: dark translucent glass, like the Apple bar */
.nav{border-bottom-color:var(--glass-line)}
.nav::before{background:var(--glass);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px)}
.nav a{color:var(--glass-ink)}
.nav .nav__pill,.nav .nav__wa{color:var(--ink)}
.nav .lang,.menu .lang{color:var(--glass-ink);border-color:rgba(255,255,255,.3)}
.nav .brand strong{background-image:url(/assets/img/click-start-lockup-on-dark.svg)}
.menu summary{color:var(--glass-ink)}
.nav a:focus-visible,.nav button:focus-visible,.nav summary:focus-visible{outline-color:var(--green)}
/* menu: the growing disc and its links are dark too, so the white logo and the x stay readable */
.nav .menu[open] .menu__panel::before{background:#1D1D1F}
.menu__panel a{color:var(--glass-ink)}
.menu__panel a:active{color:var(--green)}

/* type */
h1,h2{font-weight:800;letter-spacing:-.045em;line-height:.95}
.services strong{font-weight:800;letter-spacing:-.045em}
.services span,h1+p{font-family:var(--font-serif);font-weight:400;letter-spacing:0;color:var(--ink2)}
.services span{font-size:clamp(1.2rem,3.8vw,1.7rem);line-height:1.2}
h1+p{font-size:clamp(1.45rem,4.4vw,2.2rem);line-height:1.15;max-width:30ch}
.assure{font-family:var(--font-serif);font-weight:400;font-size:clamp(1.7rem,5vw,2.6rem);line-height:1.1;letter-spacing:-.01em}
.tier h3{font-weight:800;letter-spacing:-.04em}
.contact a{font-weight:700;letter-spacing:-.02em}
.btn{font-weight:700;letter-spacing:-.01em;transition:transform var(--d-micro) var(--ease-out)}
.btn:active{transform:scale(.97)}

/* surfaces: white rises from the faint paper */
.tier{background:#fff}
.tier--silver{background:#EEF0F2}
.tier--gold{background:#FFF6DF}

/* answer to a tap */
.services a{transition:background-color var(--d-ui) var(--ease-out)}
.services a:active{background:var(--green-tint)}