/* Lindy · portfolio homepage
   Bar: granola.ai (editorial serif, collage art framing real UI, a quick hero → first-frame transition)
   + lovable.dev (brand light as the background, colour only where it matters, soft lifted surfaces). */

:root{
  --cream:#FCFAF5;
  --ink:#0F1E2E;
  --ink-2:#2E3B48;
  --muted:#645E57;
  --line:rgba(15,30,46,.10);
  --gold-1:#F7B844;
  --gold-2:#C68809;
  --blue:#1E63D6;
  --night:#0F1E2E;
  --moon:#F3EEE4;

  --serif:"Newsreader","Iowan Old Style",Georgia,serif;
  --sans:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --wrap:1280px;
  --gut:clamp(16px,4vw,64px);

  --lift:0 0 0 1px rgba(118,108,96,.10),0 1px 1px rgba(118,108,96,.07),0 2px 5px rgba(118,108,96,.05),0 14px 34px -10px rgba(80,60,30,.18),0 40px 80px -30px rgba(70,45,10,.32);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
html{scrollbar-gutter:stable}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:clip}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance;margin:0;font-weight:400}
p{margin:0;text-wrap:pretty}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:6px}

.eyebrow{font-family:var(--serif);font-size:18px;font-style:italic;color:var(--muted);margin-bottom:18px}
.h2{font-family:var(--serif);font-size:clamp(40px,4.8vw,72px);line-height:1;letter-spacing:-.025em;font-variation-settings:"opsz" 72}
.display{font-family:var(--serif);font-size:clamp(64px,10vw,168px);line-height:.9;letter-spacing:-.035em;font-variation-settings:"opsz" 72}
.lead{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);max-width:500px;margin-top:22px}
.ln{display:block;overflow:hidden;padding:.14em .12em .24em 0;margin:-.14em -.12em -.24em 0}
.ln>span{display:inline-block}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:500;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:transform .15s,background .2s,box-shadow .2s,color .3s}
.btn:active{transform:translateY(1px) scale(.98)}
.btn-ink{background:var(--ink);color:#FCFAF5;box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 1px 1px rgba(15,30,46,.2),0 6px 14px -6px rgba(15,30,46,.5)}
.btn-ink:hover{background:#1B2E42}
.btn-ghost{background:rgba(255,255,255,.7);color:var(--ink);box-shadow:0 0 0 1px var(--line),0 2px 4px -2px rgba(15,30,46,.12)}
.btn-lg{height:54px;padding:0 28px;font-size:16px}
.btn-text{font-size:16px;font-weight:500;text-decoration:none;color:var(--ink-2);padding:12px 6px}
.btn-text span{display:inline-block;transition:transform .25s}
.btn-text:hover span{transform:translateY(3px)}

/* nav */

/* =========================================================
   OPENING: hero → pain → fix
   ========================================================= */
.opening{position:relative;height:100vh;height:100svh;overflow:hidden;color:var(--ink);transition:color .6s}
.opening.is-night{color:var(--moon)}
.op-bg{position:absolute;inset:0;background:var(--cream)}
.aurora{position:absolute;inset:0;pointer-events:none}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora .a1{width:150vw;height:110vh;left:-25vw;bottom:-70vh;background:radial-gradient(closest-side,rgba(247,184,68,.55),rgba(250,212,150,.35) 45%,rgba(252,250,245,0) 75%)}
.aurora .a2{width:80vw;height:80vh;right:-18vw;top:-10vh;background:radial-gradient(closest-side,rgba(254,224,129,.55),rgba(250,223,182,.3) 50%,rgba(252,250,245,0) 75%)}
.aurora .a3{width:60vw;height:60vh;left:-20vw;top:20vh;background:radial-gradient(closest-side,rgba(244,197,158,.35),rgba(252,250,245,0) 70%)}
.op-stars{position:absolute;inset:0;opacity:0;background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 46% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 12%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 82% 46%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 6%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 6% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 38% 88%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 74% 74%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 56% 4%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 18% 70%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 94% 90%,#fff 50%,transparent 51%)}
.op-sun{position:absolute;width:90vmin;height:90vmin;right:-20vmin;bottom:-45vmin;border-radius:50%;background:radial-gradient(closest-side,#FFEFB8 0%,#FED478 30%,rgba(250,190,120,.35) 60%,rgba(250,190,120,0));opacity:0}

.op-grid{position:relative;z-index:1;height:100%;max-width:var(--wrap);margin:0 auto;padding:88px var(--gut) 32px;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:40px;align-items:center}
.op-left{position:relative;height:100%}
.frame{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center}
.f-pain,.f-fix{visibility:hidden}
.status{align-self:flex-start;display:inline-flex;align-items:center;gap:9px;font-size:14px;font-weight:500;color:var(--ink-2);background:rgba(255,255,255,.75);box-shadow:0 0 0 1px var(--line);border-radius:999px;padding:6px 14px 6px 11px;margin-bottom:26px}
.status i{width:8px;height:8px;border-radius:50%;background:#2BAC76;animation:ping 2.4s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(43,172,118,.45)}70%,100%{box-shadow:0 0 0 9px rgba(43,172,118,0)}}
.hero-title{font-family:var(--serif);font-size:clamp(72px,10.5vw,168px);line-height:.9;letter-spacing:-.04em;font-variation-settings:"opsz" 72}
.hero-title em{font-style:italic;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
.hero-sub{font-size:clamp(19px,1.6vw,23px);line-height:1.45;color:var(--ink-2);max-width:470px;margin-top:30px}
.hero-actions{display:flex;align-items:center;gap:14px;margin-top:36px;flex-wrap:wrap}
.frame-title{font-family:var(--serif);font-size:clamp(48px,5vw,80px);line-height:1;letter-spacing:-.03em;font-variation-settings:"opsz" 72}
.frame-body{font-size:clamp(17px,1.4vw,20px);line-height:1.55;max-width:470px;margin-top:28px}
.opening .eyebrow{color:inherit}
.frame-body{opacity:1}

.op-right{position:relative;height:100%}
.op-stage{position:absolute;inset:0;display:grid;place-items:center}
.device{position:absolute;left:50%;top:50%;width:var(--t,360px);height:var(--t,360px);border-radius:50%;background:#141414;box-shadow:var(--lift);will-change:width,height}
.dv-tile{position:absolute;inset:-1px;border-radius:inherit;background:#FFF9EC;z-index:3}
.dv-logo{position:absolute;left:50%;top:50%;width:var(--t,360px);height:var(--t,360px);z-index:5;border-radius:50%;pointer-events:none;user-select:none}
.dv-ring{position:absolute;inset:0;z-index:6;pointer-events:none;border-radius:50%}
.dv-arc{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 132deg,rgba(76,141,68,0) 0deg,#4C8D44 40deg,#4C8D44 150deg,rgba(76,141,68,0) 190deg,rgba(76,141,68,0) 360deg);-webkit-mask:radial-gradient(closest-side,transparent 78.5%,#000 79.2%);mask:radial-gradient(closest-side,transparent 78.5%,#000 79.2%)}
.dv-ring svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.dv-ring text{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:1.4px;fill:#fff;dominant-baseline:central}
.dv-screen{position:absolute;inset:9px;border-radius:40px;overflow:hidden;opacity:0;background:#0b1520}
.wall{position:absolute;inset:-4%;background-size:cover;background-position:center}
.wall-night{background-image:url(assets/art/night.webp);filter:brightness(.8)}
.wall-day{background-image:url(assets/art/sunrise.webp);background-size:auto 128%;background-position:50% 8%;opacity:0}
.lock{position:absolute;left:0;right:0;top:46px;text-align:center;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.18)}
.lock-date,.lock-time{display:grid}
.lock-date>span,.lock-time>span{grid-area:1/1}
.lock-date{font-size:14px;font-weight:500;opacity:.92}
.lock-time{font-family:var(--sans);font-weight:300;font-size:76px;line-height:1;letter-spacing:-.03em;margin-top:2px}
.d-day,.t-day{opacity:0}
.notifs{position:absolute;left:12px;right:12px;top:172px;display:flex;flex-direction:column;gap:7px}
.nt{display:flex;gap:10px;align-items:flex-start;padding:10px 12px 11px;border-radius:18px;background:rgba(250,248,244,.86);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:#141210;box-shadow:0 6px 18px -10px rgba(0,0,0,.4)}
.nt img{width:30px;height:30px;flex:none;border-radius:7px;object-fit:contain;background:#fff;padding:4px;box-shadow:0 0 0 1px rgba(0,0,0,.05)}
.nt>div{min-width:0;flex:1}
.nt-h{display:flex;justify-content:space-between;gap:8px;font-size:13px;line-height:1.25}
.nt-h b{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nt-h span{color:#7A726C;font-size:11.5px;flex:none}
.nt-t{font-size:12.5px;line-height:1.3;color:#3A3530;margin-top:1px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nt-more{align-self:center;font-size:12px;font-weight:600;color:#fff;background:rgba(255,255,255,.22);backdrop-filter:blur(10px);border-radius:999px;padding:5px 12px;margin-top:2px}
.nt-lindy{position:absolute;left:12px;right:12px;top:172px;opacity:0;background:rgba(255,253,247,.94)}
.nt-lindy img{padding:0;border-radius:50%;width:34px;height:34px}
.nt-lindy .nt-t{-webkit-line-clamp:8;font-size:13.5px;line-height:1.35}
.handled{position:absolute;left:50%;top:322px;translate:-50% 0;white-space:nowrap;font-size:12px;font-weight:600;color:#3B2A08;background:rgba(255,246,217,.9);border-radius:999px;padding:6px 12px;opacity:0}
.portrait-tag{position:absolute;left:50%;top:calc(50% + min(212px, 36%));translate:-50% -50%;white-space:nowrap;font-size:13px;font-weight:500;color:var(--ink-2);background:#fff;border-radius:999px;padding:8px 14px;box-shadow:var(--lift);z-index:4}
.op-hint{position:absolute;left:50%;bottom:22px;translate:-50% 0;font-size:12px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;opacity:.5;z-index:2}
.op-hint::after{content:"";display:block;width:1px;height:28px;margin:8px auto 0;background:currentColor;animation:hint 1.8s ease-in-out infinite;transform-origin:top}
@keyframes hint{0%{transform:scaleY(0)}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

/* =========================================================
   WORK: one scroll per day
   ========================================================= */
.work-pin{position:relative;height:100vh;height:100svh;overflow:hidden;color:var(--ink);transition:color .6s}
.work-pin.night{color:var(--moon)}
.sky{position:absolute;inset:0}
.sky-fill{position:absolute;inset:0;background:#F8ECCB;clip-path:circle(0% at 80% 26%)}
.sky-sun{position:absolute;left:80%;top:26%;width:60vmin;height:60vmin;border-radius:50%;background:radial-gradient(closest-side,#FFEFB8 0%,#FED478 34%,rgba(250,190,120,.35) 64%,rgba(250,190,120,0));opacity:0}
.work-pin.night .sky-sun{background:radial-gradient(closest-side,#FBF8EF 0%,#F1ECDD 30%,rgba(241,236,221,.18) 50%,rgba(241,236,221,0))}
.stars{position:absolute;inset:0;opacity:0;background-image:inherit}
.stars{background-image:radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 28% 8%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 46% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 64% 12%,#fff 50%,transparent 51%),radial-gradient(1.6px 1.6px at 82% 46%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 90% 6%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 6% 42%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 38% 88%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 74% 74%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 56% 4%,#fff 50%,transparent 51%)}
.bigtime{position:absolute;inset:0;pointer-events:none}
.bigtime span{position:absolute;right:-2vw;bottom:-6vw;font-family:var(--serif);font-size:34vw;line-height:.8;letter-spacing:-.05em;color:currentColor;opacity:0;font-variation-settings:"opsz" 72}
.grain{position:absolute;inset:0;opacity:.08;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.work-pin.night .grain{mix-blend-mode:screen;opacity:.05}

.work-title{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut);z-index:2}
.work-grid{position:relative;z-index:1;height:100%;max-width:var(--wrap);margin:0 auto;padding:96px var(--gut) 40px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,80px);align-items:center;visibility:hidden}
.clock{list-style:none;margin:0 0 48px;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:440px}
.clock li{font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;opacity:.45;transition:opacity .4s}
.clock li.on,.clock li.done{opacity:1}
.clock .bar{display:block;height:2px;margin-top:8px;background:currentColor;opacity:.35;border-radius:2px;position:relative;overflow:hidden}
.clock .bar i{position:absolute;inset:0;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));transform-origin:left;transform:scaleX(0)}
.captions{position:relative;min-height:340px}
.cap{position:absolute;inset:0 0 auto}
.cap-day{font-family:var(--serif);font-style:italic;font-size:20px;opacity:.75;overflow:hidden;padding:.1em 0 .2em;margin:-.1em 0 -.2em}
.cap-day>span{display:inline-block}
.cap-title{font-family:var(--serif);font-size:clamp(46px,4.5vw,74px);line-height:.98;letter-spacing:-.035em;margin-top:14px;font-variation-settings:"opsz" 72}
.cap-title>span{display:block;overflow:hidden;padding:.14em .1em .24em 0;margin:-.14em -.1em -.24em 0}
.cap-title>span>span{display:inline-block}
.cap-body{font-size:18px;line-height:1.55;opacity:.8;margin-top:22px;max-width:420px}

.work-right{position:relative;height:min(640px,76vh)}
.scene{position:absolute;inset:0;display:grid;place-items:center;visibility:hidden}
.scene-art{position:absolute;width:62%;height:78%;right:-4%;top:-2%;background:var(--art) center/cover,var(--fb,#F3C766);box-shadow:0 30px 60px -30px rgba(60,40,10,.45)}
.scene:nth-child(2) .scene-art{--fb:#E9C26A;left:0;right:auto;top:-4%}
.scene:nth-child(3) .scene-art{--fb:#F0B48A;left:0;right:auto;top:6%}
.scene:nth-child(4) .scene-art{--fb:#1A2A3C;right:-8%;top:auto;bottom:-2%}

/* product windows */
.win{position:relative;width:min(470px,100%);background:#fff;color:#1C1917;border-radius:18px;box-shadow:var(--lift);overflow:hidden;font-size:14.5px}
.win-bar{display:flex;align-items:center;gap:6px;height:42px;padding:0 16px;border-bottom:1px solid #F0ECE6;color:#6E6862;font-size:13px;font-weight:500;background:#fff}
.win-bar i{width:10px;height:10px;border-radius:50%;background:#E7E2DA}
.win-bar span{margin-left:10px}
.win-body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:14px}
.msg{display:flex;gap:12px;align-items:flex-start}
.msg-av{width:34px;height:34px;flex:none;padding:6px;border-radius:9px;color:#0F3547;background:linear-gradient(160deg,#FFFDF7,#FBF0D2);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.msg-av-img{padding:0;object-fit:cover}
.msg-who{font-weight:600}
.msg-who span{font-weight:400;color:#7A726C;font-size:12.5px;margin-left:6px}
.msg-tx{margin-top:3px;line-height:1.45;color:#2B2724;font-size:16.5px}
.app{font-style:normal;font-size:10px;font-weight:700;color:#616061;background:rgba(29,28,29,.1);border-radius:3px;padding:1px 4px;position:relative;top:-1px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.stats div{background:#FAF7F1;border-radius:12px;padding:12px 14px}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:36px;line-height:1;letter-spacing:-.02em}
.stats span{font-size:12.5px;color:#7A726C}
.leads,.inv{list-style:none;margin:0;padding:0}
.leads li,.inv li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 0;border-top:1px solid #F1EDE7;font-size:16px}
.leads b{display:block;font-weight:600;font-size:14px}
.leads span{font-size:12.5px;color:#7A726C}
.chip{font-style:normal;font-size:12px;font-weight:600;border-radius:999px;padding:4px 10px;white-space:nowrap}
.chip-green{background:#E3F2E5;color:#1F6B34}
.chip-blue{background:#E4EEFD;color:#1D55B8}
.chip-gold{background:#FDF3D7;color:#7A4E04}
.draft{background:#FAF7F1;border-radius:12px;padding:14px 16px}
.draft-to{font-size:12.5px;font-weight:600;color:#4A443F}
.draft-to span{font-weight:400;color:#8A827B}
.draft-tx{margin-top:6px;line-height:1.5}
.draft-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:12px;font-size:12.5px;color:#7A4E04;font-weight:500}
.mini-btn{background:var(--ink);color:#fff;border-radius:8px;padding:6px 12px;font-size:12.5px;font-weight:600}
.mail-subj{font-family:var(--serif);font-size:24px;letter-spacing:-.01em;color:#141210}
.mail{display:flex;gap:12px}
.mail-av{width:32px;height:32px;flex:none;border-radius:50%;background:#E9E4F7;color:#5B4BA8;display:grid;place-items:center;font-size:13px;font-weight:600}
.mail-av-you{background:#E3EEF9;color:#245F99}
.mail-who b{font-weight:600}
.mail-who span{color:#7A726C;font-size:12.5px;margin-left:6px}
.mail-tx{margin-top:2px;line-height:1.45;color:#2B2724;font-size:16px}
.sent-by{display:inline-flex;align-items:center;gap:6px;margin-top:8px;font-size:12px;font-weight:600;color:#7A4E04;background:#FDF3D7;border-radius:999px;padding:4px 10px 4px 6px}
.sent-by svg{width:16px;height:16px;color:#7A4E04}
.cal{display:flex;align-items:center;gap:12px;background:#FAF7F1;border-radius:12px;padding:12px 14px}
.cal img{width:26px;height:26px}
.cal b{display:block;font-weight:600}
.cal span{font-size:12.5px;color:#7A726C}
.collected{display:flex;flex-direction:column;gap:2px;padding:4px 0 6px}
.collected b{font-family:var(--serif);font-weight:400;font-size:72px;letter-spacing:-.03em;line-height:1}
.collected span{color:#7A726C}
.inv span{font-size:14px;color:#4A443F}
.inv b{color:#1C1917}

/* =========================================================
   TOOLS marquee
   ========================================================= */
.tools{padding:clamp(90px,10vw,140px) 0 clamp(60px,7vw,100px);text-align:center;overflow:hidden}
.tools-line{font-family:var(--serif);font-size:clamp(26px,2.6vw,38px);line-height:1.2;letter-spacing:-.015em;max-width:860px;margin:0 auto;padding:0 var(--gut)}
.marquee{margin-top:40px;padding:30px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq-row{display:flex;gap:18px;width:max-content;will-change:transform}
.mq-row span{width:84px;height:84px;flex:none;border-radius:24px;background:#fff;box-shadow:var(--lift);display:grid;place-items:center}
.mq-row img{width:40px;height:40px;object-fit:contain}

/* =========================================================
   EXPERIENCE: wheel (the one section you spin)
   ========================================================= */
.exp-pin{position:relative;height:100vh;height:100svh;max-width:var(--wrap);margin:0 auto;padding:84px var(--gut) 24px;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);column-gap:64px}
.exp-left{display:flex;flex-direction:column;justify-content:center;gap:24px;padding-top:2vh}
.exp-head{}
.exp-head .h2{font-size:clamp(36px,3.6vw,56px)}
.exp-head .lead{margin-top:12px;font-size:15px;max-width:440px}
.wheel{position:relative;height:100%;perspective:1100px;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 28%,#000 72%,transparent 100%)}
.wheel-rot{position:absolute;left:0;right:0;top:50%;height:0;transform-style:preserve-3d}
.wheel-item{position:absolute;left:0;top:0;transform-origin:50% 50%;font-family:var(--serif);font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.025em;white-space:nowrap;margin-top:-.5em;backface-visibility:hidden;color:rgba(15,30,46,.2);transition:color .3s}
.wheel-item.on{color:var(--ink)}
.role-frame{position:relative;max-width:500px;padding:clamp(18px,2vw,28px);background:#E9DCC0;box-shadow:0 1px 2px rgba(60,40,10,.12),0 30px 50px -28px rgba(60,40,10,.5);rotate:-.8deg}
.role-frame>i{position:absolute;inset:0;background:var(--art,none) center/cover;transition:opacity .7s}
.role-frame>i:nth-of-type(2){opacity:0}
.role-card{position:relative;rotate:.8deg;font-size:14px;width:100%;max-width:480px;background:#fff;border-radius:22px;box-shadow:var(--lift);padding:22px 26px 20px;z-index:2}
.rc-top{display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted);font-weight:500}
.rc-t{font-family:var(--serif);font-size:28px;letter-spacing:-.015em;margin-top:8px;line-height:1.1}
.rc-s{color:var(--ink-2);margin-top:6px;font-size:15px}
.rc-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:7px}
.rc-list li{position:relative;padding-left:20px;font-size:14px}
.rc-list li::before{content:"";position:absolute;left:0;top:.65em;width:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2))}
.rc-sched{font-family:var(--serif);font-style:italic;font-size:15.5px;line-height:1.4;color:var(--ink-2);margin-top:14px;padding-top:14px;border-top:1px solid #F1EDE7}
.rc-tools{font-size:12.5px;color:var(--muted);margin-top:10px}
.roles-m{display:none}

/* =========================================================
   ABOUT: four cards, dealt when you arrive
   ========================================================= */
.about{padding:clamp(110px,12vw,170px) 0}
.about-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.deck{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:56px;perspective:1400px}
.trait{position:relative;min-height:440px;border-radius:24px;padding:26px 24px 24px;display:flex;flex-direction:column;gap:10px;box-shadow:0 1px 1px rgba(60,40,10,.08),0 30px 60px -30px rgba(60,40,10,.45);overflow:hidden;transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.trait:hover{transform:translateY(-8px) rotate(0deg) !important}
.trait::after{content:"";position:absolute;right:-14%;top:-10%;width:62%;height:42%;background:var(--art) center/cover;border-radius:3px;transform:rotate(9deg);box-shadow:0 18px 30px -18px rgba(0,0,0,.45);pointer-events:none}
.trait>*{position:relative;z-index:1}
.trait.t1{background:#F6E2A8;color:#3B2A08;--art:url(assets/art/gold-poster.webp)}
.trait.t2{background:#F4C9A6;color:#3E2412;--art:url(assets/art/dawn-peach.webp)}
.trait.t3{background:#0F1E2E;color:#F3EEE4;--art:url(assets/art/night.webp)}
.trait.t4{background:#DCE7F2;color:#15283D;--art:url(assets/art/sunrise.webp)}
.trait-k{display:flex;align-items:center;gap:10px;font-size:14px;font-weight:600}
.trait-k span{font-family:var(--serif);font-weight:400;font-size:16px;opacity:.7}
.trait h3{font-family:var(--serif);font-size:clamp(32px,2.7vw,42px);line-height:1;letter-spacing:-.025em;margin-top:auto}
.trait p{font-size:15.5px;line-height:1.5;opacity:.88}
.tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.tags span{font-size:12.5px;font-weight:500;background:rgba(255,255,255,.6);border-radius:999px;padding:5px 11px}
.trait.t3 .tags span{background:rgba(255,255,255,.12)}
.tags i{font-style:normal;font-size:11px;font-weight:600;color:#fff;background:var(--ink);border-radius:999px;padding:1px 6px;margin-left:4px}
.trait.t3 .tags i{background:var(--gold-1);color:var(--ink)}

/* =========================================================
   REFERENCES: one voice at a time, plays on its own
   ========================================================= */
.refs{position:relative;background:#14212F;color:var(--moon);padding:clamp(96px,10vw,150px) 0;overflow:hidden}
.refs::before{content:"";position:absolute;inset:0;opacity:.06;mix-blend-mode:screen;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.refs .eyebrow{color:rgba(243,238,228,.6)}
.refs-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.refs-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.g2{display:inline-flex;background:#FCFAF5;border-radius:999px;padding:9px 14px}
.g2 img{width:150px;height:auto}
.ref-stage{position:relative;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:center;margin-top:64px;min-height:440px}
.ref-photos{position:relative;aspect-ratio:4/5;width:min(360px,100%);justify-self:center}
.ref-photo{position:absolute;inset:0;margin:0;background:#F7B844;padding:14px 14px 56px;box-shadow:0 1px 2px rgba(0,0,0,.2),0 30px 60px -24px rgba(0,0,0,.6);opacity:0}
.ref-photo:nth-child(2){background:#F4C9A6}
.ref-photo:nth-child(3){background:#DCE7F2}
.ref-photo:nth-child(4){background:#FBE9B7}
.ref-photo::before{content:"";position:absolute;left:50%;top:-10px;width:84px;height:22px;translate:-50% 0;rotate:-3deg;background:rgba(255,255,255,.5);z-index:2}
.ref-photo img{position:relative;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.15) brightness(1.05);mix-blend-mode:multiply}
.ref-photo::after{content:"";position:absolute;left:14px;right:14px;top:14px;bottom:56px;pointer-events:none;background-image:radial-gradient(rgba(15,30,46,.32) 1px,transparent 1.3px);background-size:4px 4px;mix-blend-mode:multiply}
.ref-quotes{position:relative;min-height:380px}
.ref-q{position:absolute;inset:0;margin:0;display:flex;flex-direction:column;justify-content:center;visibility:hidden}
.ref-q blockquote{margin:0;font-family:var(--serif);font-size:clamp(38px,4.2vw,66px);line-height:1.06;letter-spacing:-.025em;font-variation-settings:"opsz" 72}
.ref-q .w{display:inline-block;overflow:hidden;vertical-align:top;padding:.12em .06em .22em 0;margin:-.12em -.06em -.22em 0}
.ref-q .w>span{display:inline-block}
.ref-q mark{background:none;color:#F7C766;font-style:italic}
.ref-q figcaption{margin-top:32px;font-size:15px;color:rgba(243,238,228,.65);line-height:1.45}
.ref-q figcaption b{display:block;font-family:var(--serif);font-weight:400;font-style:italic;font-size:28px;color:var(--moon)}
.ref-pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:56px}
.ref-pick button{all:unset;box-sizing:border-box;cursor:pointer;position:relative;display:flex;align-items:center;gap:12px;padding:14px 4px 18px;border-top:1px solid rgba(243,238,228,.16);opacity:.5;transition:opacity .3s}
.ref-pick button:hover,.ref-pick button.on{opacity:1}
.ref-pick button:focus-visible{outline:2px solid #F7C766;outline-offset:2px}
.ref-pick img{width:40px;height:40px;border-radius:50%;object-fit:cover;filter:grayscale(1)}
.ref-pick span{font-size:15px;font-weight:500}
.ref-pick i{position:absolute;left:0;top:-1px;height:2px;width:100%;background:linear-gradient(90deg,var(--gold-1),var(--gold-2));transform-origin:left;transform:scaleX(0)}

/* =========================================================
   TRUST: three promises, each with its proof on a collage panel
   ========================================================= */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec-top{display:flex;align-items:flex-end;justify-content:space-between;gap:20px 40px;flex-wrap:wrap;margin-bottom:56px}
.sec-top .lead{margin-top:16px}
.sec-link{font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap}
.sec-link span{display:inline-block;transition:transform .25s}
.sec-link:hover span{transform:translateX(4px)}
.trust{position:relative;background:#F3EDE1;padding:clamp(100px,11vw,160px) 0;overflow:hidden}
.trust::before{content:"";position:absolute;inset:0;opacity:.08;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.trust-in{position:relative;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.promises{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,36px)}
.promise{display:flex;flex-direction:column}
.promise h3{font-family:var(--serif);font-size:clamp(28px,2.4vw,36px);letter-spacing:-.02em;line-height:1.05;margin-top:30px}
.promise>p{font-size:16px;line-height:1.5;color:var(--muted);margin-top:10px;max-width:340px}
.promise .promise-foot{font-size:13px;color:#8A827B;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.pr-frame{position:relative;aspect-ratio:1/1;display:grid;place-items:center;padding:11%;border-radius:22px;background:var(--tint)}
.promise:nth-child(1) .pr-frame{--tint:linear-gradient(160deg,#F6E7BF,#EED79B)}
.promise:nth-child(2) .pr-frame{--tint:linear-gradient(160deg,#F5DCC8,#EDC6A8)}
.promise:nth-child(3) .pr-frame{--tint:linear-gradient(160deg,#E6EEF6,#D3E1EE)}
.pr-card{box-shadow:0 1px 1px rgba(0,0,0,.05),0 16px 32px -18px rgba(60,40,10,.45) !important}
.pr-card{width:100%;background:#fff;border-radius:16px;padding:18px 18px 16px;box-shadow:0 1px 1px rgba(0,0,0,.06),0 20px 40px -18px rgba(30,20,5,.55);color:var(--ink)}
.cert{background-color:#FFFDF7;background-image:repeating-linear-gradient(180deg,transparent 0 23px,rgba(154,106,6,.07) 23px 24px);text-align:center}
.cert-k{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#9A6A06}
.seals{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;justify-items:center;margin:14px 0 12px;perspective:600px}
.seals span{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;align-content:center;font-size:11.5px;font-weight:700;letter-spacing:.05em;color:#6E4E0A;background:radial-gradient(circle at 32% 28%,#FFF7DE,#F3D98E 52%,#D9AE4C);box-shadow:inset 0 0 0 4px rgba(255,255,255,.45),inset 0 0 0 5px rgba(140,95,15,.3),0 8px 14px -8px rgba(90,60,10,.6)}
.seals small{display:block;font-size:8.5px;letter-spacing:.1em}
.cert-line{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--ink-2)}
.vault-k{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--muted);padding-bottom:12px;border-bottom:1px solid #F1EDE7}
.vault-k svg{width:16px;height:16px;color:#9A6A06}
.checks{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.checks li{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:500}
.checks i{width:20px;height:20px;flex:none;border-radius:50%;background:#2BAC76;color:#fff;display:grid;place-items:center}
.checks svg{width:12px;height:12px}
.ok-to{font-size:12px;font-weight:600;color:#4A443F}
.ok-to span{font-weight:400;color:#8A827B}
.ok-tx{font-size:14.5px;margin-top:4px;padding-bottom:12px;border-bottom:1px solid #F1EDE7}
.flow{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px;position:relative}
.flow::before{content:"";position:absolute;left:21px;top:18px;bottom:18px;width:1px;background:#E8DFCF}
.flow li{position:relative;display:flex;align-items:center;gap:10px;height:38px;padding:0 12px 0 9px;border-radius:999px;box-shadow:inset 0 0 0 1px #ECE6DC;background:#fff;font-size:14px;font-weight:500;color:var(--ink-2);transition:background .45s,color .45s,box-shadow .45s}
.flow b{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;font-size:11.5px;background:#F4EFE6;transition:background .45s,color .45s}
.flow li.on{background:linear-gradient(180deg,#F7CF6B,#EDB43E);color:#2A1E05;box-shadow:0 8px 18px -10px rgba(200,140,20,.9)}
.flow li.on b{background:var(--ink);color:#F7CF6B}
.flow li.done{color:#8A827B}
.flow li.done b{background:#2BAC76;color:#fff}

/* =========================================================
   RATES
   ========================================================= */
.rates{padding:clamp(110px,12vw,170px) 0 clamp(70px,8vw,110px)}
.rates-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.rates .lead{max-width:560px}
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;align-items:stretch}
.plan{display:flex;flex-direction:column;background:#fff;border-radius:22px;padding:28px 26px;box-shadow:var(--lift)}
.plan-hl{background:linear-gradient(180deg,#FFFDF7 0%,#FDF3D6 100%);box-shadow:0 0 0 1px rgba(242,193,78,.5),var(--lift)}
.plan header{display:flex;align-items:center;gap:12px}
.plan header img{width:52px;height:52px}
.plan header img[src$="plan-enterprise.svg"]{flex:none;max-width:none;width:56.33px;height:72.58px;margin:-18.2px -2.89px -2.38px -1.44px}
.plan h3{font-family:var(--serif);font-size:30px;letter-spacing:-.02em;line-height:1}
.plan header p{font-size:13px;color:var(--muted);margin-top:4px}
.price{display:flex;align-items:baseline;gap:8px;margin-top:22px}
.price b{font-family:var(--serif);font-weight:400;font-size:56px;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.price span{font-size:14px;color:var(--muted)}
.plan-box{display:flex;align-items:center;height:44px;margin-top:18px;padding:0 14px;border-radius:12px;background:#F7F4EE;font-size:14.5px}
.plan-select{padding:0;background:#fff;box-shadow:0 0 0 1px rgba(242,193,78,.7)}
.plan-select select{appearance:none;-webkit-appearance:none;width:100%;height:100%;border:0;background:transparent url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8'><path d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23645E57' stroke-width='1.6' stroke-linecap='round'/></svg>") right 14px center no-repeat;padding:0 36px 0 14px;font:inherit;font-size:14.5px;font-weight:600;color:var(--ink);cursor:pointer;border-radius:12px}
.plan-btn{display:flex;align-items:center;justify-content:center;height:46px;margin-top:12px;border-radius:12px;font-size:15px;font-weight:600;text-decoration:none;transition:filter .2s,transform .15s}
.plan-btn:hover{filter:brightness(1.08)}
.plan-btn:active{transform:scale(.98)}
.plan-btn-ink{background:var(--ink);color:#fff}
.plan-btn-blue{background:#2F6BFF;color:#fff}
.plan-btn-gold{background:#F7E2A6;color:#3B2A08}
.plan-k{margin-top:24px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8A6510}
.plan ul{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:10px}
.plan li{position:relative;padding-left:24px;font-size:14.5px;color:var(--ink-2)}
.plan li::before{content:"";position:absolute;left:2px;top:.42em;width:10px;height:6px;border-left:1.8px solid #2BAC76;border-bottom:1.8px solid #2BAC76;transform:rotate(-45deg)}
.rates-note{margin-top:22px;font-size:13px;color:var(--muted)}

/* =========================================================
   CONTACT: one clean box
   ========================================================= */
.contact{position:relative;overflow:hidden;padding-top:clamp(120px,12vw,180px)}
.sunset{position:absolute;inset:0;pointer-events:none}
.sunset i{position:absolute;left:50%;border-radius:50%;translate:-50% 0}
.sunset .s1{bottom:-55vw;width:170vw;height:110vw;background:radial-gradient(closest-side,#F7B844 0%,#F9C877 24%,#FADFB6 48%,rgba(252,250,245,0) 72%)}
.sunset .s2{bottom:-30vw;width:90vw;height:60vw;background:radial-gradient(closest-side,rgba(240,150,80,.5),rgba(240,150,80,0) 70%)}
.sunset .s3{bottom:-12vw;width:40vw;height:30vw;background:radial-gradient(closest-side,rgba(255,240,200,.9),rgba(255,240,200,0) 70%)}
.contact-in{position:relative;max-width:1100px;margin:0 auto;padding:0 var(--gut);text-align:center}
.contact-title{font-family:var(--serif);font-size:clamp(40px,5.6vw,88px);line-height:1;letter-spacing:-.035em;font-variation-settings:"opsz" 72;white-space:nowrap}
.cta-panel{position:relative;margin:48px auto 0;max-width:880px;border-radius:30px;padding:clamp(28px,4.5vw,56px) clamp(16px,5vw,72px) 26px;background:linear-gradient(160deg,#F4DDAE 0%,#E9BE83 60%,#DDA66B 100%);box-shadow:0 30px 60px -30px rgba(120,70,20,.45);overflow:hidden}
.cta-panel::before{content:"";position:absolute;inset:0;opacity:.18;mix-blend-mode:multiply;pointer-events:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.composer{position:relative;text-align:left;background:#fff;border-radius:20px;padding:18px 16px 14px 20px;box-shadow:0 1px 2px rgba(60,40,10,.1),0 24px 40px -20px rgba(80,50,10,.45)}
.composer textarea{display:block;width:100%;border:0;outline:0;resize:none;font:inherit;font-size:20px;line-height:1.4;color:var(--ink);background:transparent;min-height:58px}
.composer textarea::placeholder{color:#A39B92}
.composer-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}
.composer-hint{font-size:13px;color:var(--muted)}
.composer .btn{background:#2F6BFF;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 14px -6px rgba(47,107,255,.6)}
.composer .btn:hover{background:#2560F0}
.cta-note{position:relative;margin-top:18px;font-size:14px;font-weight:500;color:#5A3D12}
.foot-mark{position:relative;font-family:var(--serif);font-size:32vw;line-height:.74;letter-spacing:-.06em;text-align:center;color:var(--ink);margin:2vw 0 -6vw;font-variation-settings:"opsz" 72}

/* =========================================================
   TABLETS / SMALL LAPTOPS
   ========================================================= */
@media (max-width:1180px){
  .deck{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promise:nth-child(3){grid-column:1/-1;max-width:520px}
  .trait{min-height:380px}
}

/* =========================================================
   PHONES (and short screens): the opening still steps,
   everything else flows
   ========================================================= */
@media (max-width:960px){
  .op-grid{display:flex;flex-direction:column;align-items:stretch;padding:84px var(--gut) 16px;gap:8px}
  .op-left{height:auto;flex:none;min-height:clamp(300px,46svh,420px)}
  .op-right{flex:1;width:100%;min-height:0}
  .hero-title{font-size:clamp(60px,17vw,96px)}
  .hero-sub{font-size:18px;margin-top:18px}
  .hero-actions{margin-top:22px}
  .status{margin-bottom:16px}
  .frame{justify-content:flex-end}
  .frame-title{font-size:clamp(34px,9vw,52px)}
  .frame-body{font-size:16px;margin-top:14px}
  .f-fix .hero-actions{display:none}
  .f-fix .frame-body{font-size:15px}
  .portrait-tag,.op-hint{display:none}
}
@media (max-width:960px),(max-height:699px){
  .work-pin{height:auto;overflow:visible}
  .sky{display:none}
  .work-title{position:relative;padding:80px var(--gut) 40px}
  .work-grid{visibility:visible;display:flex;flex-direction:column;padding:0;max-width:none;height:auto;gap:0}
  .work-left,.captions,.work-right{display:contents}
  .clock{display:none}
  .cap,.scene{position:relative;inset:auto;background:var(--bg);color:var(--fg);width:100%;visibility:visible}
  .cap{padding:72px var(--gut) 28px}
  .scene{padding:28px var(--gut) 88px}
  .scene-art{width:70%;height:70%}
  .captions .cap:nth-child(1){order:0}.work-right .scene:nth-child(1){order:1}
  .captions .cap:nth-child(2){order:2}.work-right .scene:nth-child(2){order:3}
  .captions .cap:nth-child(3){order:4}.work-right .scene:nth-child(3){order:5}
  .captions .cap:nth-child(4){order:6}.work-right .scene:nth-child(4){order:7}

  .exp-pin{height:auto;display:block;padding:110px var(--gut) 40px}
  .exp-left{padding-top:0;display:block}
  .wheel,.role-frame{display:none}
  .roles-m{display:block;list-style:none;margin:40px 0 0;padding:0;border-top:1px solid var(--line)}
  .roles-m li{padding:22px 0;border-bottom:1px solid var(--line)}
  .roles-m b{display:block;font-family:var(--serif);font-weight:400;font-size:30px;letter-spacing:-.02em;line-height:1.1}
  .roles-m span{display:block;color:var(--muted);margin-top:6px}
}
@media (max-width:760px){
  .deck{grid-template-columns:1fr}
  .ref-stage{grid-template-columns:1fr;gap:40px;margin-top:40px}
  .ref-photos{width:min(260px,70vw)}
  .ref-quotes{min-height:300px}
  .ref-pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promises,.plans{grid-template-columns:1fr}
  .pr-frame{aspect-ratio:auto;padding:36px 28px}
  .contact-title{white-space:normal}
  .composer-foot{flex-direction:column;align-items:stretch}
}
@media (max-width:560px){
  .stats b{font-size:28px}
  .letter{padding:26px 24px 22px}
  .collected b{font-size:44px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}
.work-pin.dusk .sky-sun{background:radial-gradient(closest-side,#FFE2B0 0%,#F7A25E 30%,rgba(238,120,70,.35) 58%,rgba(238,120,70,0))}

/* the afternoon: an app Lindy built from one sentence */
.ask{align-self:flex-end;max-width:88%;background:rgba(109,99,91,.08);border-radius:14px;padding:10px 14px;font-size:15px;line-height:1.4}
.ask span{display:block;font-size:11.5px;font-weight:600;color:#8A827B;margin-bottom:2px}
.kpis{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kpis div{background:#FAF7F1;border-radius:12px;padding:12px 14px}
.kpis b{display:block;font-family:var(--serif);font-weight:400;font-size:40px;line-height:1;letter-spacing:-.02em}
.kpis span{font-size:12.5px;color:#7A726C}
.bars{display:flex;align-items:flex-end;gap:10px;height:96px;padding:4px 2px 0;border-bottom:1px solid #EFEAE2}
.bars i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#F7B844,#E0A225);transform-origin:bottom}
.built{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;font-size:12px;font-weight:600;color:#7A4E04;background:#FDF3D7;border-radius:999px;padding:5px 11px 5px 7px}
.built svg{width:16px;height:16px;color:#7A4E04}

/* "See more roles" */
.more-roles{display:flex;align-items:center;justify-content:space-between;max-width:500px;padding:14px 2px;border-bottom:1px solid var(--line);font-family:var(--serif);font-size:26px;letter-spacing:-.015em;color:#8A6510;text-decoration:none}
.more-roles span{font-family:var(--sans);font-size:18px;transition:transform .25s}
.more-roles:hover span{transform:translateX(5px)}
.more-roles-m{display:none}
@media (max-width:960px),(max-height:699px){.exp-left .more-roles{display:none}.more-roles-m{display:flex;margin-top:8px}}
.island{position:absolute;top:10px;left:50%;width:86px;height:25px;translate:-50% 0;border-radius:20px;background:#0A0A0A;z-index:3}

/* nothing in the hero paints until its intro is set up (no flash on reload) */
.preload .op-grid,.preload .aurora{visibility:hidden}
/* trust: heading and line first, the proof card under it */
.promise .pr-frame{order:1;margin-top:26px}
.promise .promise-foot{order:2}
.promise h3{margin-top:0}
.promise>p:not(.promise-foot){min-height:3em}

/* intro layers (animated on load) sit inside the scroll-animated elements */
.dv-ring-in{position:absolute;inset:0;border-radius:50%}
.dv-logo img{display:block;width:100%;height:100%;border-radius:50%}

/* hero: the pitch is the headline, the name is the hello */
.hello{font-family:var(--serif);font-size:clamp(28px,2.6vw,40px);line-height:1;letter-spacing:-.02em;color:var(--ink-2);margin-bottom:14px}
.hello em{font-style:italic;color:#B07A0E}
#fHero .hero-title{font-size:clamp(58px,6.6vw,108px);line-height:.94;letter-spacing:-.04em}
#fHero .hero-title em{font-style:italic;background:linear-gradient(180deg,var(--gold-1),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.08em}
#fHero .hero-sub{font-family:var(--serif);font-size:clamp(24px,2.1vw,32px);line-height:1.2;letter-spacing:-.015em;color:var(--ink);max-width:560px;margin-top:22px}
.facts{list-style:none;margin:30px 0 0;padding:0;display:flex;gap:0;flex-wrap:wrap}
.facts li{display:flex;flex-direction:column;gap:2px;padding:0 26px;border-left:1px solid var(--line);font-size:13.5px;color:var(--muted)}
.facts li:first-child{padding-left:0;border-left:0}
.facts b{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1;letter-spacing:-.02em;color:var(--ink)}
#fHero .hero-actions{margin-top:34px}
#fHero .status{margin-bottom:22px}
@media (max-width:960px){
  .hello{font-size:26px;margin-bottom:10px}
  #fHero .hero-title{font-size:clamp(46px,12.5vw,72px)}
  #fHero .hero-sub{font-size:21px;margin-top:14px}
  .facts{margin-top:20px}.facts li{padding:0 16px}.facts b{font-size:24px}
}
@media (min-width:961px){
  .op-grid{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr)}
  #fHero .hero-title{font-size:clamp(60px,6.3vw,100px)}
  #fHero .hero-title .ln{white-space:nowrap}
  .hello{margin-bottom:18px}
}
.portrait-tag{top:calc(50% + var(--t,360px) / 2 + 30px) !important}

/* calmer hero: hello, headline, one sentence, buttons */
#fHero .hero-sub{font-family:var(--sans);font-size:clamp(18px,1.5vw,21px);line-height:1.5;letter-spacing:0;color:var(--muted);max-width:440px;margin-top:28px}
#fHero .hero-actions{margin-top:40px}
.hello{margin-bottom:22px}

/* =========================================================
   HERO v9: one sentence, the avatar set into the line
   ========================================================= */
.f-hero{position:absolute;inset:88px var(--gut) 32px;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.intro{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5.1vw,80px);line-height:1.12;letter-spacing:-.03em;max-width:15.5em;text-wrap:balance;color:var(--ink);font-variation-settings:"opsz" 72}
.intro .w{display:inline-block;overflow:hidden;vertical-align:bottom;padding:.12em .04em .2em;margin:-.12em -.04em -.2em}
.intro .w>span{display:inline-block}
.intro .name{font-style:italic}
.intro .name>span{background:linear-gradient(180deg,var(--gold-1),var(--gold-2));-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.06em}
.intro .quiet{color:#A39A90}
.slot{display:inline-block;width:1.5em;height:1.5em;vertical-align:-.42em;margin:0 .06em}
.live{display:inline-flex;align-items:center;gap:8px;vertical-align:.32em;margin-left:.3em;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:0;color:var(--ink-2);background:#fff;border-radius:999px;padding:7px 14px 7px 11px;box-shadow:0 0 0 1px var(--line),0 6px 16px -8px rgba(60,40,10,.25);white-space:nowrap}
.live i{width:8px;height:8px;border-radius:50%;background:#2BAC76;animation:ping 2.4s ease-out infinite}
.live b{font-weight:600;font-variant-numeric:tabular-nums}
.intro-cta{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px}
.intro-cta .hero-actions{margin-top:0;justify-content:center}
.intro-note{font-size:13.5px;color:var(--muted)}
.dv-ring text{font-size:15px !important;letter-spacing:1.6px !important}
@media (max-width:960px){
  .f-hero{inset:84px var(--gut) 24px}
  .intro{font-size:clamp(34px,9vw,52px);line-height:1.16}
  .live{font-size:13px;padding:5px 11px 5px 9px}
  .intro-cta{margin-top:32px}
}

.intro{font-size:clamp(40px,4.7vw,74px);max-width:none}
.intro .l{display:block}
.intro .quiet{max-width:19em;margin:0 auto;text-wrap:balance}
@media (max-width:960px){.intro{font-size:clamp(34px,9vw,52px)}.intro .quiet{max-width:none}}

/* until the script takes over centering */
.preload .device,.preload .dv-logo{translate:-50% -50%}

/* hero v10: profile photo on top, two-line intro, one quiet line */
.f-hero .slot{display:block;width:clamp(112px,10vw,150px);height:clamp(112px,10vw,150px);margin:0 auto 34px;flex:none}
.intro{max-width:none;line-height:1.02}
.intro .hi{font-size:clamp(64px,7.6vw,122px);letter-spacing:-.04em}
.intro .role{font-size:clamp(36px,4vw,62px);letter-spacing:-.03em;margin-top:.12em}
.intro-sub{font-size:clamp(17px,1.4vw,20px);line-height:1.5;color:var(--muted);margin-top:24px}
.intro-cta{margin-top:40px}
@media (max-width:960px){
  .f-hero .slot{width:96px;height:96px;margin-bottom:24px}
  .intro .hi{font-size:clamp(48px,14vw,72px)}
  .intro .role{font-size:clamp(28px,7.6vw,40px)}
  .intro-sub{font-size:16px;max-width:300px}
}

/* the face sits in the line, right before her name */
.intro .hi .slot{display:inline-block;width:.86em;height:.86em;margin:0 0 0 .18em;vertical-align:-.08em}
@media (max-width:960px){.intro .hi .slot{width:.86em;height:.86em}}
@media (max-width:960px){.intro .hi{font-size:clamp(40px,11.5vw,64px)}}

/* face sits beside the whole intro, centred on all three lines */
.intro-row{display:flex;align-items:center;justify-content:center;gap:clamp(28px,3.4vw,56px)}
.intro-text{text-align:center}
.intro-row .slot{display:block;flex:none;width:clamp(130px,11vw,180px);height:clamp(130px,11vw,180px);margin:0}
@media (max-width:960px){
  .intro-row{flex-direction:column-reverse;gap:22px}
  .intro-text{text-align:center}
  .intro-row .slot{width:96px;height:96px}
}
/* keep the text block on the page's centre line; the face hangs off its right side */
@media (min-width:961px){
  .intro-row{position:relative;display:block}
  .intro-row .slot{position:absolute;top:50%;left:calc(50% + var(--tw,700px) / 2 + clamp(24px,2.6vw,44px));translate:0 -50%}
  .intro-text{display:inline-block}
}

/* text on the left, face on the right */
@media (min-width:961px){
  .f-hero{align-items:stretch}
  .intro-row{display:flex;align-items:center;justify-content:space-between;gap:clamp(40px,6vw,120px);max-width:1080px;width:100%;margin:0 auto}
  .intro-row .slot{position:static;translate:none;width:clamp(200px,19vw,290px);height:clamp(200px,19vw,290px)}
  .intro-text{display:block;text-align:left}
  .intro-text .intro-cta{align-items:flex-start}
  .intro-text .intro-cta .hero-actions{justify-content:flex-start}
}
@media (min-width:961px){.intro .l{white-space:nowrap}.intro .role{font-size:clamp(34px,3.6vw,56px)}}
.intro .name{font-style:normal}

/* lock-screen app icons: one clean tile each, no doubled edges */
.nt img{width:32px;height:32px;border-radius:8px;padding:5px;background:#fff;box-shadow:none;object-fit:contain}
.nt img.full{padding:0;background:none;object-fit:cover}
.nt-lindy img{padding:0;border-radius:50%;width:34px;height:34px}
/* trust: each promise is one card, everything inside it */
.promises{align-items:stretch}
.promise{border-radius:24px;padding:30px 28px 26px;box-shadow:0 0 0 1px rgba(120,90,30,.08)}
.promise:nth-child(1){background:linear-gradient(170deg,#F8ECC8,#F1DDA6)}
.promise:nth-child(2){background:linear-gradient(170deg,#F7E2D2,#EFCCB2)}
.promise:nth-child(3){background:linear-gradient(170deg,#E9F0F7,#D6E2EF)}
.promise h3{margin-top:0}
.promise>p:not(.promise-foot){color:#4F4840;min-height:0}
.promise .pr-frame{aspect-ratio:auto;padding:0;margin-top:22px;margin-bottom:auto;background:none !important;border-radius:0;place-items:stretch}
.promise .pr-card{width:100%}
.promise .promise-foot{margin-top:22px;padding-top:14px;border-top:1px solid rgba(60,40,10,.12);color:#6E655B}

/* trust: one shared grid so heading, line, visual and footer line up across all three */
@media (min-width:761px){
  .promises{grid-template-rows:auto auto 1fr auto;row-gap:0}
  .promise{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0}
  .promise h3{grid-row:1}
  .promise>p:not(.promise-foot){grid-row:2;margin-top:10px}
  .promise .pr-frame{grid-row:3;margin:22px 0 0;display:flex}
  .promise .pr-card{display:flex;flex-direction:column;justify-content:center;min-height:300px}
  .promise .promise-foot{grid-row:4}
}
.promise .promise-foot a{font-weight:600;color:var(--ink);text-decoration:none}
.promise .promise-foot a span{display:inline-block;transition:transform .25s}
.promise .promise-foot a:hover span{transform:translateX(4px)}

/* G2 rating sits in the hero, under the buttons */
.g2-hero{display:inline-flex;align-items:center;margin-top:6px;padding:8px 14px;border-radius:999px;background:rgba(255,255,255,.7);box-shadow:0 0 0 1px var(--line);transition:background .2s}
.g2-hero:hover{background:#fff}
.g2-hero img{width:150px;height:auto}

.intro-proof{display:flex;align-items:center;gap:16px;flex-wrap:wrap;justify-content:inherit}
.intro-proof .g2-hero{margin-top:0}
@media (max-width:960px){.intro-proof{flex-direction:column;gap:10px}}

/* logo wall at the foot of the hero */
.logo-wall{position:absolute;left:0;right:0;bottom:8px;display:flex;flex-direction:column;align-items:center;gap:14px}
.lw-k{font-family:var(--serif);font-style:italic;font-size:17px;color:var(--muted)}
.lw-track{width:min(1100px,100%);overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.lw-row{display:flex;align-items:center;gap:56px;width:max-content;animation:lw 48s linear infinite}
.lw-row img{height:34px;width:auto;opacity:.72;filter:grayscale(1) brightness(.35)}
@keyframes lw{to{transform:translateX(calc(-50% - 28px))}}
@media (prefers-reduced-motion:reduce){.lw-row{animation:none}}
@media (max-width:960px){.logo-wall{bottom:0}.lw-row{gap:36px}.lw-row img{height:28px}}

/* =========================================================
   SYSTEM: one scale, one rhythm, applied everywhere
   ========================================================= */
:root{
  --sec-y:clamp(104px,10vw,148px);                 /* top + bottom padding of every flowing section */
  --head-gap:56px;                                  /* section heading block → its content */
  --h2:clamp(40px,4.8vw,69px);                      /* every section headline */
  --h3:clamp(26px,2.2vw,32px);                      /* every card title */
  --lead:clamp(17px,1.35vw,19px);                   /* every intro paragraph */
  --body:15.5px;                                    /* every body line inside cards */
}
/* section rhythm */
.tools,.about,.trust,.rates,.refs{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
.contact{padding-top:var(--sec-y)}

/* eyebrow: identical everywhere */
.eyebrow{font-size:18px;line-height:1.5;margin-bottom:16px}

/* headlines */
.h2,.frame-title,.contact-title,.cap-title{font-size:var(--h2);line-height:1;letter-spacing:-.025em}
.exp-head .h2{font-size:var(--h2)}

/* intro paragraphs */
.lead,.intro-sub,.frame-body{font-size:var(--lead);line-height:1.55;margin-top:20px}
.exp-head .lead,.sec-top .lead{font-size:var(--lead);margin-top:20px}
.cap-body{font-size:var(--lead);line-height:1.55;margin-top:20px}

/* card titles + body */
.trait h3,.promise h3,.plan h3,.rc-t{font-size:var(--h3);line-height:1.05;letter-spacing:-.02em}
.trait p,.promise>p:not(.promise-foot),.plan li,.rc-s,.rc-list li,.checks li{font-size:var(--body);line-height:1.5}

/* heading block → content */
.deck,.ref-stage{margin-top:var(--head-gap)}
.sec-top{margin-bottom:var(--head-gap)}

/* experience: heading starts at the same offset as every other section, no dead space */
@media (min-width:961px){
  .exp-pin{padding-top:calc(var(--sec-y) * .72);padding-bottom:28px}
  .exp-left{justify-content:flex-start;padding-top:0;gap:28px}
}
@media (min-width:961px){
  .exp-pin{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .exp-head .lead{max-width:520px}
}
@media (min-width:961px){
  .exp-pin{padding-top:96px}
  .exp-left{gap:20px}
  .role-frame{padding:16px 18px}
  .role-card{padding:18px 22px 16px}
  .rc-sched{margin-top:10px;padding-top:10px}
  .more-roles{padding:8px 2px}
  .wheel-item{font-size:clamp(34px,3.4vw,52px)}
}
:root{--sec-y:clamp(72px,7vw,104px);--head-gap:48px}
@media (min-width:961px){.exp-pin{padding-bottom:0}}
/* experience: as tall as its content (not a full screen), so the gap after it matches every other section */
@media (min-width:961px){
  .exp-pin{height:auto;min-height:0;padding-top:var(--sec-y);padding-bottom:var(--sec-y)}
  .wheel{height:auto;min-height:480px;align-self:stretch}
}
@media (min-width:961px){.exp-pin{padding-top:96px;padding-bottom:var(--sec-y)}}

/* =========================================================
   MOBILE PASS
   ========================================================= */
.ref-q .tail{color:var(--moon);font-style:normal}
@media (max-width:960px){
  /* hero: flows top to bottom, logo wall sits at the foot, never overlaps */
  .f-hero{justify-content:flex-start;padding-top:clamp(8px,3svh,32px)}
  .logo-wall{position:static;margin-top:auto;padding-top:16px;gap:10px}
  .lw-k{font-size:15px}
  .intro-cta{margin-top:26px;gap:12px}
  .intro-row{gap:18px}
  .g2-hero{padding:11px 16px}
  /* 9:41 and 7:00 frames: shorter text block, bigger phone */
  .op-left{min-height:clamp(170px,30svh,280px)}
  .frame-title{font-size:clamp(32px,8.6vw,44px)}
  .f-fix .frame-body{font-size:15px;margin-top:12px}
  /* thumb-sized tap targets */
  .brand{padding:8px 0}
  .sec-link,.promise .promise-foot a{display:inline-flex;align-items:center;min-height:44px}
  .more-roles{min-height:52px}
  /* experience: swipe through full job descriptions */
  .roles-m{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:32px calc(-1 * var(--gut)) 0;padding:6px var(--gut) 18px;border-top:0;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .roles-m::-webkit-scrollbar{display:none}
  .roles-m>li{flex:0 0 84%;scroll-snap-align:start;scroll-margin-left:var(--gut);background:#fff;border-radius:22px;padding:22px 22px 20px;border-bottom:0;box-shadow:var(--lift)}
  .roles-m .rm-k{font-size:12.5px;font-weight:500;color:var(--muted);margin-bottom:6px}
  .roles-m b{font-size:28px}
  .roles-m>li>span{font-size:15px;color:var(--ink-2)}
  .roles-m ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
  .roles-m ul li{position:relative;padding-left:20px;font-size:14.5px;line-height:1.45}
  .roles-m ul li::before{content:"";position:absolute;left:0;top:.62em;width:10px;height:2px;border-radius:2px;background:linear-gradient(90deg,var(--gold-1),var(--gold-2))}
  .rm-sched{font-family:var(--serif);font-style:italic;font-size:16px;line-height:1.4;color:var(--ink-2);margin-top:14px;padding-top:12px;border-top:1px solid #F1EDE7}
  .more-roles-m{margin-top:4px}
  /* references: calmer photo, quote never orphans its closing mark */
  .ref-photos{width:min(220px,58vw)}
  .ref-q blockquote{font-size:clamp(30px,8.4vw,40px)}
  .ref-pick button{min-height:56px}
}
@media (max-width:760px){
  /* about: swipe the four traits instead of a 2,000px stack */
  .deck{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin-left:calc(-1 * var(--gut));margin-right:calc(-1 * var(--gut));padding:10px var(--gut) 22px;scrollbar-width:none}
  .deck::-webkit-scrollbar{display:none}
  .trait{flex:0 0 84%;min-height:400px;scroll-snap-align:start;scroll-margin-left:var(--gut)}
  .trait::after{width:42%;height:40%}
}
/* short phones (iPhone SE etc.) */
@media (max-width:960px) and (max-height:700px){
  .f-hero .slot,.intro-row .slot{width:72px !important;height:72px !important}
  .intro .hi{font-size:clamp(38px,10.5vw,48px)}
  .intro .role{font-size:clamp(24px,6.6vw,30px)}
  .intro-sub{font-size:15px;margin-top:12px}
  .intro-cta{margin-top:18px}
  .btn-lg{height:48px}
  .lw-k{display:none}
}
.swipe-hint{display:none}
@media (max-width:960px){.swipe-hint{display:block;font-size:13px;font-weight:500;color:var(--muted);margin-top:18px}}
@media (min-width:761px){.swipe-hint-sm{display:none !important}}
@media (max-width:960px){.logo-wall{align-self:stretch;width:100%;min-width:0}.lw-track{width:100%}}
@media (max-width:960px){.roles-m ul li{padding:0 0 0 20px !important;border:0 !important}.roles-m ul li span,.roles-m ul li b{display:inline}}
.mail-photo{width:34px;height:34px;object-fit:cover;padding:0;background:none;box-shadow:0 0 0 1px rgba(0,0,0,.06)}



/* =========================================================
   SLACK HERO (one block, nothing patched on top)
   The phone is already at work: Ryan asks, Lindy does it,
   each finished job lands as a notification beside the phone.
   Scroll and the same phone comes down into the night.
   ========================================================= */
.f-hero{pointer-events:none}
.f-hero a,.f-hero button{pointer-events:auto}
.op-night{position:absolute;inset:0;background:var(--night);clip-path:circle(0px at 70% 50%)}
@media (min-width:961px){
  .intro-row{max-width:none}
  .intro .hi{font-size:clamp(56px,6.2vw,100px)}
  .intro .role{font-size:clamp(28px,3vw,48px)}
}

/* --- the device: titanium edge, black bezel, side buttons, glass --- */
.device{width:330px;height:640px;border-radius:56px;border:3px solid transparent;
  background:linear-gradient(#0B0B0C,#0B0B0C) padding-box,linear-gradient(150deg,#9EA1A6 0%,#55585D 18%,#2A2B2E 42%,#3C3E42 64%,#8C8F94 86%,#5E6166 100%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 60px 90px -40px rgba(60,40,10,.45),0 28px 44px -24px rgba(60,40,10,.35),0 0 0 1px rgba(15,30,46,.12)}
.device::before,.device::after{content:"";position:absolute;width:4px;border-radius:2px;background:linear-gradient(90deg,#3A3C40,#6E7176)}
.device::before{left:-6px;top:118px;height:26px;box-shadow:0 52px 0 0 #4A4C50,0 112px 0 0 #4A4C50}
.device::after{right:-6px;top:176px;height:84px;background:linear-gradient(270deg,#3A3C40,#6E7176)}
.dv-screen{inset:7px;border-radius:47px;opacity:1}
.dv-screen::after{content:"";position:absolute;inset:0;z-index:9;border-radius:inherit;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.13) 0%,rgba(255,255,255,0) 30%)}
.island{z-index:8;top:11px;width:92px;height:27px}

/* --- Slack, as it looks on iOS (stripped of everything but the conversation) --- */
.sa{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:#fff;color:#1D1C1D;text-align:left;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",var(--sans);-webkit-font-smoothing:antialiased;letter-spacing:-.006em}
.sa-status{flex:none;height:50px;display:flex;align-items:center;justify-content:space-between;padding:4px 28px 0 36px;font-size:15px;font-weight:600}
.sa-sig{display:flex;align-items:flex-end;gap:1.5px;height:11px}
.sa-sig i{width:3px;border-radius:1px;background:#1D1C1D}
.sa-sig i:nth-child(1){height:4px}.sa-sig i:nth-child(2){height:6px}.sa-sig i:nth-child(3){height:8px}.sa-sig i:nth-child(4){height:10.5px}
.sa-sig b{width:23px;height:11.5px;margin-left:6px;border-radius:3.5px;border:1px solid rgba(29,28,29,.4);background:linear-gradient(#1D1C1D,#1D1C1D) 1.5px 1.5px/72% calc(100% - 3px) no-repeat}
.sa-head{flex:none;display:flex;align-items:center;gap:14px;padding:4px 18px 12px;border-bottom:.5px solid #DEDEDE;box-shadow:0 .5px 0 #EFEFEF}
.sa-back{width:10px;height:18px;fill:none;stroke:#1D1C1D;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sa-head b{display:block;font-size:17px;font-weight:700;line-height:1.2;letter-spacing:-.02em}
.sa-head b span{color:#616061;font-weight:500}
.sa-head em{display:block;font-style:normal;font-size:12px;color:#616061;margin-top:1px}
/* newest at the bottom, history above, like the real app */
.sa-thread{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;overflow:hidden;padding:8px 0 4px}
.sa-thread>*{flex:none}
.sa-day{display:flex;align-items:center;gap:10px;padding:0 16px 10px;font-size:12px;font-weight:700;color:#1D1C1D}
.sa-day::before,.sa-day::after{content:"";flex:1;height:.5px;background:#DEDEDE}
.sa-day span{border:.5px solid #DEDEDE;border-radius:999px;padding:3px 11px}
.sa-rep{display:flex;align-items:center;gap:10px;padding:8px 16px 6px;font-size:13px;color:#616061}
.sa-rep::after{content:"";flex:1;height:.5px;background:#DEDEDE}
.sa-msg{display:flex;gap:9px;padding:6px 16px 6px;overflow:hidden}
.sa-cont{padding-top:0}
.sa-av{flex:none;width:36px;height:36px;border-radius:8px;object-fit:cover;margin-top:2px}
.sa-cont .sa-av{height:0;margin:0}
.sa-msg>div{flex:1;min-width:0}
.sa-who{display:flex;align-items:baseline;gap:5px;font-size:15px;line-height:20px}
.sa-who b{font-weight:800}
.sa-who time{font-size:12px;color:#616061;margin-left:2px}
.sa-app{align-self:center;font-size:9.5px;font-weight:700;color:#616061;background:#EBEBEB;border-radius:3px;padding:2px 3px;line-height:1}
.sa-tx{font-size:15px;line-height:21px}
.sa-at{color:#1264A3;background:rgba(29,155,209,.1);border-radius:3px;padding:0 2px}
.sa-line{display:flex;align-items:flex-start;gap:7px;font-size:15px;line-height:21px;overflow:hidden}
.sa-em{position:relative;width:18px;height:21px;flex:none;font-size:15px}
.sa-em i{position:absolute;left:0;top:0;font-style:normal;line-height:21px}
.sa-em i+i{transform:scale(0)}
.sa-line b{font-weight:700}
.sa-react{display:flex;gap:6px;padding-top:7px}
.sa-react span{display:inline-flex;align-items:center;gap:5px;font-size:13px;height:24px;padding:0 8px;border-radius:999px;background:#EAF4FB;box-shadow:inset 0 0 0 1px #1D9BD1}
.sa-react b{font-size:12px;font-weight:700;color:#1264A3}
.sa-react .sa-rx{background:#F4F4F4;box-shadow:inset 0 0 0 1px #E3E3E3}
.sa-react .sa-rx b{color:#616061}
.sa-foot{flex:none;position:relative;padding:20px 12px 30px}
.sa-compose{display:flex;align-items:center;gap:10px;height:42px;padding:0 6px 0 15px;border:1px solid #DDDDDD;border-radius:21px;font-size:15px;color:#8B8B8D}
.sa-compose p{flex:1}
.sa-send{width:30px;height:30px;border-radius:50%;background:#F2F2F2;display:grid;place-items:center}
.sa-send svg{width:14px;height:14px;fill:#ABABAD}
.sa-home{position:absolute;left:50%;bottom:8px;width:118px;height:5px;margin-left:-59px;border-radius:3px;background:#1D1C1D}

/* phones: copy, then the phone rising from the bottom; the logos come right after */
.lw-after{display:none}
@media (max-width:960px){
  .f-hero .logo-wall{display:none}
  .lw-after{display:flex;flex-direction:column;align-items:center;gap:12px;padding:44px 0 8px;overflow:hidden}
  .lw-after .lw-track{width:100%}
  .intro-cta{flex-direction:row;justify-content:center;align-items:center;gap:12px;margin-top:20px}
  .intro-cta .btn-text,.intro-note{display:none}
  .intro-proof{flex-direction:row}
  .intro-sub{margin-top:12px}
  #fHero .intro-cta .hero-actions{margin-top:0}
}

/* --- light and depth: a warm bloom behind the phone, a contact shadow under it, film grain --- */
.dv-floor{position:absolute;left:8%;right:8%;bottom:-34px;height:46px;z-index:-1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(70,45,10,.30),rgba(70,45,10,.12) 55%,transparent);filter:blur(6px)}
.op-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(520px 560px at var(--gx,75%) var(--gy,48%),rgba(255,206,120,.42),rgba(255,222,160,.22) 42%,rgba(252,250,245,0) 72%)}
.op-grain{position:absolute;inset:0;pointer-events:none;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* --- polish pass from the lighting reference (_tools/ref/hero-ref.png) --- */
/* warm peach-cream room, apricot bloom pooled between the words and the phone */
.op-glow{background:
  radial-gradient(640px 600px at calc(var(--gx,75%) - 260px) calc(var(--gy,48%) + 70px),rgba(249,184,112,.50),rgba(250,204,150,.26) 42%,rgba(252,250,245,0) 74%),
  radial-gradient(1500px 1000px at 72% 46%,rgba(247,226,203,.75),rgba(252,250,245,0) 70%)}
.op-grain{opacity:.03}
/* natural titanium, thinner bezel, light from the upper left */
.device{border-width:3px;
  background:linear-gradient(#0A0A0B,#0A0A0B) padding-box,linear-gradient(140deg,#EFE7DC 0%,#BFB2A1 16%,#8D8173 38%,#A89B8B 60%,#E3D9CC 82%,#9E9282 100%) border-box;
  box-shadow:0 1px 0 rgba(255,255,255,.55) inset,28px 46px 80px -34px rgba(110,70,20,.42),10px 18px 32px -16px rgba(110,70,20,.28),0 0 0 .5px rgba(90,70,40,.25)}
.device::before{background:linear-gradient(90deg,#9A8E7F,#D9CFC2);box-shadow:0 52px 0 0 #B5A999,0 112px 0 0 #B5A999}
.device::after{background:linear-gradient(270deg,#9A8E7F,#D9CFC2)}
.dv-screen{inset:6px;border-radius:48px}
.dv-floor{left:14%;right:-2%;bottom:-30px;background:radial-gradient(closest-side,rgba(110,70,20,.26),rgba(110,70,20,.10) 55%,transparent)}
.sa p{text-wrap:wrap}

/* --- headline: lines up with the nav logo, the face leads the line --- */
@media (min-width:961px){
  #fHero{left:max(18px,calc(var(--gut) + 18px - max(0px,(100vw - 1280px) / 2)))}
}
.hi-face{display:inline-block;width:.8em;height:.8em;margin-right:.22em;vertical-align:-.06em}
.hi-face img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(15,30,46,.06),0 10px 24px -10px rgba(110,70,20,.35)}
@media (min-width:961px){#fHero{right:max(18px,calc(var(--gut) + 18px - max(0px,(100vw - 1280px) / 2)))}}
/* morning comes up from the bottom edge (no grey crossfade) */
.op-night{--d:-45%;-webkit-mask-image:linear-gradient(to top,transparent var(--d),#000 calc(var(--d) + 40%));mask-image:linear-gradient(to top,transparent var(--d),#000 calc(var(--d) + 40%))}

/* =========================================================
   VARIANT 3: nothing pinned, nothing scrubbed.
   Normal scrolling at any speed; stories you can press.
   ========================================================= */
/* hero: copy and a phone that's already at work */
.hero3{position:relative;height:100vh;height:100svh;min-height:640px;overflow:hidden;color:var(--ink)}
.h3-bg{position:absolute;inset:0;background:var(--cream)}
.h3-grid{position:absolute;inset:0;max-width:var(--wrap);margin:0 auto}
.h3-phone{position:absolute}
.hero-device{position:absolute;left:50%;top:50%;translate:-50% -50%;scale:var(--s,1);transform-origin:50% 50%}
.preload .h3-grid,.preload .h3-phone{visibility:hidden}
.hero3 .logo-wall{position:absolute;left:0;right:0;bottom:8px;z-index:3}

/* the 9:41 / 7:00 story: night by default, a switch to flip it */
.story{color:var(--moon)}
.story:not(.is-night){color:var(--ink)}
.story .op-bg{background:#F8ECCB}
.story .op-night{clip-path:none}
.story .op-stars{opacity:1}
.story-switch{position:absolute;left:0;top:calc(50% - 292px);z-index:4;display:inline-flex;padding:4px;border-radius:999px;
  background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);transition:background .5s,box-shadow .5s}
.story:not(.is-night) .story-switch{background:rgba(15,30,46,.05);box-shadow:inset 0 0 0 1px rgba(15,30,46,.12)}
.ss-thumb{position:absolute;left:0;top:4px;bottom:4px;border-radius:999px;background:var(--moon);box-shadow:0 6px 16px -8px rgba(0,0,0,.5);transition:background .5s}
.story:not(.is-night) .ss-thumb{background:var(--ink)}
.story-switch button{all:unset;position:relative;z-index:1;cursor:pointer;display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:999px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;color:inherit;opacity:.72;transition:color .35s,opacity .35s}
.story-switch button:hover{opacity:1}
.story-switch button span{font-weight:500;opacity:.6}
.story-switch button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round}
.story-switch button:first-of-type svg{fill:currentColor;stroke:none}
.story-switch button.on{opacity:1;color:var(--ink)}
.story:not(.is-night) .story-switch button.on{color:var(--cream)}
.story-switch button:focus-visible{outline:2px solid var(--gold-1);outline-offset:2px}
.ss-auto{position:absolute;left:18px;right:18px;bottom:6px;height:2px;border-radius:2px;background:currentColor;opacity:.55;transform-origin:left;transform:scaleX(0)}

/* one day of my work: the title in the page, then the day you can tap through */
.work-head{max-width:var(--wrap);margin:0 auto;padding:var(--sec-y) var(--gut) 36px}
.work-head .lead{color:var(--muted);margin-top:16px}
@media (min-width:961px) and (min-height:700px){.work-grid{padding-top:64px}}
.clock li{opacity:.5}
.clock li:hover{opacity:.85}
.clock button{all:unset;cursor:pointer;display:block;width:100%;padding:10px 0 6px}
.clock button:focus-visible{outline:2px solid var(--gold-1);outline-offset:4px;border-radius:4px}

/* experience: the roles as a list you press */
.role-list{list-style:none;margin:0;padding:0;align-self:center;display:grid;gap:0}
.role-list button{all:unset;cursor:pointer;display:flex;align-items:baseline;gap:18px;padding:7px 0;font-family:var(--serif);font-size:clamp(28px,2.7vw,42px);line-height:1.12;letter-spacing:-.022em;color:rgba(15,30,46,.26);transition:color .3s}
.role-list button span{width:22px;flex:none;font-family:var(--sans);font-size:12px;font-weight:600;letter-spacing:.04em;color:rgba(15,30,46,.3);transition:color .3s}
.role-list button:hover{color:rgba(15,30,46,.58)}
.role-list button.on{color:var(--ink)}
.role-list button.on span{color:var(--gold-2)}
.role-list button:focus-visible{outline:2px solid var(--gold-1);outline-offset:4px;border-radius:4px}

/* phones: everything simply flows */
@media (max-width:960px){
  .hero3{height:auto;min-height:0;overflow:visible;padding:84px var(--gut) 28px}
  .h3-grid{position:relative;inset:auto;max-width:none}
  .hero3 .f-hero{position:relative;inset:auto;padding-top:clamp(8px,3svh,32px)}
  .h3-phone{position:relative;width:100%;margin-top:28px}
  .hero3 .logo-wall{position:static;margin-top:40px}
  .story-switch{top:0}
  .role-list{display:none}
}
.story-switch button{white-space:nowrap}
@media (max-width:960px){
  .story-switch button{padding:0 16px}
  .story-switch button span{display:none}
}
@media (max-width:960px),(max-height:699px){.work-head .lead{display:none}}

/* =========================================================
   VARIANT 3b: nothing waits on a timer.
   9:41 next to 7:00 in one frame; the day as four tiles.
   ========================================================= */
/* the split: night on the left, morning on the right, phones rising from the bottom edge */
.cmp{position:relative;display:grid;grid-template-columns:1fr 1fr}
.cmp-half{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;padding:clamp(104px,12vh,140px) clamp(24px,4vw,64px) 0;text-align:center;isolation:isolate}
.cmp-night{background:var(--night);color:var(--moon)}
.cmp-day{background:#F8ECCB;color:var(--ink)}
.cmp-day::before{content:"";position:absolute;right:-18%;bottom:-30%;width:80%;aspect-ratio:1;border-radius:50%;z-index:-1;background:radial-gradient(closest-side,#FFEFB8 0%,#FED478 32%,rgba(250,190,120,.32) 62%,rgba(250,190,120,0))}
.cmp-stars{opacity:1;z-index:-1}
.cmp-copy{max-width:460px}
.cmp .eyebrow{color:inherit;opacity:.7;margin-bottom:14px}
.cmp .frame-title{font-size:clamp(40px,4vw,64px)}
.cmp-line{font-size:var(--lead);line-height:1.55;margin:18px auto 0;max-width:400px;opacity:.78}
.cmp-phone{position:relative;width:100%;height:clamp(440px,52vh,560px);margin-top:clamp(36px,5vh,56px)}
.cmp-device{position:absolute;left:50%;top:0;translate:-50% 0;scale:var(--s,1);transform-origin:50% 0}
.cmp-day .wall-day{opacity:1}
.cmp-day .nt-lindy{opacity:1}
.cmp-day .handled{opacity:1}
.cmp .dv-floor{display:none}
.cmp-seam{position:absolute;left:50%;top:calc(clamp(104px,12vh,140px) + 96px);translate:-50% 0;z-index:3;width:76px;height:76px;border-radius:50%;padding:5px;background:linear-gradient(90deg,var(--night) 50%,#F8ECCB 50%)}
.cmp-seam img{width:100%;height:100%;border-radius:50%;box-shadow:0 0 0 1px rgba(15,30,46,.08),0 12px 26px -10px rgba(0,0,0,.45)}

/* one day: four tiles, each in its own light */
.day{max-width:var(--wrap);margin:0 auto;padding:0 var(--gut) var(--sec-y);display:grid;grid-template-columns:1fr 1fr;gap:16px}
.dt{position:relative;overflow:hidden;isolation:isolate;border-radius:28px;min-height:560px;padding:38px 38px 0;display:flex;flex-direction:column;color:var(--ink)}
.dt::before{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.dt-morning{background:linear-gradient(170deg,#FBF1D6,#F5E1AE)}
.dt-morning::before{right:-14%;top:-24%;width:62%;aspect-ratio:1;background:radial-gradient(closest-side,#FFE7A6,rgba(254,212,120,.55) 45%,rgba(254,212,120,0))}
.dt-afternoon{background:linear-gradient(170deg,#EAF1F8,#D6E3F0)}
.dt-afternoon::before{right:6%;top:-30%;width:46%;aspect-ratio:1;background:radial-gradient(closest-side,#FFFFFF,rgba(255,250,230,.7) 40%,rgba(255,250,230,0))}
.dt-sunset{background:linear-gradient(170deg,#F8D3B0,#F0AE85)}
.dt-sunset::before{left:-20%;bottom:-40%;width:80%;aspect-ratio:1;background:radial-gradient(closest-side,#FFE2B0,rgba(247,162,94,.6) 40%,rgba(238,120,70,0))}
.dt-night{background:linear-gradient(170deg,#13263A,#0B1724);color:var(--moon)}
.dt-night::before{right:10%;top:8%;width:64px;aspect-ratio:1;background:radial-gradient(closest-side,#FBF8EF 60%,rgba(241,236,221,.25) 75%,rgba(241,236,221,0))}
.dt-night::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;background-image:radial-gradient(1.2px 1.2px at 12% 18%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 34% 9%,#fff 50%,transparent 51%),radial-gradient(1.3px 1.3px at 58% 22%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 72% 40%,#fff 50%,transparent 51%),radial-gradient(1px 1px at 22% 44%,#fff 50%,transparent 51%),radial-gradient(1.2px 1.2px at 92% 30%,#fff 50%,transparent 51%)}
.dt-big{position:absolute;right:-6px;bottom:-56px;z-index:-1;font-family:var(--serif);font-size:clamp(150px,15vw,230px);line-height:1;letter-spacing:-.05em;opacity:.08;pointer-events:none}
.dt-night .dt-big{opacity:.1}
.dt-k{display:flex;align-items:baseline;gap:10px;margin-bottom:16px}
.dt-k b{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.01em;padding:5px 11px;border-radius:999px;background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px rgba(15,30,46,.08)}
.dt-night .dt-k b{background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
.dt-k span{font-family:var(--serif);font-style:italic;font-size:17px;opacity:.7}
.dt-t{font-family:var(--serif);font-size:var(--h3);font-size:clamp(28px,2.5vw,38px);line-height:1.08;letter-spacing:-.02em;max-width:15ch}
.dt-b{font-size:15.5px;line-height:1.55;margin-top:12px;max-width:40ch;opacity:.75}
.dt-win{margin-top:auto;padding-top:30px;display:flex;justify-content:flex-end}
.dt-win .win{width:min(470px,100%);border-radius:18px 18px 0 0;margin-bottom:-2px}
@media (max-width:960px){
  .cmp{grid-template-columns:1fr}
  .cmp-half{padding-top:72px}
  .cmp-phone{height:420px}
  .cmp-seam{display:none}
  .day{grid-template-columns:1fr;gap:12px}
  .dt{min-height:0;padding:28px 22px 0;border-radius:22px}
  .dt-big{font-size:140px;bottom:-34px}
}
.cmp-phone{text-align:left}

/* experience: the wheel scrolls, and the buttons (or a role's name) take you there without scrolling */
.wheel-item{all:unset;position:absolute;left:0;top:0;transform-origin:50% 50%;font-family:var(--serif);font-size:clamp(40px,4.2vw,64px);line-height:1;letter-spacing:-.025em;white-space:nowrap;margin-top:-.5em;backface-visibility:hidden;color:rgba(15,30,46,.2);transition:color .3s;cursor:pointer}
.wheel-item:hover{color:rgba(15,30,46,.45)}
.wheel-item.on{color:var(--ink)}
.wheel-item:focus-visible{outline:2px solid var(--gold-1);outline-offset:6px;border-radius:4px}
/* an arrow above the wheel and one below it, centred on the role that's lit */
.wheel-col{position:relative;height:100%;min-width:0}
.wheel-col .wheel{position:absolute;inset:0 -24vw 0 0}
.wheel-item{font-size:clamp(36px,3.5vw,54px)}
.rn{all:unset;position:absolute;left:0;z-index:2;cursor:pointer;width:52px;height:52px;margin-left:-26px;border-radius:50%;display:grid;place-items:center;transition:box-shadow .2s,background .2s,opacity .3s,translate .2s}
.rn-prev{top:calc(50% - min(31vh,300px));color:var(--ink);background:#fff;box-shadow:0 0 0 1px var(--line),0 8px 18px -12px rgba(60,40,10,.4)}
.rn-next{top:calc(50% + min(31vh,300px) - 52px);color:var(--cream);background:var(--ink);box-shadow:0 14px 28px -14px rgba(15,30,46,.6)}
.rn-prev:hover{translate:0 -2px}
.rn-next:hover{translate:0 2px}
.rn.off{opacity:0;pointer-events:none}
.rn:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
.rn svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:960px),(max-height:699px){.wheel-col{display:none}}

/* arrows: one fixed spot, never move */
.rn{left:clamp(200px,17vw,280px);transition:box-shadow .2s,background .2s,opacity .3s}
.rn-prev:hover,.rn-next:hover{translate:none}
.rn-prev:hover{box-shadow:0 0 0 1px rgba(15,30,46,.22),0 10px 22px -12px rgba(60,40,10,.5)}
.rn-next:hover{background:#1E3348}
.rn:focus:not(:focus-visible){outline:none}
@media (min-width:961px) and (min-height:700px){.wheel-col{height:min(78vh,760px);align-self:center}}
/* centred on the screen (not the row, whose height changes with each role card), so nothing shifts */
@media (min-width:961px) and (min-height:700px){.wheel-col{align-self:start;margin-top:max(0px,calc(50vh - 96px - min(39vh,380px)))}}

/* =========================================================
   SITE HEADER + FOOTER: lindy.ai's structure and links,
   drawn in this page's type, pills and colours
   ========================================================= */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding:12px var(--gut);pointer-events:none}
.nav-in{position:relative;pointer-events:auto;max-width:var(--wrap);margin:0 auto;height:56px;padding:0 8px 0 20px;display:flex;align-items:center;gap:16px;border-radius:999px;transition:background .45s,box-shadow .45s,color .45s}
.nav.scrolled .nav-in,.nav.menu-shown .nav-in,.nav.menu-open .nav-in{background:rgba(252,250,245,.82);backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);box-shadow:0 0 0 1px var(--line),0 8px 24px -12px rgba(15,30,46,.2)}
.nav.dark .nav-in{color:var(--moon)}
.nav.dark.scrolled .nav-in,.nav.dark.menu-shown .nav-in{background:rgba(15,30,46,.55);box-shadow:0 0 0 1px rgba(255,255,255,.12)}
.nav.dark .btn-ghost{background:rgba(255,255,255,.1);color:var(--moon);box-shadow:0 0 0 1px rgba(255,255,255,.2)}
.nav.dark .btn-ink{background:var(--moon);color:var(--ink)}
.brand{display:flex;align-items:center;flex:none;color:inherit;text-decoration:none}
.brand-logo{display:block;width:84px;height:28px}

.nav-links{display:flex;align-items:center;gap:2px;margin:0 auto;font-size:14.5px}
.nav-links>a,.nav-dd>summary{display:flex;align-items:center;gap:7px;height:40px;padding:0 12px;border-radius:999px;color:inherit;text-decoration:none;white-space:nowrap;opacity:.8;cursor:pointer;list-style:none;transition:opacity .2s,background .2s}
.nav-dd>summary::-webkit-details-marker{display:none}
.nav-links>a:hover,.nav-dd>summary:hover,.nav-dd[open]>summary{opacity:1}
.nav-dd[open]>summary{background:rgba(15,30,46,.06)}
.nav.dark .nav-dd[open]>summary{background:rgba(255,255,255,.1)}
.nav-chev{width:10px;height:6px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.nav-dd[open] .nav-chev{transform:rotate(180deg)}
.nav-links>.nav-m{display:none}

.nav-dd{position:relative}
.nav-dd.dd-wide{position:static}
.nav-panel{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;z-index:2;color:var(--ink);background:var(--cream);border-radius:22px;box-shadow:0 0 0 1px var(--line),0 2px 4px rgba(15,30,46,.04),0 28px 60px -24px rgba(15,30,46,.34);padding:18px 22px 12px;animation:navIn .24s cubic-bezier(.2,.7,.2,1)}
@keyframes navIn{from{opacity:0;transform:translateY(-6px)}}
.nav-hire{width:min(780px,calc(100vw - 2 * var(--gut)))}
.nav-res{display:grid;grid-template-columns:repeat(2,max-content);gap:40px;padding-right:30px}
.nav-h{font-family:var(--serif);font-style:italic;font-size:15px;color:var(--muted);margin:0 0 6px}
.nav-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));column-gap:20px}
.nav-panel a{display:flex;align-items:center;gap:11px;min-height:44px;margin:0 -8px;padding:0 8px;border-radius:12px;font-size:14.5px;font-weight:500;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background .2s}
.nav-panel a:hover{background:rgba(15,30,46,.05)}
.nav-ic{width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:8px;background:#fff;box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(15,30,46,.06);transition:color .2s}
.nav-ic::before{content:"";width:16px;height:16px;background:currentColor;-webkit-mask:var(--i) center/contain no-repeat;mask:var(--i) center/contain no-repeat}
.nav-panel a:hover .nav-ic{color:var(--gold-2)}
.nav-panel .nav-all{justify-content:center;gap:6px;margin:8px 0 0;border-top:1px solid var(--line);border-radius:0;font-weight:600}
.nav-panel .nav-all:hover{background:none}
.nav-panel .nav-all span{transition:transform .25s}
.nav-panel .nav-all:hover span{transform:translateX(3px)}

.nav-cta{display:flex;align-items:center;gap:6px;flex:none}
.nav-login{font-size:14.5px;color:inherit;text-decoration:none;padding:0 12px;opacity:.8;transition:opacity .2s}
.nav-login:hover{opacity:1}
.nav-burger{display:none}

@media (max-width:1100px){
  .nav-in{gap:10px}
  .nav-links{display:none}
  .nav-cta{margin-left:auto}
  .nav-burger{all:unset;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:40px;height:40px;cursor:pointer;border-radius:50%}
  .nav-burger span{display:block;width:18px;height:1.6px;border-radius:2px;background:currentColor;transition:transform .25s}
  .nav.menu-open .nav-burger span:first-child{transform:translateY(3.3px) rotate(45deg)}
  .nav.menu-open .nav-burger span:last-child{transform:translateY(-3.3px) rotate(-45deg)}
  .nav.menu-open .nav-links{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;left:0;right:0;top:calc(100% + 10px);margin:0;padding:8px 14px;max-height:calc(100dvh - 100px);overflow:auto;overscroll-behavior:contain;color:var(--ink);background:var(--cream);border-radius:24px;box-shadow:0 0 0 1px var(--line),0 28px 60px -24px rgba(15,30,46,.34);animation:navIn .24s cubic-bezier(.2,.7,.2,1)}
  .nav.menu-open .nav-links>a,.nav.menu-open .nav-dd>summary{height:54px;justify-content:space-between;padding:0 6px;border-radius:0;font-size:16px;opacity:1;background:none}
  .nav.menu-open .nav-links>*+*{border-top:1px solid var(--line)}
  .nav-dd,.nav-dd.dd-wide{position:static}
  .nav-panel{position:static;translate:none;width:auto;padding:0 6px 12px;background:none;box-shadow:none;border-radius:0;animation:none}
  .nav-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .nav-hire>.nav-h{display:none}
  .nav-res{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px;padding-right:6px}
}
@media (max-width:640px){
  .nav-login,.nav-demo{display:none}
  .nav.menu-open .nav-links>.nav-m{display:flex}
  .nav-grid,.nav-res{grid-template-columns:1fr}
}

.foot{position:relative;padding:var(--sec-y) var(--gut) 0;overflow:hidden}
.foot-in{position:relative;z-index:1;max-width:var(--wrap);margin:0 auto;background:rgba(252,250,245,.86);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-radius:24px;box-shadow:0 0 0 1px rgba(120,90,30,.1);padding:40px clamp(24px,4vw,56px) 26px}
.foot-in>.brand{width:max-content;margin-bottom:34px}
.foot-cols{display:grid;grid-template-columns:1.35fr repeat(4,minmax(0,1fr));gap:32px 24px}
.foot-cols p{font-size:14px;font-weight:600;margin-bottom:8px}
.foot-cols a{display:block;width:max-content;max-width:100%;padding:5px 0;font-size:14px;color:var(--muted);text-decoration:none;transition:color .2s}
.foot-cols a:hover{color:var(--ink)}
.foot-row{display:flex;align-items:center;justify-content:space-between;gap:20px 24px;margin-top:40px;padding-top:24px;border-top:1px solid var(--line)}
.foot-certs{display:flex;flex-wrap:wrap;gap:14px 24px}
.foot-certs span{display:grid;grid-template-columns:auto auto;column-gap:9px;align-items:center;font-size:13px;font-weight:600;line-height:1.15;color:var(--ink)}
.foot-certs img{grid-row:span 2;width:28px;height:28px;object-fit:contain}
.foot-certs small{font-size:11px;font-weight:400;color:var(--muted)}
.foot-soc{display:flex;gap:8px}
.foot-soc a{width:36px;height:36px;display:grid;place-items:center;border-radius:50%;background:#fff;box-shadow:0 0 0 1px var(--line);transition:background .2s}
.foot-soc a:hover{background:var(--moon)}
.foot-soc img{width:16px;height:16px;object-fit:contain}
.foot-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 24px;margin-top:20px;font-size:12.5px;color:var(--muted)}
@media (max-width:960px){
  .foot-cols{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:560px){
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot-cols a{padding:11px 0}
  .foot-row{flex-direction:column;align-items:flex-start}
  .foot-certs{display:grid;grid-template-columns:repeat(2,max-content)}
  .foot-legal{flex-direction:column}
}

/* =========================================================
   VARIANT 4: a card that's already at work (it becomes the 7:00 phone),
   and a contents panel you can read before you click.
   ========================================================= */
.hero3{z-index:4}
@media (min-width:961px) and (min-height:700px){.hero3{overflow:visible}.h3-bg{overflow:hidden}}
.h4-stage{position:absolute;z-index:5}
.preload .h4-stage{visibility:hidden}
.h4-fly{position:absolute;left:50%;top:50%;width:540px;height:532px;margin:-266px 0 0 -270px;isolation:isolate;transform-origin:50% 50%;will-change:transform}

/* behind it: Lindy's other channels, stacked like a deck, each one peeking out above the next */
.h4-art{position:absolute;inset:0;z-index:-1}
.h4-back{position:absolute;inset:0;border-radius:22px;transform-origin:50% 0;
  box-shadow:0 0 0 1px rgba(90,70,40,.11),0 1px 2px rgba(90,70,40,.04),0 16px 34px -22px rgba(80,55,20,.28)}
.h4-b1{translate:0 -30px;scale:.95;background:#FAF2E5}
.h4-b2{translate:0 -60px;scale:.9;background:#F4E8D4}
.h4-back p{display:flex;align-items:center;gap:6px;height:33px;padding:0 20px}
.h4-back i{width:9px;height:9px;border-radius:50%;background:rgba(150,125,90,.22)}
.h4-back span{margin-left:10px;font-size:12.5px;font-weight:600;letter-spacing:-.005em;color:rgba(15,30,46,.5)}
.h4-back b{font-weight:500;color:rgba(110,95,75,.6);margin-right:1px}

/* the card */
.hc{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:#FFFDF8;color:#1C1917;
  clip-path:inset(0 0 round 22px);
  box-shadow:0 0 0 1px rgba(90,70,40,.12),0 2px 4px rgba(90,70,40,.05),0 26px 50px -20px rgba(80,55,20,.30),0 70px 110px -50px rgba(70,45,10,.32)}
.hc>*{will-change:opacity}
.hc-bar{flex:none;display:flex;align-items:center;gap:7px;height:46px;padding:0 20px;border-bottom:1px solid #F1ECE3}
.hc-bar i{width:11px;height:11px;border-radius:50%;background:#E8E2D8}
.hc-bar span{margin-left:12px;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--ink)}
.hc-bar span b{font-weight:500;color:#8A8278;margin-right:1px}
.hc-body{flex:1;min-height:0;padding:28px 30px 30px}
.hc-t{font-family:var(--serif);font-size:40px;line-height:1;letter-spacing:-.024em;color:var(--ink)}
.hc-chips{display:flex;gap:8px;margin-top:14px}
.hc-chip{display:inline-flex;align-items:center;gap:7px;height:30px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(90,70,40,.16);font-size:13px;color:#5E574F;white-space:nowrap}
.hc-chip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.hc-avs{display:flex}
.hc-avs img{width:18px;height:18px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1.5px #FFFDF8}
.hc-avs img+img{margin-left:-5px}
.hc-msg{display:flex;gap:12px;margin-top:24px}
.hc-av{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover}
.hc-who{display:flex;align-items:baseline;gap:6px;font-size:15px;line-height:20px}
.hc-who b{font-weight:700}
.hc-who time{font-size:12.5px;color:#8A8278}
.hc-app{align-self:center;font-size:9.5px;font-weight:700;letter-spacing:.02em;color:#7A736B;background:#EFEAE2;border-radius:3px;padding:2px 4px;line-height:1}
.hc-tx{font-size:16px;line-height:23px;color:#2A2520;margin-top:2px}
.hc-at{color:#1264A3;background:rgba(29,155,209,.1);border-radius:4px;padding:0 3px}
.hc-goals{list-style:none;margin:16px 0 0 52px;padding:0;border-radius:16px;background:#fff;box-shadow:0 0 0 1px rgba(90,70,40,.10),0 8px 20px -12px rgba(80,55,20,.22)}
.hc-g{display:flex;align-items:center;gap:13px;height:68px;padding:0 16px}
.hc-g+.hc-g{border-top:1px solid #F3EEE6}
.hc-ic{flex:none;width:36px;height:36px;border-radius:10px;background:#F7F3EC;display:grid;place-items:center}
.hc-ic img{width:19px;height:19px}
.hc-gm{flex:1;min-width:0}
.hc-gm p{display:flex;align-items:baseline;gap:8px;font-size:14.5px;line-height:18px;white-space:nowrap}
.hc-gm b{font-weight:600}
.hc-gm span{font-size:12px;color:#8A8278}
.hc-track{display:block;height:4px;margin-top:9px;border-radius:2px;background:#F0EBE2;overflow:hidden}
.hc-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,#F7C25E,#E39A1B);transform-origin:0 50%}
.hc-n{flex:none;width:66px;text-align:right;font-family:var(--serif);font-size:28px;line-height:1;font-weight:400;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.hc-sw{display:grid;justify-items:end;font-size:21px}
.hc-sw em{grid-area:1/1;font-style:normal}
.hc-sw em:first-child{color:#8A8278}
.hc-ok{flex:none;width:22px;height:22px;border-radius:50%;background:#2F8F57;display:grid;place-items:center}
.hc-ok svg{width:13px;height:13px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hc-react{display:flex;gap:6px;margin:14px 0 0 52px}
.hc-react span{display:inline-flex;align-items:center;gap:5px;height:26px;padding:0 9px;border-radius:999px;font-size:13px;background:#EAF4FB;box-shadow:inset 0 0 0 1px #1D9BD1}
.hc-react b{font-size:12px;font-weight:700;color:#1264A3}
.hc-react span+span{background:#F6F3EE;box-shadow:inset 0 0 0 1px #E6E0D6}
.hc-react span+span b{color:#6E675F}


/* the 7:00 phone it turns into (a copy of the real one, swapped at the end) */
.h4-ghost{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0;pointer-events:none}
.h4-ghost .cmp-device{left:0;top:0;translate:-50% -50%;scale:var(--g,1);transform-origin:50% 50%}
.h4-ghost .wall-day{opacity:1}
.h4-ghost .dv-floor{display:none}
.h4-ghost .nt-lindy,.h4-ghost .handled{opacity:0}

/* phones: the card sits under the buttons, full width, no flight */
@media (max-width:960px),(max-height:699px){
  .h4-stage{position:relative;left:auto!important;top:auto!important;width:auto!important;height:auto!important;margin-top:84px}
  .h4-fly{position:relative;left:auto;top:auto;width:auto;max-width:540px;height:auto;margin:0 auto 40px}
  .hc{position:relative;inset:auto}
  .hc-body{padding:22px 20px 0}
  .hc-t{font-size:32px}
  .hc-goals,.hc-react{margin-left:0}
  .hc-g{gap:11px;padding:0 13px}
  .hc-gm p{flex-direction:column;gap:2px}
  .hc-n{width:auto;min-width:46px;font-size:24px}
  .hc-sw{font-size:18px}
  .hc-body{padding-bottom:22px}

  .h4-ghost{display:none}
}

/* contents: a frosted tab with a mark per chapter; hover or tap opens the list */
.toc{position:fixed;right:16px;top:50%;translate:0 -50%;z-index:40;opacity:0;pointer-events:none;transition:opacity .4s}
.toc.show{opacity:1;pointer-events:auto}
.toc-tab{all:unset;cursor:pointer;position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:14px 10px 12px;border-radius:999px;
  background:rgba(252,250,245,.72);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  box-shadow:0 0 0 1px rgba(15,30,46,.08),0 10px 24px -12px rgba(30,20,5,.28);transition:background .25s,box-shadow .25s}
.toc-tab:hover,.toc.open .toc-tab{background:rgba(255,253,248,.92)}
.toc-tab:focus-visible{outline:2px solid var(--gold-1);outline-offset:3px}
.toc-ic{width:16px;height:16px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;opacity:.75}
.toc-ticks{display:flex;flex-direction:column;align-items:center;gap:7px}
.toc-ticks i{display:block;width:12px;height:2px;border-radius:2px;background:var(--ink);opacity:.22;transition:width .3s,opacity .3s}
.toc-ticks i.on{width:18px;opacity:.9}
.toc-k{display:none}
/* the chapter's name, shown for a moment whenever you enter a new one */
.toc-now{position:absolute;right:calc(100% + 10px);top:50%;translate:6px -50%;white-space:nowrap;padding:7px 12px;border-radius:999px;font-size:12.5px;font-weight:600;color:var(--ink);
  background:rgba(252,250,245,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 0 0 1px rgba(15,30,46,.08),0 8px 20px -12px rgba(30,20,5,.3);
  opacity:0;pointer-events:none;transition:opacity .3s,translate .3s}
.toc.flash .toc-now{opacity:1;translate:0 -50%}
.toc.open .toc-now{opacity:0}
/* the list */
.toc-card{position:absolute;right:calc(100% + 12px);top:50%;width:292px;overflow:hidden;border-radius:20px;background:#FFFDF8;color:var(--ink);
  box-shadow:0 0 0 1px rgba(90,70,40,.12),0 2px 4px rgba(90,70,40,.05),0 26px 50px -20px rgba(80,55,20,.30),0 60px 100px -50px rgba(70,45,10,.30);
  opacity:0;visibility:hidden;translate:10px -50%;scale:.97;transform-origin:100% 50%;
  transition:opacity .22s ease,translate .32s cubic-bezier(.2,.8,.2,1),scale .32s cubic-bezier(.2,.8,.2,1),visibility 0s .32s}
.toc.open .toc-card{opacity:1;visibility:visible;translate:0 -50%;scale:1;transition:opacity .22s ease,translate .32s cubic-bezier(.2,.8,.2,1),scale .32s cubic-bezier(.2,.8,.2,1),visibility 0s}
/* the same window as the hero card: three dots, a title, a chip */
.toc-bar{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 18px;border-bottom:1px solid #F1ECE3}
.toc-bar i{width:9px;height:9px;border-radius:50%;background:#E8E2D8}
.toc-bar span{margin-left:10px;font-size:13px;font-weight:600;letter-spacing:-.005em}
.toc-bar em{margin-left:auto;font-style:normal;font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;color:#8A8278;padding:3px 9px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(90,70,40,.16)}
.toc-list{padding:8px}
.toc-list a{display:flex;align-items:baseline;gap:12px;padding:10px 12px 11px;border-radius:12px;text-decoration:none;color:rgba(15,30,46,.6);transition:background .2s,color .2s}
.toc-list a b{flex:none;width:18px;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.04em;color:rgba(15,30,46,.32);transition:color .2s}
.toc-list a strong{flex:1;font-family:var(--serif);font-size:21px;font-weight:400;line-height:1.15;letter-spacing:-.018em}
/* each row ends in the mark the closed tab shows for it */
.toc-list a i{flex:none;align-self:center;width:12px;height:2px;border-radius:2px;background:currentColor;opacity:.25;transition:width .3s,opacity .3s}
.toc-list a:hover{background:#F5F1E9;color:var(--ink)}
.toc-list a:focus-visible{outline:2px solid var(--gold-1);outline-offset:-2px}
.toc-list a.on{color:var(--ink)}
.toc-list a.on b{color:var(--gold-2)}
.toc-list a.on i{width:18px;opacity:.9}
.toc-top{display:flex;align-items:center;justify-content:space-between;padding:12px 20px 13px;border-top:1px solid #F1ECE3;font-size:13px;font-weight:500;color:#8A8278;text-decoration:none;transition:color .2s,background .2s}
.toc-top:hover{color:var(--ink);background:#F8F5EE}
@media (max-width:960px),(max-height:699px){
  .toc{top:auto;bottom:max(14px,env(safe-area-inset-bottom));right:14px;translate:0 0}
  .toc-tab{flex-direction:row;gap:9px;height:44px;padding:0 16px 0 14px;font-size:14px;font-weight:600;color:var(--ink)}
  .toc-ticks,.toc-now{display:none}
  .toc-k{display:inline}
  .toc-card{top:auto;right:0;bottom:calc(100% + 10px);width:min(320px,calc(100vw - 28px));translate:0 10px;transform-origin:100% 100%}
  .toc.open .toc-card{translate:0 0}
}

/* the night and the morning say their piece in two lines each, so the two phones start level */
@media (min-width:961px){.cmp-day .cmp-line{max-width:440px;text-wrap:balance}}

/* chapter rail */
.rail{position:fixed;right:20px;top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:6px;color:#fff;mix-blend-mode:difference;opacity:0;pointer-events:none;transition:opacity .4s}
.rail.show{opacity:1;pointer-events:auto}
.rail a{display:flex;flex-direction:row-reverse;align-items:center;gap:10px;height:22px;text-decoration:none;color:inherit}
.rail i{width:6px;height:6px;flex:none;border-radius:3px;background:currentColor;opacity:.4;transition:height .3s,opacity .3s}
.rail a:hover i{opacity:.8}
.rail a.on i{height:20px;opacity:1}
.rail span{font-size:12px;font-weight:600;opacity:0;translate:6px 0;transition:opacity .25s,translate .25s;white-space:nowrap}
.rail:hover span{opacity:.9;translate:0 0}
@media (max-width:960px){.rail{display:none}}
@media (max-height:699px) and (min-width:961px){.rail{display:none}}

/* phones: one wide, centred Hire button, the rating underneath */
@media (max-width:640px){
  #fHero .intro-cta{flex-direction:column;align-items:stretch;gap:14px;align-self:stretch;width:100%}
  #fHero .intro-cta .hero-actions{display:flex;width:100%;justify-content:center}
  #fHero .intro-cta .hero-actions .btn-lg{flex:1;justify-content:center;min-height:56px}
  #fHero .intro-cta .btn-text{display:none}
  #fHero .intro-proof{flex-direction:column;align-items:center}
  #fHero .intro-sub{margin-left:auto;margin-right:auto}
}

/* phones: trait cards as tall as their words, the headline just clear of the art; the face hero's button close to its line */
@media (max-width:760px){
  .trait{min-height:0}
  .trait h3{margin-top:56px}
}
@media (max-width:640px){
  .opening #fHero .intro-cta .hero-actions{margin-top:0}
}