/* Sluiter Telecomm homepage kit — shared by a.html, b.html, c.html.
   Each page sets the theme variables (--bg, --field, --ink, --muted, --accent, --on-accent) and its own layout. */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--t-body)/1.5 var(--font);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,p,figure,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:root{
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue",Helvetica,Arial,sans-serif;
  --lcd-font:"SF Mono","Roboto Mono",Menlo,Consolas,"Courier New",monospace;
  --t-body:clamp(17px,1.25vw,19px);
  --t-small:14px;
  --t-lead:clamp(21px,1.9vw,28px);
  --t-h2:clamp(36px,5.2vw,72px);
  --m:clamp(20px,4vw,56px);
  --edge:max(var(--m),calc((100vw - 1280px)/2 + var(--m)));
  --ease:cubic-bezier(.2,.7,.2,1);
  --brand:#CE4B27; --brand-deep:#A13D21; --go:#2E7D46; --stop:#B3261E;
}
.wrap{width:min(1280px,100%);margin-inline:auto;padding-inline:var(--m)}
.muted{color:var(--muted)}
.small{font-size:var(--t-small);line-height:1.45}
.lead{font-size:var(--t-lead);line-height:1.3;letter-spacing:-.012em}
h2{font-size:var(--t-h2);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance}
h3{font-size:var(--t-lead);line-height:1.2;letter-spacing:-.015em;font-weight:600}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--m);top:-80px;background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:999px;z-index:9}
.skip:focus{top:12px}

/* Wordmark, as on the phone */
.wordmark{font-weight:700;letter-spacing:-.05em;text-decoration:none;white-space:nowrap}
.wordmark i{font-style:normal;color:var(--brand)}

/* Navigation: wordmark, a few links, one action */
.nav{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-block:18px}
.nav .wordmark{font-size:var(--t-lead)}
.nav ul{display:flex;gap:clamp(18px,2.6vw,36px)}
.nav ul a{text-decoration:none;font-size:var(--t-small)}
.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}
@media (max-width:820px){.nav ul{display:none}}
@media (max-width:520px){.nav .btn{display:none}}

/* One button shape on every page: a pill */
.btn{display:inline-flex;white-space:nowrap;align-items:center;justify-content:center;min-height:48px;padding:0 26px;border:0;border-radius:999px;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:var(--t-body);text-decoration:none;cursor:pointer;transition:transform .16s var(--ease),filter .16s var(--ease)}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:scale(.97)}
.btn--small{min-height:40px;padding:0 18px;font-size:var(--t-small)}
.link{color:var(--link,var(--accent));text-decoration:none;font-weight:600}
.link::after{content:" ›"}
.link:hover{text-decoration:underline;text-underline-offset:5px}

/* Entrances. Content stays visible without script. */
.js .rise{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*80ms)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .rise{opacity:1;transform:none;transition:none}
}

/* ───────── The kiosk screen (854 × 480, the real phone's pixels) ───────── */
.kiosk-fit{position:relative;width:100%;aspect-ratio:854/480;overflow:hidden;background:#D9D5C9;border-radius:inherit}
.kiosk-fit>img{width:100%;height:100%;object-fit:cover}
.kiosk{position:absolute;left:0;top:0;width:854px;height:480px;transform-origin:0 0;font-family:Roboto,Arial,Helvetica,sans-serif;color:#292B27;line-height:1;text-align:left;user-select:none;-webkit-user-select:none}
.kiosk button{font-family:inherit;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.kiosk :focus-visible{outline:3px solid #A13D21;outline-offset:2px;border-radius:8px}
.k-case{position:absolute;inset:10px;border-radius:26px;background:linear-gradient(125deg,#F0EDE3 0%,#E8E4D8 65%,#E3DFD3 100%);border:1px solid #F6F3EA;box-shadow:0 1px 3px #6b665a55;padding:21px 21px 0;display:grid;grid-template-columns:354px 45px 392px}
.k-rule{width:1px;background:#C6C1B5;margin:0 auto;height:416px}
.k-tag{font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#5F6056}
.k-brand{display:flex;justify-content:space-between;align-items:baseline;margin-top:5px}
.k-word{font-size:30px;font-weight:700;letter-spacing:-.05em}
.k-word i{font-style:normal;color:#CE4B27}
.k-idx{font-size:14px;color:#6E6C62}
.k-handset{margin-top:13px;height:58px;border-radius:29px;background:linear-gradient(#FBF9F1,#EAE6DA);border:3px solid #BEB9AC;box-shadow:inset 0 0 0 2px #F7F4EA;display:flex;justify-content:space-between;align-items:center;padding:0 5px}
.k-handset span{width:70px;height:42px;border-radius:21px;background:radial-gradient(#8f8a7c 1px,transparent 1.4px) 0 0/6px 6px #E2DDD0}
.k-handset b{width:76px;height:8px;border-block:1px solid #C6C1B5;position:relative}
.k-handset b::after{content:"";position:absolute;inset:3px 0 auto;border-top:1px solid #C6C1B5}
.k-lcd{margin-top:14px;height:204px;border:7px solid #BDBFB0;border-radius:6px;outline:1px solid #A9AB9C;background:#D2D6BF;color:#343D2E;font-family:var(--lcd-font);font-weight:700;padding:14px 15px 10px;display:flex;flex-direction:column;box-shadow:inset 0 2px 5px #6f745c55}
.k-say{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.k-lcd-top{display:flex;justify-content:space-between;font-size:14.5px;letter-spacing:.04em;padding-bottom:10px;border-bottom:1px solid #9aa088}
.k-lcd-top span:first-child::before{content:"";display:inline-block;width:5px;height:5px;background:currentColor;margin-right:7px;vertical-align:2px}
.k-small{margin-top:34px;font-size:13.5px;letter-spacing:.08em;min-height:14px}
.k-big{margin-top:9px;font-size:33px;letter-spacing:-.01em;white-space:nowrap}
.k-lcd-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:10px;letter-spacing:.08em;color:#535D47}
.k-bars{display:flex;gap:2px;align-items:flex-end}
.k-bars i{width:3px;background:#535D47}
.k-hookrow{margin-top:13px;display:flex;align-items:center;gap:16px}
.k-hook{width:166px;height:70px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:14px;color:#FFF8ED;font-size:13.5px;font-weight:700;letter-spacing:.16em;background:linear-gradient(#E0623A,#CE4B27);box-shadow:0 4px 0 #9E3519,inset 0 1px 0 #ffffff40;transition:transform 70ms ease-out,box-shadow 70ms ease-out}
.k-hook:active,.kiosk .k-key:active,.kiosk .k-soft:active{transform:translateY(2px)}
.k-hook:active{box-shadow:0 2px 0 #9E3519}
.k-hook svg{width:26px;height:26px;fill:currentColor;transform:rotate(135deg)}
.k-hook.down{background:linear-gradient(#C2302A,#A8211B);box-shadow:0 4px 0 #7E1611,inset 0 1px 0 #ffffff30}
.k-hook.up{background:linear-gradient(#34904F,#27753F);box-shadow:0 4px 0 #1B552D,inset 0 1px 0 #ffffff30}
.k-hook.up svg{transform:none;width:22px;height:22px}
.k-side b{display:block;font-size:13px;letter-spacing:.06em}
.k-side b::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#596747;margin-right:8px;vertical-align:1px}
.k-side span{display:block;margin-top:9px;font-size:12px;color:#5F6056}
.k-head,.k-footline{display:flex;justify-content:space-between;font-size:10.5px;font-weight:700;letter-spacing:.14em;color:#5F6056;padding:0 3px}
.k-head{margin-top:1px}
.k-bed{margin-top:11px;border-radius:13px;background:#D3CFC3;border:1px solid #C6C1B5;box-shadow:inset 0 2px 4px #77746740,0 1px 0 #FFFAF1;padding:14px;display:grid;grid-template-columns:repeat(10,1fr);grid-template-rows:120px 120px 68px;gap:10px}
.k-key{grid-column:span 2;border-radius:8px;background:linear-gradient(165deg,#FFFDF6,#F3F0E7);box-shadow:0 3px 0 #BCB5A5,0 4px 5px #736B5B26,inset 0 1px 0 #fff;color:#292B27;font-size:37px;letter-spacing:-.02em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;transition:transform 70ms ease-out,background 120ms ease-out}
.k-key svg{width:15px;height:15px;fill:currentColor;display:none}
.k-key.sel{background:#F7D9CB;color:#4B251B;box-shadow:inset 0 0 0 2px #A13D21;font-weight:700}
.k-key.sel svg,.k-key.talk svg,.k-key.ring svg{display:block}
.k-key.sel svg{fill:#A13D21}
.k-key.ring{background:#8FCB98;color:#16391F;box-shadow:inset 0 0 0 2px #2E7D46,0 3px 0 #1F5E33;font-weight:700;animation:k-pulse 2s ease-in-out infinite}
.k-key.talk{background:#2E7D46;color:#fff;box-shadow:0 3px 0 #1B552D;font-weight:700}
@keyframes k-pulse{50%{background:#C9E7CD}}
.k-soft{grid-column:span 5;border-radius:8px;background:linear-gradient(165deg,#F3F0E7,#E6E2D6);box-shadow:0 3px 0 #BCB5A5,0 4px 5px #736B5B26,inset 0 1px 0 #fff;font-size:12px;font-weight:700;letter-spacing:.08em;color:#292B27;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px}
.k-soft svg{width:22px;height:12px;stroke:#292B27;stroke-width:1.6;fill:none}
.k-footline{margin-top:13px;font-size:9.5px}
/* Upright layout for narrow screens: the same parts, stacked, with keys a thumb can hit */
.kiosk.tall{width:440px;height:auto}
.kiosk.tall .k-case{position:relative;inset:auto;margin:8px;display:block;padding:18px 18px 16px}
.kiosk.tall .k-rule,.kiosk.tall .k-handset{display:none}
.kiosk.tall .k-lcd{height:176px}
.kiosk.tall .k-small{margin-top:22px}
.kiosk.tall .k-head{margin-top:20px}
.kiosk.tall .k-bed{grid-template-rows:86px 86px 58px;padding:12px}
.kiosk-fit.tall{aspect-ratio:auto}
@media (prefers-reduced-motion:reduce){.k-key.ring{animation:none}}

/* ───────── The cover (a concept: a stand that makes the handset a desk phone) ───────── */
.cover-wrap{container-type:inline-size;width:100%}
.cover{--shell:#EFEADC;--shell-2:#DDD6C5;--shell-3:#C9C2B0;position:relative;margin-top:6cqw;background:var(--shell);border-radius:4.2cqw;padding:2.4cqw 2.4cqw 6.4cqw}
.cover--graphite{--shell:#303134;--shell-2:#232426;--shell-3:#4a4b4f}
.cover--signal{--shell:#CE4B27;--shell-2:#A13D21;--shell-3:#E58463}
.cover--moss{--shell:#596747;--shell-2:#465238;--shell-3:#7C8A69}
.cover-handle{position:absolute;left:16%;width:68%;bottom:calc(100% - .5cqw);display:block}
.cover-handle *{fill:var(--shell-2)}
.cover-glass{background:#141516;border-radius:2.2cqw;padding:1cqw}
.cover-glass .kiosk-fit{border-radius:1.3cqw}
.cover-lip{position:absolute;left:0;right:0;bottom:0;height:6.4cqw;display:flex;align-items:center;justify-content:center}
.cover-lip svg{width:22cqw;height:2.2cqw;fill:var(--shell-3)}
.cover-lip i{position:absolute;right:5cqw;width:1.5cqw;height:1.5cqw;border-radius:50%;background:var(--brand)}
.cover--signal .cover-lip i{background:#FFF8ED}
.cover-feet{display:flex;justify-content:space-between;padding:0 12%}
.cover-feet i{width:14%;height:1.5cqw;background:var(--shell-2);border-radius:0 0 1.2cqw 1.2cqw}
.cover-mini{container-type:inline-size}
.cover-mini .cover{padding-bottom:6.4cqw}

/* ───────── The iPhone at the other end ───────── */
.iphone-wrap{container-type:inline-size;width:min(300px,100%)}
.iphone{aspect-ratio:300/612;background:#0d0d0e;border-radius:15cqw;padding:3.2cqw;box-shadow:inset 0 0 0 .7cqw #3a3a3d}
.iphone button{border:0;padding:0;cursor:pointer;font-family:var(--font)}
.i-screen{position:relative;height:100%;border-radius:12cqw;overflow:hidden;background:#1F2A22;color:#fff;font-family:var(--font);display:flex;flex-direction:column;align-items:center;text-align:center;padding:16cqw 6cqw 10cqw}
.i-screen::before{content:"";position:absolute;top:3.4cqw;left:50%;width:28cqw;height:8cqw;margin-left:-14cqw;border-radius:5cqw;background:#000}
.i-date{font-size:5.6cqw;font-weight:600;opacity:.9}
.i-time{font-size:27cqw;font-weight:700;letter-spacing:-.03em;line-height:1}
.i-hint{margin-top:auto;font-size:4.4cqw;opacity:.75}
.i-sub{font-size:4.8cqw;opacity:.8;margin-top:6cqw}
.i-name{font-size:10.5cqw;font-weight:600;letter-spacing:-.02em;margin-top:1.5cqw;line-height:1.1}
.i-timer{font-size:6cqw;margin-top:2cqw;font-variant-numeric:tabular-nums;opacity:.85}
.i-actions{margin-top:auto;display:flex;justify-content:space-between;width:100%;padding:0 4cqw}
.i-actions button{background:none;color:#fff;font-size:4.4cqw;display:flex;flex-direction:column;align-items:center;gap:2.6cqw;margin-inline:auto}
.i-actions b{width:21cqw;height:21cqw;border-radius:50%;display:grid;place-items:center;transition:transform .16s var(--ease)}
.i-actions button:active b{transform:scale(.92)}
.i-actions svg{width:9.5cqw;height:9.5cqw;fill:#fff}
.i-no b{background:#EB4E3D}.i-no svg{transform:rotate(135deg)}
.i-yes b{background:#34C759}
.iphone[data-state=ring] .i-screen,.iphone[data-state=talk] .i-screen{background:#1c1c1e}
.iphone [data-on]{display:none}
.iphone[data-state=lock] [data-on~=lock],.iphone[data-state=ring] [data-on~=ring],.iphone[data-state=talk] [data-on~=talk]{display:block}
.iphone[data-state=ring] .i-actions[data-on~=ring],.iphone[data-state=talk] .i-actions[data-on~=talk]{display:flex}
.iphone[data-state=ring] .i-yes b{animation:i-ring 1.2s ease-in-out infinite}
@keyframes i-ring{50%{transform:scale(1.09)}}
/* the app: one button */
.i-app{background:#E8E4D8;color:#292B27;padding:15cqw 5cqw 6cqw;align-items:stretch;text-align:left}
.i-app .wordmark{font-size:7cqw}
.i-lcd{margin-top:4cqw;background:#D2D6BF;color:#343D2E;border:1.6cqw solid #BDBFB0;border-radius:2cqw;padding:4cqw;font-family:var(--lcd-font);font-weight:700}
.i-lcd span{display:block;font-size:4cqw;letter-spacing:.06em}
.i-lcd strong{display:block;font-size:8.6cqw;margin-top:5cqw;white-space:nowrap}
.i-call{margin-top:5cqw;width:100%;height:19cqw;border-radius:3cqw;background:#BF4320;box-shadow:0 1.2cqw 0 #8E3015;color:#fff;font-size:4.8cqw;font-weight:700;letter-spacing:.14em;transition:transform 70ms ease-out}
.i-call:active{transform:translateY(.6cqw)}
.i-call.down{background:#B3261E;box-shadow:0 1.2cqw 0 #7E1611}
.i-online{margin-top:5cqw;font-size:4.2cqw;font-weight:700;letter-spacing:.06em}
.i-online::before{content:"";display:inline-block;width:2cqw;height:2cqw;border-radius:50%;background:#2E7D46;margin-right:2cqw}
.i-recent{margin-top:5cqw;font-size:4.3cqw}
.i-recent li{display:flex;justify-content:space-between;padding:2.6cqw 0;border-top:1px solid #C6C1B5}
.i-recent li span{color:#5F6056}
@media (prefers-reduced-motion:reduce){.iphone[data-state=ring] .i-yes b{animation:none}}

/* ───────── Real screens, as a contact sheet ───────── */
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,44px) clamp(14px,1.8vw,28px)}
.shots img{width:100%;border-radius:8px}
.shots figcaption{margin-top:12px}
.shots figcaption b{display:block;font-weight:600}
@media (max-width:820px){.shots{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ───────── Switchboard fragment ───────── */
.sb{background:#F0EDE3;color:#292B27;border-radius:16px;padding:clamp(16px,2.4vw,28px);font-size:15px;line-height:1.35}
.sb-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-weight:700}
.sb-top span{font-weight:400;color:#5F6056;font-size:14px}
.sb-slots{margin-top:16px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.sb-slots li{background:#FFFDF6;border:1px solid #C6C1B5;border-radius:8px;padding:10px 10px 12px;min-height:92px;display:flex;flex-direction:column}
.sb-slots b{font-size:22px;font-weight:400;line-height:1}
.sb-slots strong{margin-top:auto;font-size:14px}
.sb-slots span{font-size:13px;color:#5F6056}
.sb-slots .on{color:#2E6B3D;font-weight:600}
.sb-slots .free{background:none;border-style:dashed}
.sb-two{margin-top:16px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:16px}
.sb-invite{background:#D2D6BF;color:#343D2E;border-radius:8px;padding:14px 16px}
.sb-invite strong{display:block;font:700 clamp(22px,2.4vw,30px)/1.2 var(--lcd-font);margin:8px 0;white-space:nowrap}
.sb table{width:100%;border-collapse:collapse;font-size:14px}
.sb th{text-align:left;font-weight:600;color:#5F6056}
.sb th,.sb td{padding:8px 10px 8px 0;border-bottom:1px solid #C6C1B5}
.sb tr:last-child td{border-bottom:0}
.sb .miss{color:#B3261E;font-weight:600}
@media (max-width:720px){
  .sb-slots{grid-template-columns:repeat(2,1fr)}
  .sb-slots li{min-height:70px}
  .sb-two{grid-template-columns:1fr}
}

/* ───────── Contact form ───────── */
.form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.form label{display:block;font-size:var(--t-small);font-weight:600}
.form .full{grid-column:1/-1}
.form input,.form select,.form textarea{display:block;width:100%;margin-top:8px;min-height:52px;padding:13px 16px;border:1px solid var(--field-line);border-radius:12px;background:var(--field-bg);font-size:var(--t-body);font-weight:400}
.form textarea{min-height:132px;resize:vertical}
.form input:focus-visible,.form select:focus-visible,.form textarea:focus-visible{outline:3px solid var(--accent);outline-offset:1px;border-radius:12px}
.form [aria-live]{min-height:1.5em}
@media (max-width:640px){.form{grid-template-columns:1fr}}
.reach a{text-decoration:none}
.reach a:hover{text-decoration:underline;text-underline-offset:5px}