/* Small things on every page, and the package builder (src/sections/paket.html,
   assets/taste-polish.js). Theme tokens only: ink, amber, the three faces. */

/* ---- buttons: lean towards the pointer, fill from where it came in --------- */
[data-magnetic]{translate:var(--mx,0px) var(--my,0px);transition:translate .35s cubic-bezier(.16,1,.3,1)}
.taste .btn::before{content:'';position:absolute;z-index:-1;left:var(--fx,50%);top:var(--fy,50%);width:var(--fd,320px);height:var(--fd,320px);
  border-radius:50%;background:rgba(255,255,255,.18);transform:translate(-50%,-50%) scale(0);transition:transform .55s cubic-bezier(.16,1,.3,1);pointer-events:none}
.taste .btn-ghost::before{background:rgba(255,153,0,.14)}
@media (hover:hover) and (pointer:fine){.taste .btn:hover::before{transform:translate(-50%,-50%) scale(1)}}
.taste .btn:active{scale:.98}
@media (prefers-reduced-motion:reduce){[data-magnetic]{translate:none}.taste .btn::before{display:none}}

/* ---- the package builder --------------------------------------------------- */
.taste .pkg{background:var(--ink,#131A22);color:#fff;padding:clamp(72px,10vw,136px) 0;position:relative;overflow:hidden}
.taste .pkg::before{content:'';position:absolute;inset:auto -10% -40% 30%;height:70%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,153,0,.13),transparent)}
.pkg-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.pkg-intro{position:sticky;top:120px}
.taste .pkg .kicker{color:var(--amber,#FF9900)}
.pkg-title{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:clamp(40px,4.4vw,68px);line-height:.95;letter-spacing:-.01em;margin:0 0 24px;color:#fff;text-wrap:balance}
.pkg-lead{font-size:17px;line-height:1.65;color:#d5dbe0;max-width:46ch;margin:0 0 18px}
.pkg-note{font-family:'Roboto Mono',monospace;font-size:12px;letter-spacing:.06em;line-height:1.7;color:#98a1aa;max-width:46ch;margin:0;
  padding-left:14px;border-left:2px solid var(--amber,#FF9900)}

.pkg-form{display:grid;gap:36px}
.pkg-step{border:0;margin:0;padding:0;min-width:0;display:grid;gap:12px}
.pkg-step legend,.pkg-field label{padding:0;margin:0 0 4px;font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:24px;color:#fff}
.pkg-step legend .mono,.pkg-field label .mono{font-family:'Roboto Mono',monospace;font-weight:500;font-size:12px;letter-spacing:.1em;color:var(--amber,#FF9900);margin-right:6px;vertical-align:3px}
.pkg-field label em{font-family:'Roboto Mono',monospace;font-style:normal;font-weight:400;font-size:11px;letter-spacing:.08em;color:#98a1aa;text-transform:uppercase;margin-left:6px}
.pkg-help{margin:0;font-size:13.5px;color:#98a1aa}
.pkg-error{margin:0;font-size:14px;font-weight:600;color:#ff8a6a}

/* areas: four tiles, ticked in place */
.pkg-areas{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pkg-tile{position:relative;display:grid;gap:4px;padding:18px 48px 18px 18px;border-radius:12px;cursor:pointer;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.08);transition:background .25s,box-shadow .25s,scale .2s}
.pkg-tile:hover{background:rgba(255,255,255,.06)}
.pkg-tile:active{scale:.985}
.pkg-tile input,.pkg-size input{position:absolute;opacity:0;pointer-events:none}
.pkg-tile-name{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:26px;line-height:1;color:#fff}
.pkg-tile-sub{font-size:13.5px;line-height:1.45;color:#aab3bb}
.pkg-check{position:absolute;right:16px;top:18px;width:22px;height:22px;border-radius:50%;padding:3px;fill:none;stroke:var(--ink,#131A22);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:background .25s,box-shadow .25s}
.pkg-check path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .35s cubic-bezier(.16,1,.3,1) .05s}
.pkg-tile:has(input:checked){background:rgba(255,153,0,.08);box-shadow:inset 0 0 0 1.5px var(--amber,#FF9900),inset 0 1px 0 rgba(255,255,255,.1)}
.pkg-tile:has(input:checked) .pkg-check{background:var(--amber,#FF9900);box-shadow:none}
.pkg-tile:has(input:checked) .pkg-check path{stroke-dashoffset:0}
.pkg-tile:has(input:focus-visible),.pkg-size:has(input:focus-visible){outline:2px solid var(--amber,#FF9900);outline-offset:3px}

/* size: one row of segments */
.pkg-sizes{display:flex;flex-wrap:wrap;gap:8px}
.pkg-size{position:relative;cursor:pointer}
.pkg-size span{display:block;padding:12px 16px;border-radius:999px;font-size:14.5px;font-weight:600;color:#d5dbe0;background:rgba(255,255,255,.035);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);transition:background .2s,color .2s,box-shadow .2s}
.pkg-size:hover span{background:rgba(255,255,255,.07)}
.pkg-size:has(input:checked) span{background:var(--amber,#FF9900);color:var(--ink,#131A22);box-shadow:none}
.pkg-step.is-invalid .pkg-tile,.pkg-step.is-invalid .pkg-size span{box-shadow:inset 0 0 0 1px rgba(255,138,106,.7)}

/* free text */
.pkg-fields{grid-template-columns:1fr 1.4fr;gap:20px}
.pkg-field{display:grid;gap:8px;align-content:start}
.pkg-field label{font-size:20px}
.pkg-field input,.pkg-field textarea{width:100%;box-sizing:border-box;font:inherit;font-size:15.5px;color:#fff;background:rgba(255,255,255,.04);border:0;border-radius:10px;
  padding:13px 14px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);resize:vertical;transition:box-shadow .2s,background .2s}
.pkg-field input:focus,.pkg-field textarea:focus{outline:none;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1.5px var(--amber,#FF9900)}

/* the message as it will be sent */
.pkg-preview{border-radius:14px;padding:20px 22px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.08)}
.pkg-preview-head{font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--amber,#FF9900);margin:0 0 10px}
.pkg-empty{margin:0;color:#98a1aa;font-size:15px}
.pkg-preview-text{margin:0;white-space:pre-line;font-size:15px;line-height:1.65;color:#e3e8ec;animation:pkg-in .35s cubic-bezier(.16,1,.3,1)}
@keyframes pkg-in{from{opacity:.4;translate:0 4px}}

.pkg-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.taste .pkg .btn-ghost{color:#fff;border-color:rgba(255,255,255,.35)}
.pkg-copy{font:inherit;font-size:14px;font-weight:600;color:#d5dbe0;background:none;border:0;padding:10px 4px;cursor:pointer;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.3)}
.pkg-copy:hover{color:var(--amber,#FF9900);text-decoration-color:currentColor}
.pkg-status{margin:-16px 0 0;padding:12px 14px;border-radius:10px;font-size:14.5px;color:#fff;background:rgba(255,153,0,.1);box-shadow:inset 0 0 0 1px rgba(255,153,0,.4)}

@media (max-width:900px){
  .pkg-grid{grid-template-columns:1fr}
  .pkg-intro{position:static}
}
@media (max-width:560px){
  .pkg-areas,.pkg-fields{grid-template-columns:1fr}
  .pkg-tile{padding:16px 46px 16px 16px}
  .pkg-actions .btn{flex:1 1 100%;text-align:center}
}

/* contact page: the way into the builder */
.reach-pkg{margin:20px 0 0;font-size:15px}
.reach-pkg a{font-weight:600;color:inherit;text-underline-offset:4px}
.reach-pkg a:hover{color:var(--amber-dim,#9E5800)}

/* contact page: the address stays on one line on phones */
@media (max-width:560px){.taste .reach .reach-address{font-size:clamp(17px,5.6vw,24px);white-space:nowrap}}

/* The header bar stays see-through on every page and at every scroll position;
   the frame and the links stay as they are at the top of the page. */
/* site.js writes a shadow onto the bar as it sticks; it has to go too */
body.taste header.nav.nav{background:rgba(11,16,21,.16);box-shadow:none !important}
/* the blur lives on a layer of its own: a backdrop-filter on the bar itself made it
   the box for its fixed children, and the full-screen phone menu shrank to the bar */
body.taste header.nav.nav::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2)}
/* frosted, not filled: a faint tint of the page's own colour under the blur */
/* the services tab bar used to hide under the solid bar on phones; now it sits below it */
@media (max-width:860px){.taste .area-nav{top:80px}}

/* on the light pages the menu icon was white on white */

/* ---- inner pages (services, about, contact): readability and touch -------
   Home is left alone; every rule here is scoped away from it. */
/* the first heading sat under the frosted bar (top 80px, bar ends at 88px) */
body.taste:not([data-page="home"]) main > section:first-of-type{padding-top:clamp(128px,12vw,160px)}
@media (max-width:560px){body.taste:not([data-page="home"]) main > section:first-of-type{padding-top:116px}}
/* mono labels below 12px were hard to read; 12px is the floor */
body.taste:not([data-page="home"]) :is(.mslide-label,.area-nav-label,.dg-mark-day,.why-sites,.kicker){font-size:12.5px}
body.taste:not([data-page="home"]) :is(.mcard-top .mono,.mcard-example,.doc-kicker,.why-label,.why-step-n){font-size:12px}
body.taste:not([data-page="home"]) .cta-response{font-size:13px}
.pkg-field label em{font-size:12px}
.taste .pkg .pkg-note{color:#b3bcc4}
/* the download icon is a 14px glyph; give it a full finger-sized hit area */
.doc-download{display:inline-grid;place-items:center;min-width:44px;min-height:44px;margin:-13px -15px}
/* footer: bigger type, 44px rows for the links on touch screens */
body.taste:not([data-page="home"]) .footer-inner{font-size:12.5px}
body.taste:not([data-page="home"]) :is(.flow-mid-label,.flow-ceo-label,.dg-pin-time){font-size:12px}
@media (max-width:860px){
  body.taste:not([data-page="home"]) footer :is(.footer-nav,.footer-legal) a{display:inline-flex;align-items:center;min-height:44px;padding:0 6px}
  body.taste:not([data-page="home"]) .reach-copy{min-height:44px}
  .pkg-copy{min-height:44px}
}

/* phone menu open: one dark screen, the bar on top of it reads white */
@media (max-width:860px){
  body.taste header.nav.nav:has(.mobile-menu.open){background:transparent}
  body.taste header.nav.nav:has(.mobile-menu.open)::before{display:none}
  body.taste header.nav:has(.mobile-menu.open) .nav-inner{position:relative;z-index:2}
  body.taste header.nav.nav:has(.mobile-menu.open) .logo.logo{color:#fff}
  body.taste header.nav:has(.mobile-menu.open) .lang-btn:not(.active){color:#aab3bb}
  body.taste:not([data-page="home"]) header.nav:has(.mobile-menu.open) .nav-toggle{border-color:rgba(255,255,255,.3)}
  body.taste:not([data-page="home"]) header.nav:has(.mobile-menu.open) .nav-toggle-bars span{background:#fff}
  .taste .mobile-menu .m-link{font-size:28px;padding:16px 0}
  .taste .mobile-menu.mobile-menu{max-height:none;height:100vh;height:100dvh}
}