/* =========================================================
   Growth glass folders. Folder geometry, frosted front panel,
   layered files and fan-out are ported from the 21st.dev
   "Glass Folder Cards" component ("a folder you can actually use,
   drawn as an object"): back panel with artwork, the files, and a
   frosted-glass front hinged on its bottom edge. Re-toned to Nordlys
   smoked glass; scoped entirely under .gfo.

   Tuning:
     .gfo                  grid gap, columns per breakpoint
     .gfo-folder           max-width (the folder scales with its width)
     [data-accent]         --a1 / --a2 accent, --art-pos / --art-filter
     .gfo-folder[data-open]  --gf-hinge / --gf-lift / --gf-spread / --gf-fan / --gf-stack
   ========================================================= */

.gfo {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 36px;
  align-items: end;
  justify-items: center;
  font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.gfo *, .gfo *::before, .gfo *::after { box-sizing: border-box; }
.gfo [hidden] { display: none !important; }

/* ── accents: one visual language, three temperatures ──────────────── */
.gfo [data-accent="emerald"], .gfo-detail[data-accent="emerald"] { --a1: #3ef0b4; --a2: #2bd39b; --art-pos: 18% 62%; --art-filter: saturate(1.05); --glow: rgba(62, 240, 180, .16); }
.gfo [data-accent="ice"], .gfo-detail[data-accent="ice"] { --a1: #a6dcff; --a2: #62b4ff; --art-pos: 84% 52%; --art-filter: hue-rotate(52deg) saturate(.95) brightness(.95); --glow: rgba(110, 190, 255, .16); }
.gfo [data-accent="aurora"], .gfo-detail[data-accent="aurora"] { --a1: #3ef0b4; --a2: #7cc4ff; --art-pos: 58% 42%; --art-filter: saturate(1.1); --glow: rgba(100, 200, 230, .15); }

/* ── the folder (stage drawn at 340 × 272, scaled by --gfo-k) ──────── */
.gfo-folder {
  --gfo-k: 1;
  --gf-px: 0;
  --gf-py: 0;
  --gf-ease: cubic-bezier(.2, .8, .2, 1);
  --gf-spring: cubic-bezier(.34, 1.36, .5, 1);
  --gf-hinge: 0deg;
  --gf-lift: 42px;
  --gf-spread: 0px;
  --gf-fan: 0deg;
  --gf-stack: 15px;
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 340 / 392;
  isolation: isolate;
  -webkit-tap-highlight-color: transparent;
}
/* a small preview lift on hover (pointer devices) or keyboard focus */
@media (hover: hover) and (pointer: fine) {
  .gfo-folder:hover { --gf-hinge: -11deg; --gf-lift: -34px; --gf-spread: 8px; --gf-fan: 1.4deg; --gf-stack: 10px; }
}
.gfo-folder:focus-within { --gf-hinge: -11deg; --gf-lift: -34px; --gf-spread: 8px; --gf-fan: 1.4deg; --gf-stack: 10px; }
/* stack 40 (reference 30): each fanned sheet's rotation lifts the next one's corner ~11 units, so titles need the room */
.gfo-folder[data-open] { --gf-hinge: -24deg; --gf-lift: -96px; --gf-spread: 40px; --gf-fan: 5deg; --gf-stack: 40px; }
/* narrow folders: the fan becomes a straight, readable stack */
/* 39 × 3 + 96 lift fits the 120-unit headroom, so nothing reaches the folder above */
.gfo-folder[data-open][data-narrow] { --gf-spread: 0px; --gf-fan: 0deg; --gf-stack: 39px; }

.gfo-stage {
  position: absolute;
  top: 0;
  left: 0;
  width: 340px;
  height: 272px;
  transform: translateY(calc(120px * var(--gfo-k))) scale(var(--gfo-k));
  transform-origin: 0 0;
}
.gfo-tilt {
  position: absolute;
  inset: 0;
  transform: perspective(1400px) rotateX(calc(var(--gf-py) * -3deg)) rotateY(calc(var(--gf-px) * 4deg));
  transition: transform .9s var(--gf-ease);
}
.gfo-shadow {
  position: absolute;
  right: 18px;
  bottom: -6px;
  left: 18px;
  height: 60px;
  border-radius: 40px;
  background: rgba(0, 0, 0, .62);
  filter: blur(22px);
  transform: translateX(calc(var(--gf-px) * -8px));
  transition: transform .9s var(--gf-ease), opacity .9s var(--gf-ease);
}

/* back panel with the aurora artwork */
.gfo-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #11191a 0%, #070b0d 100%);
  clip-path: path('M0 56A22 22 0 0 1 22 34L146 34C170 34 172 0 198 0L318 0A22 22 0 0 1 340 22L340 250A22 22 0 0 1 318 272L22 272A22 22 0 0 1 0 250Z');
}
.gfo-art {
  position: absolute;
  top: -12px;
  left: -12px;
  width: 364px;
  max-width: none;
  height: 296px;
  object-fit: cover;
  object-position: var(--art-pos);
  filter: var(--art-filter);
  transform: translate(calc(var(--gf-px) * -7px), calc(var(--gf-py) * -6px)) scale(1.02);
  transition: transform 1.1s var(--gf-ease);
}
.gfo-folder--convert .gfo-back::after {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 82% 18%, rgba(110, 180, 255, .3), transparent 70%);
  content: "";
  mix-blend-mode: screen;
}
.gfo-back-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 22%), radial-gradient(120% 80% at 80% 0%, rgba(255, 255, 255, .08), rgba(255, 255, 255, 0) 60%);
  pointer-events: none;
}
.gfo-rim { position: absolute; top: 0; left: 0; max-width: none; overflow: visible; pointer-events: none; fill: none; }
.gfo-back-rim { width: 340px; height: 272px; }
.gfo-back-rim path { stroke: rgba(200, 255, 236, .16); stroke-width: 1; }

/* ── files ─────────────────────────────────────────────────────────── */
.gfo-files {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  /* nothing hangs out of the bottom of the pocket */
  clip-path: inset(-400px -400px 10px -400px);
}
.gfo-sheet-slot { display: contents; }
.gfo-sheet {
  all: unset;
  position: absolute;
  top: 96px;
  left: 34px;
  box-sizing: border-box;
  width: 272px;
  height: 184px;
  overflow: hidden;
  border-radius: 16px;
  background: linear-gradient(180deg, #1c2527 0%, #111719 100%);
  box-shadow: inset 0 1px 0 rgba(220, 255, 240, .14), 0 0 0 .5px rgba(200, 255, 236, .1), 0 12px 28px -8px rgba(0, 0, 0, .75);
  cursor: pointer;
  pointer-events: auto;
  transform-origin: 50% 100%;
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1))
    rotate(calc(var(--gf-jr) + var(--gf-slot) * var(--gf-fan)));
  transition: transform .75s var(--gf-spring) calc(var(--gf-depth) * 40ms), box-shadow .4s var(--gf-ease), translate .9s var(--gf-ease), opacity .9s var(--gf-ease);
}
.gfo-folder:not([data-open]) .gfo-sheet { pointer-events: none; }
.gfo-folder[data-open] .gfo-sheet:hover,
.gfo-folder[data-open] .gfo-sheet:focus-visible {
  transform:
    translate(calc(var(--gf-jx) + var(--gf-slot) * var(--gf-spread)), calc(var(--gf-lift) + var(--gf-depth) * var(--gf-stack) * -1 - 18px))
    rotate(calc(var(--gf-slot) * var(--gf-fan) * .6));
  box-shadow: inset 0 1px 0 rgba(220, 255, 240, .2), 0 0 0 1px rgba(200, 255, 236, .2), 0 22px 40px -12px rgba(0, 0, 0, .8);
  transition-delay: 0s;
}
.gfo-sheet:focus-visible { outline: 2px solid var(--a1); outline-offset: 2px; }
/* the selected service */
.gfo-sheet[aria-pressed="true"] {
  background: linear-gradient(180deg, #1f3030 0%, #12201f 100%);
  box-shadow: inset 0 1px 0 rgba(220, 255, 240, .22), 0 0 0 1.5px var(--a1), 0 0 22px -4px var(--a1), 0 14px 30px -8px rgba(0, 0, 0, .8);
}
.gfo-sheet[aria-pressed="true"] .gfo-sheet-name::before { display: inline-block; width: 7px; height: 7px; margin-right: 7px; border-radius: 50%; background: var(--a1); box-shadow: 0 0 8px var(--a1); vertical-align: 1px; content: ""; }
.gfo-sheet-name {
  position: absolute;
  top: 10px;
  right: 14px;
  left: 14px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  color: #f1f8f5;
  font-size: 13px;
  font-weight: 560;
  line-height: 1.18;
  letter-spacing: -.005em;
}
.gfo-sheet-tag { position: absolute; top: 62px; left: 14px; padding: 3px 8px; border: 1px solid rgba(200, 255, 236, .14); border-radius: 999px; color: var(--a1); font-size: 10px; letter-spacing: .04em; }
.gfo-lines { position: absolute; top: 96px; right: 14px; left: 14px; display: flex; flex-direction: column; gap: 9px; }
.gfo-lines i { display: block; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.gfo-lines i:nth-child(1) { width: 88%; }
.gfo-lines i:nth-child(2) { width: 94%; }
.gfo-lines i:nth-child(3) { width: 62%; }
.gfo-lines i:nth-child(4) { width: 80%; }

/* ── frosted front panel ───────────────────────────────────────────── */
.gfo-front {
  position: absolute;
  top: 74px;
  left: 0;
  z-index: 10;
  width: 340px;
  height: 198px;
  clip-path: path('M0 22A22 22 0 0 1 22 0L118 0C144 0 146 32 172 32L318 32A22 22 0 0 1 340 54L340 176A22 22 0 0 1 318 198L22 198A22 22 0 0 1 0 176Z');
  -webkit-backdrop-filter: blur(22px) saturate(1.5);
  backdrop-filter: blur(22px) saturate(1.5);
  transform: perspective(760px) rotateX(var(--gf-hinge));
  transform-origin: 50% 100%;
  transition: transform .8s var(--gf-spring), translate 1s var(--gf-ease), opacity 1s var(--gf-ease);
}
.gfo-tint {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(90% 70% at 0% 100%, var(--glow), transparent 70%),
    linear-gradient(180deg, rgba(14, 22, 24, .22) 0%, rgba(8, 14, 16, .66) 46%, rgba(5, 9, 11, .95) 100%);
}
.gfo-spec {
  position: absolute;
  inset: 0;
  background: radial-gradient(260px 200px at calc(50% + var(--gf-px) * 46%) calc(30% + var(--gf-py) * 40%), rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%);
  mix-blend-mode: screen;
  opacity: .14;
  pointer-events: none;
}
.gfo-front-rim { width: 340px; height: 198px; opacity: .7; }
.gfo-front-rim path { stroke-width: 2.4; transition: stroke-width .3s var(--gf-ease); }
.gfo-rim-a { stop-color: var(--a1); stop-opacity: .9; }
.gfo-rim-b { stop-color: var(--a2); stop-opacity: .32; }
.gfo-rim-c { stop-color: var(--a1); stop-opacity: .1; }
.gfo-front:has(.gfo-hit:focus-visible) .gfo-front-rim path { stroke-width: 5; }

/* the whole glass is the open/close button; its label is the offer */
.gfo-hit { all: unset; position: absolute; z-index: 1; inset: 0; cursor: pointer; color: #f2f8f5; }
.gfo-hit:focus-visible .gfo-title { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.gfo-eyebrow { position: absolute; top: 11px; left: 22px; color: var(--a1); font-size: 9.5px; font-weight: 600; letter-spacing: .16em; white-space: nowrap; }
.gfo-title { position: absolute; top: 50px; right: 24px; left: 24px; font-size: 21px; font-weight: 550; line-height: 1.12; letter-spacing: -.02em; }
.gfo-benefit { position: absolute; top: 80px; left: 24px; max-width: 236px; color: rgba(226, 241, 236, .8); font-size: 13px; line-height: 1.38; }
.gfo-count { position: absolute; bottom: 26px; left: 24px; color: rgba(214, 236, 229, .62); font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 11px; letter-spacing: .03em; white-space: nowrap; }
.gfo-key {
  position: absolute;
  right: 18px;
  bottom: 16px;
  display: flex;
  height: 38px;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 15px;
  border: 1px solid color-mix(in srgb, var(--a1) 45%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 22%, transparent), rgba(255, 255, 255, .04));
  color: #f2fbf7;
  font-size: 12.5px;
  font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 8px 18px -10px rgba(0, 0, 0, .7);
  transition: transform .35s var(--gf-spring), background .3s var(--gf-ease);
}
.gfo-key svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--gf-spring); }
.gfo-key-close { display: none; }
.gfo-folder[data-open] .gfo-key-open { display: none; }
.gfo-folder[data-open] .gfo-key-close { display: inline; }
.gfo-folder[data-open] .gfo-key svg { transform: rotate(180deg); }
.gfo-hit:hover .gfo-key { transform: translateY(-1px); }

/* ── entrance: the folder assembles itself once ────────────────────── */
.gfo[data-js] .gfo-folder:not([data-entered]) .gfo-back,
.gfo[data-js] .gfo-folder:not([data-entered]) .gfo-back-rim { translate: 0 22px; opacity: 0; }
.gfo[data-js] .gfo-folder:not([data-entered]) .gfo-sheet { translate: 0 -120px; opacity: 0; }
.gfo[data-js] .gfo-folder:not([data-entered]) .gfo-front { translate: 0 46px; opacity: 0; }
.gfo[data-js] .gfo-folder:not([data-entered]) .gfo-shadow { opacity: 0; }
.gfo-back, .gfo-back-rim { transition: translate 1s var(--gf-ease), opacity .9s var(--gf-ease); }
.gfo-folder[data-entered] .gfo-sheet { transition-delay: calc(var(--gf-depth) * 40ms), 0s, calc(.18s + var(--gf-depth) * 90ms), calc(.18s + var(--gf-depth) * 90ms); }
.gfo-folder[data-entered] .gfo-front { transition-delay: 0s, .42s, .42s; }

/* ── the shared service detail ─────────────────────────────────────── */
.gfo-detail {
  --gfo-col: 0;
  --gfo-cols: 3;
  position: relative;
  grid-column: 1 / -1;
  width: 100%;
  margin: 14px 0 6px;
  padding: 30px 32px 28px;
  border: 1px solid color-mix(in srgb, var(--a1) 30%, transparent);
  border-radius: 26px;
  background: radial-gradient(70% 90% at 0% 0%, var(--glow), transparent 60%), linear-gradient(150deg, rgba(11, 21, 22, .94), rgba(5, 10, 13, .94));
  color: #eaf6f1;
  box-shadow: inset 0 1px 0 rgba(220, 255, 240, .1), 0 30px 70px -30px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  animation: gfo-detail-in .34s var(--gf-ease, ease) both;
}
/* the caret ties the detail to the folder it came from */
.gfo-detail::before {
  position: absolute;
  top: -8px;
  left: calc((var(--gfo-col) + .5) / var(--gfo-cols) * 100%);
  width: 15px;
  height: 15px;
  border-top: 1px solid color-mix(in srgb, var(--a1) 30%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--a1) 30%, transparent);
  background: rgb(11, 21, 22);
  content: "";
  transform: translateX(-50%) rotate(45deg);
}
.gfo-detail-close {
  position: absolute;
  top: 16px;
  right: 16px;
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(200, 255, 236, .16);
  border-radius: 50%;
  background: rgba(255, 255, 255, .04);
  color: rgba(234, 248, 242, .82);
  font: inherit;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.gfo-detail-close:hover { border-color: color-mix(in srgb, var(--a1) 55%, transparent); }
.gfo-detail-close:focus-visible, .gfo-cta:focus-visible { outline: 2px solid var(--a1); outline-offset: 3px; }
/* the heading receives focus when a service opens: marked, not boxed */
.gfo-service h3:focus-visible { text-decoration: underline 2px var(--a1); text-underline-offset: 7px; }
.gfo-service { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.25fr); gap: 10px 48px; }
.gfo-service > :not(.gfo-service-facts) { grid-column: 1; }
.gfo-service-facts { grid-row: 1 / span 5; grid-column: 2; display: grid; gap: 18px; margin: 0; padding-right: 40px; }
.gfo-service-eyebrow { margin: 0; color: var(--a1); font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
.gfo-service h3 { margin: 0; font-size: clamp(24px, 2.4vw, 30px); font-weight: 550; line-height: 1.12; letter-spacing: -.03em; outline: none; }
.gfo-service-benefit { margin: 4px 0 0; color: rgba(226, 241, 236, .86); font-size: 16px; line-height: 1.5; }
.gfo-service-facts dt { margin: 0 0 6px; color: var(--a1); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.gfo-service-facts dd { margin: 0; color: rgba(220, 236, 231, .84); font-size: 14.5px; line-height: 1.62; }
.gfo-service-scope { padding: 12px 14px; border: 1px solid rgba(200, 255, 236, .1); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.gfo-service-scope dd { color: rgba(206, 226, 220, .72); font-size: 13px; }
.gfo-service-actions { align-self: end; margin-top: 14px; }
.gfo-service-actions p { margin: 12px 0 0; color: rgba(190, 214, 206, .58); font-size: 12px; line-height: 1.5; }
.gfo-cta {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  gap: 8px;
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--a1) 50%, transparent);
  border-radius: 999px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--a1) 26%, transparent), color-mix(in srgb, var(--a2) 14%, transparent));
  color: #f2fbf7;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .25s ease, border-color .25s ease;
}
.gfo-cta:hover { border-color: var(--a1); transform: translateY(-1px); }

/* ── no backdrop-filter: solid smoked glass ────────────────────────── */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gfo-tint { background: radial-gradient(90% 70% at 0% 100%, var(--glow), transparent 70%), linear-gradient(180deg, rgba(12, 19, 21, .9) 0%, rgba(6, 11, 13, .97) 46%, #05090b 100%); }
  .gfo-detail { background: linear-gradient(150deg, #0b1516, #05090c); }
}

/* ── layouts ───────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .gfo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 28px; }
  .gfo-folder--convert { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .gfo-service { grid-template-columns: 1fr; gap: 10px; }
  .gfo-service-facts { grid-row: auto; grid-column: 1; padding-right: 0; margin-top: 12px; }
  .gfo-service > h3, .gfo-service > .gfo-service-eyebrow { padding-right: 52px; }
  .gfo-detail { padding: 24px 20px 22px; }
  .gfo-service-actions { margin-top: 6px; }
  .gfo-cta { width: 100%; justify-content: center; }
}
@media (max-width: 640px) {
  .gfo { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .gfo-folder--convert { grid-column: auto; }
}

@keyframes gfo-detail-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .gfo *, .gfo *::before, .gfo *::after { transition-duration: 0s !important; transition-delay: 0s !important; animation: none !important; }
  .gfo-tilt { transform: none; }
}