/* cal-skin — cal.com-inspired treatment layered over br.css.
   The page lives inside one large bordered rounded panel over the sky;
   headings switch to Cal Sans (self-hosted, SIL OFL — license json beside
   the font). A skin, not a fork: every colour rides the existing theme
   variables, so light / dark / blade all keep working. Remove this file
   and the site returns to the previous look. */

@font-face{
  font-family:'Cal Sans';
  src:url('/assets/fonts/CalSansVF.woff2') format('woff2');
  font-weight:400 800; font-display:swap;
}

:root{ --display:'Cal Sans','Inter',-apple-system,system-ui,sans-serif; --shell:#fbfcfc; }
html.theme-dark{ --shell:#1a1e22; }
html.theme-blade{ --shell:rgba(13,9,24,.88); }

h1,h2,h3,.cname,.fmark{ font-family:var(--display); font-weight:600; letter-spacing:-0.015em; }

/* the shell: main content floats as a bordered panel over the sky */
main#main{
  max-width:1240px; margin:18px auto 30px;
  background:var(--shell);
  border:1px solid var(--line);
  border-radius:24px;
  overflow:clip;
  padding-left:clamp(18px,4vw,56px); padding-right:clamp(18px,4vw,56px);
}
@media(max-width:767px){ main#main{ margin:10px 8px 18px; border-radius:18px; } }

/* small panels: bordered, corner-rounded */
.tile,.svc{
  background:var(--panel-hover);
  border:1px solid var(--line-soft);
  border-radius:16px;
}
.tile{ padding:22px; }

/* services grid: rounded bordered cells, reversed colours on hover */
.cell{
  border:1px solid var(--line-soft);
  border-radius:16px;
  padding:22px;
  transition:background .18s ease, border-color .18s ease;
}
.cell:hover{ background:var(--ink); border-color:var(--ink); }
.cell:hover h3, .cell:hover a, .cell:hover .cname{ color:var(--paper); }
.cell:hover p{ color:color-mix(in srgb, var(--paper) 78%, transparent); }
.cell:hover .arrow{ color:var(--paper); }
.cell:hover .svc-ico, .cell:hover .ico{ stroke:var(--paper); color:var(--paper); }
.cell:hover .ico path, .cell:hover .ico circle, .cell:hover .ico rect{ stroke:var(--paper); }
html.theme-blade .cell:hover{ background:var(--neon-a); border-color:var(--neon-a); }
html.theme-blade .cell:hover h3, html.theme-blade .cell:hover p, html.theme-blade .cell:hover .arrow{ color:#07060d; }

/* light mode: no blue — neutral paper, sky canvas only exists at night */
html:not(.theme-dark):not(.theme-blade) #sky{ display:none; }
html:not(.theme-dark):not(.theme-blade) body{ background:#f1efec; }
html:not(.theme-dark):not(.theme-blade){ --paper:#f1efec; --shell:#fcfbfa; }

/* nav theme toggle */
.theme-btn{
  background:none; border:1px solid var(--line); border-radius:100px;
  width:32px; height:32px; color:var(--ink-soft); cursor:pointer;
  font-size:15px; line-height:1; margin-right:10px;
}
.theme-btn:hover{ color:var(--ink); border-color:var(--ink); }
.theme-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }

/* dark mode = true black */
html.theme-dark{
  --paper:#000000; --paper-lift:#111113; --shell:#0c0c0d;
  --ink:#f2f2f4; --ink-soft:#9fa2a6; --muted:#6d7075;
  --line:#242428; --line-soft:#1a1a1d;
  --panel:rgba(20,20,22,.5); --panel-hover:rgba(26,26,29,.85);
}
html.theme-dark #sky{ display:none; }
html.theme-dark body{ background:#000000; }

/* grids: real gaps between separated rounded cards, no grey slab */
.grid{ gap:14px; background:transparent; border:none; }
.cell{
  background:var(--paper-lift);
  -webkit-backdrop-filter:none; backdrop-filter:none;
}
html.theme-dark .cell{ background:#101012; }

/* no blue-tinted surfaces: warm neutrals only in light mode */
html:not(.theme-dark):not(.theme-blade){
  --paper-lift:#faf9f6;
  --line:#e3e0da; --line-soft:#eceae5;
  --panel:rgba(246,244,240,.6); --panel-hover:rgba(250,249,246,.9);
}
html:not(.theme-dark):not(.theme-blade) .cell{ background:#faf9f6; }

/* fix: light-mode cell background rule outranked the hover inversion,
   leaving paper-white text on a light card. Match specificity. */
html:not(.theme-dark):not(.theme-blade) .cell:hover{ background:var(--ink); border-color:var(--ink); }
html.theme-dark .cell:hover{ background:var(--ink); border-color:var(--ink); }

/* floating corner controls: back-to-top above the theme toggle */
.theme-btn{ display:none; }
.float-ctl{
  position:fixed; right:18px; bottom:18px; z-index:80;
  display:flex; flex-direction:column; gap:10px;
  transition:bottom .25s ease;
}
.float-ctl.raised{ bottom:96px; }
.fc-btn{
  width:44px; height:44px; border-radius:50%;
  background:var(--shell); color:var(--ink-soft);
  border:1px solid var(--line); cursor:pointer;
  font-size:17px; line-height:1;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.25);
}
.fc-btn:hover{ color:var(--ink); border-color:var(--ink); }
.fc-btn:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
@media(max-width:767px){ .float-ctl{ right:12px; bottom:14px; } .float-ctl.raised{ bottom:88px; } }

/* read-aloud: edge tab + underline word tracking */
#brListen{
  position:fixed; right:0; top:50%; transform:translateY(-50%);
  z-index:79; width:28px; height:92px;
  background:var(--ink); color:var(--paper);
  border:none; border-radius:46px 0 0 46px; cursor:pointer; padding:0;
  transition:width .15s ease, transform .18s ease;
}
#brListen span{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; }
#brListen:hover{ width:34px; }
#brListen:active{ transform:translateY(-50%) scale(.93); }
#brListen.playing{ background:var(--hover); }
#brListen.off{ opacity:.5; }
#brListen:focus-visible{ outline:2px solid var(--ink); outline-offset:2px; }
.rw-on{
  border-bottom:2px solid currentColor;
  padding-bottom:1px;
}

#brSpeed{
  position:fixed; right:4px; top:calc(50% + 62px); z-index:79;
  width:38px; height:30px; border-radius:8px;
  background:var(--shell); color:var(--ink-soft);
  border:1px solid var(--line); cursor:pointer;
  font-family:var(--mono); font-size:11px;
}
#brSpeed:hover{ color:var(--ink); border-color:var(--ink); }

.fsocial{ display:flex; align-items:center; gap:12px; margin-top:6px; }
.fsocial a{ color:var(--ink-soft); display:inline-flex; }
.fsocial a:hover{ color:var(--ink); }
.fhandle{ font-family:var(--mono); font-size:11.5px; color:var(--muted); }
.fsonote{ font-size:11.5px; color:var(--muted); max-width:230px; margin-top:8px; line-height:1.5; }

.swap .s1{ white-space:nowrap; display:inline-flex; align-items:center; gap:7px; }
.fico{ width:16px; height:16px; border-radius:4px; vertical-align:-3px; }

/* read-aloud on the clients grid: the whole tile lights up while its name is spoken */
.tile{ transition:outline-color .2s ease, outline-width .2s ease; outline:2px solid transparent; outline-offset:2px; }
.tile.tile-reading{ outline-color:color-mix(in srgb, var(--ink) 50%, transparent); }
.tile.tile-reading .rw-on{ border-bottom:none; padding-bottom:0; }

/* read-aloud section toast: a soft glowing panel announcing the next section */
#brToast{
  position:fixed; left:50%; bottom:26px; transform:translateX(-50%) translateY(14px);
  z-index:85; max-width:min(420px, 86vw);
  background:var(--shell); color:var(--ink);
  border:1px solid color-mix(in srgb, var(--ink) 35%, transparent);
  border-radius:14px; padding:12px 22px;
  font-family:var(--display); font-size:15.5px; text-align:center;
  opacity:0; pointer-events:none;
  box-shadow:0 0 0 4px color-mix(in srgb, var(--ink) 6%, transparent), 0 12px 34px -12px rgba(0,0,0,.35);
  transition:opacity .45s ease, transform .45s ease;
}
#brToast.on{ opacity:1; transform:translateX(-50%) translateY(0); }