/* =========================================
   Fonts — WOFF2 first, TTF fallback
   ========================================= */
   @font-face{
    font-family:"PolySans";
    src:url("fonts/PolySans-normal-300-100.woff2") format("woff2"),
        url("fonts/PolySans-normal-300-100.ttf") format("truetype");
    font-weight:300; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"PolySans";
    src:url("fonts/PolySans-normal-400-100.woff2") format("woff2"),
        url("fonts/PolySans-normal-400-100.ttf") format("truetype");
    font-weight:400; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"PolySans";
    src:url("fonts/PolySans-normal-500-100.woff2") format("woff2"),
        url("fonts/PolySans-normal-500-100.ttf") format("truetype");
    font-weight:500; font-style:normal; font-display:swap;
  }
  @font-face{
    font-family:"PolySans";
    src:url("fonts/PolySans-italic-500-100.woff2") format("woff2"),
        url("fonts/PolySans-italic-500-100.ttf") format("truetype");
    font-weight:500; font-style:italic; font-display:swap;
  }
  /* Optional display cut for H1 */
  @font-face{
    font-family:"PolySans Display";
    src:url("fonts/PolySansDisplay-700.woff2") format("woff2"),
        url("fonts/PolySansDisplay-700.ttf") format("truetype");
    font-weight:700; font-style:normal; font-display:swap;
  }
  
  /* =========================================
     Base, tokens, a11y
     ========================================= */
  *,*::before,*::after{ box-sizing:border-box }
  :root{
    --bg:#0E171C;
    --fg:#F1F1F1;
    --fg-dim:#C7C7C7;
    --brand:#F0582E;
    --pad:clamp(16px,2vw,32px);
    --nav-h:62px;
    --max:1440px;
    --aurora: #76f7d8;                /* fallback mint */
    --aurora-a: #76f7d8;              /* mint/teal */
    --aurora-b: #6ecbff;              /* sky blue */
    --aurora-c: #b08cff;              /* violet */
    --aurora-d: #33e1ff;   
  
    /* Weather layout tokens */
    --wx-col-icon: 1.05rem;  /* icon box width */
    --wx-col-temp: 3.8ch;    /* temperature column */
    --wx-gap: .35rem;        /* column gap */
    --wx-row-gap: .32rem;    /* row gap */
  }
  html,body{ height:100% }
  body{
    margin:0;
    font-family:"PolySans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    color:var(--fg);
    background:var(--bg);
    line-height:1.2;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
    font-synthesis:none;
  }
  .sr-only{
    position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  
  /* =========================================
     Header / Navigation
     ========================================= */
  .site-header{
    position:fixed; inset:0 0 auto 0; z-index:10;
    height:var(--nav-h);
    display:flex; align-items:center; gap:1rem; padding:0 var(--pad);
    background:linear-gradient(to bottom, rgba(14,23,28,.75), rgba(14,23,28,0));
    backdrop-filter:saturate(120%) blur(6px);
  }
  .site-header a{ color:inherit; text-decoration:none }
  
  /* Logo works for <img.logo> and inline <svg.logo> */
  svg.logo, img.logo{ display:block; width:28px; height:28px }
  svg.logo *{ fill:currentColor }   /* themeable */
  .brand-link{ color:#EDEDED }
  
  /* Desktop row: 3-column grid (logo · links · CTA) */
  .nav-inner{
    height:100%;
    width:100%;
    display:grid;
    grid-template-columns: auto 1fr auto;
    align-items:center;
    gap:1rem;
  }
  .brand-desktop{ justify-self:start }
  .nav-links{
    justify-self:center;
    display:flex; gap:1.25rem; align-items:center;
  }
  .nav-right{ justify-self:end; display:flex; align-items:center }
  
  .nav-link{
    color:var(--fg); opacity:.9; font-weight:500; font-size:.95rem; text-decoration:none;
  }
  .nav-link:hover{ opacity:1 }
  .nav-right .contact{ font-weight:600 }
  
  /* Mobile header bar */
  .nav-mobile{
    display:none; height:100%;
    align-items:center; justify-content:space-between; gap:1rem;
    width:100%;
  }
  .menu-btn{
    appearance:none; border:0; background:none; color:var(--fg);
    font-weight:700; font-size:1rem; padding:.25rem .5rem; cursor:pointer;
  }
  
  /* Mobile drawer popover */
  .nav-drawer{
    display:none;
    position:fixed; right:var(--pad); top:var(--nav-h);
    z-index:12;
    background:#0F1A1FEE;
    border:1px solid #ffffff22; border-radius:12px;
    padding:12px;
    backdrop-filter: blur(6px) saturate(120%);
  }
  .nav-drawer.open{
    display:flex; flex-direction:column; gap:.6rem;
  }
  .nav-drawer .nav-link{
    text-align:right;
    padding:.25rem 0;
  }
  
  /* =========================================
     Hero
     ========================================= */
  .hero{
    position:relative; min-height:100svh; padding:var(--pad);
    padding-top:calc(var(--nav-h) + max(24px, 4vh));
    overflow:hidden;
  }
  .hero__title{
    font-family:"PolySans Display","PolySans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    margin:clamp(24px,5vh,48px) 0 0 0;
    font-weight:700;
    font-size:clamp(56px, 12vw, 220px);
    letter-spacing:-.02em; line-height:.88; max-width:100%;
  }
  @supports (font-variation-settings: normal){
    .hero__title{ font-variation-settings:"GRAD" 5, "opsz" 32 }
  }
  .hero__strap{
    position:absolute; left:var(--pad); bottom:var(--pad);
    margin:0; max-width:min(720px,90vw);
    font-size:clamp(16px,1.5vw,22px);
    line-height: 1.25;
  }
  .hero__strap em{ font-style:italic; font-weight:500; }
  .hero__strap .line{ display:block }
  @media (min-width:900px){
    .hero__strap .line{ display:inline,  }
  }
  
  /* =========================================
     Weather — aligned & normalised (bottom-right)
     ========================================= */
  .hero__wx{
    position:absolute; right:var(--pad); bottom:var(--pad);
    color:var(--fg-dim); text-align:right; font-size:.9rem;
    
  }
  .wx-list{
    list-style:none; margin:0; padding:0;
    display:flex; flex-direction:column; gap:var(--wx-row-gap);
    align-items:self-start;
  }
  .wx-item{
    display:grid; grid-auto-flow:column;
    grid-template-columns: var(--wx-col-icon) var(--wx-col-temp) auto;
    align-items:center;
    gap:var(--wx-gap);
    line-height:1.2; white-space:nowrap;
    align-items:self-start;
  }
  /* Icon column — RIGHT aligned now */
.wx-icon{
  display:flex;
  align-items:self-start;

  width:var(--wx-col-icon);
  color:var(--fg);
  overflow:hidden;              /* clip any left bleed from scaled SVG */
}

/* SVG defaults */
.wx-svg{
  display:block;
  width:1em; height:1em;
  stroke:currentColor; fill:none; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round;
  overflow:visible;
  transform-origin:right center;  /* was left center */
  align-items:self-start;
}

/* Normalise visual width for narrower icons (right-anchored) */
.wx-icon[data-kind="moon"]       .wx-svg{ transform:scale(1.24); }     /* was 1.18/1.22 */
.wx-icon[data-kind="sun"]        .wx-svg{ transform:scale(1.10); }
.wx-icon[data-kind="cloud-moon"] .wx-svg{ transform:scale(1.14); }

  
  .wx-temp{
    font-variant-numeric:tabular-nums; text-align:right; color:var(--fg);
  }
  .wx-label{
    overflow:hidden; text-overflow:ellipsis;
  }
  
  /* Very small phones */
  @media (max-width:380px){
    .wx-item{ white-space:normal }
    .wx-label{ white-space:nowrap }
  }
  
  /* =========================================
     Optional background orbs + grain
     ========================================= */
  .bg{
    position:absolute; inset:0; z-index:-1;
    background:
      radial-gradient(900px 460px at 70% -8%, color-mix(in oklab, var(--brand) 90%, #ffcf7d 10%) 0 56%, #0000 57%),
      radial-gradient(260px 260px at 20% 68%, #B9A49A55 0 52%, #0000 53%),
      radial-gradient(1600px 1000px at 100% 100%, #000 0%, var(--bg) 60%);
  }
  .grain::after{
    content:""; position:absolute; inset:-35%; pointer-events:none; mix-blend-mode:soft-light;
    background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="220" height="220" viewBox="0 0 220 220"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.06"/></svg>');
    background-size:220px 220px; animation:grain 10s steps(10) infinite;
  }
  @keyframes grain{
    from{ transform:translate(0,0) }
    to{   transform:translate(-10%,10%) }
  }
  
  /* =========================================
     Responsive behaviour & motion prefs
     ========================================= */
  @media (max-width:900px){
    .nav-inner{ display:none }    /* hide desktop row */
    .nav-mobile{ display:flex }   /* show mobile bar */
  }
  @media (prefers-reduced-motion: reduce){
    .grain::after{ animation:none }
    .site-header{ backdrop-filter:none }
  }
  

  /* ===== Hero CTA (centred) ===== */
.hero__cta{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:none;
}
.hero__cta .btn{ pointer-events:auto }

/* ===== Flat, modern button with offset hover stroke ===== */
.btn{
  -webkit-tap-highlight-color:transparent;
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.85rem 1.1rem;
  font-weight:600; letter-spacing:.01em; text-decoration:none;
  border-radius:0.25rem;                       /* crisp, not pill */
  transition:background-color .18s ease, border-color .18s ease, transform .18s ease;
  will-change:transform;
}
.btn--flat{
  color:var(--fg);
  background:transparent;
  border:1px solid rgb(255 255 255 / .22);
}
.btn--flat:hover{
  background:rgb(255 255 255 / .06);
  border-color:rgb(255 255 255 / .36);
  transform:translateY(-1px);
}
.btn--flat:active{ transform:none }

/* Offset stroke ring (outside the button) */
.btn--flat{
  position:relative;
}
.btn--flat::after{
  content:"";
  position:absolute;
  inset:-4px;                                /* <-- offset outside */
  border:2px solid var(--aurora-a);
  border-radius:calc(0.15rem + 0.1rem);
  opacity:0;
  transition:opacity .18s ease;
  pointer-events:none;
}
.btn--flat:hover::after,
.btn--flat:focus-visible::after{ opacity:1 }

/* Keyboard focus */
.btn--flat:focus-visible{
  outline:2px solid #fff; outline-offset:3px; /* a11y focus, distinct from hover ring */
}

/* Small screens: slightly tighter */
@media (max-width:480px){
  .btn{ padding:.75rem 1rem }
}

/* Optional minor type styling */
.btn__domain{ font-weight:700; letter-spacing:.02em }