:root{
    --polar-night:#0B1220;
    --fjord:#101B30;
    --panel:#16233B;
    --panel-line:#243252;
    --snow:#F4F6F8;
    --mist:#B9C4D6;
    --mist-dim:#7C8AA6;
    --aurora-green:#6FE7B5;
    --aurora-teal:#4FD1C5;
    --aurora-violet:#9C8CF5;
    --lantern:#E8A33D;
    --ink:#0B1220;
    --max:1180px;
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  /* Toggling the `hidden` attribute from JS (payRow/privateNote in the
     booking modal) only works if this beats every element's own `display`
     rule - the browser's built-in `[hidden]{display:none}` UA rule loses to
     ties like `.pay-row{display:flex}` on cascade origin, not just
     specificity, so it needs restating here as an author rule. */
  [hidden]{display:none !important;}
  html{scroll-behavior:smooth;}
  body{
    background:var(--polar-night);
    color:var(--snow);
    font-family:'Inter',sans-serif;
    line-height:1.5;
    -webkit-font-smoothing:antialiased;
  }
  img,svg{display:block; max-width:100%;}
  a{color:inherit;}
  ul{list-style:none;}
  .wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
  .eyebrow{
    font-family:'JetBrains Mono',monospace;
    text-transform:uppercase;
    letter-spacing:.14em;
    font-size:12px;
    color:var(--aurora-green);
    display:flex; align-items:center; gap:10px;
  }
  .eyebrow::before{content:""; width:18px; height:1px; background:var(--aurora-green); display:inline-block;}
  h1,h2,h3{font-family:'Fraunces',serif; font-weight:500; line-height:1.08; letter-spacing:-.01em;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    font-family:'Inter',sans-serif; font-weight:600; font-size:15px;
    padding:14px 26px; border-radius:2px; border:1px solid transparent;
    cursor:pointer; text-decoration:none; transition:transform .18s ease, background .18s ease, border-color .18s ease;
  }
  .btn-primary{background:var(--aurora-green); color:#08130E;}
  .btn-primary:hover{transform:translateY(-2px); background:#87f0c3;}
  .btn-ghost{border-color:rgba(244,246,248,.3); color:var(--snow);}
  .btn-ghost:hover{border-color:var(--snow); transform:translateY(-2px);}

  /* rounded CTAs used over the hero photo */
  .btn-pill{
    background:linear-gradient(135deg,#8FF1CB,var(--aurora-green));
    color:#06231A; border-radius:999px; padding:17px 30px; font-size:15px; font-weight:700;
    box-shadow:0 10px 30px rgba(111,231,181,.22);
  }
  .btn-pill:hover{transform:translateY(-2px); box-shadow:0 14px 36px rgba(111,231,181,.32);}
  .btn-arrow{
    width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round; transition:transform .18s ease;
  }
  .btn-pill:hover .btn-arrow{transform:translateX(4px);}

  .btn-pill-outline{
    background:transparent; color:var(--snow); border-radius:999px;
    border-color:rgba(244,246,248,.45); padding:12px 24px;
    font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  }
  .btn-pill-outline:hover{border-color:var(--aurora-green); color:var(--aurora-green); transform:translateY(-2px);}

  /* secondary hero action — text with a rule under it, not a boxed button */
  .link-underline{
    position:relative; display:inline-flex; align-items:center;
    text-decoration:none; color:var(--snow); font-weight:600; font-size:15px;
    padding:14px 2px;
  }
  .link-underline::after{
    content:""; position:absolute; left:2px; right:2px; bottom:9px; height:2px;
    background:var(--aurora-green); transform-origin:left; transition:transform .25s ease;
  }
  .link-underline:hover::after{transform:scaleX(1.08);}
  :focus-visible{outline:2px solid var(--aurora-green); outline-offset:3px;}

  /* ---------- NAV ---------- */
  header{
    position:fixed; top:0; left:0; right:0; z-index:100;
    padding:22px 0;
    transition:background .3s ease, padding .3s ease, border-color .3s ease;
    border-bottom:1px solid transparent;
  }
  header.solid{ background:rgba(11,18,32,.88); backdrop-filter:blur(10px); padding:14px 0; border-color:var(--panel-line);}
  nav{display:flex; align-items:center; justify-content:space-between;}
  .logo{
    font-family:'Fraunces',serif; font-style:italic; font-weight:500; font-size:20px; letter-spacing:.01em;
    display:flex; align-items:baseline; gap:8px;
    text-decoration:none;
  }
  .logo span{font-family:'JetBrains Mono',monospace; font-style:normal; font-size:10px; color:var(--mist-dim); letter-spacing:.1em;}
  .nav-links{display:flex; gap:32px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.11em;}
  .nav-links a{opacity:.85; text-decoration:none; transition:opacity .2s;}
  .nav-links a:hover{opacity:1; color:var(--aurora-green);}
  .nav-cta{display:flex; align-items:center; gap:18px;}
  .burger{display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:6px;}
  .burger span{width:22px; height:2px; background:var(--snow);}

  /* ---------- HERO ---------- */
  .hero{
    position:relative; min-height:100vh; overflow:hidden;
    display:flex; flex-direction:column; justify-content:flex-end;
    background:var(--polar-night);
    /* cancels section{padding:120px 0} — that band used to be invisible gradient,
       but over the photo it left the forecast strip floating off the bottom edge */
    padding:0;
  }
  .hero-media{position:absolute; inset:0; z-index:1;}
  .hero-media img{width:100%; height:100%; object-fit:cover; object-position:center;}

  /* darkens the left column so the headline holds, plus the top edge for the
     nav and the bottom edge for the forecast strip */
  .hero-scrim{
    position:absolute; inset:0; z-index:2;
    background:
      linear-gradient(90deg, rgba(11,18,32,.92) 0%, rgba(11,18,32,.72) 30%, rgba(11,18,32,.28) 56%, rgba(11,18,32,0) 78%),
      linear-gradient(180deg, rgba(11,18,32,.72) 0%, rgba(11,18,32,0) 26%, rgba(11,18,32,0) 58%, rgba(11,18,32,.85) 100%);
  }

  /* the text block centres in the space above the feature row, so the copy stays
     in the dark left third and never crosses into the aurora */
  .hero-content{
    position:relative; z-index:3;
    flex:1; display:flex; flex-direction:column; justify-content:center;
    /* .wrap's auto side margins cancel stretch on a flex item, collapsing this to
       fit-content and centring it — width:100% puts it back on the page grid */
    width:100%;
    padding-top:120px; padding-bottom:32px;
  }
  .hero-content h1{
    font-family:'Inter',sans-serif; font-weight:700; font-style:normal;
    font-size:clamp(38px,5.4vw,76px);
    line-height:1.02; letter-spacing:-.025em;
    max-width:12ch;
    color:var(--snow);
  }
  .hero-tagline{
    font-family:'Inter',sans-serif; font-weight:700;
    font-size:clamp(19px,2.3vw,33px);
    line-height:1.15; letter-spacing:-.015em;
    color:#A6C6E8;
    margin-top:16px; max-width:20ch;
  }
  .hero-sub{
    max-width:46ch; margin-top:22px; font-size:16.5px; color:var(--mist); line-height:1.6;
  }
  .hero-actions{display:flex; align-items:center; gap:26px; margin-top:36px; flex-wrap:wrap;}

  /* three trust points sitting on the base of the hero, above the forecast strip */
  .hero-features{
    position:relative; z-index:3;
    display:flex; flex-wrap:wrap; width:100%; padding-bottom:38px;
  }
  .hero-features li{
    display:flex; align-items:center; gap:14px;
    padding:0 28px; border-left:1px solid rgba(244,246,248,.16);
  }
  .hero-features li:first-child{padding-left:0; border-left:none;}
  .hero-features svg{
    width:26px; height:26px; flex:none; color:rgba(244,246,248,.88);
    fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  }
  .hero-features strong{display:block; font-size:14px; font-weight:600; color:var(--snow);}
  .hero-features span{display:block; font-size:13px; color:var(--mist-dim); margin-top:3px;}

  /* forecast strip */
  .forecast{
    position:relative; z-index:3;
    border-top:1px solid var(--panel-line);
    background:rgba(16,27,48,.7); backdrop-filter:blur(6px);
  }
  .forecast .wrap{
    display:flex; flex-wrap:wrap; gap:0;
  }
  .fchip{
    flex:1 1 160px; padding:18px 24px; border-right:1px solid var(--panel-line);
  }
  .fchip:last-child{border-right:none;}
  .fchip .flabel{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mist-dim);}
  .fchip .fvalue{font-family:'JetBrains Mono',monospace; font-size:20px; color:var(--aurora-green); margin-top:6px;}

  /* ---------- SECTION SHELL ---------- */
  section{padding:120px 0;}
  .section-head{max-width:640px; margin-bottom:64px;}
  .section-head h2{font-size:clamp(30px,4vw,46px); margin-top:18px; color:var(--snow);}
  .section-head p{color:var(--mist); margin-top:18px; font-size:16px; max-width:52ch;}
  .on-light{background:var(--snow); color:var(--ink);}
  .on-light .section-head h2{color:var(--ink);}
  .on-light .section-head p{color:#4B5668;}
  .on-light .eyebrow{color:#1A8F63;}
  .on-light .eyebrow::before{background:#1A8F63;}

  /* ---------- CHASE TIMELINE ---------- */
  .timeline{border-top:1px solid var(--panel-line);}
  .tl-item{
    display:grid; grid-template-columns:120px 1fr; gap:32px;
    padding:36px 0; border-bottom:1px solid var(--panel-line);
    opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease;
  }
  .tl-item.in{opacity:1; transform:none;}
  .tl-time{font-family:'JetBrains Mono',monospace; font-size:15px; color:var(--aurora-green); padding-top:4px;}
  .tl-body h3{font-size:22px; font-weight:500; font-style:italic; margin-bottom:8px; color:var(--snow);}
  .tl-body p{color:var(--mist); font-size:15px; max-width:60ch;}

  /* ---------- TOURS ---------- */
  .tours-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  /* Only two charter options now (Standard + Private) - three even columns
     would stretch each card too wide, so this variant caps the row width and
     centers it instead of spanning the full section. */
  .tours-grid-2{grid-template-columns:repeat(2,1fr); max-width:760px; margin:0 auto;}
  .tour-card{
    background:var(--panel); border:1px solid var(--panel-line); border-radius:2px;
    padding:38px 30px; display:flex; flex-direction:column; gap:18px;
    transition:border-color .25s ease, transform .25s ease;
  }
  .tour-card:hover{border-color:var(--aurora-green); transform:translateY(-4px);}
  /* This section sits on a light ("on-light") background, so a low-alpha
     rgba() top stop here let that white bleed straight through the card,
     washing out the tag/heading text until it was barely legible - color-mix
     bakes the tint into a fully OPAQUE color instead, so the card is always
     solid regardless of what's behind it. */
  .tour-card.featured{border-color:var(--aurora-green); background:linear-gradient(180deg, color-mix(in srgb, var(--aurora-green) 14%, var(--panel)), var(--panel) 40%);}
  .tour-tag{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--mist-dim);}
  .tour-card.featured .tour-tag{color:var(--aurora-green);}
  .tour-card h3{font-size:26px; font-style:italic; font-weight:500;}
  /* "price shards" - a small hover lift so the price feels tactile without
     being a distraction; scoped to :hover on the card (not the price alone)
     so trackpad users don't need pixel-perfect aim over the number itself. */
  .tour-price{
    font-family:'JetBrains Mono',monospace; font-size:28px; color:var(--aurora-green);
    display:inline-block; transition:transform .22s ease, text-shadow .22s ease;
  }
  .tour-card:hover .tour-price{transform:translateY(-3px) scale(1.04); text-shadow:0 8px 18px rgba(111,231,181,.35);}
  .tour-price span{font-size:13px; color:var(--mist-dim); font-family:'Inter',sans-serif;}
  .tour-list{display:flex; flex-direction:column; gap:10px; margin-top:6px;}
  .tour-list li{font-size:14px; color:var(--mist); padding-left:18px; position:relative;}
  .tour-list li::before{content:"—"; position:absolute; left:0; color:var(--aurora-teal);}
  .tour-card .btn{margin-top:auto;}

  /* ---------- FLEET ---------- */
  .fleet-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px;}
  /* Down to one vehicle now - a single card centered and capped rather than
     stretched full-width across what used to be a two-card grid. */
  .fleet-grid-1{grid-template-columns:1fr; max-width:460px; margin:0 auto;}
  .fleet-card{background:var(--fjord); border:1px solid var(--panel-line); overflow:hidden;}
  .fleet-illustration{aspect-ratio:16/10; background:linear-gradient(180deg,#0E1830,#16233B);}
  .fleet-copy{padding:26px 28px;}
  .fleet-copy h3{font-size:20px; font-style:italic; font-weight:500; margin-bottom:8px;}
  .fleet-copy p{color:var(--mist); font-size:14px;}

  /* ---------- TESTIMONIALS ---------- */
  .quote-row{display:grid; grid-template-columns:repeat(3,1fr); gap:24px;}
  .quote-card{padding:32px 0 0; border-top:1px solid #D8DCE2;}
  .quote-card p.q{font-family:'Fraunces',serif; font-style:italic; font-size:19px; line-height:1.5; margin-bottom:20px;}
  .quote-meta{font-family:'JetBrains Mono',monospace; font-size:12px; color:#5A6478; letter-spacing:.04em;}

  /* ---------- PRACTICAL INFO ---------- */
  .info-grid{display:grid; grid-template-columns:1fr 1fr; gap:60px;}
  .info-col h3{font-size:20px; font-weight:500; font-style:italic; margin-bottom:20px; color:var(--snow);}
  .info-col ul{display:flex; flex-direction:column; gap:14px;}
  .info-col li{font-size:15px; color:var(--mist); padding-left:22px; position:relative;}
  .info-col li::before{content:"›"; position:absolute; left:0; color:var(--aurora-green); font-weight:700;}

  /* ---------- BOOKING MODAL ---------- */
  /* Reserving used to mean scrolling to the last section on the page; it's a
     <dialog> now, opened over wherever the guest already is. The markup and
     copy carry over — only the shell around them changes. */
  dialog.booking-modal{
    /* the UA stylesheet centers <dialog> via inset:0 + margin:auto, but this
       file's own reset (`*{margin:0}`) zeroes that out — pin it back down
       explicitly rather than depend on a rule this file itself overrides */
    position:fixed; inset:0; margin:auto;
    padding:0; border:none; border-radius:6px; color:var(--snow);
    background:linear-gradient(180deg, var(--fjord), var(--polar-night));
    /* Wide enough for three columns (copy / form / pickup map) side by side -
       content past this box still scrolls inside its own column rather than
       growing the frame further. */
    width:min(1280px, 96vw); height:min(760px, 92vh);
    box-shadow:0 30px 80px rgba(2,5,12,.6);
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .22s ease, transform .22s ease;
  }
  dialog.booking-modal.is-open{opacity:1; transform:none;}
  dialog.booking-modal::backdrop{
    background:rgba(6,11,22,.72); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .22s ease;
  }
  dialog.booking-modal.is-open::backdrop{opacity:1;}

  /* Three columns: static copy/guarantee, the form fields, and the pickup
     map - each its own independent scroll region, so a long list of pickup
     search results or a tall form doesn't push the other columns around.
     The close button floats above all three regardless of which one scrolls. */
  .booking-modal-inner{height:100%; display:grid; grid-template-columns:0.85fr 1fr 1fr;}
  .booking-modal-copy{
    padding:44px 32px 36px 44px; border-right:1px solid var(--panel-line);
    display:flex; flex-direction:column; justify-content:center; overflow-y:auto;
  }
  form.booking-modal-form{padding:44px 28px 36px; margin-top:0; overflow-y:auto; border-right:1px solid var(--panel-line);}
  .booking-modal-inner .pickup-picker{padding:44px 44px 36px 28px; overflow-y:auto;}
  /* charter type carries a price now ("Standard charter — 1,790
     kr/person") and the two-column modal leaves it much less room than the
     old full-width page section did — give it most of the row; guests is
     just a number and needs little */
  /* .field-row (defined below) sets grid-template-columns too, at equal
     specificity and later in the file — win on specificity, not source
     order, so this doesn't quietly break again if either rule moves.
     330px comfortably fits the longest option, "Standard charter — 1,790
     kr/person" (~240px of text plus ~14px×2 padding plus the browser's own
     dropdown-arrow reserve) with room to spare — a plain fr ratio came up
     short. */
  .field-row.field-row-tour{grid-template-columns:minmax(330px,1fr) minmax(60px,1fr);}
  /* the option text is at its widest here ("Standard charter — 1,790
     kr/person"), and the mobile column (~308px, full-bleed dialog) is a
     touch narrower than that needs at the base 14px — shave the one field */
  #tour{font-size:13px;}
  .modal-close{
    position:absolute; top:16px; right:16px; z-index:2; width:36px; height:36px; border-radius:50%;
    background:var(--fjord); border:1px solid var(--panel-line); color:var(--mist);
    font-size:20px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:border-color .18s ease, color .18s ease;
  }
  .modal-close:hover{border-color:var(--aurora-green); color:var(--aurora-green);}
  .booking-modal h2{font-size:clamp(24px,2.6vw,30px); margin-top:14px; max-width:20ch;}
  .booking-modal .modal-lede{color:var(--mist); margin-top:14px; max-width:44ch; font-size:15px;}
  .modal-contact{font-size:12.5px; color:var(--mist-dim); margin-top:-6px;}
  .modal-contact a{color:var(--aurora-green); text-decoration:underline; text-underline-offset:2px;}
  .modal-contact a:hover{color:#87f0c3;}
  .guarantee{margin-top:24px; padding:16px 18px; border-left:2px solid var(--lantern); background:rgba(232,163,61,.06);}
  .guarantee p{font-size:13.5px; color:var(--mist); margin:0;}
  .guarantee strong{color:var(--lantern); font-family:'JetBrains Mono',monospace; font-size:12px; letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:6px;}

  /* ---------- ABOUT MODAL ---------- */
  /* Company details get their own small dialog rather than a page section, so
     the nav's "About" link never disturbs an existing section's layout - a
     tall narrow card (vs. the wide-short booking dialog) suits a short,
     single-column read. Shares .modal-close and the dialog fade/scale-in
     transition with dialog.booking-modal above rather than redefining them. */
  dialog.about-modal{
    position:fixed; inset:0; margin:auto;
    padding:0; border:none; border-radius:6px; color:var(--snow);
    background:linear-gradient(180deg, var(--fjord), var(--polar-night));
    width:min(440px, 92vw); max-height:90vh;
    box-shadow:0 30px 80px rgba(2,5,12,.6);
    opacity:0; transform:translateY(14px) scale(.98);
    transition:opacity .22s ease, transform .22s ease;
  }
  dialog.about-modal.is-open{opacity:1; transform:none;}
  dialog.about-modal::backdrop{
    background:rgba(6,11,22,.72); backdrop-filter:blur(3px);
    opacity:0; transition:opacity .22s ease;
  }
  dialog.about-modal.is-open::backdrop{opacity:1;}
  .about-modal-inner{padding:48px 40px 40px;}
  .about-modal h2{font-size:clamp(22px,2.4vw,26px); margin-top:14px; max-width:22ch;}
  .about-modal .modal-lede{color:var(--mist); margin-top:14px; font-size:14.5px; line-height:1.65;}
  .about-facts{
    margin-top:28px; padding-top:24px; border-top:1px solid var(--panel-line);
    display:flex; flex-direction:column; gap:14px;
  }
  .about-facts > div{display:flex; justify-content:space-between; align-items:baseline; gap:16px;}
  .about-facts dt{font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim);}
  .about-facts dd{margin:0; font-size:14.5px; color:var(--snow); text-align:right;}
  .about-facts dd a{color:var(--aurora-green); text-decoration:none;}
  .about-facts dd a:hover{text-decoration:underline;}
  .about-coords{
    margin-top:24px; font-family:'JetBrains Mono',monospace; font-size:10.5px;
    letter-spacing:.05em; color:var(--mist-dim);
  }

  form{display:flex; flex-direction:column; gap:16px;}
  .field-row{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  label{font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--mist-dim); margin-bottom:6px; display:block;}
  input,select,textarea{
    width:100%; background:var(--panel); border:1px solid var(--panel-line); color:var(--snow);
    padding:13px 14px; font-family:'Inter',sans-serif; font-size:14px; border-radius:2px;
  }
  input:focus,select:focus,textarea:focus{border-color:var(--aurora-green); outline:none;}
  textarea{resize:vertical; min-height:90px;}
  form .btn{margin-top:8px; align-self:flex-start;}
  form .btn:disabled{opacity:.45; cursor:not-allowed; transform:none;}

  /* payment choices sit together as one group — the two-column field grid pushed
     them to opposite edges of the form and read as unrelated */
  .pay-row{display:flex; flex-wrap:wrap; gap:28px; align-items:center;}
  .pay-option{
    display:flex; align-items:center; gap:8px;
    font-family:'Inter',sans-serif; font-size:14px; font-weight:400;
    text-transform:none; letter-spacing:0; color:var(--snow); margin-bottom:0;
    cursor:pointer;
  }
  .pay-option input{width:auto; cursor:pointer;}

  /* ---------- PICKUP POINT PICKER ---------- */
  .pickup-picker{position:relative; display:flex; flex-direction:column;}
  .pickup-hint{
    font-size:12.5px; color:var(--mist-dim); margin:-2px 0 10px; font-family:'Inter',sans-serif;
    text-transform:none; letter-spacing:0;
  }
  /* Two explicit, mutually-exclusive choices rather than Prostneset being just
     another entry buried in the hotel search results - picking one is a
     deliberate act, not something you can land on by accident while typing. */
  .pickup-mode{display:flex; gap:8px; margin-bottom:12px;}
  .pickup-mode-btn{
    flex:1; padding:11px; background:var(--panel); border:1px solid var(--panel-line); color:var(--mist);
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:500; text-transform:none; letter-spacing:0;
    border-radius:2px; cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease;
    display:flex; align-items:center; justify-content:center; gap:7px;
  }
  .pickup-mode-btn:hover{border-color:var(--mist-dim);}
  .pickup-mode-btn.active{border-color:var(--aurora-green); color:var(--aurora-green); background:rgba(111,231,181,.08);}
  /* A gentle nudge toward the simpler option (one fixed meeting point instead
     of a scattered hotel pickup) - a slow, low-amplitude glow rather than
     anything flashy, plus the badge below. Keeps going even once selected,
     reinforcing rather than just marking the choice. */
  .pickup-mode-btn.recommended{border-color:rgba(111,231,181,.5); animation:pickupRecommendedGlow 2.6s ease-in-out infinite;}
  @keyframes pickupRecommendedGlow{
    0%,100%{box-shadow:0 0 0 0 rgba(111,231,181,.25);}
    50%{box-shadow:0 0 14px 1px rgba(111,231,181,.3);}
  }
  @media (prefers-reduced-motion:reduce){ .pickup-mode-btn.recommended{animation:none;} }
  .pickup-mode-badge{
    font-family:'JetBrains Mono',monospace; font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em;
    background:rgba(111,231,181,.18); color:var(--aurora-green); border:1px solid rgba(111,231,181,.4);
    padding:2px 6px; border-radius:20px; white-space:nowrap;
  }

  #pickupHotelFields{position:relative;}
  #pickupSearch{margin-bottom:0;}
  .pickup-results{
    position:absolute; top:52px; left:0; right:0; z-index:5;
    background:var(--fjord); border:1px solid var(--panel-line); border-top:none;
    border-radius:0 0 2px 2px; max-height:180px; overflow-y:auto;
    box-shadow:0 12px 24px rgba(2,5,12,.4);
  }
  .pickup-result{
    display:block; width:100%; text-align:left; padding:10px 14px; background:none; border:none;
    color:var(--snow); font-family:'Inter',sans-serif; font-size:13.5px; cursor:pointer; border-radius:0;
  }
  .pickup-result:hover, .pickup-result.active{background:rgba(111,231,181,.1);}
  .pickup-result .pr-address{display:block; font-size:11.5px; color:var(--mist-dim); margin-top:2px;}
  .pickup-map{
    height:280px; border-radius:2px; border:1px solid var(--panel-line); margin-top:12px;
    /* Leaflet paints its own tiles/controls regardless of page theme, so pin a
       light background behind it - a transparent gap here would otherwise
       show the dark modal through while tiles are still loading. */
    background:#e5e3df;
  }
  /* Scroll-to-zoom is on (see nordlys-charter.js), so the map needs to look
     interactive rather than like a static illustration you'd scroll past. */
  .pickup-map .leaflet-container{cursor:grab;}
  #pickupSelected{transition:color .15s ease;}
  #pickupSelected.chosen{color:var(--aurora-green);}
  /* Leaflet marker divIcons - plain colored pins rather than the default
     blue marker image, so Prostneset (the fallback meeting point) reads as
     visually distinct from an ordinary hotel pickup at a glance. */
  .pickup-pin{
    width:16px; height:16px; border-radius:50% 50% 50% 0; transform:rotate(-45deg);
    border:2px solid rgba(6,11,22,.5); box-shadow:0 2px 6px rgba(2,5,12,.4);
  }
  .pickup-pin.hotel{background:var(--aurora-green);}
  .pickup-pin.prostneset{background:var(--lantern); width:20px; height:20px;}
  .pickup-pin.selected{outline:3px solid #fff; outline-offset:1px;}

  /* live seat count for the selected date/charter — full-width below the row
     rather than squeezed under the (now narrow) guests field */
  .seats-note{
    margin-top:8px; font-family:'JetBrains Mono',monospace; font-size:11px;
    letter-spacing:.04em; color:var(--mist-dim);
  }
  .seats-note.ok{color:var(--aurora-green);}
  .seats-note.low{color:var(--lantern);}
  .seats-note.none{color:#F0665B;}
  .seats-note.warn{color:var(--mist);}

  /* ---------- FOOTER ---------- */
  footer{padding:64px 0 40px;}
  .footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:40px; padding-bottom:48px; border-bottom:1px solid var(--panel-line);}
  .footer-brand .logo{margin-bottom:14px;}
  .footer-brand p{color:var(--mist-dim); font-size:14px; max-width:32ch;}
  .footer-col h4{font-family:'JetBrains Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--mist-dim); margin-bottom:16px;}
  .footer-col a{display:block; font-size:14px; color:var(--mist); text-decoration:none; margin-bottom:10px;}
  .footer-col a:hover{color:var(--aurora-green);}
  .footer-bottom{display:flex; justify-content:space-between; padding-top:28px; font-size:12px; color:var(--mist-dim); font-family:'JetBrains Mono',monospace;}

  /* ---------- REVEAL ---------- */
  .reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
  .reveal.in{opacity:1; transform:none;}

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

  @media (max-width:900px){
    .nav-links{display:none;}
    .burger{display:flex;}
    .tours-grid,.fleet-grid,.quote-row,.info-grid,.field-row{grid-template-columns:1fr;}
    /* the desktop-only 1.8fr/1fr override above outranks the bare .field-row
       rule on specificity, not just source order — match it here too or the
       charter-type row stops stacking on narrow screens */
    .field-row.field-row-tour{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;}
    section{padding:80px 0;}
    .tl-item{grid-template-columns:1fr; gap:8px;}

    /* portrait crops the 16:9 source hard — bias toward the bus and aurora,
       and darken the whole frame since text now spans the full width */
    .hero-media img{object-position:64% center;}
    .hero-scrim{
      background:linear-gradient(180deg, rgba(11,18,32,.82) 0%, rgba(11,18,32,.55) 34%, rgba(11,18,32,.72) 68%, rgba(11,18,32,.92) 100%);
    }
    .hero-content{padding-top:140px; padding-bottom:48px;}

    /* dividers don't survive stacking — drop them and go vertical */
    .hero-features{flex-direction:column; gap:18px; padding-bottom:30px;}
    .hero-features li{padding:0; border-left:none;}
    .hero-actions{gap:18px; margin-top:32px;}

    /* the side-by-side split needs width the phone doesn't have — stack copy,
       form, and the pickup map vertically instead, and let the dialog itself
       be the one scroll region */
    dialog.booking-modal{width:100vw; height:100dvh; border-radius:0;}
    .booking-modal-inner{display:block; height:auto; max-height:100%; overflow-y:auto;}
    .booking-modal-copy{padding:32px 22px 20px; border-right:none; overflow-y:visible;}
    form.booking-modal-form{padding:0 22px 28px; overflow-y:visible; border-right:none;}
    .booking-modal-inner .pickup-picker{padding:0 22px 28px; overflow-y:visible;}

    .about-modal-inner{padding:40px 26px 32px;}
  }

  /* Company identification + terms consent (Vipps merchant requirements) */
  .footer-legal{
    margin-top:18px; padding-top:16px; border-top:1px solid rgba(244,246,248,.10);
    font-size:12px; color:var(--mist-dim, #7C8AA6); line-height:1.6;
  }
  .terms-consent{
    margin-top:10px; font-size:12px; color:var(--mist-dim, #7C8AA6);
  }
  .terms-consent a{color:var(--aurora-teal, #4FD1C5);}