:root{
  --paper:#FBF0CF; --panel:#FFFFFF; --ink:#292F41; --muted:#5C4F2D; --rule:#F1D995;
  --soft:#DDE6FE; --teal:#304890; --teal-ink:#FFFFFF; --hi:#F1D995; --hi-ink:#292F41; --gold:#896E29; --navy:#323F67;
  --display:"Familjen Grotesk",system-ui,-apple-system,"Segoe UI",sans-serif;
  --body:"Source Serif 4",Georgia,"Times New Roman",serif;
  --wrap:1160px; color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#292F41; --panel:#323F67; --ink:#FBF0CF; --muted:#B7CBFD; --rule:#5C4F2D;
    --soft:#304890; --teal:#B7CBFD; --teal-ink:#292F41; --hi:#F1D995; --hi-ink:#292F41; --gold:#F1D995; --navy:#323F67; color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#292F41; --panel:#323F67; --ink:#FBF0CF; --muted:#B7CBFD; --rule:#5C4F2D;
    --soft:#304890; --teal:#B7CBFD; --teal-ink:#292F41; --hi:#F1D995; --hi-ink:#292F41; --gold:#F1D995; --navy:#323F67; color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 1.0625rem/1.7 var(--body);font-optical-sizing:auto}
img,svg{max-width:100%}
a{color:var(--teal);text-underline-offset:.18em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:3px}
h1,h2,h3,h4{font-family:var(--display);line-height:1.12;letter-spacing:-.015em;margin:0 0 .5em;font-weight:650}
h1{font-size:clamp(2.3rem,5.4vw,4.1rem);letter-spacing:-.03em;font-weight:700;max-width:18ch}
h2{font-size:clamp(1.5rem,2.6vw,2rem)}
h3{font-size:1.2rem}
p{margin:0 0 1em;max-width:66ch}
ul,ol{max-width:66ch}
.skip{position:absolute;left:-999px}.skip:focus{left:1rem;top:1rem;background:var(--panel);padding:.5rem 1rem;z-index:20}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.25rem)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;font:600 1rem/1 var(--display);padding:.85rem 1.25rem;border-radius:6px;text-decoration:none;border:1.5px solid var(--teal);cursor:pointer}
.btn-solid{background:var(--teal);color:var(--teal-ink)}
.btn-solid:hover{filter:brightness(1.08)}
.btn-line{color:var(--ink);border-color:var(--ink);background:transparent}
.btn-line:hover{background:var(--soft)}
.logo{display:flex;align-items:center;gap:.55rem;font:700 1.3rem/1 var(--display);color:var(--ink);text-decoration:none;letter-spacing:-.02em}
.logo svg{width:30px;height:30px}

/* breadcrumbs */
.crumbs{font:500 .88rem/1.4 var(--display);color:var(--muted)}
.crumbs-m{display:none;padding-top:1rem}
@media (max-width:899px){.crumbs-m{display:block}}
.crumbs ol{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem}
.crumbs li+li::before{content:"/";margin-right:.35rem;color:var(--rule)}
.crumbs a{color:var(--muted)}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(2rem,5vw,4.5rem);align-items:start;padding-top:clamp(2.2rem,6vw,4.5rem);padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.hero.solo{grid-template-columns:minmax(0,1fr);padding-bottom:1.5rem}
.lede{font-size:1.24rem;line-height:1.55;color:var(--ink);max-width:40ch}
.hero .actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1.6rem}
.fine{font-size:.92rem;color:var(--muted)}
@media (max-width:900px){.hero{grid-template-columns:1fr}}

/* the timesheet: the one memorable object */
.sheet{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:1.25rem 1.4rem 1.1rem;font-family:var(--display);box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(41,47,65,.5)}
.sheet-head{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;border-bottom:2px solid var(--gold);padding-bottom:.6rem;margin-bottom:.2rem}
.sheet-head strong{font-size:1.02rem;font-weight:650}
.sheet-head span{font-size:.85rem;color:var(--muted)}
.sheet ul{list-style:none;margin:0;padding:0;max-width:none}
.sheet li{display:grid;grid-template-columns:1fr auto;gap:1rem;align-items:baseline;padding:.62rem 0;border-bottom:1px dashed var(--rule);font-size:.98rem}
.sheet .task{justify-self:start;background-image:linear-gradient(var(--hi),var(--hi));background-repeat:no-repeat;background-position:0 55%;background-size:0% 90%;padding:0 .15rem;margin:0 -.15rem;transition:background-size .75s cubic-bezier(.6,.1,.2,1);transition-delay:var(--d,0s)}
.sheet .hrs{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
.sheet .hrs s{color:var(--muted);text-decoration-thickness:1.5px;opacity:0;transition:opacity .3s;transition-delay:var(--d,0s)}
.sheet .hrs b{font-weight:650;display:inline-block;min-width:2.4ch}
.sheet.on .auto .task{background-size:100% 90%}
.sheet.on .auto .hrs s{opacity:1}
.sheet.on .auto .task{color:var(--hi-ink);transition:background-size .75s cubic-bezier(.6,.1,.2,1) var(--d,0s),color .2s var(--d,0s)}
.sheet-total{display:flex;justify-content:space-between;align-items:baseline;padding-top:.8rem;margin-top:.1rem;border-top:2px solid var(--gold)}
.sheet-total span{font-size:1rem;font-weight:600}
.sheet-total output{font-size:2.3rem;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.sheet-total small{font-size:1rem;font-weight:500;color:var(--muted);margin-left:.2rem}
.sheet-note{font-size:.84rem;color:var(--muted);margin:.6rem 0 0;font-family:var(--display)}
@media (prefers-reduced-motion:reduce){.sheet .task,.sheet .hrs s{transition:none}}

/* ledger sections: heading in the margin column */
.sec{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,1fr);gap:clamp(1.2rem,4vw,3.5rem);padding-block:clamp(2.4rem,5vw,3.8rem);border-top:1px solid var(--rule)}

.sec>header p{color:var(--muted);font-size:.98rem}
@media (max-width:820px){.sec{grid-template-columns:1fr}.sec>header h2{position:static}}

/* lists with rules instead of card grids */
.rows{list-style:none;padding:0;margin:0;max-width:none}
.rows>li{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--rule)}
.rows>li:first-child{padding-top:0}
.rows h3{margin:0;font-size:1.08rem}
.rows h3 a{color:var(--ink);text-decoration:none}
.rows h3 a:hover{text-decoration:underline;text-decoration-color:var(--teal)}
.rows p{margin:0;color:var(--muted)}
@media (max-width:620px){.rows>li{grid-template-columns:1fr;gap:.25rem}}
.cols{columns:3 13rem;column-gap:2rem;list-style:none;padding:0;margin:0;max-width:none;font-family:var(--display)}
.cols li{break-inside:avoid;padding:.35rem 0;border-bottom:1px solid var(--rule)}
.cols a{color:var(--ink);text-decoration:none}
.cols a:hover{color:var(--teal);text-decoration:underline}
.ticks{padding-left:1.2rem}
.ticks li{margin:.35rem 0}
.ticks li::marker{color:var(--teal)}
.steps{counter-reset:s;list-style:none;padding:0;margin:0;max-width:62ch}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.6rem 1fr;gap:.6rem;padding:0 0 1.2rem}
.steps li::before{content:counter(s);font:700 1.05rem/1 var(--display);width:2rem;height:2rem;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;margin-top:.1rem}
.steps h3{margin:0 0 .2rem;font-size:1.08rem}
.steps p{margin:0}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:0;border-top:2px solid var(--gold);margin:0 0 1.5rem;max-width:none}
.facts div{padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--rule)}
.facts dt{font:500 .85rem/1.3 var(--display);color:var(--muted)}
.facts dd{margin:.2rem 0 0;font:650 1.1rem/1.3 var(--display)}
.note{border-left:4px solid var(--gold);padding:.2rem 0 .2rem 1rem;margin:1.2rem 0;max-width:66ch}
.note p:last-child{margin:0}

/* pricing */
.plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--rule);border-radius:10px;overflow:hidden;background:var(--panel)}
.plan{padding:1.6rem 1.4rem;border-right:1px solid var(--rule);display:flex;flex-direction:column}
.plan:last-child{border-right:0}
.plan.featured{background:var(--soft)}
.plan h3{font-size:1.35rem;margin-bottom:.2rem}
.plan .price{font:700 2.3rem/1 var(--display);letter-spacing:-.03em;margin:.8rem 0 .2rem}
.plan .price small{font-size:1rem;font-weight:500;color:var(--muted)}
.plan .setup{font:500 .92rem/1.4 var(--display);color:var(--muted);margin-bottom:1rem}
.plan ul{padding-left:1.1rem;margin:0 0 1.4rem;font-size:.98rem}
.plan .btn{margin-top:auto}
.tag{font:600 .8rem/1 var(--display);background:var(--hi);color:var(--hi-ink);padding:.3rem .5rem;border-radius:4px;align-self:flex-start;margin-bottom:.6rem}
@media (max-width:860px){.plans{grid-template-columns:1fr}.plan{border-right:0;border-bottom:1px solid var(--rule)}}

/* grouped services + savings list */
.grp{font-size:1.25rem;margin:1.8rem 0 .2rem}
.grp:first-child{margin-top:0}
.grp-sub{color:var(--muted);margin-bottom:.8rem}
.savings{list-style:none;padding:0;margin:0;max-width:44rem;font-family:var(--display)}
.savings li{display:flex;justify-content:space-between;gap:1rem;padding:.6rem 0;border-bottom:1px dashed var(--rule)}
.savings .sv{white-space:nowrap;font-weight:650;font-variant-numeric:tabular-nums}
.savings s{color:var(--muted);font-weight:500;margin-right:.3rem}

/* booking embed */
.booking-embed{min-height:420px;margin-bottom:1rem}

/* faq */
.faq details{border-bottom:1px solid var(--rule);padding:.9rem 0}
.faq summary{font:600 1.05rem/1.4 var(--display);cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:500;color:var(--teal);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{margin:.6rem 0 0}

/* forms and calculator */
.form{display:grid;gap:1rem;max-width:36rem}
.form label{display:grid;gap:.35rem;font:600 .95rem/1.3 var(--display)}
.form input,.form select,.form textarea{font:400 1rem/1.4 var(--body);padding:.75rem .8rem;border:1.5px solid var(--rule);border-radius:6px;background:var(--panel);color:var(--ink);width:100%}
.form input:focus,.form select:focus,.form textarea:focus{border-color:var(--teal);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 25%,transparent)}
.calc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2rem;align-items:start}
.calc-out{background:var(--panel);border:1px solid var(--rule);border-radius:10px;padding:1.4rem}
.calc-out dl{margin:0}
.calc-out div{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px dashed var(--rule);padding:.6rem 0;font-family:var(--display)}
.calc-out dd{margin:0;font-weight:700;font-size:1.4rem;font-variant-numeric:tabular-nums}
@media (max-width:760px){.calc{grid-template-columns:1fr}}

/* richer forms */
.form-grid{max-width:52rem;grid-template-columns:1fr}
.form fieldset{border:0;padding:0;margin:0 0 .4rem;min-width:0}
.form legend{font:650 1.1rem/1.3 var(--display);padding:0 0 .7rem;color:var(--ink)}
.fg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem}
.fg .full,.form .full{grid-column:1/-1}
.form small{font:400 .82rem/1.3 var(--display);color:var(--muted)}
.req{color:var(--gold)}
.checks{margin-top:.4rem}
.checks legend{font:600 .95rem/1.3 var(--display);padding-bottom:.5rem}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.35rem 1rem;margin-bottom:1rem}
.form label.check{display:flex;align-items:flex-start;gap:.55rem;font:500 .95rem/1.35 var(--display);cursor:pointer}
.form label.check input{width:1.1rem;height:1.1rem;margin:.12rem 0 0;accent-color:var(--teal);flex:none}
.consent{display:grid;gap:.6rem;padding:1rem 1.1rem;border:1px solid var(--rule);border-radius:8px;background:var(--panel)}
.consent p{margin:0}
.hp{position:absolute;left:-9999px}
.form-msg{border-left:4px solid var(--gold);background:var(--panel);padding:.8rem 1rem;margin-bottom:1rem;font-family:var(--display)}
.stripe-note{margin-top:.8rem}
.plan-picks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.8rem}
.plan-pick{position:relative;cursor:pointer;display:block}
.plan-pick input{position:absolute;opacity:0;pointer-events:none}
.pp-body{display:grid;gap:.3rem;height:100%;padding:1rem 1.1rem;border:1.5px solid var(--rule);border-radius:8px;background:var(--panel);font-family:var(--display)}
.pp-body strong{font-size:1.1rem}
.pp-price{font-weight:700;font-size:1.5rem;letter-spacing:-.02em}
.pp-price small{font-size:.9rem;font-weight:500;color:var(--muted)}
.plan-pick input:checked+.pp-body{border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 22%,transparent)}
.plan-pick input:focus-visible+.pp-body{outline:3px solid var(--teal);outline-offset:2px}
.plan-alt{display:block;text-align:center;margin-top:.7rem}
@media (max-width:760px){.fg,.plan-picks{grid-template-columns:1fr}}

/* cta band */
.cta{background:var(--navy);color:#FBF0CF;border-radius:12px;padding:clamp(1.8rem,4vw,3rem);margin:clamp(2rem,5vw,3.5rem) 0;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center}
.cta h2{margin:0 0 .3rem;color:#FBF0CF}
.cta p{margin:0;color:#DDE6FE}
.cta .btn{background:var(--hi);color:var(--hi-ink);border-color:var(--hi)}
@media (max-width:700px){.cta{grid-template-columns:1fr}}

/* article */
.article{max-width:68ch;padding-bottom:1rem}
.article h2{margin-top:1.8rem;font-size:1.45rem}

/* footer */
.site-foot{border-top:2px solid var(--gold);margin-top:3rem;padding:2.6rem 0 2rem;font-family:var(--display);font-size:.93rem}
.foot-grid{display:grid;grid-template-columns:1.3fr repeat(4,1fr);gap:2rem}
.foot-grid h2{font-size:.98rem;margin-bottom:.7rem}
.foot-grid ul{list-style:none;padding:0;margin:0}
.foot-grid li{margin:.3rem 0}
.foot-grid a{color:var(--muted);text-decoration:none}
.foot-grid a:hover{color:var(--teal);text-decoration:underline}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;color:var(--muted);border-top:1px solid var(--rule);margin-top:2rem;padding-top:1.2rem}
@media (max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
/* ---------- rail menu ---------- */
:root{--rail:56px;--rail-open:268px;--top:60px}
body{padding-left:var(--rail)}
html.pinned body{padding-left:var(--rail-open)}
.rail{position:fixed;inset:0 auto 0 0;width:var(--rail);z-index:60;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--rule);overflow:hidden;transition:width .12s cubic-bezier(.2,.7,.2,1),box-shadow .12s}
.rail.open,html.pinned .rail{width:var(--rail-open)}
.rail.open:not(.is-pinned){box-shadow:12px 0 40px -18px rgba(41,47,65,.45)}
.rail .lbl{opacity:0;transition:opacity .08s;white-space:nowrap}
.rail.open .lbl,html.pinned .rail .lbl{opacity:1;transition-delay:.04s}
.rail-top{display:flex;align-items:center;gap:.4rem;height:var(--top);padding:0 10px 0 13px;border-bottom:1px solid var(--rule);flex:none}
.rail-logo{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font:700 1.08rem/1 var(--display);letter-spacing:-.02em;min-width:0;flex:1}
.rail-logo svg{width:30px;height:30px;flex:none}
.rail-pin,.rail-close{display:grid;place-items:center;width:32px;height:32px;border:0;border-radius:6px;background:transparent;color:var(--muted);cursor:pointer;flex:none}
.rail-pin:hover,.rail-close:hover{background:var(--soft);color:var(--ink)}
.rail-pin[aria-pressed="true"]{color:var(--gold);background:var(--soft)}
.rail-close{display:none}
.rail:not(.open):not(.is-pinned) .rail-pin{display:none}
.rail-nav{flex:1;overflow-y:auto;overflow-x:hidden;padding:.5rem 0;scrollbar-width:thin}
.ri{position:relative;display:flex;align-items:center;gap:.85rem;width:100%;height:40px;padding:0 0 0 18px;border:0;background:transparent;color:var(--muted);font:500 .95rem/1 var(--display);text-decoration:none;cursor:pointer;text-align:left}
.ri .ico{width:20px;height:20px;flex:none}
.ri:hover,.rs:hover{color:var(--ink);background:var(--soft)}
.ri[aria-current="page"],.ri.is-active{color:var(--ink)}
.ri[aria-current="page"]::before,.ri.is-active::before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--gold)}
.ri .chev{margin-left:auto;margin-right:12px;display:grid;transition:transform .15s,opacity .08s}
.rg.is-open .chev{transform:rotate(90deg)}
.subs{display:none;padding:.15rem 0 .4rem}
.rail.open .rg.is-open .subs,html.pinned .rail .rg.is-open .subs{display:block}
.rs{display:flex;align-items:center;gap:.5rem;padding:.42rem 1rem .42rem 56px;color:var(--muted);text-decoration:none;font:500 .88rem/1.25 var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rs[aria-current="page"]{color:var(--teal);font-weight:600}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none;box-shadow:0 0 0 2px var(--panel)}
.rh{padding:1.1rem 0 .35rem 20px;font:600 .74rem/1 var(--display);color:var(--muted);letter-spacing:.02em}
.rail-foot{border-top:1px solid var(--rule);padding:.4rem 0;flex:none}
.theme-btn [data-theme-ico]{display:none}
.theme-btn[data-mode="system"] [data-theme-ico="system"],.theme-btn[data-mode="light"] [data-theme-ico="light"],.theme-btn[data-mode="dark"] [data-theme-ico="dark"]{display:block}
.ri-cta{color:var(--teal);font-weight:600}
/* collapsed tooltips for keyboard users */
.rail:not(.open) .ri:focus-visible::after{content:attr(data-tip);position:fixed;left:62px;background:var(--ink);color:var(--paper);font:600 .8rem/1 var(--display);padding:.45rem .6rem;border-radius:5px;white-space:nowrap}
.rail-backdrop{position:fixed;inset:0;background:rgba(20,24,34,.45);z-index:55}

/* ---------- topbar ---------- */
.topbar{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--rule)}
.topbar-in{display:flex;align-items:center;gap:1rem;height:var(--top);max-width:var(--wrap);margin:0 auto;padding:0 clamp(1.1rem,4vw,2.25rem)}
.menu-btn{display:none;border:0;background:transparent;color:var(--ink);width:40px;height:40px;margin-left:-8px;border-radius:6px;cursor:pointer;place-items:center}
.menu-btn .ico{width:24px;height:24px}
.top-logo{display:none;align-items:center;gap:.5rem;color:var(--ink);text-decoration:none;font:700 1.05rem/1 var(--display)}
.top-logo svg{width:26px;height:26px}
.top-crumbs{flex:1;min-width:0}
.top-crumbs .crumbs{padding:0;max-width:none;margin:0}
.top-crumbs .crumbs ol{flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.top-crumbs .crumbs li:last-child{overflow:hidden;text-overflow:ellipsis}
.top-actions{display:flex;gap:.5rem;flex:none}
.btn-sm{padding:.55rem .85rem;font-size:.92rem}
@media (max-width:899px){
  body,html.pinned body{padding-left:0}
  .rail,html.pinned .rail{width:min(86vw,300px);transform:translateX(-102%);transition:transform .18s ease;box-shadow:none}
  .rail.open{transform:none;box-shadow:12px 0 40px -18px rgba(0,0,0,.5)}
  .rail .lbl{opacity:1}
  .rail .subs{display:none}.rail .rg.is-open .subs{display:block}
  .rail-pin{display:none}.rail-close{display:grid}
  .menu-btn{display:grid}.top-logo{display:flex}.top-crumbs{display:none}
  .top-actions .btn-line{display:none}
}
@media (max-width:420px){.top-logo span{display:none}}
@media (prefers-reduced-motion:reduce){.rail,.rail .lbl,.ri .chev{transition:none}}