/* ============================================================
   generativegeneralist.com
   Apple product-page dark. Near-black stage, one soft bloom,
   work shown inside a real machine. Type is SF Pro on Apple
   devices via the system stack (the font is never served, so
   nothing is redistributed) and Inter Display everywhere else.
   Motion uses Apple's own production curves.
   ============================================================ */

:root{
  /* stage: warm near-black, so the ground itself is not a cool AI grey */
  --bg:#0A0A09;
  --bg-2:#121110;
  --panel:#1A1917;
  --panel-2:#211F1C;
  --chrome:#2C2A27;

  /* ink */
  --text:#F2F0EC;
  --text-2:#A8A29A;
  --text-3:#726C64;

  --line:rgba(255,255,255,.10);
  --line-2:rgba(255,255,255,.17);
  --hairline:rgba(255,255,255,.26);

  /* signature spectrum: warm earth. Gold, amber, ember, clay.
     Deliberately no violet and no cyan: that pairing is the current AI tell,
     and it is what every other AI consultant on the internet is using. */
  --sig-1:#F0BE5C;   /* gold  */
  --sig-2:#E08A3C;   /* amber */
  --sig-3:#C4522F;   /* ember */
  --sig-4:#96422E;   /* clay  */
  --sig:linear-gradient(100deg,var(--sig-1),var(--sig-2) 36%,var(--sig-3) 72%,var(--sig-4));
  --accent:#E8A94E;
  --accent-soft:rgba(224,138,60,.14);
  --green:#30D158;   /* kept: macOS window chrome only */

  /* Apple's real production easing */
  --move:cubic-bezier(0.4,0,0.6,1);
  --enter:cubic-bezier(0,0,0.2,1);
  --settle:cubic-bezier(0.33,1,0.68,1);
  --hw:cubic-bezier(0.34,2.16,0.64,1);

  --sf:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text',
       'Inter Display',Inter,'Helvetica Neue',Helvetica,Arial,sans-serif;
  --r:20px;
  --maxw:1120px;
  --pad:clamp(22px,5vw,44px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--text);font-family:var(--sf);
  font-size:17px;font-weight:400;line-height:1.5;letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
.narrow{max-width:780px;margin:0 auto}

/* ---------- type ----------
   Headline tracking of -.03em is a substitution correction for Inter Display,
   which is wider than SF Pro Display. On Apple devices SF Pro loads and the
   correction is small enough to stay invisible. */
h1,h2,h3,h4{font-weight:600;line-height:1.05;letter-spacing:-.03em;text-wrap:balance}
h1{font-size:clamp(44px,7vw,88px);line-height:1.02}
h2{font-size:clamp(32px,4.6vw,56px)}
h3{font-size:clamp(20px,1.8vw,25px);line-height:1.2;letter-spacing:-.022em}
.lede{font-size:clamp(19px,1.85vw,23px);line-height:1.42;color:var(--text-2);letter-spacing:-.016em;font-weight:400}
.label{font-size:14px;font-weight:500;color:var(--accent);letter-spacing:-.006em}
p{max-width:66ch}
.num{font-variant-numeric:tabular-nums}
.dim{color:var(--text-2)}

.grad{
  background:var(--sig);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
}
.rule-sig{height:1px;border:0;background:var(--sig);opacity:.75}

/* ---------- motion: scale, not slide ---------- */
.arrive{opacity:0;transform:scale(.96);will-change:opacity,transform}
.arrive.in{
  opacity:1;transform:scale(1);
  transition:opacity .52s var(--enter),transform .86s var(--settle);
}
.arrive.hw.in{transition:opacity .5s var(--enter),transform 1.05s var(--hw)}
.s1{transition-delay:.05s}.s2{transition-delay:.13s}.s3{transition-delay:.21s}
.s4{transition-delay:.29s}.s5{transition-delay:.37s}.s6{transition-delay:.45s}
@media(prefers-reduced-motion:reduce){
  .arrive{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
}

/* ---------- stage bloom ---------- */
.bloom{position:relative;isolation:isolate}
.bloom::before{
  content:'';position:absolute;inset:-20% 0 auto;height:70vh;z-index:-1;pointer-events:none;
  background:radial-gradient(60% 55% at 50% 30%,rgba(224,138,60,.16),transparent 70%);
}

/* ---------- nav ---------- */
nav{
  position:sticky;top:0;z-index:200;height:48px;
  background:rgba(0,0,0,.72);backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);
}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:48px;gap:20px}
.brand{font-size:15px;font-weight:600;letter-spacing:-.02em;color:var(--text);white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.brand:hover{text-decoration:none}
.nav-links{display:flex;gap:26px;align-items:center}
.nav-links a{font-size:13.5px;color:var(--text-2);letter-spacing:-.008em}
.nav-links a:hover{color:var(--text);text-decoration:none}
.nav-links a[aria-current="page"]{color:var(--text)}
.nav-links a.btn{color:#0A0A0B}
.nav-links a.btn:hover{color:#0A0A0B}
@media(max-width:760px){.nav-links{gap:16px}.nav-links a{font-size:12.5px}}
@media(max-width:500px){.nav-links a.opt{display:none}}
/* below this the wordmark truncates to nonsense, so the mark carries the brand alone */
@media(max-width:430px){.brand span{display:none}.brand .mark-svg{font-size:24px}}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;font-family:inherit;font-size:15px;font-weight:500;letter-spacing:-.012em;
  padding:11px 22px;border-radius:980px;border:1px solid transparent;
  background:var(--sig);background-size:180% 100%;background-position:0% 50%;
  color:#0A0A0B;cursor:pointer;white-space:nowrap;
  transition:background-position .55s var(--move),transform .2s var(--move);
}
.btn:hover{background-position:100% 50%;text-decoration:none;color:#0A0A0B}
.btn:active{transform:scale(.985)}
.btn-ghost{background:none;color:var(--accent);border-color:var(--line-2)}
.btn-ghost:hover{background:rgba(255,255,255,.06);filter:none}
.btn-sm{font-size:13.5px;padding:7px 16px}
.link-more{font-size:16px;color:var(--accent);letter-spacing:-.012em}
.link-more::after{content:' \203A'}
.link-more:hover{text-decoration:underline}

/* ---------- sections ---------- */
.sec{padding:clamp(72px,10vw,140px) 0}
.sec-2{background:var(--bg-2)}
.sec-head{margin-bottom:clamp(38px,5vw,64px)}
.sec-head .label{display:block;margin-bottom:16px}
.sec-head h2{margin-bottom:20px}
.center{text-align:center}
.center p,.center .lede{margin-left:auto;margin-right:auto}

/* ---------- SF Symbols style icons ----------
   Drawn in the SF Symbols visual language rather than the real set, which is
   Apple proprietary and cannot be shipped on the web. */
.sym{width:27px;height:27px;display:block;stroke:currentColor;fill:none;
     stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sym-wrap{
  width:50px;height:50px;border-radius:13px;display:grid;place-items:center;
  background:rgba(255,255,255,.06);border:1px solid var(--line);margin-bottom:20px;
}

/* ---------- cards ---------- */
.grid{display:grid;gap:18px}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
@media(max-width:940px){.g3{grid-template-columns:repeat(2,1fr)}}
@media(max-width:660px){.g3,.g2{grid-template-columns:1fr}}
.card{
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:clamp(24px,2.6vw,32px);transition:background .3s var(--move),border-color .3s var(--move);
}
.card:hover{background:var(--panel-2);border-color:var(--line-2)}
.card h3{margin-bottom:10px}
.card p{color:var(--text-2);font-size:16px;line-height:1.47;max-width:none}
.card .idx{font-size:13px;color:var(--text-3);font-variant-numeric:tabular-nums;display:block;margin-bottom:6px}

/* ---------- MacBook + window ----------
   Notch deliberately omitted: it is the single most Apple-identifying detail and
   Apple's marketing guidelines discourage simulating their hardware. */
.showcase{margin-top:clamp(48px,6vw,84px);perspective:1600px}
.mac{max-width:960px;margin:0 auto;position:relative}
.mac-lid{
  background:linear-gradient(180deg,#3A3A3C,#242426);border-radius:16px 16px 6px 6px;
  padding:11px 11px 14px;box-shadow:0 34px 42px rgba(0,0,0,.62);
}
.mac-screen{
  background:var(--panel);border-radius:9px;overflow:hidden;
  box-shadow:inset 0 1px 0 var(--hairline);
}
.mac-base{
  height:13px;margin:0 auto;width:108%;position:relative;left:-4%;
  background:linear-gradient(180deg,#4A4A4D,#242426);
  border-radius:0 0 12px 12px;
}
@media(max-width:700px){.mac-base{width:100%;left:0}}
.mac-base::after{
  content:'';position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:15%;height:4px;background:rgba(0,0,0,.42);border-radius:0 0 5px 5px;
}
.win-bar{
  display:flex;align-items:center;gap:11px;padding:11px 15px;background:var(--chrome);
  border-bottom:1px solid rgba(0,0,0,.5);
}
.lights{display:flex;gap:6px}
.lights i{width:12px;height:12px;border-radius:50%;display:block}
.lights i:nth-child(1){background:#FF453A}
.lights i:nth-child(2){background:#FEBC2E}
.lights i:nth-child(3){background:#30D158}
.win-title{font-size:12.5px;color:var(--text-3);letter-spacing:-.005em}
.win-body{padding:clamp(15px,1.8vw,22px);background:var(--panel);text-align:left;
  /* fixed: the laptop must not resize as the steps arrive, only its contents change */
  height:clamp(392px,44vh,436px);overflow-y:auto;overscroll-behavior:contain}
.win-body::-webkit-scrollbar{width:6px}
.win-body::-webkit-scrollbar-thumb{background:rgba(255,255,255,.14);border-radius:3px}
/* keep window content clear of the phone that overlaps the lower right */
@media(min-width:900px){.win-body{padding-right:238px}}

/* the pipeline running inside the window */
.win-lead{font-size:13.5px;color:var(--text-2);margin-bottom:11px;line-height:1.45}
.win-lead b{color:var(--text);font-weight:500}
.seg{display:inline-flex;background:rgba(255,255,255,.07);border-radius:9px;padding:3px;gap:2px;flex-wrap:wrap;margin-bottom:16px}
.seg button{
  font-family:inherit;font-size:13px;font-weight:400;letter-spacing:-.008em;border:none;
  background:transparent;color:var(--text-2);padding:7px 14px;border-radius:7px;cursor:pointer;
  transition:background .22s var(--move),color .22s var(--move);
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:var(--text)}
.steps{list-style:none;display:flex;flex-direction:column}
.steps li{
  display:grid;grid-template-columns:22px 1fr;gap:12px;padding:10px 0;
  border-bottom:1px solid var(--line);opacity:0;transform:scale(.96);
  animation:arriveIn .5s var(--settle) forwards;
}
@keyframes arriveIn{to{opacity:1;transform:scale(1)}}
.steps li:last-child{border-bottom:none}
.steps .i{font-size:12.5px;color:var(--text-3);font-variant-numeric:tabular-nums;padding-top:2px}
.steps .b{font-size:14.5px;line-height:1.4;letter-spacing:-.01em}
.steps .stage{display:block;font-size:11px;font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:var(--accent);margin-bottom:3px}
.steps .b strong{font-weight:600;color:#fff}
.steps .m{display:block;font-size:12.5px;color:var(--text-3);margin-top:3px}
.verdict{
  margin-top:12px;padding:13px 15px;border-radius:12px;
  background:var(--accent-soft);border:1px solid rgba(232,169,78,.34);
  font-size:14.5px;line-height:1.45;opacity:0;animation:arriveIn .5s var(--settle) forwards;
}
.verdict strong{color:#fff;font-weight:600}

/* iPhone, overlapping the MacBook */
.phone{
  position:absolute;right:-8px;bottom:-46px;width:186px;z-index:3;
  background:linear-gradient(180deg,#3A3A3C,#232325);border-radius:30px;padding:5px;
  box-shadow:0 30px 44px rgba(0,0,0,.7);
}
@media(max-width:820px){.phone{position:static;margin:26px auto 0;right:auto;bottom:auto}}
.phone-screen{background:#0B141A;border-radius:26px;overflow:hidden;padding:12px 11px 15px}
.phone-hdr{display:flex;align-items:center;gap:7px;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08);margin-bottom:11px}
.phone-dot{width:21px;height:21px;border-radius:50%;background:var(--green);display:grid;place-items:center;flex:none}
.phone-hdr span{font-size:11.5px;color:var(--text-2);letter-spacing:-.005em}
.bub{border-radius:12px;padding:8px 10px;font-size:11.5px;line-height:1.38;margin-bottom:7px;max-width:92%}
.bub-in{background:#1F2C33;color:var(--text)}
.bub-out{background:#005C4B;color:#fff;margin-left:auto}
.bub-t{display:block;font-size:9.5px;color:var(--text-3);margin-top:3px}
.showcase-cap{text-align:center;margin-top:clamp(58px,6vw,76px);font-size:15px;color:var(--text-3)}

/* ---------- figures ---------- */
.figs{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
@media(max-width:760px){.figs{grid-template-columns:repeat(2,1fr);gap:28px}}
.fig .n{font-size:clamp(32px,3.6vw,46px);font-weight:600;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums}
.fig .l{font-size:14px;color:var(--text-2);margin-top:9px;line-height:1.35}

/* ---------- footer ---------- */
footer{background:var(--bg-2);border-top:1px solid var(--line);padding:42px 0 52px;font-size:13px;color:var(--text-3)}
.foot-in{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot-links{display:flex;gap:22px;flex-wrap:wrap}
footer a{color:var(--text-2)}
footer a:hover{color:var(--text)}

/* ---------- integrations ---------- */
.logos{list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:9px 10px}
.logos li{display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:980px;padding:8px 15px;font-size:13px;color:var(--text-2)}
.logos img{width:16px;height:16px;object-fit:contain;filter:grayscale(1) brightness(1.9);opacity:.6;transition:filter .25s var(--move),opacity .25s var(--move)}
.logos li:hover img{filter:none;opacity:1}

/* ---------- section fields ----------
   Apple product pages are never flat black; each section sits on a soft field. */
.field{position:relative;isolation:isolate;overflow:hidden}
.field::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(70% 50% at 50% 0%,rgba(255,255,255,.055),transparent 62%);
}
.field-gold::before{background:radial-gradient(72% 55% at 14% 0%,rgba(240,190,92,.13),transparent 62%),radial-gradient(58% 50% at 88% 18%,rgba(224,138,60,.10),transparent 62%)}
.field-warm::before{background:radial-gradient(66% 52% at 84% 0%,rgba(196,82,47,.18),transparent 60%),radial-gradient(58% 48% at 10% 26%,rgba(240,190,92,.10),transparent 62%)}

/* ---------- module shelf ----------
   Stripe Press: each module is an object you receive, not a bullet. Presented as
   an Apple-style snap carousel so six objects read as a shelf. */
.shelf-wrap{margin-inline:calc(50% - 50vw);width:100vw}
.shelf{
  display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px max(var(--pad),calc(50vw - var(--maxw)/2 + var(--pad))) 26px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.shelf::-webkit-scrollbar{display:none}
.cover{
  flex:0 0 clamp(244px,25vw,304px);scroll-snap-align:center;aspect-ratio:3/4;
  position:relative;overflow:hidden;border-radius:24px;border:1px solid var(--line);
  background:var(--panel);display:flex;flex-direction:column;justify-content:flex-end;
  padding:26px;text-decoration:none;color:inherit;
  transition:transform .55s var(--settle),border-color .3s var(--move);
}
.cover:hover{transform:translateY(-7px);border-color:var(--line-2);text-decoration:none}
.cover::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(115% 78% at 18% 2%,var(--h1),transparent 62%),
    radial-gradient(95% 68% at 92% 26%,var(--h2),transparent 60%),
    linear-gradient(180deg,rgba(0,0,0,.06) 38%,rgba(0,0,0,.88));
}
.cover .mark{position:absolute;top:24px;left:24px;color:#fff;opacity:.92}
.cover .big{
  position:absolute;top:19px;right:25px;font-size:42px;font-weight:600;
  letter-spacing:-.045em;color:#fff;opacity:.3;font-variant-numeric:tabular-nums;
}
.cover .ghost{position:absolute;right:-16%;bottom:-6%;width:66%;height:auto;opacity:.09;color:#fff;stroke-width:.9}
.cover h3,.cover p{position:relative;z-index:1}
.cover h3{margin-bottom:8px;color:#fff}
.cover p{font-size:14.5px;line-height:1.42;color:rgba(255,255,255,.72);max-width:none}
.shelf-hint{
  display:flex;align-items:center;gap:8px;justify-content:center;
  font-size:13.5px;color:var(--text-3);margin-top:2px;
}

/* ---------- craft list ----------
   rauno.me: not case studies, a scrolling list of small proven details. */
.craft{border-top:1px solid var(--line);margin-top:34px}
.craft li{
  list-style:none;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;
  padding:14px 0;border-bottom:1px solid var(--line);
}
@media(max-width:620px){.craft li{grid-template-columns:1fr;gap:4px}}
.craft .w{font-size:16px;letter-spacing:-.014em;line-height:1.4}
.craft .s{font-size:13px;color:var(--text-3);white-space:nowrap}

/* ---------- Beyond the systems: an image mosaic ----------
   maggieappleton.com solved identity visually rather than by listing skills.
   The artwork is generated on the box by make-art.py, one palette across five
   very different fields, so it reads as a set rather than five stock pictures. */
.mosaic{display:grid;grid-template-columns:repeat(12,1fr);gap:16px}
@media(max-width:900px){.mosaic{grid-template-columns:repeat(6,1fr)}}
@media(max-width:620px){.mosaic{grid-template-columns:1fr;gap:14px}}
.tile{
  position:relative;overflow:hidden;border-radius:22px;border:1px solid var(--line);
  background:var(--panel);display:flex;flex-direction:column;justify-content:flex-end;
  padding:24px;min-height:210px;
}
.tile img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 1.1s var(--settle);
}
.tile:hover img{transform:scale(1.045)}
.tile::after{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.82));
}
.tile > *{position:relative;z-index:2}
.tile .cap{font-size:13px;color:rgba(255,255,255,.62);margin-bottom:6px}
.tile h3{color:#fff;letter-spacing:-.024em}
.tile p{color:rgba(255,255,255,.74);font-size:15px;line-height:1.45;margin-top:8px;max-width:46ch}

.t-tall{grid-column:span 4;grid-row:span 2;min-height:440px}
.t-wide{grid-column:span 8;min-height:280px}
.t-half{grid-column:span 4;min-height:250px}
.t-text{grid-column:span 8;background:var(--panel);border:1px solid var(--line);
        border-radius:22px;padding:clamp(26px,3vw,38px);display:flex;flex-direction:column;justify-content:center}
.t-full{grid-column:span 12;min-height:340px}
@media(max-width:900px){
  .t-tall{grid-column:span 6;grid-row:span 2}
  .t-wide,.t-text,.t-full{grid-column:span 6}
  .t-half{grid-column:span 3}
}
@media(max-width:620px){
  .t-tall,.t-wide,.t-half,.t-text,.t-full{grid-column:span 1;grid-row:auto;min-height:230px}
  .t-tall{min-height:330px}
}
.qs-big{list-style:none;counter-reset:q}
.qs-big li{
  counter-increment:q;padding:16px 0;border-bottom:1px solid var(--line);
  font-size:clamp(17px,1.6vw,20px);letter-spacing:-.02em;line-height:1.35;
  display:grid;grid-template-columns:30px 1fr;gap:12px;
}
.qs-big li:last-child{border-bottom:none;padding-bottom:0}
.qs-big li::before{content:counter(q,decimal-leading-zero);font-size:13px;color:var(--accent);padding-top:5px;font-variant-numeric:tabular-nums}


/* ---------- the mark ----------
   A generalist is many separate arcs that resolve into one system, so the logo
   is exactly that: four rings at different radii, each drawing itself in and
   rotating into alignment. Inline SVG, no runtime library, themed by the tokens. */
.mark-svg{width:1em;height:1em;display:block;overflow:visible;flex:none}
.mark-svg circle{fill:none;stroke-linecap:round;transform-origin:24px 24px}
.mark-svg .r1{stroke:var(--sig-1);stroke-width:2.6;stroke-dasharray:66 132}
.mark-svg .r2{stroke:var(--sig-2);stroke-width:2.6;stroke-dasharray:44 110}
.mark-svg .r3{stroke:var(--sig-3);stroke-width:2.6;stroke-dasharray:30 88}
.mark-svg .r4{stroke:var(--sig-4);stroke-width:2.6;stroke-dasharray:17 62}
.mark-svg .core{fill:var(--sig-1);stroke:none}
.mark-svg .r1{animation:mk1 1.5s var(--settle) both}
.mark-svg .r2{animation:mk2 1.5s var(--settle) .10s both}
.mark-svg .r3{animation:mk3 1.5s var(--settle) .20s both}
.mark-svg .r4{animation:mk4 1.5s var(--settle) .30s both}
.mark-svg .core{animation:mkc .7s var(--settle) .74s both}
@keyframes mk1{from{transform:rotate(-160deg);stroke-dashoffset:132;opacity:0}
               to{transform:rotate(0deg);stroke-dashoffset:0;opacity:1}}
@keyframes mk2{from{transform:rotate(160deg);stroke-dashoffset:110;opacity:0}
               to{transform:rotate(18deg);stroke-dashoffset:0;opacity:1}}
@keyframes mk3{from{transform:rotate(-175deg);stroke-dashoffset:88;opacity:0}
               to{transform:rotate(28.5deg);stroke-dashoffset:0;opacity:1}}
@keyframes mk4{from{transform:rotate(150deg);stroke-dashoffset:62;opacity:0}
               to{transform:rotate(41.5deg);stroke-dashoffset:0;opacity:1}}
@keyframes mkc{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
/* the rings ease apart again on hover, then settle back */
.mark-host:hover .r1{transform:rotate(-26deg)}
.mark-host:hover .r2{transform:rotate(52deg)}
.mark-host:hover .r3{transform:rotate(-14deg)}
.mark-host:hover .r4{transform:rotate(96deg)}
.mark-host .mark-svg circle{transition:transform .85s var(--settle)}
@media(prefers-reduced-motion:reduce){
  .mark-svg circle{animation:none;opacity:1;stroke-dashoffset:0;transition:none}
  .mark-svg .r2{transform:rotate(18deg)}.mark-svg .r3{transform:rotate(28.5deg)}
  .mark-svg .r4{transform:rotate(41.5deg)}.mark-svg .core{transform:scale(1)}
}

/* nav lockup */
.brand{display:flex;align-items:center;gap:9px}
.brand .mark-svg{font-size:21px}

/* hero lockup */
.lockup{display:flex;flex-direction:column;align-items:center;gap:16px;margin-bottom:30px}
.lockup .mark-svg{font-size:clamp(52px,6vw,68px)}
.wordmark{
  font-size:clamp(11px,1.1vw,13px);font-weight:600;letter-spacing:.30em;
  text-transform:uppercase;color:var(--text-2);
}

/* ---------- about, reformatted ---------- */
.me-top{display:flex;align-items:center;gap:clamp(20px,3vw,38px);flex-wrap:wrap;margin-bottom:clamp(30px,4vw,48px)}
.me-top img{
  width:clamp(132px,15vw,186px);aspect-ratio:1/1;height:auto;object-fit:cover;
  border-radius:24px;border:1px solid var(--line-2);flex:none;
}
.me-top .who{flex:1 1 320px;min-width:0}
.me-top h2{margin-bottom:14px}
.me-top .role{font-size:15px;color:var(--text-3)}
.me-prose{max-width:70ch}
.me-prose p{color:var(--text-2);margin-bottom:16px}
.me-prose p.first{color:var(--text);font-size:20px;line-height:1.44;letter-spacing:-.018em}
.me-figs{margin-top:clamp(30px,4vw,44px);padding-top:30px;border-top:1px solid var(--line)}

/* ---------- booking assistant ---------- */
.chat{position:fixed;right:clamp(14px,2.5vw,26px);bottom:clamp(14px,2.5vw,26px);z-index:400;
      display:flex;flex-direction:column;align-items:flex-end;gap:12px}
.chat-fab{
  display:flex;align-items:center;gap:9px;font-family:inherit;font-size:14.5px;font-weight:500;
  letter-spacing:-.012em;padding:11px 19px 11px 14px;border-radius:980px;border:1px solid var(--line-2);
  background:rgba(26,25,23,.92);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  color:var(--text);cursor:pointer;box-shadow:0 12px 30px rgba(0,0,0,.5);
  transition:transform .3s var(--settle),border-color .3s var(--move);
}
.chat-fab .mark-svg{font-size:22px}
.chat-fab:hover{transform:translateY(-2px);border-color:var(--accent)}
.chat.nudge .chat-fab{animation:nudge 2.4s var(--move) 2}
@keyframes nudge{0%,100%{transform:none}12%{transform:translateY(-7px)}24%{transform:none}}
.chat.is-open .chat-fab{display:none}
.chat-panel{
  width:min(370px,calc(100vw - 28px));background:var(--panel);border:1px solid var(--line-2);
  border-radius:22px;overflow:hidden;box-shadow:0 26px 60px rgba(0,0,0,.66);
  display:flex;flex-direction:column;max-height:min(560px,calc(100vh - 90px));
}
/* display:flex outranks the hidden attribute's UA display:none, so say it again */
.chat-panel[hidden]{display:none}
.chat-top{display:flex;align-items:center;gap:9px;padding:14px 16px;border-bottom:1px solid var(--line);font-size:14px}
.chat-top strong{font-weight:500;flex:1}
.chat-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none}
.chat-x{background:none;border:none;color:var(--text-3);font-size:21px;line-height:1;cursor:pointer;padding:0 2px;font-family:inherit}
.chat-x:hover{color:var(--text)}
.chat-log{padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:9px;flex:1;min-height:180px}
.msg{max-width:88%;padding:10px 13px;border-radius:15px;font-size:14.5px;line-height:1.45;
     animation:arriveIn .38s var(--settle) both}
.msg-bot{background:var(--panel-2);border:1px solid var(--line);align-self:flex-start;border-bottom-left-radius:6px}
.msg-you{background:var(--sig);color:#0A0A09;align-self:flex-end;border-bottom-right-radius:6px;font-weight:500}
.chat-quick{display:flex;flex-wrap:wrap;gap:7px;padding:0 16px 10px}
.chat-quick:empty{padding:0}
.chat-quick button{
  font-family:inherit;font-size:13px;padding:7px 13px;border-radius:980px;cursor:pointer;
  border:1px solid var(--line-2);background:none;color:var(--accent);
  transition:background .2s var(--move),color .2s var(--move);
}
.chat-quick button:hover{background:var(--accent);color:#0A0A09}
.chat-form{display:flex;gap:8px;padding:12px 14px;border-top:1px solid var(--line)}
.chat-form input{
  flex:1;min-width:0;background:var(--bg-2);border:1px solid var(--line);border-radius:980px;
  padding:10px 15px;color:var(--text);font-family:inherit;font-size:14.5px;
}
.chat-form input::placeholder{color:var(--text-3)}
.chat-form input:focus{outline:none;border-color:var(--accent)}
.chat-form button{
  flex:none;width:38px;height:38px;border-radius:50%;border:none;background:var(--sig);
  color:#0A0A09;font-size:17px;cursor:pointer;font-family:inherit;
}
@media(max-width:520px){.chat-panel{max-height:calc(100vh - 110px)}}
@media print{.chat{display:none}}

/* ---------- tool inventory ---------- */
.tool-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,3vw,40px)}
@media(max-width:820px){.tool-grid{grid-template-columns:1fr;gap:26px}}
.tool-group h3{font-size:15px;font-weight:500;letter-spacing:-.012em;color:var(--accent);margin-bottom:14px}
.tool-chips{list-style:none;display:flex;flex-wrap:wrap;gap:7px}
.tool-chips li{
  display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:980px;padding:6px 13px;
  font-size:13px;color:var(--text-2);transition:border-color .2s var(--move),color .2s var(--move);
}
.tool-chips li:hover{border-color:var(--line-2);color:var(--text)}
.tool-chips img{width:16px;height:16px;object-fit:contain;filter:grayscale(1) brightness(1.85);opacity:.62;transition:filter .25s var(--move),opacity .25s var(--move)}
.tool-chips li:hover img{filter:none;opacity:1}
.tool-chips .t-only{color:var(--text-3)}

/* ---------- risk-free week ---------- */
.rf{max-width:760px;margin:0 auto;text-align:center}
.rf-badge{
  display:inline-flex;align-items:center;gap:8px;font-size:12.5px;letter-spacing:.02em;
  border:1px solid var(--line-2);border-radius:980px;padding:6px 15px;color:var(--accent);margin-bottom:22px;
}
.rf-dot{width:6px;height:6px;border-radius:50%;background:var(--sig-2);animation:rfp 2s ease-in-out infinite}
@keyframes rfp{0%,100%{opacity:1}50%{opacity:.35}}
.rf-h{font-size:clamp(30px,4.4vw,52px);margin-bottom:18px}
.rf-lede{font-size:clamp(18px,1.7vw,21px);color:var(--text-2);margin:0 auto 30px}
.rf-steps{list-style:none;text-align:left;max-width:620px;margin:0 auto 26px;display:flex;flex-direction:column;gap:2px}
.rf-steps li{display:grid;grid-template-columns:30px 1fr;gap:14px;padding:15px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.45;color:var(--text-2)}
.rf-steps li:last-child{border-bottom:none}
.rf-steps li span{font-size:13px;color:var(--accent);font-variant-numeric:tabular-nums;padding-top:3px}
.rf-steps strong{color:var(--text);font-weight:500}
.rf-fine{font-size:14px;color:var(--text-3);max-width:56ch;margin:0 auto 28px;line-height:1.5}

/* ---------- ways to work together ---------- */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:stretch}
@media(max-width:900px){.ways{grid-template-columns:1fr;max-width:520px;margin:0 auto}}
.way{
  background:var(--panel);border:1px solid var(--line);border-radius:22px;
  padding:clamp(24px,2.6vw,32px);display:flex;flex-direction:column;
  transition:border-color .3s var(--move),background .3s var(--move);
}
.way:hover{border-color:var(--line-2);background:var(--panel-2)}
.way-mid{border-color:rgba(232,169,78,.42);background:var(--panel-2)}
.way-badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;font-size:11.5px;
  letter-spacing:.02em;border:1px solid var(--line-2);border-radius:980px;
  padding:5px 12px;color:var(--accent);margin-bottom:18px;
}
.way-price{font-size:clamp(34px,3.8vw,46px);font-weight:600;letter-spacing:-.04em;line-height:1;margin-bottom:14px}
/* the card without a badge would otherwise sit its price higher than the others */
.way > .way-price:first-child{margin-top:47px}
@media(max-width:900px){.way > .way-price:first-child{margin-top:0}}
.way-price span{display:block;font-size:13px;font-weight:400;letter-spacing:-.01em;color:var(--text-3);margin-top:8px}
.way h3{margin-bottom:10px}
.way > p{color:var(--text-2);font-size:15.5px;line-height:1.47;margin-bottom:18px;max-width:none}
.way-list{list-style:none;display:flex;flex-direction:column;gap:9px;margin-bottom:24px;flex:1}
.way-list li{font-size:14px;color:var(--text-2);padding-left:18px;position:relative;line-height:1.42}
.way-list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:var(--accent);opacity:.75}
.way .btn{align-self:flex-start}

/* ---------- who I work with ---------- */
.fit-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media(max-width:820px){.fit-grid{grid-template-columns:1fr}}
.fit-card{background:var(--panel);border:1px solid var(--line);border-radius:22px;padding:clamp(24px,2.6vw,32px)}
.fit-card h3{margin-bottom:16px}
.fit-card ul{list-style:none;display:flex;flex-direction:column;gap:12px}
.fit-card li{display:grid;grid-template-columns:18px 1fr;gap:11px;font-size:15.5px;line-height:1.45;color:var(--text-2)}
.fit-card li i{font-style:normal;font-weight:600}
.fit-yes li i{color:var(--accent)}
.fit-no li i{color:var(--text-3)}
.fit-no li{color:var(--text-3)}
.sectors{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(26px,3vw,38px);justify-content:center}
.sectors li{list-style:none;font-size:13.5px;color:var(--text-2);background:rgba(255,255,255,.045);
  border:1px solid var(--line);border-radius:980px;padding:7px 15px}

/* ---------- how I work ---------- */
.model{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
       border:1px solid var(--line);border-radius:22px;overflow:hidden}
@media(max-width:900px){.model{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.model{grid-template-columns:1fr}}
.step{background:var(--panel);padding:clamp(22px,2.4vw,30px);transition:background .3s var(--move)}
.step:hover{background:var(--panel-2)}
.step .n{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);
         font-variant-numeric:tabular-nums;display:block;margin-bottom:12px}
.step h3{margin-bottom:9px;font-size:clamp(18px,1.6vw,21px)}
.step p{color:var(--text-2);font-size:15px;line-height:1.47;max-width:none}

/* ---------- slash pricing ---------- */
.was{
  text-decoration:line-through;text-decoration-thickness:1.5px;
  text-decoration-color:rgba(255,255,255,.34);
  color:var(--text-3);font-weight:400;margin-right:.42em;
  font-size:.52em;letter-spacing:-.01em;vertical-align:baseline;
}
.speed .sn .was{font-size:.78em;margin-right:.4em}
.way-price .was{display:inline;font-size:.44em;margin-right:.4em;color:var(--text-3)}

/* ---------- how each specialty gets built ---------- */
.buildseq{padding-bottom:26px}
.buildseq h4{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.bsteps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:860px){.bsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.bsteps{grid-template-columns:1fr}}
.bsteps li{
  position:relative;padding:16px 16px 16px 44px;background:var(--bg-2);border-radius:12px;
  font-size:14.5px;line-height:1.42;color:var(--text-2);
}
.bsteps li span{
  position:absolute;left:16px;top:15px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;font-size:11px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);font-variant-numeric:tabular-nums;
}
.mod-t p b{color:var(--text);font-weight:500}