/* ==================================================================
   busillasolutions.ca — shared stylesheet
   Loaded by index.html, privacy.html and accessibility.html.
   This is the ONLY copy. Edit here and every page picks it up.
   Paths inside this file (fonts/...) are relative to the site root,
   which is where this file lives. Keep it there.
   ================================================================== */

  /* ------------------------------------------------------------------
     Busilla Business Solutions.
     Palette: indigo ink ground, warm paper reading surface, gold for
     actions, rust reserved for problem markers so colour carries meaning.
     Type: Schibsted Grotesk 800 for display, Figtree for body.
     Self-hosted variable fonts, SIL Open Font License. See fonts/
     ------------------------------------------------------------------ */
  @font-face{
    font-family:"Schibsted Grotesk";
    src:url("fonts/SchibstedGrotesk-Variable.woff2") format("woff2");
    font-weight:400 900; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"Figtree";
    src:url("fonts/Figtree-Variable.woff2") format("woff2");
    font-weight:300 900; font-style:normal; font-display:swap;
  }

  :root{
    /* Indigo ink */
    --ink-950:#080B1C; --ink-900:#0E1430; --ink-800:#161E45;
    --ink-700:#222D62; --ink-600:#3A47A8; --ink-400:#7C88DA;
    --ink-200:#C6CCF2; --ink-100:#E6E9FB;

    /* Paper */
    --paper:#F4F1E9; --paper-2:#EFEBE0; --white:#FFFFFF;
    --rule:#DCD5C4; --rule-strong:#C2B9A2;

    /* Accents */
    --gold-500:#F0A81E; --gold-300:#F8D078; --gold-100:#FBEDCB;
    --rust-600:#B33A18; --rust-100:#F4DED5;

    /* Ink on paper */
    --text:#12162C; --text-body:#2C3350; --text-muted:#5B6180;
    /* Paper on ink */
    --on-ink:#F2F0EA; --on-ink-soft:#C9CDE4; --on-ink-muted:#A9AFC9;

    --display:"Schibsted Grotesk",system-ui,sans-serif;
    --body:"Figtree",system-ui,sans-serif;

    --shell:min(1200px,100% - 2.5rem);
    --card-pad:clamp(1.6rem,3vw,2.5rem);
    --radius:18px;
    --shadow-card:0 1px 2px rgba(12,16,40,.05),0 14px 34px -14px rgba(12,16,40,.22);
    --shadow-lift:0 2px 4px rgba(12,16,40,.06),0 30px 60px -22px rgba(12,16,40,.42);
  }

  *,*::before,*::after{box-sizing:border-box}

  html{-webkit-text-size-adjust:100%}
  @media (prefers-reduced-motion:no-preference){ html{scroll-behavior:smooth} }

  /* The nav is sticky and ~74px tall, so anchor targets must clear it when the
     page jumps to them. Without this the nav sits on top of each heading. */
  section[id],main[id],header[id]{scroll-margin-top:calc(74px + 1.5rem)}

  body{
    margin:0;
    background:var(--paper);
    color:var(--text-body);
    font-family:var(--body);
    font-size:1.125rem;
    line-height:1.72;
    font-weight:400;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
  }

  h1,h2,h3{
    font-family:var(--display);
    color:var(--text);
    margin:0;
    text-wrap:balance;
    overflow-wrap:break-word;
    font-variation-settings:"wght" 800;
  }
  h1{
    font-size:clamp(2.9rem,5.5vw,4.6rem);
    line-height:.97; letter-spacing:-.033em; font-weight:800;
  }
  h2{
    font-size:clamp(2.15rem,4.7vw,3.6rem);
    line-height:1.02; letter-spacing:-.03em; font-weight:800;
  }
  h3{
    font-size:clamp(1.55rem,2.7vw,2.15rem);
    line-height:1.14; letter-spacing:-.022em; font-weight:700;
    font-variation-settings:"wght" 700;
  }
  p{margin:0}

  a{color:var(--ink-600);text-decoration-thickness:1px;text-underline-offset:.18em}
  a:hover{color:var(--ink-700)}

  :focus-visible{
    outline:3px solid var(--ink-600);
    outline-offset:3px;
    border-radius:3px;
  }
  .on-dark :focus-visible{outline-color:var(--gold-500)}
  /* main carries tabindex="-1" so the skip link reliably moves focus in every
     browser. Its own outline is suppressed because a 3px ring drawn around the
     entire page reads as a rendering fault rather than a focus cue. */
  main:focus{outline:none}

  .skip{
    position:absolute;left:-9999px;top:0;z-index:100;
    background:var(--gold-500);color:var(--text);
    padding:.85rem 1.25rem;font-weight:700;border-radius:0 0 10px 0;
  }
  .skip:focus{left:0}

  /* ---------------------------------------------------------------- nav */
  .nav{
    position:sticky;top:0;z-index:40;
    background:rgba(244,241,233,.86);
    -webkit-backdrop-filter:saturate(150%) blur(12px);
    backdrop-filter:saturate(150%) blur(12px);
    border-bottom:1px solid var(--rule);
  }
  .nav-inner{
    width:var(--shell);margin-inline:auto;
    display:flex;align-items:center;gap:1.5rem;
    min-height:74px;
  }
  .brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--text)}
  .wordmark{display:flex;flex-direction:column;line-height:1.05}
  .wordmark .n1{
    font-family:var(--display);font-weight:800;font-size:1.06rem;letter-spacing:-.02em;
  }
  .wordmark .n2{
    font-size:.76rem;color:var(--text-muted);font-weight:500;letter-spacing:.005em;
  }
  .nav-links{
    display:flex;gap:1.75rem;list-style:none;margin:0 0 0 auto;padding:0;
    font-size:1rem;font-weight:500;
  }
  .nav-links a{color:var(--text-body);text-decoration:none;padding-block:.4rem}
  .nav-links a:hover{color:var(--ink-600);text-decoration:underline;text-decoration-thickness:2px}
  .nav-cta{margin-left:0}
  .cta-short{display:none}
  @media (max-width:860px){
    .nav-links{display:none}
    .nav-cta{margin-left:auto}
  }
  @media (max-width:560px){
    /* The full wordmark stays visible at every width. It stacks vertically, so
       showing "Business Solutions" costs no horizontal space, and it fits even
       at 320px with room to spare. Only the button label shortens here. */
    .cta-full{display:none}
    .cta-short{display:inline}
  }

  /* ------------------------------------------------------------- buttons */
  .btn{
    display:inline-flex;align-items:center;justify-content:center;
    font-family:var(--display);font-weight:700;letter-spacing:-.01em;
    text-decoration:none;border-radius:999px;
    white-space:nowrap;
    transition:transform .16s ease,box-shadow .16s ease,background-color .16s ease;
  }
  .btn-gold{background:var(--gold-500);color:var(--text)}
  .btn-gold:hover{background:var(--gold-300);color:var(--text);transform:translateY(-2px)}
  .btn-ink{background:var(--ink-800);color:var(--on-ink)}
  .btn-ink:hover{background:var(--ink-700);color:var(--on-ink);transform:translateY(-2px)}
  .btn-ghost{
    background:transparent;color:var(--on-ink);
    box-shadow:inset 0 0 0 1.5px rgba(242,240,234,.35);
  }
  .btn-ghost:hover{color:var(--text);background:var(--on-ink);transform:translateY(-2px)}
  .btn-sm{font-size:.95rem;padding:.62rem 1.15rem}
  .btn-md{font-size:1.08rem;padding:.95rem 1.75rem}
  .btn-lg{font-size:clamp(1.1rem,1.6vw,1.3rem);padding:1.1rem 2.15rem}

  /* ---------------------------------------------------------------- hero */
  .hero{
    background:var(--ink-950);
    color:var(--on-ink);
    position:relative;
    overflow:hidden;
    padding-block:clamp(3.5rem,8vw,7rem) clamp(4rem,9vw,7.5rem);
  }
  /* Ruled ledger field, drawn with gradients rather than an image file. The
     content security policy allows images from this domain only (img-src 'self'),
     and a gradient needs no file at all. */
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      repeating-linear-gradient(to bottom,rgba(198,204,242,.07) 0 1px,transparent 1px 46px),
      radial-gradient(120% 90% at 78% 8%,rgba(58,71,168,.55) 0%,transparent 62%),
      radial-gradient(80% 60% at 6% 96%,rgba(240,168,30,.13) 0%,transparent 60%);
    pointer-events:none;
  }
  .hero-inner{width:var(--shell);margin-inline:auto;position:relative}
  .hero h1{
    color:var(--on-ink);max-width:17ch;text-wrap:pretty;
    /* Lower bound is 2.6rem, not 2.9rem. At 2.9rem the word "management," is
       301px wide and a 320px screen only has 280px, which forced sideways
       scrolling. Measured from the font metrics, not estimated. */
    font-size:clamp(2.6rem,6.4vw,5.25rem);
  }
  .deck{
    font-size:clamp(1.2rem,1.85vw,1.55rem);
    line-height:1.55;color:var(--on-ink-soft);
    max-width:54ch;margin-top:1.9rem;font-weight:400;
  }
  .hero-actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}

  /* ------------------------------------------------------------- shell */
  .band{width:var(--shell);margin-inline:auto}
  .section-head{
    padding-block:clamp(3.5rem,7vw,6rem) clamp(1.5rem,3vw,2.5rem);
    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
    gap:clamp(1rem,4vw,3.5rem);align-items:end;
  }
  .section-head h2{max-width:17ch}
  .section-head .sub{max-width:44ch;color:var(--text-muted);font-size:1.1rem}
  @media (max-width:880px){
    .section-head{grid-template-columns:minmax(0,1fr);align-items:start}
    .section-head .sub{margin-top:1.25rem}
  }

  /* -------------------------------------------------------- work ledger */
  .spread{
    display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
    gap:clamp(1.5rem,4vw,3.5rem);
    align-items:start;
    border-top:1px solid var(--rule-strong);
    padding-block:clamp(2.25rem,4.5vw,3.75rem);
  }
  .spread:last-of-type{border-bottom:1px solid var(--rule-strong)}
  /* display:flex, not inline-flex. An inline-flex marker sits inside a line
     box and inherits the body's 1.72 leading, which drops it ~5px below the
     matching marker in the card and breaks the alignment. */
  .marker{
    display:flex;align-items:center;gap:.5rem;width:fit-content;
    flex:none;white-space:nowrap;
    font-weight:600;font-size:.95rem;line-height:1.5;
  }
  .marker::before{
    content:"";width:9px;height:9px;border-radius:2px;flex:none;
  }
  .marker-problem{color:var(--rust-600);font-variant-numeric:tabular-nums}
  .marker-problem::before{background:var(--rust-600)}
  .marker-solution{color:var(--ink-600);font-variant-numeric:tabular-nums}
  .marker-solution::before{background:var(--ink-600)}

  /* The problem column is pushed down by the card's own padding so both
     markers land on the same baseline. */
  .problem-side{padding-top:var(--card-pad)}
  .problem-text{
    font-family:var(--display);font-weight:600;
    font-size:clamp(1.25rem,2vw,1.6rem);line-height:1.24;
    letter-spacing:-.018em;color:var(--text-muted);
    margin-top:.75rem;max-width:24ch;
  }
  .solution{
    background:var(--white);
    border-radius:var(--radius);
    box-shadow:var(--shadow-card);
    padding:var(--card-pad);
  }
  .solution .marker{margin-bottom:.85rem}
  .solution .detail{
    margin-top:1rem;max-width:56ch;color:var(--text-body);
  }
  @media (max-width:820px){
    .spread{grid-template-columns:minmax(0,1fr);gap:1.25rem}
    .problem-text{max-width:36ch}
    .problem-side{padding-top:0}
  }

  /* -------------------------------------------------------------- about */
  .about{
    display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:clamp(1.75rem,4vw,3.5rem);
    padding-block:clamp(3.5rem,7vw,6rem) clamp(2rem,4vw,3rem);
    align-items:start;
  }
  .portrait{
    width:168px;height:168px;border-radius:50%;
    object-fit:cover;display:block;
    box-shadow:0 0 0 4px var(--paper),0 0 0 7px var(--gold-500);
  }
  .about .name{
    font-family:var(--display);font-weight:800;
    font-size:clamp(1.9rem,3.4vw,2.6rem);letter-spacing:-.03em;
    line-height:1.05;color:var(--text);
  }
  .about .role{color:var(--text-muted);margin-top:.3rem;font-size:1.05rem}
  .li-link{
    display:inline-flex;align-items:center;gap:.4rem;margin-top:.65rem;
    color:var(--ink-600);font-weight:600;font-size:.98rem;text-decoration:none;
  }
  .li-link:hover{color:var(--ink-700);text-decoration:underline}
  .li-link svg{flex:none}
  .about .lede{margin-top:1.25rem;max-width:62ch;font-size:1.16rem}
  @media (max-width:700px){
    .about{grid-template-columns:minmax(0,1fr)}
    .portrait{width:128px;height:128px}
  }

  /* -------------------------------------------------------------- proof */
  .proof-wrap{border-top:1px solid var(--rule-strong)}
  .proof{
    list-style:none;margin:0;padding:0;
    display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:clamp(1.25rem,3vw,2.5rem);
    padding-top:clamp(1.75rem,3vw,2.5rem);
    padding-bottom:clamp(3.5rem,7vw,6rem);
  }
  .proof-num{
    display:block;font-family:var(--display);font-weight:800;
    font-size:clamp(3rem,5.5vw,4.5rem);line-height:.92;letter-spacing:-.045em;
    color:var(--ink-700);font-variant-numeric:tabular-nums;
  }
  .proof-label{
    display:block;margin-top:.6rem;font-size:1rem;line-height:1.5;
    color:var(--text-muted);max-width:30ch;
  }
  @media (max-width:760px){ .proof{grid-template-columns:minmax(0,1fr);gap:1.75rem} }

  /* ---------------------------------------------------------------- faq */
  .faq-list{display:grid;gap:1rem;padding-bottom:clamp(3.5rem,7vw,6rem)}
  .faq-item{background:var(--white);border-radius:var(--radius);box-shadow:var(--shadow-card)}
  .faq-item summary{
    cursor:pointer;list-style:none;
    display:flex;align-items:center;justify-content:space-between;gap:1.25rem;
    padding:var(--card-pad);
    font-family:var(--display);font-weight:700;letter-spacing:-.012em;
    font-size:clamp(1.24rem,1.78vw,1.46rem);line-height:1.3;
    color:var(--text);
  }
  .faq-item summary::-webkit-details-marker{display:none}
  .faq-item summary::after{
    content:"+";flex:none;
    font-family:var(--display);font-weight:800;font-size:1.5rem;line-height:1;
    color:var(--ink-600);
    transform:rotate(0deg);
    transition:transform .16s ease;
  }
  .faq-item[open] summary::after{transform:rotate(45deg)}
  .faq-item[open] summary{padding-bottom:.25rem}
  .faq-a{padding:0 var(--card-pad) var(--card-pad);color:var(--text-body)}
  .faq-a p{margin-top:0}
  .faq-a p+p{margin-top:.85em}

  /* ------------------------------------------------------------ contact */
  .contact{
    background:var(--ink-950);color:var(--on-ink);position:relative;overflow:hidden;
  }
  .contact::before{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:
      repeating-linear-gradient(to bottom,rgba(198,204,242,.06) 0 1px,transparent 1px 46px),
      radial-gradient(90% 120% at 18% 100%,rgba(240,168,30,.18) 0%,transparent 60%);
  }
  .contact-inner{
    width:var(--shell);margin-inline:auto;position:relative;
    padding-block:clamp(4rem,8.5vw,7rem);
  }
  .contact h2{color:var(--on-ink);max-width:15ch}
  .contact .note{
    margin-top:1.5rem;max-width:52ch;color:var(--on-ink-soft);
    font-size:clamp(1.1rem,1.55vw,1.3rem);line-height:1.6;
  }
  .contact .actions{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:2.5rem}

  /* ------------------------------------------------------------- footer */
  .site-footer{
    width:var(--shell);margin-inline:auto;
    padding-block:2.25rem 2.75rem;
    display:flex;flex-wrap:wrap;gap:1rem 2rem;
    justify-content:space-between;align-items:flex-start;
    font-size:.95rem;color:var(--text-muted);
  }
  .footer-meta p{margin:0}
  .footer-meta p+p{margin-top:.2rem}
  .footer-links{display:flex;flex-wrap:wrap;gap:1.5rem;list-style:none;margin:0;padding:0}
  .footer-links a{color:var(--text-muted)}
  .footer-links a:hover{color:var(--ink-600)}
  .footer-email{color:var(--text-muted)}
  .footer-meta a{color:var(--text-muted)}
  .footer-meta a:hover{color:var(--ink-600)}

  /* Text for screen readers only, hidden visually. */
  .visually-hidden{
    position:absolute;width:1px;height:1px;padding:0;margin:-1px;
    overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
  }

  /* --------------------------------------------------------- doc pages */
  .doc{
    width:min(72ch,100% - 2.5rem);margin-inline:auto;
    padding-block:clamp(3rem,6vw,5rem) clamp(2rem,4vw,3rem);
  }
  .doc h1{font-size:clamp(2.6rem,6vw,4.25rem);letter-spacing:-.035em}
  .doc h2{
    font-size:clamp(1.6rem,2.6vw,2.1rem);
    margin-top:2.75rem;letter-spacing:-.022em;line-height:1.15;
  }
  .doc p{margin-top:1.15rem;font-size:1.16rem;line-height:1.75;max-width:66ch}
  .doc ul{margin-top:1.15rem;padding-left:0;list-style:none;max-width:66ch}
  .doc ul li{
    position:relative;padding-left:1.6rem;margin-top:.85rem;
    font-size:1.16rem;line-height:1.7;
  }
  .doc ul li::before{
    content:"";position:absolute;left:0;top:.72em;
    width:8px;height:8px;border-radius:2px;background:var(--gold-500);
  }
  .doc .updated{
    margin-top:1rem;color:var(--text-muted);font-size:1rem;
    padding-bottom:1.75rem;border-bottom:1px solid var(--rule-strong);
  }
  .doc .back{
    display:inline-block;margin-top:3rem;font-family:var(--display);
    font-weight:700;font-size:1.05rem;text-decoration:none;
    border-bottom:2px solid var(--gold-500);padding-bottom:.15rem;
  }
  .doc .back:hover{border-bottom-color:var(--ink-600)}

  /* ----------------------------------------------------------- motion
     One orchestrated moment on the hero only, and nothing anywhere else. */
  @keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:no-preference){
    .hero h1{animation:rise .75s cubic-bezier(.2,.7,.2,1) .05s backwards}
    .hero .deck{animation:rise .75s cubic-bezier(.2,.7,.2,1) .16s backwards}
    .hero .hero-actions{animation:rise .75s cubic-bezier(.2,.7,.2,1) .26s backwards}
  }

  /* Reduced motion: also switch off the hover lift on buttons and the FAQ
     icon rotation, so the accessibility statement holds in full. */
  @media (prefers-reduced-motion:reduce){
    .btn,.faq-item summary::after{transition:none}
    .btn-gold:hover,.btn-ink:hover,.btn-ghost:hover{transform:none}
  }