/* ===========================================================================
   Base: reset, type, links, focus, and the button vocabulary the PHP
   components (header, drawer, boards, hours) share with the Elementor
   widgets in 30-elementor.css.
   =========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:calc(var(--header-h) + 24px)}
/* no scrollbar beside the page (Windows draws a wide grey one): it still scrolls by wheel, touch and keys */
html{scrollbar-width:none}
html::-webkit-scrollbar{display:none;width:0;height:0}
body{
  margin:0;background:var(--navy);color:var(--text);
  font-family:var(--font-text);font-size:var(--fs-body);font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
main{display:block;background:var(--paper)}
main:focus{outline:none}
img,svg,video{max-width:100%;height:auto}
img{border-style:none}
picture{display:contents}
figure{margin:0}
p{margin:0 0 1.1em}
h1,h2,h3,h4,h5,h6{margin:0 0 .5em;font-family:var(--font-display);font-weight:800;line-height:1;color:inherit}
ul,ol{margin:0 0 1.1em;padding-left:1.25em}
a{color:var(--cobalt);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--navy)}
/* An Elementor kit's "Theme Style" sets a font, a case and a margin on bare
   a / p / h1–h6 at (0,1,1). `html .tf x` is (0,1,2): it wins that tie on any
   site, and any component rule with a class still wins over it. */
html .tf a{font-family:inherit;text-transform:inherit}
html .tf p{margin-block-end:1.1em}
html .tf h1,html .tf h2,html .tf h3,html .tf h4,html .tf h5,html .tf h6{text-transform:none;letter-spacing:normal}
button{font:inherit}
hr{border:0;height:1px;background:var(--line);margin:2rem 0}
table{border-collapse:collapse;width:100%}
abbr[title]{text-decoration:none}
::selection{background:var(--gold);color:var(--navy)}

/* An unsized inline SVG in a flex row grows to fill it: every icon gets a
   base size, so a missing component rule is slightly wrong, never enormous. */
.tf .ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.125em}

/* --------------------------------------------------------------- focus */
/* Keep the outline; style :focus-visible. Cobalt on light grounds, gold on
   every dark one (header, hero, footer, drawer, the dark bands). */
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px;border-radius:2px}
.tf .site-header :focus-visible,.tf .drawer :focus-visible,.tf .site-footer :focus-visible,.tf .callbar :focus-visible,.tf .hero :focus-visible,.tf .page-hero :focus-visible,.tf .sec-navy :focus-visible,.tf .sec-slate :focus-visible,.tf .sec-amb :focus-visible,.tf .board :focus-visible{outline-color:var(--gold-hi)}

.tf .skip-link{
  position:fixed;left:1rem;top:-100px;z-index:1000;
  background:var(--gold);color:var(--navy);padding:.7rem 1.1rem;border-radius:var(--r-sm);
  font-family:var(--font-display);font-weight:800;font-size:.95rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
}
.tf .skip-link:focus{top:1rem}
.tf .sr-only,.tf .screen-reader-text{
  position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0;
}

.tf .container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}

/* --------------------------------------------------------------- buttons */
/* One button, many finishes. The finish classes only set the four custom
   properties, so they work on a PHP <a class="btn btn-ice"> and on an
   Elementor Button widget carrying the same classes (30-elementor.css draws
   the widget's .elementor-button from the same properties).

   brass — gold, the one primary action on a page (it is the call button)
   ice   — ice blue, on the dark blues
   navy  — on paper and tin
   glass — outlined, on photographs and dark bands
   chalk — outlined in chalk, on a chalkboard
   line  — outlined in cobalt, on paper (the second button beside a navy one) */
.tf .btn-brass{--b-bg:var(--gold);--b-fg:var(--abyss);--b-bd:var(--gold);--b-hover:var(--gold-hi);--b-glow:rgba(194,145,43,.55)}
.tf .btn-ice{--b-bg:var(--ice);--b-fg:var(--navy);--b-bd:var(--ice);--b-hover:var(--ice-hi);--b-glow:rgba(180,213,255,.45)}
.tf .btn-navy{--b-bg:var(--cobalt);--b-fg:var(--white);--b-bd:var(--cobalt);--b-hover:var(--navy);--b-glow:rgba(0,62,143,.45)}
.tf .btn-glass{--b-bg:rgba(3,19,49,.28);--b-fg:var(--white);--b-bd:rgba(220,235,255,.55);--b-hover:rgba(220,235,255,.16);--b-glow:transparent}
.tf .btn-chalk{--b-bg:transparent;--b-fg:var(--chalk);--b-bd:rgba(244,241,232,.55);--b-hover:rgba(244,241,232,.1);--b-glow:transparent}
.tf .btn-line{--b-bg:transparent;--b-fg:var(--cobalt);--b-bd:rgba(0,62,143,.35);--b-hover:rgba(0,62,143,.08);--b-glow:transparent}

.tf a.btn,.tf button.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:52px;padding:.8rem 1.5rem;border:2px solid var(--b-bd, var(--gold));border-radius:var(--r-sm);
  background:var(--b-bg, var(--gold));color:var(--b-fg, var(--abyss));
  font-family:var(--font-display);font-size:1.02rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;line-height:1;
  text-decoration:none;cursor:pointer;position:relative;overflow:hidden;isolation:isolate;
  box-shadow:0 14px 30px -16px var(--b-glow, transparent);
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.tf a.btn:hover,.tf button.btn:hover{background:var(--b-hover, var(--gold-hi));color:var(--b-fg, var(--abyss));transform:translateY(-2px)}
.tf .btn .ico{width:1.1em;height:1.1em}
.tf a.btn-sm,.tf button.btn-sm{min-height:44px;padding:.6rem 1.05rem;font-size:.92rem}

/* a text link with a drawn arrow */
.tf .link-arrow{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:var(--font-display);font-size:1.05rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--cobalt);text-decoration:none;
}
.tf .link-arrow .ico{width:1.1em;height:1.1em;transition:transform .25s var(--ease)}
.tf .link-arrow:hover{color:var(--navy)}
.tf .link-arrow:hover .ico{transform:translateX(4px)}

/* -------------------------------------------------- open now / closed */
/* the status pill: top bar, hero chip, hours board, drawer, ticket */
.tf .open-status{display:inline-flex;align-items:center;gap:.55rem}
.tf .open-status .dot{width:9px;height:9px;border-radius:50%;background:var(--on-dark-3);flex:none;box-shadow:0 0 0 3px rgba(255,255,255,.08)}
.tf .open-status.is-open .dot{background:var(--open);box-shadow:0 0 0 3px rgba(95,208,138,.22),0 0 12px rgba(95,208,138,.6);animation:tf-pulse 2.4s ease-in-out infinite}
.tf .open-status.is-closed .dot{background:var(--closed)}
@keyframes tf-pulse{50%{box-shadow:0 0 0 6px rgba(95,208,138,0),0 0 12px rgba(95,208,138,.6)}}

/* ---------------------------------------------------------- generic page */
.tf .page-head{
  position:relative;isolation:isolate;
  padding:calc(var(--chrome-h) + clamp(3rem, 2rem + 4vw, 5.5rem)) 0 clamp(3.5rem, 2.5rem + 3vw, 5rem);
  background-color:var(--navy);background-image:var(--tx-swell-dark);color:var(--on-dark);text-align:center;
}
.tf .page-head h1{font-size:var(--fs-h1);font-weight:800;line-height:var(--lh-display);text-transform:uppercase;color:var(--white);margin:0}
.tf .page-head .kick{display:block;margin-bottom:.8rem;font-family:var(--font-display);font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-hi)}
.tf .content-wrap{padding:var(--section-y) 0;background:var(--paper) var(--tx-paper)}
.tf .prose{max-width:min(72ch,100%);margin-inline:auto;color:var(--text)}
.tf .prose h2{font-size:var(--fs-h3);margin-top:2rem}
.tf .prose h3{font-size:1.4rem;margin-top:1.6rem}
.tf .prose img{border-radius:var(--r)}
.tf .prose a{color:var(--cobalt)}
.tf .prose blockquote{margin:1.6rem 0;padding:.4rem 0 .4rem 1.4rem;border-left:3px solid var(--gold);font-size:1.25rem}

/* posts list (index / search) */
.tf .post-list{display:grid;gap:1.5rem;max-width:var(--narrow);margin-inline:auto;padding:0;list-style:none}
.tf .post-card{background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:1.6rem 1.8rem}
.tf .post-card h2{font-size:1.9rem;margin:0 0 .35rem}
.tf .post-card h2 a{color:var(--text);text-decoration:none}
.tf .post-card h2 a:hover{color:var(--cobalt)}
.tf .post-meta{font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.7rem}
.tf .pager{display:flex;justify-content:center;gap:.5rem;margin-top:2.5rem}
.tf .pager .page-numbers{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 .7rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);color:var(--text);text-decoration:none}
.tf .pager .page-numbers.current{background:var(--cobalt);border-color:var(--cobalt);color:var(--white)}

/* forms (search, the careers form) */
.tf input[type=text],.tf input[type=email],.tf input[type=tel],.tf input[type=search],.tf input[type=number],.tf input[type=url],.tf input[type=date],.tf select,.tf textarea{
  width:100%;min-height:48px;padding:.65rem .9rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--white);color:var(--text);font:inherit;font-size:1rem;
}
.tf textarea{min-height:120px}
.tf input:focus-visible,.tf select:focus-visible,.tf textarea:focus-visible{outline:2px solid var(--cobalt);outline-offset:1px;border-color:var(--cobalt)}
.tf .search-form{display:flex;gap:.6rem;max-width:520px;margin:0 auto}
.tf .search-form label{flex:1}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}