/* U-gr8 brand kit v1 · 9 Oct 2026 · site motion v1 added 13 Oct 2026 (block at the end)
   One house, two registers.
   body[data-register="ops"]  Operations: founders, Operator OS, methods. Charcoal band, plum accent.
   body[data-register="va"]   Assistants: VA resources, atelier, community material. Lilac band, plum accent.
   Shared: logo, Trocchi (titles) + Open Sans (text), plum #5E3B7E, ink #0F172A.
   Glyph rule: fonts carry Latin + French. No arrows, ticks or stars as characters; use the inline SVG icons. */

@font-face{font-family:'Trocchi';src:url(fonts/trocchi-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-latin-300-normal.woff2) format('woff2');font-weight:300;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-latin-400-normal.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-latin-400-italic.woff2) format('woff2');font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-latin-600-normal.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Open Sans';src:url(fonts/open-sans-latin-700-normal.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* charter */
  --plum:#5E3B7E; --lilac:#E0D3EE; --mist:#F0EBF4; --grey:#A9A9B8; --ink:#0F172A;
  /* declination */
  --char:#2D2E33; --paper:#FBFAFC; --tint:#F3EEF7; --mut:#5B5B6B; --line:#D9D4DF;
  --plum-2:#7D55A1; --plum-3:#C9B6DC;
  /* register defaults (ops) */
  --band:var(--char); --band-ink:#F0EBF4; --band-mut:#B9B3C2; --band-mark:var(--lilac);
  --bg:var(--paper); --card:#fff; --accent:var(--plum);
  --serif:'Trocchi',Georgia,serif; --sans:'Open Sans',Arial,sans-serif;
}
body[data-register="va"]{
  --band:var(--lilac); --band-ink:var(--ink); --band-mut:#4E3F5E; --band-mark:var(--plum);
  --bg:#FDFCFE; --card:#fff;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-print-color-adjust:exact;print-color-adjust:exact}
h1,h2,h3,.serif{font-family:var(--serif);font-weight:400;letter-spacing:0}
a{color:var(--plum);text-decoration:none;border-bottom:1px solid rgba(94,59,126,.35)}
a:hover,a:focus-visible{border-bottom-color:var(--plum)}
em,i{font-style:italic}
strong,b{font-weight:600}
.svg-ico{width:1em;height:1em;display:inline-block;vertical-align:-.12em}

/* ---------- brand lockup ---------- */
.lockup{display:inline-flex;align-items:center;gap:.5em;color:inherit;border:0}
.lockup .mark{height:1.55em;width:auto;color:var(--band-mark)}
.lockup .word{height:1.05em;width:auto}
.lockup .sub{font-size:.62em;letter-spacing:.24em;text-transform:uppercase;color:var(--band-mut);
  border-left:1px solid currentColor;padding-left:.9em;margin-left:.2em;line-height:1.6}

/* =========================================================
   SCREEN: long-form guide (resources, tutorials, playbooks)
   ========================================================= */
.g-band{background:var(--band);color:var(--band-ink)}
.g-band .in{max-width:760px;margin:0 auto;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:20px}
.g-band .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--band-mut);text-align:right}
.g-hero{background:var(--band);color:var(--band-ink)}
.g-hero .in{max-width:760px;margin:0 auto;padding:28px 24px 44px}
.eyebrow{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--accent)}
.g-hero .eyebrow{color:var(--band-mut)}
.g-hero h1{font-size:clamp(30px,5vw,44px);line-height:1.15;margin:.35em 0 .3em}
.g-hero .sub{font-style:italic;font-size:19px;color:var(--band-mut);max-width:40em}
body[data-register="ops"] .g-hero .sub{color:var(--band-mut)}
.wrap{max-width:760px;margin:0 auto;padding:44px 24px 72px}
.wrap>*+*{margin-top:1em}
.wrap h2{font-size:26px;line-height:1.25;margin-top:2.1em;padding-top:.9em;border-top:1px solid var(--line)}
.wrap h2 .n{color:var(--accent);margin-right:.35em}
.wrap h3{font-size:20px;line-height:1.3;margin-top:1.6em}
.wrap ul,.wrap ol{padding-left:1.3em}
.wrap li+li{margin-top:.45em}
.wrap li::marker{color:var(--accent)}
.lede{font-size:19px;line-height:1.55}
.muted{color:var(--mut)}
.small{font-size:14.5px}
.thesis{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);padding:18px 22px;
  font-family:var(--serif);font-size:20px;line-height:1.45}
.callout{background:var(--tint);border-radius:6px;padding:18px 22px}
.callout .eyebrow{display:block;margin-bottom:.4em}
.callout.warn{background:#FFF7ED;border-left:4px solid #B45309}
.card{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:20px 22px}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}
.cards .card h3{margin-top:0;font-size:19px}
.steps{list-style:none;padding:0!important;counter-reset:s}
.steps>li{counter-increment:s;position:relative;padding-left:46px;min-height:34px}
.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:32px;height:32px;border-radius:50%;
  background:var(--plum);color:#fff;font-family:var(--serif);display:grid;place-items:center;font-size:16px}
.steps>li+li{margin-top:1em}
table.t{width:100%;border-collapse:collapse;font-size:15.5px;background:var(--card)}
table.t th{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--plum);text-align:left;
  padding:10px 12px;border-bottom:2px solid var(--plum);background:var(--tint)}
table.t td{padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.tablewrap{overflow-x:auto}
pre,code,.prompt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
code{font-size:.9em;background:var(--tint);padding:.1em .35em;border-radius:3px}
.prompt{display:block;white-space:pre-wrap;background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px 18px;
  font-size:14px;line-height:1.55;max-height:420px;overflow:auto}
.copybar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:.5em;font-family:var(--sans);font-weight:600;font-size:16px;
  background:var(--plum);color:#fff;border:0;border-radius:6px;padding:12px 20px;cursor:pointer;text-decoration:none}
.btn:hover{background:#4B2F66}
.btn.ghost{background:transparent;color:var(--plum);border:1.5px solid var(--plum)}
.g-foot{border-top:1px solid var(--line);margin-top:56px;padding-top:22px;font-size:13.5px;color:var(--mut);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 24px}
.g-foot .lockup{font-size:16px;color:var(--ink)}
.g-foot .lockup .mark{color:var(--plum)}
.credit{font-size:13.5px;color:var(--mut);font-style:italic}

@media (max-width:640px){
  body{font-size:16px}
  .g-band .in{padding:16px;font-size:17px}
  .g-band .tag{display:none}
  .g-hero .in{padding:20px 16px 32px}
  .wrap{padding:32px 16px 56px}
  .wrap h2{font-size:22px}
  .thesis{font-size:18px;padding:16px 18px}
}

/* =========================================================
   PRINT: A4 sheets (printables, method notes, one-pagers)
   Wrap each page in <section class="sheet">. Fixed 210 x 297 mm.
   ========================================================= */
@page{size:A4;margin:0}
body.print{background:#fff;font-size:9.6pt;line-height:1.5;width:210mm}
.sheet{width:210mm;height:297mm;position:relative;overflow:hidden;background:#fff;page-break-after:always;break-after:page;
  display:flex;flex-direction:column}
.sheet:last-child{page-break-after:auto;break-after:auto}
.s-band{background:var(--band);color:var(--band-ink);height:17mm;padding:0 14mm;display:flex;align-items:center;justify-content:space-between;flex:none}
.s-band .lockup{font-size:13pt}
.s-band .tag{font-size:6.8pt;letter-spacing:.22em;text-transform:uppercase;color:var(--band-mut)}
.s-body{padding:9mm 14mm 0;flex:1;display:flex;flex-direction:column;min-height:0}
.s-body>*+*{margin-top:3.2mm}
.s-body .eyebrow{font-size:7pt;letter-spacing:.22em}
.s-body h1{font-size:21pt;line-height:1.15;margin-top:1mm}
.s-body .sub{font-style:italic;color:var(--mut);font-size:10pt;margin-top:1mm}
.s-body h2{font-size:13pt;line-height:1.25;margin-top:5mm}
.s-body h3{font-size:10.5pt;margin-top:3mm}
.s-body .lede{font-size:10.4pt;line-height:1.5}
.s-body ul,.s-body ol{padding-left:4.5mm}
.s-body li+li{margin-top:1mm}
.s-body li::marker{color:var(--accent)}
.s-body .thesis{font-size:11.5pt;padding:3.5mm 4.5mm;border-left-width:1.2mm}
.s-body .callout{padding:3.5mm 4.5mm;border-radius:1.5mm}
.s-body .callout .eyebrow{margin-bottom:1mm}
.s-body .cards{grid-template-columns:repeat(3,1fr);gap:3mm}
.s-body .card{padding:3.5mm 4mm;border-radius:1.5mm;border-top:.8mm solid var(--plum)}
.s-body .card h3{margin-top:0;font-size:10.5pt}
.s-body .card p{font-size:8.6pt;line-height:1.45;color:#2b2f3a}
.s-body table.t{font-size:8.6pt}
.s-body table.t th{font-size:6.8pt;padding:2mm 2.5mm}
.s-body table.t td{padding:2mm 2.5mm}
table.fill td{height:9mm}
.lines{display:flex;flex-direction:column;gap:0}
.lines i{display:block;height:8mm;border-bottom:1px solid var(--line)}
.box{border:1px solid var(--line);border-radius:1.5mm;padding:3mm 4mm}
.box .lab{font-size:6.8pt;letter-spacing:.18em;text-transform:uppercase;color:var(--plum);font-weight:600}
.grow{flex:1}
.s-foot{flex:none;height:12mm;margin:0 14mm;border-top:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;
  font-size:6.8pt;color:var(--mut);gap:6mm}
.s-foot .lockup{font-size:8.5pt;color:var(--ink)}
.s-foot .lockup .mark{color:var(--plum)}
.s-foot .pg{font-variant-numeric:tabular-nums;white-space:nowrap}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:6mm}
.check{display:inline-block;width:3.2mm;height:3.2mm;border:1px solid var(--plum);border-radius:.6mm;vertical-align:-.5mm;margin-right:1.8mm}

@media print{ .no-print{display:none!important} }
table.fill td+td{border-left:1px solid var(--line)}
table.fill{border:1px solid var(--line)}
.g-band+.g-hero{margin-top:-1px}

/* =========================================================
   SITE MOTION · Motion v1 · 13 Oct 2026 · motion map v2, approved by Melissa on 13 Oct
   CSS only, no library. A page moves only if the build gives its body data-motion="full" (home, Assistants
   hub, 1:1 pages) or "quiet" (Operations). Everything sits inside prefers-reduced-motion: no-preference;
   scroll reveals also need view timelines (@supports), so other browsers get the static page.
   Only opacity and transform move (entrances use transform, hover lifts use translate, so the two never
   cancel each other on a door card); colours change as before. Focus rings are never removed.
   Out: parallax, scroll-jacking, smooth scrolling, cursor effects, loops, autoplay; the legal pages,
   the room, the booking pages and the buttons to Stripe.
   ========================================================= */
:root{--m-ease:cubic-bezier(.22,.61,.36,1);--m-enter:420ms;--m-photo:480ms;--m-step:110ms;--m-ui:180ms;--m-link:160ms}
@keyframes u8-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes u8-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  /* on load, once: headline and sub line at 0, baseline at +110 ms, photo at +220 ms; all done by 700 ms */
  body[data-motion] .hero h1,
  body[data-motion] .hero .sub{animation:u8-in var(--m-enter) var(--m-ease) both}
  body[data-motion] .nav .baseline{animation:u8-in var(--m-enter) var(--m-ease) var(--m-step) both}
  body[data-motion="full"] .hero .portrait{animation:u8-in var(--m-photo) var(--m-ease) calc(var(--m-step) * 2) both}
  /* hover and focus: links fill their underline; buttons lift 1 px and their arrow moves 3 px */
  body[data-motion] a:not(.btn){transition:border-bottom-color var(--m-link) var(--m-ease),color var(--m-link) var(--m-ease)}
  body[data-motion] .btn{transition:translate var(--m-ui) var(--m-ease),background-color var(--m-ui) var(--m-ease)}
  body[data-motion] .btn .svg-ico{transition:translate var(--m-ui) var(--m-ease)}
  body[data-motion] .btn:hover,
  body[data-motion] .btn:focus-visible{translate:0 -1px}
  body[data-motion] .btn:hover .svg-ico,
  body[data-motion] .btn:focus-visible .svg-ico{translate:3px 0}
  /* the buttons to Stripe: colour change only, instant, as before */
  body[data-motion] a.btn[href^="https://buy.stripe.com/"],
  body[data-motion] a.btn[href^="https://buy.stripe.com/"] .svg-ico{transition:none;translate:none}
  /* door cards on the home: lift 2 px with a shadow, the arrow follows; keyboard focus does the same */
  body[data-motion="full"] .door{transition:translate var(--m-ui) var(--m-ease),box-shadow var(--m-ui) var(--m-ease)}
  body[data-motion="full"] .door:hover,
  body[data-motion="full"] .door:focus-within{translate:0 -2px;box-shadow:0 14px 30px -18px rgba(15,23,42,.45)}
  body[data-motion="full"] .door:hover .btn .svg-ico,
  body[data-motion="full"] .door:focus-within .btn .svg-ico{translate:3px 0}
  /* on scroll: each block fades in and rises 12 px, done by the time it is 80 % in view */
  @supports (animation-timeline:view()){
    body[data-motion] .sec>.k,
    body[data-motion] .sec h2,
    body[data-motion="full"] .doors .door,
    body[data-motion="full"] .sec>.arc,
    body[data-motion="full"] .tiles .tile,
    body[data-motion="full"] .contact .card,
    body[data-motion="full"] .acquis .acq,
    body[data-motion="full"] .offerc,
    body[data-motion="full"] .rooms,
    body[data-motion="full"] .fit .card,
    body[data-motion="full"] .prac .card,
    body[data-motion="full"] .me>*{animation:u8-reveal auto var(--m-ease) both;animation-timeline:view();animation-range:entry 0% entry 80%}
  }
}