/* Polarum Studio — global styles.
   Component styling lives inline in the HTML (see README "How the styling works").
   This file holds only what an inline style cannot do: tokens, resets,
   keyframes, hover/focus states, and responsive overrides.

   Responsive overrides use !important for the same reason the hover rules do:
   the element's base styles are inline. Each one pairs with a .pol-* class on
   the element it belongs to. Breakpoints:
     (max-width: 820px)   phones and small tablets
     (hover: none)        touch devices, whatever their width */

/* Self-hosted variable fonts (SIL OFL) — see assets/fonts/README.md. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url("../fonts/archivo-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url("../fonts/jetbrains-mono-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{--pol-bg:#FBFBFC;--pol-panel:rgba(255,255,255,.86);--pol-card:#FFFFFF;--pol-ink:#12151C;--pol-ink2:#4E566A;--pol-ink3:#6B7382;--pol-line:rgba(18,21,28,.11);--pol-indigo:#5D55C4;--pol-gold:#9A6B12}
  html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
  body{margin:0;background:var(--pol-bg,#FBFBFC);color:var(--pol-ink,#12151C);font-family:Archivo,"Helvetica Neue",system-ui,sans-serif;-webkit-font-smoothing:antialiased;overflow-x:hidden;transition:background 320ms linear;-webkit-tap-highlight-color:rgba(93,85,196,.16)}
  a{color:var(--pol-indigo,#5D55C4);text-decoration:none}
  a:hover{color:var(--pol-gold,#9A6B12)}
  ::selection{background:#5D55C4;color:#fff}
  :focus-visible{outline:2px solid #D9A441;outline-offset:3px}
  @keyframes polRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
  @keyframes polPulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.9;transform:scale(1.35)}}
  @keyframes polScroll{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
  @keyframes polFade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  @media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
    *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  }

/* ---- hover / focus states lifted out of the markup ----
   Each rule pairs with a .pol-sN class on the element it belongs to.
   !important is required because the element's base styles are inline. */
.pol-s1:hover{ background: #4A42A8 !important; color: #fff !important; }
.pol-s2:hover{ background: #4A42A8 !important; color: #fff !important; }
.pol-s3:hover{ border-color: #9A6B12 !important; color: #9A6B12 !important; }
.pol-s4:focus{ outline: 2px solid #D9A441 !important; }
.pol-s5:hover{ background: rgba(93,85,196,.06) !important; padding-left: 16px !important; color: var(--pol-ink, #12151C) !important; }
.pol-s6:hover{ color: #9A6B12 !important; }
.pol-s7:focus,.pol-s8:focus,.pol-s9:focus{ border-color: #5D55C4 !important; box-shadow: 0 0 0 3px rgba(93,85,196,.24) !important; }
.pol-s10:hover{ background: #4A42A8 !important; }
.pol-s10[disabled]{ opacity: .7; cursor: progress !important; }

/* Need chips: selected state is driven by aria-pressed so toggling never
   re-renders the buttons (a re-render dropped keyboard focus). */
.pol-chip[aria-pressed="true"]{ border-color: var(--pol-indigo, #5D55C4) !important; background: rgba(93,85,196,.12) !important; color: var(--pol-indigo, #5D55C4) !important; }

/* ---- header menu (phones) ---- */
.pol-burger{ display: none !important; }
.pol-menu{ display: none; }
.pol-burger-bars,.pol-burger-bars::before,.pol-burger-bars::after{ display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .28s cubic-bezier(.22,1,.36,1), opacity .2s ease; }
.pol-burger-bars{ position: relative; }
.pol-burger-bars::before,.pol-burger-bars::after{ content: ""; position: absolute; left: 0; }
.pol-burger-bars::before{ top: -6px; }
.pol-burger-bars::after{ top: 6px; }
.pol-burger[aria-expanded="true"] .pol-burger-bars{ background: transparent; }
.pol-burger[aria-expanded="true"] .pol-burger-bars::before{ transform: translateY(6px) rotate(45deg); }
.pol-burger[aria-expanded="true"] .pol-burger-bars::after{ transform: translateY(-6px) rotate(-45deg); }
.pol-menu a.pol-menu-link:hover{ color: var(--pol-gold, #9A6B12) !important; }

/* ---- services accordion (phones): the detail panel opens under its row ---- */
.pol-sx-stage.is-acc [data-sx-panel]{ grid-area: auto !important; display: none; padding: 4px 0 28px; transition: none !important; }
.pol-sx-stage.is-acc [data-sx-panel].is-on{ display: block; animation: polFade .34s cubic-bezier(.22,1,.36,1) both; }
.pol-sx-stage.is-acc .pol-sx-detail{ display: none !important; }
.pol-sx-stage.is-acc [data-sx-panel] h3{ display: none; }
.pol-sx-stage.is-acc [data-sx-panel] > div:first-child{ margin-bottom: 14px !important; }
.pol-sx-stage.is-acc [data-sx-panel] p{ margin-bottom: 20px !important; }
.pol-sx-stage.is-acc [data-sx] [data-sx-title]{ transition: color .28s ease, transform .34s cubic-bezier(.22,1,.36,1); }

/* ---- work galaxy ---- */
.pol-node{ touch-action: none; }
.pol-card-tap{ cursor: pointer; }
.pol-hint-touch{ display: none; }

/* ---- no projects yet ----
   Anything tagged .pol-needs-work (Work links, the work section, the "Delivered"
   fact) stays hidden until site.js finds at least one project and adds
   html.pol-has-work. The remaining hero button then takes over as the primary. */
html:not(.pol-has-work) .pol-needs-work{ display: none !important; }
html:not(.pol-has-work) .pol-cta2{ background: #5D55C4 !important; color: #fff !important; border-color: transparent !important; }
html:not(.pol-has-work) .pol-cta2:hover{ background: #4A42A8 !important; color: #fff !important; }

@media (max-width: 820px){
  html{ scroll-padding-top: 68px; }

  /* header: logo + theme toggle + burger; the links move into the menu */
  .pol-header{ padding: 10px 16px !important; gap: 10px !important; }
  .pol-brand-name{ white-space: nowrap; font-size: 15px !important; }
  .pol-nav{ gap: 8px !important; }
  .pol-navlink,.pol-nav-cta{ display: none !important; }
  .pol-burger{ display: inline-flex !important; }
  .pol-menu{ position: absolute; left: 0; right: 0; top: 100%; display: none; padding: 6px 16px 22px; background: var(--pol-card, #fff); border-bottom: 1px solid var(--pol-line, rgba(18,21,28,.11)); box-shadow: 0 22px 40px rgba(18,21,28,.14); }
  .pol-menu.is-open{ display: block; animation: polFade .24s cubic-bezier(.22,1,.36,1) both; }
  .pol-menu a.pol-menu-link{ display: flex; align-items: center; min-height: 54px; border-bottom: 1px solid var(--pol-line, rgba(18,21,28,.11)); font-size: 18px; font-weight: 500; color: var(--pol-ink, #12151C); }
  .pol-menu a.pol-menu-cta{ display: flex; align-items: center; justify-content: center; height: 52px; margin-top: 18px; border-radius: 8px; background: #5D55C4; color: #fff; font-size: 15px; font-weight: 600; }
  .pol-menu a.pol-menu-cta:hover{ background: #4A42A8; color: #fff !important; }

  /* hero */
  .pol-hero{ padding: 100px 20px 56px !important; }
  .pol-hero-grid{ grid-template-columns: minmax(0, 1fr) !important; gap: 40px !important; }
  .pol-hero-cta{ display: grid !important; grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 32px !important; }
  .pol-hero-cta a{ justify-content: center; }
  .pol-hint,.pol-scrollcue{ display: none !important; }
  .pol-eclipse{ max-width: 300px !important; }

  /* facts strip: 2 x 2 */
  .pol-facts{ grid-template-columns: 1fr 1fr !important; }
  .pol-fact{ padding: 22px 12px 22px 0 !important; border-left: 0 !important; }
  .pol-fact:nth-child(even){ padding-left: 16px !important; border-left: 1px solid var(--pol-line, rgba(18,21,28,.11)) !important; }
  .pol-fact:nth-child(n+3){ border-top: 1px solid var(--pol-line, rgba(18,21,28,.11)); }
  /* with "Delivered" hidden there are three cells: the third spans the row */
  html:not(.pol-has-work) .pol-fact:nth-child(3){ grid-column: 1 / -1; padding-left: 0 !important; border-left: 0 !important; }

  /* section rhythm */
  .pol-sec{ padding-top: 68px !important; padding-bottom: 68px !important; }
  .pol-sec-head{ margin-bottom: 36px !important; gap: 20px !important; }

  .pol-galaxy-foot{ margin-top: 20px !important; gap: 8px 16px !important; }

  /* process */
  .pol-step{ grid-template-columns: 36px minmax(0, 1fr) !important; gap: 12px !important; padding: 24px 18px !important; }

  /* contact */
  .pol-contact-row{ flex-direction: column; gap: 4px !important; }
  .pol-contact-row > span:first-child{ width: auto !important; padding-top: 0 !important; }
  .pol-form{ padding: 24px 20px !important; }

  .pol-foot-links{ gap: 16px !important; flex-wrap: wrap; }
}

/* landscape phones are wider than 820px but only ~400px tall: give the content the room */
@media (max-height: 520px) and (orientation: landscape){
  html{ scroll-padding-top: 60px; }
  .pol-header{ padding-top: 8px !important; padding-bottom: 8px !important; }
  .pol-hero{ min-height: 0 !important; padding-top: 84px !important; padding-bottom: 44px !important; }
  .pol-hero-grid{ gap: 28px !important; }
  .pol-hint,.pol-scrollcue{ display: none !important; }
  .pol-eclipse{ max-width: 280px !important; }
  .pol-sec{ padding-top: 64px !important; padding-bottom: 64px !important; }
}

@media (max-width: 380px){
  .pol-brand-name{ font-size: 14px !important; }
  .pol-theme{ padding: 0 10px !important; }
}

/* touch devices: >= 16px inputs stop iOS zooming the page on focus, and
   targets get closer to the 44px guideline. */
@media (hover: none){
  .pol-input{ font-size: 16px !important; height: 50px !important; }
  textarea.pol-input{ height: auto !important; }
  .pol-chip{ height: 42px !important; padding: 0 16px !important; font-size: 14px !important; }
  .pol-theme{ height: 40px !important; }
  .pol-brand{ min-height: 44px; }
  .pol-mail{ display: inline-block; padding: 12px 0; margin: -12px 0; }
  .pol-menu a.pol-menu-link{ min-height: 56px; }
  .pol-node{ width: 44px !important; height: 44px !important; margin: -22px 0 0 -22px !important; }
  .pol-node > span:first-child{ inset: 11px !important; }
  .pol-hint-mouse{ display: none; }
  .pol-hint-touch{ display: inline; }
  .pol-hint{ display: none !important; }
}