/* AI RECEPTION HOMEPAGE: "Iona's desk", the talk-to-Iona hero. Built 15 Oct 2026 for Webwindow.
   Uses style.css's colours and type. One memorable thing (the desk card); everything around it stays quiet. */

html.js .needs-nojs{display:none!important}
html:not(.js) .needs-js{display:none!important}
:focus-visible{outline:3px solid #fff;outline-offset:3px}

/* header: the phone button is "Ring Iona"; "talk" belongs to the live chat only */
.btn--ring{background:#c9431a;color:#fff}
.btn--ring:hover{background:#b23b12}

/* hero */
.hero--desk{padding:clamp(18px,3vw,44px) 0 clamp(40px,6vw,80px)}
.hero--desk::before{top:auto;bottom:-120px;right:-60px;width:760px;height:760px;background:radial-gradient(circle,rgba(241,89,42,.20),transparent 62%)}
.hero--desk::after{display:none}
.hero--desk .hero-grid{grid-template-columns:5fr 7fr;gap:clamp(28px,4vw,64px);align-items:center}
.hero-eyebrow{font-size:.92rem;font-weight:600;color:var(--grey-2);margin-bottom:.9rem}
.hero--desk h1{font-size:clamp(2.3rem,4.6vw,4rem);max-width:13ch}
.hero--desk .lead{margin:1.2rem 0 1.4rem;max-width:34rem}
.hero-ring{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-weight:600}
.hero-ring b{font-family:var(--display);font-size:1.35rem;color:var(--orange)}
.hero-ring svg{width:22px;height:22px;color:var(--orange)}
.hero--desk .hero-trust{margin-top:1.8rem;padding-top:1.3rem}

/* THE DESK: Iona's portrait card */
.desk{position:relative;border-radius:26px;overflow:hidden;background:#151311;isolation:isolate;
  box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08);aspect-ratio:4/5;max-height:min(78vh,720px);margin-left:auto;width:100%;
  animation:desk-in .55s cubic-bezier(.2,.7,.2,1) both}
@keyframes desk-in{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:none}}
.desk-photo{position:absolute;inset:0;overflow:hidden}
.desk-photo img{width:100%;height:100%;object-fit:cover;object-position:50% 22%;transform-origin:50% 35%;
  animation:desk-drift 18s ease-in-out infinite alternate}
@keyframes desk-drift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.07) translate3d(-1%,0,0)}}
.desk-photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,9,8,.62) 0%,rgba(10,9,8,0) 22%,rgba(10,9,8,0) 42%,rgba(10,9,8,.86) 78%,rgba(10,9,8,.96) 100%)}
.desk-sweep{position:absolute;inset:-20%;z-index:1;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,236,214,.22) 50%,transparent 60%);
  transform:translateX(-70%);animation:desk-sweep 1s .25s cubic-bezier(.4,0,.2,1) forwards}
@keyframes desk-sweep{to{transform:translateX(70%);opacity:0}}
.desk-clock{position:absolute;z-index:2;top:20px;left:22px;right:22px;font-family:var(--display);font-weight:600;
  font-size:clamp(.95rem,1.4vw,1.08rem);line-height:1.35;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.5);max-width:26ch}
.desk-foot{position:absolute;z-index:2;left:0;right:0;bottom:0;padding:22px}
.desk-name{font-family:var(--display);font-weight:700;font-size:clamp(1.7rem,2.6vw,2.2rem);color:#fff;line-height:1}
.desk-role{color:rgba(255,255,255,.78);margin:.35rem 0 1rem;font-size:.98rem}

/* the big invitation: large bold text, so white on brand orange passes contrast for large text */
.desk-talk{display:flex;width:100%;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:14px 22px;border-radius:18px;
  background:var(--orange);color:#fff;font-family:var(--display);font-weight:700;font-size:1.22rem;letter-spacing:-.005em;cursor:pointer;
  box-shadow:0 16px 40px rgba(241,89,42,.42);transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
.desk-talk:hover{transform:translateY(-2px);box-shadow:0 22px 50px rgba(241,89,42,.55)}
.desk-talk:active{transform:scale(.985)}
.desk-talk svg{width:26px;height:26px;flex:none}
.desk-talk .ring{transform-origin:50% 60%;animation:desk-ring 8s 1.6s 3 both}
@keyframes desk-ring{0%,88%,100%{transform:none}90%{transform:rotate(-12deg)}92%{transform:rotate(12deg)}94%{transform:rotate(-10deg)}96%{transform:rotate(8deg)}98%{transform:rotate(0)}}
.desk-note{margin-top:.75rem;font-size:.86rem;color:rgba(255,255,255,.78);line-height:1.45}
.desk-note a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:2px}
.desk:hover .desk-photo img,.desk:focus-within .desk-photo img{animation-play-state:paused}
.desk:hover,.desk:focus-within{box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 2px rgba(241,89,42,.85),0 0 60px rgba(241,89,42,.25)}
/* when the live chat is busy or used up for now: the phone becomes the main way in */
.desk.is-resting .desk-talk{background:rgba(255,255,255,.12);box-shadow:none;font-size:1rem;min-height:52px}
.desk-ring-main{display:none}
.desk.is-resting .desk-ring-main{display:flex;margin-bottom:10px}
.desk-ring-main{width:100%;align-items:center;justify-content:center;gap:12px;min-height:64px;border-radius:18px;background:var(--orange);color:#fff;
  font-family:var(--display);font-weight:700;font-size:1.22rem;text-decoration:none}
.desk-ring-main svg{width:24px;height:24px}

/* PLAY signs (15 Oct 2026, Derek 09:55): neatly in the TOP RIGHT corner of Iona's picture and of every video, the same
   on ai-reception.co.uk and webwindow.co.uk. The whole picture is still the button. */
.desk-play{position:absolute;inset:0;z-index:1;display:block;width:100%;background:transparent;border:0;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.desk-play:focus-visible{outline:none}
.desk.is-resting .desk-play{display:none}
.desk-play .play-ring{top:16px;right:16px}
.desk-clock{right:90px}
.play-ring{position:absolute;top:14px;right:14px;left:auto;bottom:auto;transform:none;width:58px;height:58px;border-radius:50%;
  background:rgba(10,9,8,.55);border:2px solid #fff;display:grid;place-items:center;color:#fff;margin:0;
  box-shadow:0 8px 24px rgba(0,0,0,.4);transition:transform .2s,background .2s;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.play-ring svg{width:24px;height:24px;margin-left:3px;color:#fff}
.play-ring::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:play-pulse 2.4s 1.2s ease-out infinite}
@keyframes play-pulse{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(1.5);opacity:0}}
a:hover>.play-ring,button:hover>.play-ring,a:focus-visible>.play-ring,button:focus-visible>.play-ring{transform:scale(1.07);background:rgba(241,89,42,.92)}
@media (prefers-reduced-motion:reduce){.play-ring::after{animation:none;display:none}}
/* the demo video beside "The cost of a missed call": its own thumbnail, shown whole (16:9), so no words are cut off */
.watch-card--169{aspect-ratio:16/9}
.watch-card--169 img{opacity:1;object-position:50% 50%}
/* (the play sign on the videos is the same top-right .play-ring as on Iona's picture) */
.video-modal video{background-image:url(../img/demo-thumb.jpg)}

/* "prefer to watch" */
.watch{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:center}
.watch-card{position:relative;display:block;width:100%;border-radius:20px;overflow:hidden;aspect-ratio:16/10;background:#000;cursor:pointer;border:1px solid var(--line);padding:0}
.watch-card img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:.85;transition:transform .6s var(--ease)}
.watch-card:hover img{transform:scale(1.03)}
.watch-card .play{position:absolute;inset:0;margin:auto;width:76px;height:76px;border-radius:50%;background:rgba(0,0,0,.6);border:2px solid #fff;display:grid;place-items:center}
.watch-card .play svg{width:28px;height:28px;color:#fff;margin-left:4px}

/* how it works, short */
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;counter-reset:s}
.steps3 li{list-style:none;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 24px}
.steps3 li::before{counter-increment:s;content:counter(s);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  background:rgba(241,89,42,.14);color:var(--orange);font-family:var(--display);font-weight:800;margin-bottom:14px}
.steps3 h3{font-size:1.1rem;margin-bottom:.35rem}.steps3 p{font-size:.94rem;color:var(--grey)}

/* phone bar: appears once the hero has scrolled away */
.talkbar{display:none}

@media(max-width:900px){
  .hero--desk .hero-grid{grid-template-columns:1fr}
  .hero--desk h1{font-size:clamp(2rem,8.6vw,2.6rem);max-width:none}
  .hero--desk .lead{font-size:1rem;margin:.9rem 0 0}
  .desk{aspect-ratio:auto;height:min(64vh,560px);height:min(64svh,560px);min-height:400px;max-height:none;border-radius:22px}
  /* phones: the card (and its button) comes straight after the headline, inside the first screen */
  .hero--desk .hero-grid{gap:16px}
  .hero--desk .hero-copy{display:contents}
  .hero--desk .hero-eyebrow{order:1;margin-bottom:-6px}
  .hero--desk h1{order:2}
  .hero--desk .desk{order:3;margin-top:4px}
  .hero--desk .lead{order:4;margin-top:6px}
  .hero--desk .hero-desktop-only{order:5}
  .desk-foot{padding:18px}
  .hero-desktop-only{display:none}
  .watch,.steps3{grid-template-columns:1fr}
}
@media(max-width:760px){
  .topbar{display:none}
  body{padding-bottom:calc(68px + env(safe-area-inset-bottom))}
  .talkbar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:90;padding:8px 10px calc(8px + env(safe-area-inset-bottom));
    background:rgba(14,14,14,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line);
    transform:translateY(110%);visibility:hidden;transition:transform .3s var(--ease),visibility 0s .3s}
  .talkbar.show{transform:none;visibility:visible;transition:transform .3s var(--ease)}
  .talkbar a,.talkbar button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;border-radius:14px;font-weight:700;font-size:.98rem;text-decoration:none;cursor:pointer}
  .talkbar .tb-talk{background:#c9431a;color:#fff;font-family:var(--display);font-size:1.02rem}
  .talkbar .tb-ring{background:rgba(255,255,255,.1);color:#fff}
  .talkbar svg{width:20px;height:20px;flex:none}
  /* the two buttons are always exactly the same width (Derek, 15 Oct 2026); on the smallest phones the words may take two lines */
  .talkbar a,.talkbar button{min-width:0;padding:0 8px;text-align:center;line-height:1.15;font-family:var(--display);font-size:clamp(.88rem,3.9vw,1.02rem)}
}
@media(prefers-reduced-motion:reduce){
  .desk,.desk-photo img,.desk-sweep,.desk-talk .ring{animation:none!important}
  .desk-sweep{display:none}
}
@media print{.talkbar,.desk-sweep{display:none}}
.mobile-nav .btn--primary{justify-content:center}
.mobile-nav .btn{white-space:normal;max-width:calc(100vw - 32px);text-align:center}
/* smaller orange buttons: a darker orange so white text is easy to read (large ones keep the brand orange) */
.btn--primary{background:#c9431a}.btn--primary:hover{background:#b23b12}
.talkbar.resting .tb-talk{background:rgba(255,255,255,.1)}.talkbar.resting .tb-ring{background:#c9431a}
.mobile-nav .btn--ring{justify-content:center}