/* Sonoma Botanicals — site-specific additions on top of sb-site.css.
   Covers layout the redesign reference dropped but this site keeps
   (feature photos, services photo, CTA band, form status). Tokens only. */

/* Anchor targets clear the sticky nav bar */
section[id]{scroll-margin-top:calc(var(--bar-h) + 8px)}

/* Skip link: hidden until focused */
.sb-skip{position:absolute;left:var(--gutter);top:-100px;z-index:100;padding:10px 18px;background:var(--paper);color:var(--garden-700);border:1px solid var(--stone-500)}
.sb-skip:focus{top:12px}

/* Header: one row, logo left + nav right (replaces sb-site.css's centred masthead + separate navbar).
   The row is sticky with a negative top, so it slides up until only its bottom --bar-h strip
   (where the nav sits) is visible. Its height never changes, so sticking causes no scroll jump. */
/* logo-header.webp is the logo trimmed of its transparent margin (440x246) */
:root{--bar-h:64px;--logo-w:200px;--logo-h:calc(var(--logo-w) * 246 / 440);--head-pad:14px;--head-h:calc(var(--logo-h) + 2 * var(--head-pad));
  --nav-lift:calc((var(--head-h) - var(--bar-h)) / 2)}
.sb-topline .sb-container{font-size:13px;padding-block:12px}
.sb-headbar{position:sticky;top:calc(var(--bar-h) - var(--head-h));z-index:50;height:var(--head-h);
  background:color-mix(in srgb,var(--paper) 94%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--linen-300);transition:box-shadow var(--dur-base) var(--ease-out)}
.sb-headbar.is-stuck{box-shadow:var(--header-shadow)}
.sb-headbar__inner{position:relative;height:100%;display:flex;justify-content:space-between;align-items:flex-end}
.sb-headbar__logo{align-self:center;display:block;transition:opacity var(--dur-base) var(--ease-out)}
.sb-headbar__logo img{width:var(--logo-w)}
.sb-headbar.is-stuck .sb-headbar__logo{opacity:0;pointer-events:none}
.sb-headbar__wordmark{position:absolute;left:var(--gutter);bottom:0;height:var(--bar-h);display:flex;align-items:center;
  font-family:var(--font-display);font-size:24px;color:var(--ink-900);text-decoration:none;
  opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out)}
.sb-headbar.is-stuck .sb-headbar__wordmark{opacity:1;pointer-events:auto}
/* Nav sits in the bottom strip but is lifted to the row's centre line at the top of the page;
   the script eases --stick-p from 0 to 1 as the row slides up, bringing it down into the strip */
.sb-headbar nav{height:var(--bar-h);display:flex;align-items:center;transform:translateY(calc((var(--stick-p, 0) - 1) * var(--nav-lift)))}
.sb-nav{column-gap:30px}
.sb-nav li{gap:30px}
.sb-nav a{font-size:14px}
@media (max-width:860px){
  /* Logo and nav no longer fit side by side: logo centred above the nav */
  :root{--logo-w:170px;--head-h:calc(var(--head-pad) + var(--logo-h) + var(--bar-h));--nav-lift:0px}
  .sb-headbar__inner{flex-direction:column;align-items:center;justify-content:flex-end}
  .sb-headbar__logo{align-self:center;margin-top:var(--head-pad)}
  .sb-headbar__wordmark{display:none}
}

/* Back-to-top: appears once the header row has stuck (same trigger as the nav shadow) */
.sb-totop{position:fixed;right:calc(var(--gutter) + env(safe-area-inset-right, 0px));bottom:calc(var(--gutter) + env(safe-area-inset-bottom, 0px));z-index:60;
  display:inline-flex;align-items:center;min-height:44px;padding:0 20px;
  font:var(--fw-medium) 12px/1 var(--font-sans);letter-spacing:var(--ls-caps-wide);text-transform:uppercase;text-decoration:none;
  color:var(--ink-900);background:var(--paper);border:1px solid var(--ink-900);border-radius:var(--radius-pill);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out),visibility 0s linear var(--dur-base),background var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.sb-totop.is-visible{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.sb-totop:hover{background:var(--ink-900);color:var(--paper)}
@media (prefers-reduced-motion:reduce){.sb-totop{transition:none}}

/* Touch targets >= 44px (nav, phone link, footer links) without changing visual spacing */
.sb-nav a{padding-block:16px}
.sb-topline a{display:inline-flex;align-items:center;min-height:44px;margin-block:-14px}
.sb-footer__nav a{padding-block:16px}

/* Feature cards keep their photos */
.sb-feature__img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius-xs)}

/* Services: product names in the index, CTA below it */
.sb-measure{max-width:34em}
.sb-index__name{font-size:21px;letter-spacing:.04em}
.sb-services__fig{margin:0}

/* CTA band */
.sb-cta{background:var(--surface-brand)}
.sb-cta__inner{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center}
.sb-cta .sb-h2{color:var(--text-on-brand)}

/* Contact */
.sb-contact__head p{max-width:34em}
.sb-fieldset{border:0;margin:0;padding:0;min-width:0}
.sb-fieldset legend{padding:0;margin-bottom:8px}
/* sb-site.css sets this in --text-subtle, which is 3.7:1 on the white form card; muted passes 4.5:1 */
.sb-form__note{color:var(--text-muted)}
.sb-contact__status:empty{display:none}
.sb-contact__status{max-width:var(--container-form);margin:0 auto 32px;padding:24px;background:var(--status-success-bg);color:var(--text-heading);text-align:center}
/* After a successful submit the form is emptied by the handler; hide its frame too */
.sb-frame--form:not(:has(input)){display:none}

/* Footer copyright line */
.sb-footer p.sb-mono{margin-top:-10px}

@media (max-width:600px){
  .sb-index__name{font-size:18px}
  .sb-topline .sb-container{font-size:12px;padding-block:10px}
  :root{--bar-h:56px}
  .sb-nav{column-gap:18px}
  .sb-nav li{gap:18px}
  .sb-nav a{font-size:12px}
  .sb-totop{padding:0 16px}
}