@layer reset, base, layout, components, pages, utilities;



@layer reset{
  *, *::before, *::after{ box-sizing:border-box; }

  :where(html){
    -webkit-text-size-adjust:100%;        
    text-size-adjust:100%;
    scroll-padding-top:calc(var(--header-h) + var(--s-3));  
  }
  @media (width < 768px){
    :where(html){ scroll-padding-top:calc(var(--header-h-sp) + var(--s-3)); }
  }
  :where(body){ margin:0; }
  :where(img, svg, video){ display:block; max-inline-size:100%; block-size:auto; }

  
  [hidden]:not([hidden="until-found"]){ display:none !important; }

  
  @media (prefers-reduced-motion: reduce){
    *, *::before, *::after, ::backdrop{
      animation:none !important;
      transition:none !important;
      scroll-behavior:auto !important;
    }
    .js-ready .reveal{ opacity:1 !important; translate:none !important; }
  }
}


@layer base{
  :where(:root){ color-scheme:light only; }  

  @media (prefers-reduced-motion: no-preference){
    :where(html){ scroll-behavior:smooth; }
  }

  :where(html){ font-size:var(--fs-root); }

  :where(body){
    background:var(--c-base);
    color:var(--c-ink);
    font-family:var(--f-body);
    font-size:var(--fs-body);
    line-height:var(--lh-body);
    line-break:strict;                    
    font-feature-settings:"palt" 0;
    text-rendering:optimizeLegibility;
    -webkit-font-smoothing:antialiased;
  }
  :where(a){ color:inherit; }
  :where(h1, h2, h3){
    font-family:var(--f-heading);
    line-height:var(--lh-heading);
    letter-spacing:var(--ls-heading);
    margin-block:0 var(--s-4);
    margin-inline:0;
    font-feature-settings:"palt" 1;
  }
  :where(p){ margin-block:0 var(--s-4); margin-inline:0; max-inline-size:var(--measure); }

  
  
  :where(:focus-visible){ outline:3px solid var(--c-navy); outline-offset:3px; }
  :where(.sec--deep, .contact, .site-footer) :focus-visible{ outline-color:var(--c-accent); }
}


@layer layout{
  .container{ width:min(100% - 2*var(--s-4), var(--container)); margin-inline:auto; }
  .section{ padding-block:var(--section-y); }
  .section--dark{ background:var(--c-base-dark); color:var(--c-ink-on-dark); }

  
  .site-header{ position:sticky; inset-block-start:0; z-index:var(--z-header); background:var(--c-base); }
  
  .site-header__inner{ display:flex; align-items:center; justify-content:space-between; min-block-size:64px; }

  .site-footer{ padding-block:var(--s-6); font-size:var(--fs-small); }

  @media print{
    .site-header{ position:static; }
    .gnav-toggle, .skip{ display:none; }
  }
}


@layer components{
  
  .skip{
    position:absolute;
    inset-block-start:var(--s-3);
    inset-inline-start:var(--s-3);
    z-index:var(--z-skip);
    background:var(--c-base);
    padding-block:var(--s-2);
    padding-inline:var(--s-3);
    translate:0 -200%;
  }
  .skip:focus-visible{ translate:none; }

  
  .btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--s-2);
    min-block-size:var(--tap);
    min-inline-size:var(--tap);
    padding-block:var(--s-3);
    padding-inline:var(--s-5);
    border-radius:var(--r-m);
    background:var(--c-action);
    color:var(--c-action-ink);
    font-weight:700;
    text-decoration:none;
    box-shadow:var(--shadow-s);
    transition:background var(--dur) var(--ease), translate var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  }
  @media (hover: hover){
    .btn:where(:not(.is-disabled, [aria-disabled="true"])):hover{ background:var(--c-action-hover); translate:0 -2px; box-shadow:var(--shadow-m); }
  }
  .btn:where(:not(.is-disabled, [aria-disabled="true"])):active{ translate:none; box-shadow:var(--shadow-s); }
  .btn--ghost{ background:transparent; color:inherit; box-shadow:inset 0 0 0 1px currentColor; }

  
  .gnav{
    display:block;
    position:static;
    inset:auto;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    border:0;
    overflow:visible;
    background:none;
    color:inherit;
  }
  .gnav ul{ display:flex; gap:var(--s-4); list-style:none; margin:0; padding:0; }
  .gnav a{ display:inline-flex; align-items:center; min-block-size:var(--tap); text-decoration:none; }
  .gnav a[aria-current="page"]{ box-shadow:inset 0 -2px 0 var(--c-navy); }   

  .gnav-toggle{ display:none; min-inline-size:var(--tap); min-block-size:var(--tap); padding:0; background:none; border:0; color:inherit; }
  .gnav-toggle__bars, .gnav-toggle__bars::before, .gnav-toggle__bars::after{
    display:block;
    width:22px;
    height:2px;
    background:currentColor;
    position:relative;
  }
  .gnav-toggle__bars::before, .gnav-toggle__bars::after{ content:""; position:absolute; inset-inline-start:0; }
  .gnav-toggle__bars::before{ inset-block-start:-7px; }
  .gnav-toggle__bars::after{ inset-block-start:7px; }
  
  .site-header:has(.gnav:popover-open) .gnav-toggle .gnav-toggle__bars{ background:transparent; }
  .site-header:has(.gnav:popover-open) .gnav-toggle .gnav-toggle__bars::before{ translate:0 7px; rotate:45deg; }
  .site-header:has(.gnav:popover-open) .gnav-toggle .gnav-toggle__bars::after{ translate:0 -7px; rotate:-45deg; }

  @media (width < 768px){
    
    .site-header__inner{ flex-wrap:wrap; }
    .gnav ul{ flex-direction:column; gap:var(--s-2); }
  }
  
  @supports selector(:popover-open){
    @media (width < 768px){
      .site-header__inner{ flex-wrap:nowrap; }
      .gnav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
      .gnav{ position:fixed; inset:var(--header-h-sp) 0 auto 0; background:var(--c-base); padding:var(--s-4); }
      .gnav:not(:popover-open){ display:none; }
      .gnav:popover-open{ display:block; overflow-y:auto; max-block-size:calc(100dvh - var(--header-h-sp)); overscroll-behavior:contain; }
      .gnav::backdrop{ background:transparent; }
    }
    
    @media (width >= 768px){
      .gnav:popover-open{ position:static; }
    }
  }

  
  .breadcrumb ol{ display:flex; flex-wrap:wrap; gap:var(--s-2); list-style:none; padding:0; margin-block:var(--s-4); margin-inline:0; font-size:var(--fs-small); }
  .breadcrumb li + li::before{ content:"/" / ""; margin-inline-end:var(--s-2); opacity:.5; }

  
  .js-ready .reveal{ opacity:0; translate:0 16px; transition:opacity .6s var(--ease), translate .6s var(--ease); }
  .js-ready .reveal.is-in{ opacity:1; translate:none; }
}