/* Client portal, Our Kind look and feel.
   Colours and fonts are tokens: change them in studio.json (theme) or here. */

@font-face { font-family: "Monument"; font-weight: 300; font-display: swap; src: url("/assets/fonts/abcmonumentgrotesk-light.woff") format("woff"); }
@font-face { font-family: "Monument"; font-weight: 400; font-display: swap; src: url("/assets/fonts/abcmonumentgrotesk-regular.woff") format("woff"); }

:root {
  --paper: #f4f1ea;
  --white: #ffffff;
  --ink: #1b1915;
  --ink-2: #4a4743;
  --line: rgba(27, 25, 21, .2);
  --accent: #e6dcc0;   /* pale ochre tint: selected cards, active nav */
  --ochre: #604e23;    /* hero, hover */
  --rust: #b8431d;     /* hard deadlines, used in small doses */
  --f-body: "Monument", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --f-mono: "Space Mono", ui-monospace, Menlo, monospace;
  --rail: 52px;
  --gut: clamp(16px, 4vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; animation: none !important; } }

body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--f-body); font-weight: 400; font-size: 17px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; padding-right: var(--rail); } }

a { color: inherit; }
img { max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

.boot { padding: 40vh var(--gut) 0; text-align: center; font-family: var(--f-mono); font-size: 12px; text-transform: uppercase; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 var(--gut); }

/* labels */
.mono { font-family: var(--f-mono); font-size: 12px; line-height: 1.4; text-transform: uppercase; letter-spacing: .02em; }
.display { font-weight: 300; text-transform: uppercase; letter-spacing: -.01em; line-height: 1; }

/* ---------- rail nav ---------- */
.rail {
  position: fixed; z-index: 20; background: var(--white);
  left: 0; right: 0; bottom: 0; height: calc(56px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom);
  display: flex; align-items: stretch; overflow-x: auto; border-top: 1px solid var(--line); scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail a { flex: 0 0 auto; display: flex; align-items: center; padding: 0 18px; text-decoration: none; font-size: 14px; white-space: nowrap; }
.rail a[aria-current="true"] { background: var(--accent); }
.rail .rail-end { display: none; }
@media (min-width: 900px) {
  .rail { left: auto; top: 0; width: var(--rail); height: 100vh; padding: 0; flex-direction: column; border-top: 0; border-left: 1px solid var(--line); overflow: hidden; }
  .rail a { writing-mode: vertical-rl; padding: 20px 0; width: 100%; justify-content: center; flex: 0 0 auto; }
  .rail a:first-child { padding-top: 24px; }
  .rail .rail-end { display: flex; margin-top: auto; flex-direction: column; }
  .rail .rail-end a { writing-mode: horizontal-tb; padding: 22px 0; font-size: 16px; }
}

/* ---------- hero ---------- */
.hero {
  position: relative; min-height: 92vh; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--ochre) center / cover; color: var(--paper);
}
.hero.has-img::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(96,78,35,.25), rgba(96,78,35,.8)); }
.hero > * { position: relative; }
.logo { display: block; margin: 0 auto; padding-top: 14px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
.logo img { height: 40px; width: auto; display: block; filter: invert(1) brightness(1.1); }
.hero .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.hero .btn:hover { background: var(--accent); border-color: var(--accent); }
.hero .btn.ghost { background: transparent; color: var(--paper); }
.hero .btn.ghost:hover { background: var(--paper); color: var(--ink); }
.hero :focus-visible { outline-color: var(--paper); }
.hero-main { padding-top: 160px; padding-bottom: 40px; }
.hero h1 { font-size: clamp(48px, 11vw, 150px); overflow-wrap: anywhere; }
.hero .for { margin-bottom: 16px; }
.hero .note { margin-top: 28px; max-width: 46ch; font-size: 18px; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid rgba(244,241,234,.5); margin: 0; }
.facts div { padding: 16px var(--gut) 18px; border-bottom: 1px solid rgba(244,241,234,.25); }
.facts div:nth-child(odd) { border-right: 1px solid rgba(244,241,234,.25); }
.facts dt { margin: 0 0 4px; opacity: .8; }
.facts dd { margin: 0; font-size: 17px; }
@media (min-width: 760px) {
  .facts { grid-template-columns: repeat(var(--fn, 4), minmax(0, 1fr)); }
  .facts div { border-bottom: 0; border-right: 1px solid rgba(244,241,234,.25); }
  .facts div:last-child { border-right: 0; }
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.banner { padding: 12px var(--gut); text-align: center; background: var(--ink); color: var(--paper); }
.banner.warn { background: var(--accent); color: var(--ink); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 52px;
  padding: 14px 22px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper);
  text-decoration: none; cursor: pointer; border-radius: 0; font-size: 16px;
  transition: background .2s, color .2s;
}
.btn:hover { background: var(--ochre); border-color: var(--ochre); color: var(--paper); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.ghost:hover { background: var(--accent); }
.btn[aria-disabled="true"] { background: transparent; color: var(--ink-2); border-style: dashed; cursor: not-allowed; }
.btn[aria-disabled="true"]:hover { background: transparent; }

/* ---------- sections ---------- */
.sec { border-top: 1px solid var(--ink); padding: clamp(56px, 9vw, 120px) 0; scroll-margin-top: 0; }
.sec.tint { background: var(--accent); }
.sec.tint .scope-head { background: var(--accent); }
.sec .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.sec-label { align-self: start; }
@media (min-width: 900px) {
  .sec .wrap { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 48px; }
  .sec-label { position: sticky; top: 32px; }
}
.sec h2 { font-size: clamp(30px, 4.6vw, 56px); margin-bottom: 32px; }
.lead { font-size: clamp(19px, 2.2vw, 24px); line-height: 1.4; max-width: 38em; }
.cols { display: grid; gap: 32px; }
@media (min-width: 760px) { .cols.two { grid-template-columns: 1fr 1fr; gap: 48px; } }
.cols h3, .sub { font-family: var(--f-mono); font-weight: 400; font-size: 12px; text-transform: uppercase; margin-bottom: 12px; }

.wave li { position: relative; padding: 12px 0 12px 34px; border-top: 1px solid var(--line); }
.wave li:last-child { border-bottom: 1px solid var(--line); }
.wave li::before { content: "〰️"; position: absolute; left: 0; top: 11px; font-size: 15px; }

/* scope table */
.scope { border-top: 1px solid var(--ink); }
.scope-head, .scope-row { display: grid; grid-template-columns: minmax(0, 1fr); }
.scope-head { display: none; }
.scope-group { padding: 28px 0 10px; }
.scope-row { padding: 14px 0; border-top: 1px solid var(--line); }
.scope-row .nm small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.scope-row .cell { display: none; }
.scope-row .in-text { margin-top: 6px; }
@media (min-width: 760px) {
  .scope-head, .scope-row { grid-template-columns: minmax(0, 1fr) repeat(var(--n), 110px); align-items: center; }
  .scope-head { display: grid; padding: 14px 0; position: sticky; top: 0; background: var(--paper); z-index: 2; border-bottom: 1px solid var(--line); }
  .scope-head span, .scope-row .cell { text-align: center; }
  .scope-row .cell { display: block; font-size: 18px; }
  .scope-row .cell.off { opacity: .35; }
  .scope-row .in-text { display: none; }
}

/* process */
.phases li { display: grid; gap: 8px 32px; padding: 28px 0; border-top: 1px solid var(--line); }
.phases li:last-child { border-bottom: 1px solid var(--line); }
.phases h3 { font-weight: 300; font-size: clamp(26px, 3vw, 36px); text-transform: uppercase; line-height: 1; }
.phases .you { margin-top: 10px; font-size: 15px; color: var(--ink-2); }
@media (min-width: 760px) { .phases li { grid-template-columns: 180px minmax(0, 1fr); } .phases li > .when { grid-row: 1 / span 2; } }
.phases .when, .phases .no { display: block; }

/* investment */
.pkgs { display: grid; gap: 16px; margin-bottom: 40px; }
@media (min-width: 1100px) { .pkgs.n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 760px) and (max-width: 1099px) { .pkgs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pkg { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: background .2s, border-color .2s; }
.pkg:hover { border-color: var(--ink); }
.pkg.sel { background: var(--accent); border-color: var(--ink); }
.pkg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pkg:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 3px; }
.pkg .tag { display: flex; justify-content: space-between; gap: 12px; min-height: 18px; }
.pkg h3 { font-weight: 300; font-size: clamp(32px, 3.4vw, 44px); text-transform: uppercase; line-height: 1; }
.pkg .price { font-size: 26px; }
.pkg .blurb { flex: 1; }
.pkg .tick { display: inline-block; width: 18px; height: 18px; border: 1px solid var(--ink); border-radius: 50%; position: relative; flex: 0 0 auto; }
.pkg.sel .tick::after { content: ""; position: absolute; inset: 3px; background: var(--ink); border-radius: 50%; }

.pkgs.n1 { max-width: 620px; }
.pay-grid { display: grid; gap: 32px; }
@media (min-width: 900px) { .pay-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }
.opt { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--line); background: var(--white); cursor: pointer; margin-bottom: 10px; }
.opt.sel { border-color: var(--ink); background: var(--accent); }
.opt input { margin: 5px 0 0; accent-color: var(--ink); width: 16px; height: 16px; }
.opt strong { font-weight: 400; display: block; }
.opt span.d { font-size: 15px; color: var(--ink-2); }
.summary { background: var(--white); border: 1px solid var(--ink); padding: 24px; }
.summary dl { margin: 0; }
.summary .row { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.summary .row:last-child { border-bottom: 0; }
.summary dt { font-size: 15px; }
.summary dd { margin: 0; text-align: right; }
.summary .due { font-size: 28px; font-weight: 300; }
.summary .due.tbc { font-size: 17px; font-weight: 400; }
.summary .empty { color: var(--ink-2); }
.fine { font-size: 14px; color: var(--ink-2); margin-top: 14px; }

/* terms */
.terms details { border-top: 1px solid var(--line); }
.terms details:last-of-type { border-bottom: 1px solid var(--line); }
.terms summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 18px 0; font-size: 19px; }
.terms summary::-webkit-details-marker { display: none; }
.terms summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; }
.terms details[open] summary::after { content: "–"; }
.terms details p { padding: 0 0 20px; max-width: 60ch; }
.terms details p:has(+ .term-list) { padding-bottom: 10px; }
.term-list { padding: 0 0 20px; max-width: 64ch; }
.term-list li { position: relative; padding: 7px 0 7px 22px; border-top: 1px solid var(--line); }
.term-list li:last-child { border-bottom: 1px solid var(--line); }
.term-list li::before { content: "–"; position: absolute; left: 4px; }

/* sign + pay steps */
.steps { display: grid; gap: 16px; counter-reset: s; }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.step { display: flex; flex-direction: column; gap: 14px; padding: 24px; border: 1px solid var(--ink); background: var(--white); }
.step.done { background: var(--accent); }
.step.wait { border-color: var(--line); }
.step h3 { font-weight: 300; font-size: clamp(26px, 2.6vw, 34px); text-transform: uppercase; line-height: 1; }
.step p { flex: 1; }
.step .state { display: flex; justify-content: space-between; gap: 12px; }
.help { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 16px 32px; align-items: center; justify-content: flex-start; }
.help .big { font-size: clamp(22px, 2.6vw, 30px); font-weight: 300; }

/* footer */
.foot { border-top: 1px solid var(--ink); padding: 48px 0 64px; }
.foot .wrap { display: grid; gap: 28px; }
@media (min-width: 760px) { .foot .wrap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.foot a { text-decoration: none; border-bottom: 1px solid var(--line); }
.foot a:hover { background: var(--accent); }
.foot p + p { margin-top: 4px; }

.demo-flag { position: absolute; z-index: 30; left: 12px; top: 12px; background: var(--ink); color: var(--paper); padding: 6px 10px; }

/* ---------- password gate ---------- */
body.is-gate { padding: 0; background: var(--ochre); color: var(--paper); }
.gate { min-height: 100vh; min-height: 100svh; display: flex; align-items: center; background: var(--ochre); color: var(--paper); padding: 72px var(--gut); }
.gate-inner { width: 100%; max-width: 560px; margin: 0 auto; }
.gate-logo { display: block; height: 44px; width: auto; margin: 0 0 clamp(40px, 9vh, 88px); filter: invert(1) brightness(1.1); }
.gate h1 { font-size: clamp(40px, 8vw, 84px); margin: 14px 0 20px; overflow-wrap: anywhere; }
.gate-lead { font-size: 19px; max-width: 30em; }
.gate-form { margin-top: 36px; }
.gate-form label { display: block; margin-bottom: 8px; }
.gate-field { display: flex; align-items: center; gap: 12px; border-bottom: 1px solid var(--paper); margin-bottom: 8px; }
.gate-input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 0; color: var(--paper); font: inherit; font-size: 24px; font-weight: 300; padding: 10px 0; }
.gate-input:focus { outline: none; }
.gate-field:focus-within { border-bottom-width: 2px; margin-bottom: 7px; }
.gate-show { background: none; border: 0; color: var(--paper); cursor: pointer; padding: 10px 0; text-transform: uppercase; }
.gate-err { min-height: 1.6em; margin: 6px 0 18px; font-size: 15px; }
.gate .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); width: 100%; }
.gate .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); }
.gate .btn:disabled { opacity: .7; cursor: progress; }
.gate :focus-visible { outline-color: var(--paper); }
.gate ::selection { background: var(--accent); color: var(--ink); }
.gate-hint { margin-top: 28px; opacity: .85; }
.gate-help { margin-top: 28px; font-size: 15px; }
.gate-help a { text-decoration: none; border-bottom: 1px solid rgba(244,241,234,.5); }
.gate-help a:hover { border-bottom-color: var(--paper); }

/* ---------- hero with a picture: ochre copy beside the image ---------- */
.hero.split { display: flex; flex-direction: column; justify-content: flex-start; }
.hero.split .logo { position: static; transform: none; margin: 0; padding: 18px var(--gut); }
.hero.split .logo img { height: 36px; }
.hero-grid { display: grid; grid-template-areas: "img" "copy"; flex: 1; }
.hero-img { grid-area: img; position: relative; margin: 0; min-height: 62vw; background: var(--ink) center / cover no-repeat; }
.hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-img figcaption { position: absolute; left: 12px; bottom: 10px; color: var(--paper); background: rgba(27,25,21,.55); padding: 3px 8px; }
.hero.split .hero-copy { grid-area: copy; display: flex; flex-direction: column; justify-content: flex-end; padding: 36px var(--gut) 36px; }
.hero.split .hero-main { padding: 0; margin: 0; max-width: none; }
.hero.split h1 { font-size: clamp(40px, 6.4vw, 104px); overflow-wrap: break-word; }
@media (min-width: 900px) {
  .hero.split { min-height: 92vh; }
  .hero.split .logo { position: absolute; top: 0; left: 0; z-index: 2; }
  .hero-grid { grid-template-areas: "copy img"; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); }
  .hero-img { min-height: 0; }
  .hero.split .hero-copy { padding: 140px var(--gut) 44px; }
}

/* ---------- reference strip ---------- */
.band { border-top: 1px solid var(--ink); padding: clamp(40px, 6vw, 72px) 0; background: var(--white); }
.band .wrap { display: grid; gap: 24px; }
.band-head { display: grid; gap: 8px 32px; }
@media (min-width: 900px) { .band-head { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); } }
.band-head p:last-child { max-width: 52ch; }
.shots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .shots { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shots figure { margin: 0; }
.shots img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; background: var(--paper); }
.shots figcaption { margin-top: 8px; font-size: 14px; }

/* ---------- richer phases ---------- */
.phases .dates { display: block; margin-top: 4px; }
.phase-price { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.phase-price strong { font-weight: 300; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.15; }
.phase-price strong.tbc { font-size: 16px; font-weight: 400; }
@media (max-width: 759px) { .phase-price { margin-top: 12px; flex-direction: row; align-items: baseline; gap: 12px; } }
.phases .dur { margin: 10px 0 14px; }
.phases .body p + p { margin-top: 12px; }
.phases .body { max-width: 62ch; }
.phases .lists { display: grid; gap: 20px 32px; margin-top: 22px; }
@media (min-width: 900px) { .phases .lists { grid-template-columns: 1fr 1fr; } }
.phases .lists h4 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; text-transform: uppercase; margin: 0 0 8px; }
.phases .lists li { padding: 7px 0 7px 22px; position: relative; border-top: 1px solid var(--line); font-size: 15px; }
.phases .lists li::before { content: "–"; position: absolute; left: 4px; }
.phases .you { margin-top: 0; }
.scope-tag { font-size: 12px; }
.scope-single .scope-row { grid-template-columns: minmax(0, 1fr); }
.scope-single .scope-group { font-size: 14px; padding: 36px 0 12px; }
.scope-single .scope-group:first-child { padding-top: 28px; }
.scope-single .scope-group:not(:first-child) { margin-top: 48px; border-top: 1px solid var(--ink); }
@media (min-width: 760px) { .scope-single .scope-row.has-tag { grid-template-columns: minmax(0, 1fr) 150px; } }
.scope-out { margin-top: 40px; padding: 24px; background: var(--white); border: 1px solid var(--line); }
.scope-out h3 { font-family: var(--f-mono); font-weight: 400; font-size: 12px; text-transform: uppercase; margin-bottom: 6px; }
.scope-out > p { margin-bottom: 10px; max-width: 54ch; }

/* ---------- timeline ---------- */
.sec.wide .wrap { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.sec.wide .sec-label { position: static; }
.sec.wide h2 { margin-bottom: 8px; }
.tl { margin-top: 24px; }
.tl-status { margin-bottom: 20px; padding: 14px 18px; background: var(--white); border: 1px solid var(--line); }
.tl-status .mono { margin-right: 6px; }
.tl-controls { display: flex; flex-wrap: wrap; gap: 16px 28px; align-items: center; justify-content: space-between; margin-bottom: 20px; }
.tl-tabs { display: inline-flex; border: 1px solid var(--ink); }
.tl-tab { background: transparent; border: 0; padding: 11px 20px; cursor: pointer; font-size: 15px; min-height: 44px; }
.tl-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.tl-tab:not([aria-selected="true"]):hover { background: var(--accent); }
.tl-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.tl-legend li { display: flex; align-items: center; gap: 8px; }
.tl-legend .sw { width: 22px; height: 12px; border: 1px solid var(--ink); flex: 0 0 auto; }

.sw.k-studio, .tl-bar.k-studio { background: var(--ochre); color: var(--paper); border-color: var(--ochre); }
.sw.k-review, .tl-bar.k-review { background: var(--accent); color: var(--ink); border-color: var(--ink); }
.sw.k-internal, .tl-bar.k-internal { background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(27,25,21,.18) 4px 5px); color: var(--ink); border: 1px dashed var(--ink-2); }
.sw.k-meeting, .tl-bar.k-meeting { background: var(--white); color: var(--ink); border: 1.5px solid var(--ink); }
.sw.k-away, .tl-bar.k-away { background: radial-gradient(circle at 3px 3px, rgba(255,255,255,.95) 1.3px, transparent 1.9px) 0 0 / 13px 13px, radial-gradient(circle at 9px 9px, rgba(255,255,255,.7) 1px, transparent 1.6px) 0 0 / 13px 13px, repeating-linear-gradient(45deg, #ddd7c6 0 7px, #cfc8b1 7px 14px); color: var(--ink); border: 1px solid #9d9577; }
.tl-bar.k-away .t { font-family: var(--f-mono); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.sw.k-buffer, .tl-bar.k-buffer { background: #cdd3ad; color: var(--ink); border: 1px dashed #6f7550; }
.dia { display: inline-block; width: 11px; height: 11px; background: var(--ink); transform: rotate(45deg); flex: 0 0 auto; }
.dia.k-deadline { background: var(--rust); }

/* weeks chart */
.tl-scroll { overflow-x: auto; border: 1px solid var(--line); background: var(--white); -webkit-overflow-scrolling: touch; }
.tl-gantt { --labw: 112px; --cw: 15px; padding-right: 12px; position: relative; min-width: calc(var(--labw) + var(--n) * var(--cw)); }
.tl-row { display: grid; grid-template-columns: var(--labw) minmax(0, 1fr); border-top: 1px solid var(--line); }
.tl-head { border-top: 0; }
.tl-lab { position: sticky; left: 0; z-index: 3; background: var(--white); padding: 12px 10px 12px 14px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--line); font-size: 13px; line-height: 1.25; }
.tl-lab b { font-weight: 400; }
.tl-track { position: relative; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); align-items: center; min-height: 58px; padding: 0;
  background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--w)) 100%; }
.tl-months, .tl-weekrow { min-height: 0; background-image: none; }
.tl-months span { padding: 8px 8px 2px; border-left: 1px solid var(--line); text-transform: uppercase; }
.tl-months span:first-child { border-left: 0; }
.tl-weekrow { background-image: linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: calc(100% / var(--w)) 100%; }
.tl-weekrow span { padding: 2px 8px 8px; display: flex; flex-direction: column; font-size: 11px; line-height: 1.3; }
.tl-weekrow b { font-weight: 400; }
.tl-weekrow i { font-style: normal; opacity: .75; }

.tl-item { font: inherit; cursor: pointer; }
.tl-bar { position: relative; height: 32px; margin: 0; padding: 0 6px; text-align: left; border: 1px solid; border-radius: 0; white-space: nowrap; overflow: visible;
  clip-path: inset(0 100% 0 0); transition: clip-path .7s cubic-bezier(.2,.7,.2,1) calc(var(--i, 0) * 90ms); }
.tl.in .tl-bar { clip-path: inset(-4px -400px -4px -400px); }
.tl-bar .t { display: flex; align-items: center; height: 30px; overflow: hidden; white-space: normal; font-size: 12px; line-height: 1.12; }
.tl-bar.short { padding: 0; }
.tl-bar .t.out { position: absolute; top: 0; display: block; height: auto; white-space: nowrap; line-height: 30px; overflow: visible; color: var(--ink); font-size: 12px; }
.tl-bar .t.out.r { left: calc(100% + 8px); } .tl-bar .t.out.l { right: calc(100% + 8px); }
.tl-bar:hover { filter: brightness(1.08); }
.tl-bar.sel, .tl-pt.sel .dia { outline: 2px solid var(--ink); outline-offset: 2px; }
.tl-bar.k-studio.sel { outline-color: var(--ochre); }

.tl-keyrow .tl-track { min-height: 88px; align-items: start; }
.tl-pt { position: relative; background: transparent; border: 0; padding: 0; height: 80px; display: block; opacity: 0; transform: translateY(6px); transition: opacity .5s ease calc(var(--i, 0) * 90ms), transform .5s ease calc(var(--i, 0) * 90ms); }
.tl.in .tl-pt { opacity: 1; transform: none; }
.tl-pt .dia { position: absolute; left: 50%; top: 18px; margin-left: -5px; }
.tl-pt.k-deadline .dia { background: var(--rust); }
.tl-pt .cap { position: absolute; top: 36px; left: 50%; transform: translateX(-50%); width: 98px; text-align: center; font-size: 11.5px; line-height: 1.25; color: var(--ink); }
.tl-keyrow.has-tier .tl-track { min-height: 130px; }
.tl-keyrow.has-tier .tl-pt { height: 124px; }
.tl-pt.tier1 .cap { top: 80px; }
.tl-pt.tier1::after { content: ""; position: absolute; left: 50%; top: 32px; height: 46px; border-left: 1px solid var(--ink-2); }
.tl-pt.edge-r .cap { left: auto; right: 0; transform: none; text-align: right; }
.tl-pt .cap b { display: block; font-weight: 400; margin-bottom: 2px; }
.tl-pt.sel .dia { outline-offset: 5px; }
.tl-over { position: absolute; top: 0; bottom: 0; left: var(--labw); right: 12px; pointer-events: none; z-index: 2; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--rust); font-size: 0; }
.tl-today::before { content: "Today"; position: absolute; top: 0; left: 4px; background: var(--rust); color: var(--paper); font-size: 10px; padding: 1px 6px; }

.tl-hint { display: none; margin-top: 8px; }
@media (max-width: 1000px) { .tl-hint { display: block; } }

/* calendar */
.tl-calwrap { border: 1px solid var(--line); background: var(--white); padding: 10px; }
.tl-cal { display: grid; grid-template-columns: 46px repeat(7, minmax(0, 1fr)); gap: 3px; }
.tl-cal .hd { text-align: center; padding: 6px 0; font-size: 10px; }
.tl-cal .gut { display: flex; flex-direction: column; justify-content: center; font-size: 10px; line-height: 1.3; }
.tl-cal .gut b { font-weight: 400; } .tl-cal .gut i { font-style: normal; opacity: .75; }
.tl-cal .cell { position: relative; min-height: 52px; padding: 5px 5px 4px; background: var(--paper); border: 0; border-radius: 0; text-align: left; color: var(--ink); display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.tl-cal .cell.we { background: transparent; color: var(--ink-2); }
.tl-cal .cell.out { opacity: .4; }
.tl-cal .cell .d { font-size: 14px; line-height: 1; display: flex; gap: 4px; align-items: baseline; }
.tl-cal .cell .mo { font-style: normal; font-size: 9px; opacity: .8; text-transform: uppercase; }
.tl-cal .cell .lab { display: none; font-size: 9.5px; line-height: 1.2; text-transform: uppercase; }
.tl-cal .cell.k-studio { background: var(--ochre); color: var(--paper); }
.tl-cal .cell.k-review { background: var(--accent); }
.tl-cal .cell.k-meeting { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--ink); }
.tl-cal .cell.k-away { background: radial-gradient(circle at 3px 3px, rgba(255,255,255,.95) 1.3px, transparent 1.9px) 0 0 / 13px 13px, radial-gradient(circle at 9px 9px, rgba(255,255,255,.7) 1px, transparent 1.6px) 0 0 / 13px 13px, repeating-linear-gradient(45deg, #ddd7c6 0 7px, #cfc8b1 7px 14px); }
.tl-cal .cell.k-away .lab { font-weight: 700; }
.tl-cal .cell.k-buffer { background: #cdd3ad; color: var(--ink); box-shadow: inset 0 0 0 1px #6f7550; }
.tl-cal .cell .under { position: absolute; left: 0; right: 0; bottom: 0; height: 7px; }
.tl-cal .cell .under.k-internal { background: repeating-linear-gradient(135deg, #f4f1ea 0 3px, rgba(27,25,21,.35) 3px 4px); border-top: 1px dashed var(--ink-2); }
.tl-cal .cell .under.k-review { background: var(--accent); }
.tl-cal .cell .under.k-away { background: #cfc8b1; }
.tl-cal .cell .under.k-buffer { background: #cdd3ad; }
.tl-cal .cell.k-internal { background: repeating-linear-gradient(135deg, var(--paper) 0 4px, #e5dfd0 4px 5px); }
.tl-cal .cell .dia { position: absolute; right: 7px; top: 8px; width: 9px; height: 9px; box-shadow: 0 0 0 1.5px var(--paper); } /* same marker on every colour: ink (or rust) with a cream edge */
.tl-cal .cell .now { position: absolute; left: 0; right: 0; bottom: 0; background: var(--rust); color: var(--paper); font-size: 9px; text-align: center; padding: 1px 0; }
.tl-cal .cell.today { box-shadow: inset 0 0 0 2px var(--rust); }
.tl-cal button.cell { cursor: pointer; }
.tl-cal button.cell:hover { filter: brightness(.96); }
.tl-cal .cell.sel { outline: 2px solid var(--ink); outline-offset: -2px; z-index: 1; }
.tl-cal .cell.k-studio.sel { outline-color: var(--ink); }
@media (min-width: 760px) {
  .tl-cal { grid-template-columns: 70px repeat(7, minmax(0, 1fr)); gap: 4px; }
  .tl-cal .cell { min-height: 76px; padding: 8px; }
  .tl-cal .cell .lab { display: block; }
  .tl-cal .cell .lab.pl { padding-right: 0; }
  .tl-cal .gut, .tl-cal .hd { font-size: 11px; }
  .tl-calwrap { padding: 16px; }
}

/* detail panel */
.tl-detail { margin-top: 20px; background: var(--white); border: 1px solid var(--ink); }
.tl-dbody { padding: 22px 24px 8px; }
.tl-dmeta { margin-bottom: 8px; }
.tl-detail h3 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 12px; }
.tl-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.chip { border: 1px solid var(--ink); padding: 3px 9px; font-size: 11px; }
.chip.k-studio { background: var(--ochre); color: var(--paper); border-color: var(--ochre); }
.chip.k-review { background: var(--accent); }
.chip.k-meeting { border-width: 2px; }
.chip.k-away { background: #ddd7c6; border-color: #9d9577; }
.chip.k-buffer { background: #cdd3ad; border-style: dashed; border-color: #6f7550; }
.chip.k-deadline { border-color: var(--rust); color: var(--rust); }
.tl-dtext { max-width: 64ch; min-height: 3em; }
.tl-dnav { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 24px 18px; }
.tl-btns { display: flex; gap: 8px; }
.tl-nav { min-height: 44px; padding: 8px 16px; gap: 12px; }

/* words version */
.tl-table { margin-top: 44px; }
.tl-table ol { margin-top: 8px; }
.tl-table li { display: grid; gap: 4px 28px; padding: 16px 0; border-top: 1px solid var(--line); }
.tl-table li:last-child { border-bottom: 1px solid var(--line); }
.tl-table .when { font-weight: 400; }
.tl-table .what p { max-width: 62ch; }
.tl-table strong { font-weight: 400; border-bottom: 1px solid var(--ink); }
.tl-link { background: none; border: 0; padding: 4px 0; cursor: pointer; text-transform: uppercase; justify-self: start; border-bottom: 1px solid var(--line); }
.tl-link:hover { background: var(--accent); }
@media (min-width: 760px) { .tl-table li { grid-template-columns: 210px minmax(0, 1fr) 70px; align-items: baseline; } }
.tl-note { max-width: 62ch; margin-top: 22px; }

@media (max-width: 759px) { .demo-flag { top: 68px; font-size: 10px; } }

@media print {
  .rail, .hero-actions, .demo-flag, .btn, .tl-tabs, .tl-detail, .tl-scroll, .tl-calwrap { display: none !important; }
  body { padding: 0; background: #fff; }
  .hero { min-height: 0; } .logo { position: static; transform: none; }
  .sec { break-inside: avoid-page; padding: 32px 0; }
  .terms details > * { display: block; } .terms details p { display: block; }
}