/* Salty Web Co — the phone that plays "search, two taps, a call".
   Lifted from the Creative Concrete case study (work/concrete-contractor-
   website-palatine). flyer/phone.js builds the markup; .csh-stage[data-s]
   picks the screen: 1 search, 2 the site, 3 the call. Sizes are in cqw, so
   the phone scales with its box. */
/* ---- the phone: a titanium-edged handset, drawn in CSS ---- */
.csh-phone{position:relative;margin:0;width:min(280px,70vw);container-type:inline-size}
.csh-phone::before{content:"";position:absolute;inset:8% -30% 4%;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,122,26,.28),transparent);filter:blur(34px)}
.csh-dev{position:relative;padding:1.5cqw;border-radius:17cqw;
  background:linear-gradient(135deg,#A4AAB2 0%,#5A5F66 10%,#2B2E33 28%,#737880 50%,#2A2D32 72%,#51565D 88%,#9CA2AA 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.07),0 50px 90px -34px rgba(0,0,0,.95)}
.csh-dev > b{position:absolute;width:1.3cqw;border-radius:1cqw;background:linear-gradient(90deg,#34373C,#8C9199 55%,#3A3D42)}
.csh-dev > b:nth-of-type(1){left:-1cqw;top:18%;height:5.5%}
.csh-dev > b:nth-of-type(2){left:-1cqw;top:27%;height:10%}
.csh-dev > b:nth-of-type(3){left:-1cqw;top:39.5%;height:10%}
.csh-dev > b:nth-of-type(4){right:-1cqw;top:30%;height:15%}
.csh-bezel{border-radius:15.6cqw;padding:3.2cqw;background:#030405;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.csh-screen{position:relative;overflow:hidden;border-radius:12.6cqw;aspect-ratio:360/779;background:#000;container-type:inline-size}
/* the island, the status bar and the home bar sit over every screen */
.ios-island{position:absolute;z-index:7;top:3cqw;left:50%;width:31cqw;height:9.2cqw;margin-left:-15.5cqw;border-radius:99px;background:#000}
.ios-sb{position:absolute;z-index:6;inset:0 0 auto;height:15cqw;display:flex;align-items:center;justify-content:space-between;
  padding:1.4cqw 7cqw 0 10.5cqw;color:var(--ios,#fff);font:600 4.6cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif;letter-spacing:-.01em;
  transition:color .3s var(--ease)}
.ios-sb .ic{display:flex;align-items:center;gap:1.4cqw}
.ios-sb svg{height:3.5cqw;width:auto;fill:currentColor}
.ios-sb .bat{height:3.7cqw}
.ios-home{position:absolute;z-index:6;bottom:2.3cqw;left:50%;width:36cqw;height:1.45cqw;margin-left:-18cqw;border-radius:99px;
  background:var(--ios,#fff);transition:background .3s var(--ease)}
.csh-stage[data-s="1"] .csh-screen{--ios:#000}

/* the three screens, stacked; data-s on the stage picks one */
.scr{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .4s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.scr-site{transform:translateX(16%)}
.scr-call{transform:scale(1.05)}
.csh-stage[data-s="1"] .scr-search,.csh-stage[data-s="2"] .scr-site,.csh-stage[data-s="3"] .scr-call{
  opacity:1;visibility:visible;transform:none;transition-delay:0s}

/* 1 · a results page in the search engine's own look (no logo) */
.scr-search{background:#fff;color:#202124;font-family:Roboto,Arial,sans-serif;padding-top:15cqw}
.q{display:flex;align-items:center;gap:3cqw;margin:1.5cqw 4cqw 0;padding:3.3cqw 4.2cqw;border:1px solid #DFE1E5;border-radius:99px;
  background:#fff;box-shadow:0 1px 6px rgba(32,33,36,.2);font-size:4.4cqw;line-height:1.2;white-space:nowrap;overflow:hidden}
.q svg{flex:none;width:4.6cqw;height:4.6cqw;stroke:#9AA0A6}
.caret{flex:none;width:1.5px;height:5.2cqw;margin-left:-2.2cqw;background:#1A73E8;animation:csh-blink 1s steps(2) infinite}
.scr-search.typed .caret{display:none}
@keyframes csh-blink{50%{opacity:0}}
.tabs{display:flex;gap:5.4cqw;padding:3.8cqw 5cqw 0;border-bottom:1px solid #EBEBEB;font-size:3.7cqw;color:#5F6368;white-space:nowrap;overflow:hidden}
.tabs span{padding-bottom:2.4cqw}
.tabs .on{color:#202124;font-weight:500;box-shadow:inset 0 -.8cqw 0 #202124}
.g-map,.g-res{transition:opacity .45s var(--ease),transform .45s var(--ease)}
.scr-search:not(.typed) .g-map,.scr-search:not(.typed) .g-res{opacity:0;transform:translateY(4cqw)}
.scr-search .g-res{transition-delay:.15s}
.g-map{margin:3.4cqw 4cqw 0;border:1px solid #DADCE0;border-radius:3.6cqw;overflow:hidden}
.g-map svg{display:block;width:100%;height:auto}
.g-map-body{padding:3cqw 3.6cqw 3.4cqw;font-size:3.4cqw;line-height:1.45;color:#4D5156}
.g-map-body b{display:block;font-size:4.3cqw;font-weight:500;color:#1A0DAB;margin-bottom:.6cqw}
.g-map-body em{font-style:normal;color:#188038;font-weight:500}
.g-chips{display:flex;gap:1.8cqw;margin-top:2.6cqw}
.g-chips span{display:inline-flex;align-items:center;gap:1.2cqw;padding:1.5cqw 2.8cqw;border:1px solid #DADCE0;border-radius:99px;
  font-size:3.2cqw;font-weight:500;color:#1A73E8;white-space:nowrap}
.g-chips svg{width:3.2cqw;height:3.2cqw;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.g-res{padding:4cqw 4cqw 0;margin-top:3cqw;border-top:7px solid #F1F3F4}
.g-site{display:flex;align-items:center;gap:2.6cqw;font-size:3.4cqw;line-height:1.3}
.g-site img{flex:none;width:7.4cqw;height:7.4cqw;border-radius:50%;border:1px solid #ECEDEF;object-fit:cover}
.g-site b{display:block;font-weight:400;color:#202124}
.g-site small{display:block;font-size:3.1cqw;color:#4D5156}
.res-t{margin:2.6cqw 0 1.4cqw;color:#1A0DAB;font-size:5cqw;line-height:1.28}
.res-d{color:#4D5156;font-size:3.5cqw;line-height:1.5}
/* the keyboard, up while the query is typed */
.kb{position:absolute;z-index:4;inset:auto 0 0;display:grid;gap:2.6cqw;padding:2.4cqw 1.2cqw 12cqw;background:#D1D3D9;
  transform:translateY(100%);transition:transform .35s var(--ease);font-family:-apple-system,"SF Pro Text",system-ui,sans-serif}
.scr-search.kbd .kb{transform:none}
.kb-row{display:flex;justify-content:center;gap:1.5cqw}
.kb-row:nth-child(2){padding:0 4.6cqw}
.kb span{flex:1 1 0;min-width:0;height:10.6cqw;display:grid;place-items:center;border-radius:1.3cqw;background:#fff;color:#000;
  box-shadow:0 .35cqw 0 #898A8D;font-size:5cqw;transition:background .08s}
.kb span.fn{flex:1.35 1 0;background:#ABB0BC;font-size:3.5cqw}
.kb span.sp{flex:5 1 0;font-size:3.6cqw}
.kb span.go{flex:2.2 1 0;background:#0A84FF;color:#fff;font-size:3.6cqw}
.kb span.hit{background:#B7BBC4}
.kb span.go.hit{background:#0062CC}

/* 2 · Dave's site, in the browser */
.scr-site{display:flex;flex-direction:column;background:#0B0B0C;padding-top:15cqw}
.sf-page{position:relative;flex:1;min-height:0;overflow:hidden}
.sf-page img{width:100%;height:auto}
.csh-stage[data-s="2"] .sf-page img{animation:sf-in .7s ease-out}
@keyframes sf-in{from{opacity:.15}to{opacity:1}}
.sf-bar{padding:2.4cqw 3.6cqw 9.5cqw;background:rgba(30,30,32,.97);border-top:1px solid rgba(255,255,255,.08)}
.sf-pill{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:space-between;height:11.5cqw;padding:0 3.6cqw;
  border-radius:3.6cqw;background:#3A3A3C;color:#fff;font:500 3.8cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif}
.sf-pill .aa{font-weight:600;font-size:3.5cqw;letter-spacing:.02em}
.sf-url{display:flex;align-items:center;gap:1.2cqw;white-space:nowrap}
.sf-pill svg{width:3.6cqw;height:3.6cqw;fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sf-load{position:absolute;left:0;bottom:0;height:.8cqw;width:0;background:#0A84FF}
.csh-stage[data-s="2"] .sf-load{animation:sf-load .9s ease-out forwards}
@keyframes sf-load{0%{width:0;opacity:1}75%{width:100%;opacity:1}100%{width:100%;opacity:0}}

/* 3 · the call */
.scr-call{display:flex;flex-direction:column;align-items:center;text-align:center;color:#fff;padding-top:15cqw;
  background:radial-gradient(120% 55% at 50% 18%,rgba(242,194,48,.26),transparent 62%),linear-gradient(180deg,#3A2C27,#141214 58%,#0C0C0E)}
.call-who{display:flex;flex-direction:column;align-items:center;margin-top:12cqw}
.av{position:relative;width:28cqw;height:28cqw;border-radius:50%;margin-bottom:5.4cqw}
.av img{width:100%;height:100%;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.av::before,.av::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid rgba(242,194,48,.6);
  animation:csh-ring 2.2s ease-out infinite}
.av::after{animation-delay:1.1s}
@keyframes csh-ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.75);opacity:0}}
.call-t{font:400 4.2cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif;font-style:normal;color:rgba(255,255,255,.72);font-variant-numeric:tabular-nums}
.call-who b{margin-top:2cqw;font:500 9cqw/1.1 -apple-system,"SF Pro Display",system-ui,sans-serif;letter-spacing:-.01em}
.call-grid{display:grid;grid-template-columns:repeat(3,19cqw);justify-content:center;gap:5cqw 7cqw;margin:auto 0 14cqw;
  font:400 3.3cqw/1 -apple-system,"SF Pro Text",system-ui,sans-serif;color:rgba(255,255,255,.9)}
.call-grid span{display:grid;justify-items:center;gap:2cqw}
.call-grid i{width:19cqw;height:19cqw;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.17)}
.call-grid svg{width:8cqw;height:8cqw;fill:none;stroke:#fff;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.call-grid .kp svg{fill:#fff;stroke:none}
.call-grid .end i{background:#EB4E3D}
.call-grid .end svg{fill:#fff;stroke:none}

/* the finger */
.tap{position:absolute;z-index:8;width:15cqw;height:15cqw;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;pointer-events:none;opacity:0;
  background:rgba(255,122,26,.32);border:2px solid var(--fire)}
.tap.go{animation:csh-tap .7s ease-out}
@keyframes csh-tap{0%{opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(.85)}100%{opacity:0;transform:scale(1.5)}}

@media(prefers-reduced-motion:reduce){.av::before,.av::after,.caret{animation:none}.av::after{display:none}}
/* a site with no logo gets its initial */
.g-site .ini{flex:none;width:7.4cqw;height:7.4cqw;border-radius:50%;display:grid;place-items:center;background:#1A73E8;color:#fff;font:500 3.6cqw/1 Roboto,Arial,sans-serif}
.av .ini{width:100%;height:100%;border-radius:50%;display:grid;place-items:center;background:#2C5F8F;color:#fff;font:500 11cqw/1 -apple-system,system-ui,sans-serif;box-shadow:0 0 0 1px rgba(255,255,255,.18)}