/* ============================================================
   TUNED YOTA · shared chrome + design tokens
   Single source of truth for nav (.snav), footer (.sfoot),
   design tokens (:root), motion polish, and global focus styles.
   Linked by every page; do not re-inline this block per page.
   ============================================================ */

:root{
  --bg:#EDECEB; --ink:#3A2E26; --brown:#5B4B42; --brown2:#5D4B40;
  --sage:#99A08E; --sage-d:#7c8472; --blue:#B3D0D9; --sand:#DFC4B5;
  --card:#FAF9F7; --white:#fff;
  --line:rgba(91,75,66,.16); --ring:rgba(179,208,217,.55);
  --shadow:0 14px 50px -12px rgba(58,46,38,.22);
  --shadow-sm:0 6px 22px -10px rgba(58,46,38,.20);
  --r:16px;
  --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1);
  --dur-fast:140ms; --dur-base:200ms;
}

/* ---------- sticky nav ---------- */
.snav{position:sticky;top:0;z-index:1000;background:rgba(237,236,235,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;padding:11px 18px;font-family:'Lato',sans-serif}
.snav-logo{font-family:'Spectral SC',serif;font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-size:17px;color:#5B4B42;text-decoration:none;margin-right:auto;display:inline-flex;align-items:center;gap:9px}
.snav-logo::before{content:"";width:27px;height:27px;flex:0 0 auto;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='3.879%205.098%2040.002%2039.316'%3E%3Cpath%20fill='%23B3D0D9'%20d='M23.881,44.414L3.879,29.408l5.022-7.53V5.098L19.837,18.77h8.094L38.86,5.098v16.78l5.021,7.53L23.881,44.414z%20M7.037,28.869l16.844,12.638l16.85-12.638l-4.189-6.287V11.726l-7.5,9.36H18.72l-7.493-9.36v10.857L7.037,28.869z'/%3E%3C/svg%3E") center/contain no-repeat}
.snav-links{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.snav-links a{font-weight:800;font-size:13px;letter-spacing:.02em;color:#5D4B40;text-decoration:none;padding:8px 11px;border-radius:99px;transition:.18s}
.snav-links a:hover{background:rgba(153,160,142,.18);color:#3A2E26}
.snav-call{font-family:'Lato';font-weight:900;font-size:13px;background:#3A2E26;color:#F3EFEA;text-decoration:none;border-radius:99px;padding:9px 16px;margin-left:6px}
.snav-call:hover{background:#5B4B42}
.snav-share{background:transparent;border:1.6px solid var(--brown);color:var(--brown);border-radius:99px;padding:10px 18px;font-family:'Lato',sans-serif;font-weight:900;font-size:13.5px;letter-spacing:.03em;cursor:pointer;margin-left:8px;transition:.2s}
.snav-share:hover{background:var(--brown);color:#fff}
@media(max-width:560px){.snav-share{display:none}}

/* ---------- footer ---------- */
.sfoot{font-family:'Lato',sans-serif;background:#3A2E26;color:#D8CFC4;margin-top:46px;padding:34px 20px 28px;text-align:center}
.sfoot .fmark{font-family:'Spectral SC',serif;font-weight:600;letter-spacing:.18em;text-transform:uppercase;font-size:18px;color:#fff;display:flex;flex-direction:column;align-items:center;gap:11px}
.sfoot .fmark::before{content:"";width:44px;height:44px;background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='3.879%205.098%2040.002%2039.316'%3E%3Cpath%20fill='%23B3D0D9'%20d='M23.881,44.414L3.879,29.408l5.022-7.53V5.098L19.837,18.77h8.094L38.86,5.098v16.78l5.021,7.53L23.881,44.414z%20M7.037,28.869l16.844,12.638l16.85-12.638l-4.189-6.287V11.726l-7.5,9.36H18.72l-7.493-9.36v10.857L7.037,28.869z'/%3E%3C/svg%3E") center/contain no-repeat}
.sfoot .ftag{font-weight:700;letter-spacing:.28em;text-transform:uppercase;font-size:10px;color:#B3D0D9;margin:6px 0 16px}
.sfoot a{color:#EDE6DD;text-decoration:none;font-weight:700}.sfoot a:hover{text-decoration:underline}
.sfoot .frow{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;font-size:13.5px;margin-bottom:14px}
.sfoot .fcon{font-size:13.5px;line-height:1.9;opacity:.9}
.sfoot .fcopy{font-size:11.5px;opacity:.8;margin-top:16px}
@media(max-width:560px){.snav-logo{margin-right:0;width:100%;text-align:center;justify-content:center}.snav{justify-content:center}}

/* ---------- motion polish ---------- */
.btn,.btn.primary,.btn.sage,.btn.outline,.btn.ink,.tf-opt,.tf-chip,.tf-back,.tf-mkt,.tf-mktbar button,.tf-crumb button,.v-card,.fq-chip,.fq-item,.fq-cta,.lh a.link,.snav-links a,.snav-call,.tf-inst .iacts a{transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) ease,border-color var(--dur-fast) ease,color var(--dur-fast) ease,box-shadow var(--dur-base) var(--ease-out)}
.btn:active,.btn.primary:active,.btn.sage:active,.btn.outline:active,.btn.ink:active,.tf-opt:active,.tf-chip:active,.tf-back:active,.tf-mkt:active,.tf-mktbar button:active,.tf-crumb button:active,.v-card:active,.fq-chip:active,.lh a.link:active,.snav-call:active,.tf-inst .iacts a:active{transform:scale(.97)}
@media (hover:none){.btn.primary:hover,.tf-opt:hover,.v-card:hover,.tf-mkt:hover,.lh a.link:hover{transform:none}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important}.btn:hover,.btn.primary:hover,.tf-opt:hover,.v-card:hover,.tf-mkt:hover,.lh a.link:hover,.btn:active,.btn.primary:active,.tf-opt:active,.tf-chip:active,.tf-mkt:active,.tf-back:active,.v-card:active,.snav-call:active,.lh a.link:active,.fq-chip:active,.tf-mktbar button:active,.tf-crumb button:active,.tf-inst .iacts a:active{transform:none}}

/* ---------- global focus-visible (keyboard accessibility) ----------
   Ring sits 2px outside the element on the (light) page background.
   --ink reads ~7:1 on the beige/card surfaces where most controls live;
   controls inside dark containers get a light --blue ring instead. */
a:focus-visible,button:focus-visible,summary:focus-visible,[tabindex]:focus-visible,
.v-card:focus-visible,.tf-opt:focus-visible,.tf-chip:focus-visible,.fq-chip:focus-visible{
  outline:2.5px solid var(--ink);outline-offset:2px;
}
.btn:focus-visible,.snav-call:focus-visible{outline-offset:3px}
.sfoot a:focus-visible,.tf-trust a:focus-visible,.tf-trust li a:focus-visible{outline-color:var(--blue)}
/* form fields already show a border+ring on focus — don't double up */
.tf-field input:focus-visible,.tf-field select:focus-visible,.tf-field textarea:focus-visible{outline:none}

/* ---------- skip-to-content link (visible on keyboard focus) ---------- */
.skip-link{position:fixed;top:10px;left:10px;z-index:2000;background:var(--ink);color:#F3EFEA;
  font-family:'Lato',sans-serif;font-weight:900;font-size:14px;letter-spacing:.02em;
  padding:12px 18px;border-radius:99px;text-decoration:none;box-shadow:var(--shadow);
  transform:translateY(-160%);transition:transform var(--dur-base) var(--ease-out)}
.skip-link:focus{transform:none;outline:2.5px solid var(--blue);outline-offset:2px}

/* ---------- data tables: scroll instead of overflow on narrow phones ---------- */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl-wrap table{min-width:100%}

/* ---------- touch targets ≥44px on touch devices (keeps desktop compact) ---------- */
@media (pointer:coarse){
  .snav-links a,.snav-call,.fq-chip,.tm-acts a{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .btn,.tf-back{min-height:44px}
}