/* =====================================================================
   Fontogram Creative Solutions — design system
   Dark editorial theme · loaded after the template's style.css
   ===================================================================== */
:root {
    --fg-bg: #000;               /* black — brand background (was rgb(2, 9, 15) until v43) */
    --fg-bg-2: #0a1722;
    --fg-bg-3: #112230;
    --fg-text: #f3f1ec;
    --fg-muted: #8e8c87;
    --fg-line: rgba(243, 241, 236, 0.12);
    --fg-red: #b82025;
    --fg-red-2: #cf2f2f;
    --fg-display: "Unbounded", sans-serif;
    --fg-body: "Poppins", sans-serif;
    --fg-mono: "Space Mono", monospace;
    --fg-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --fg-pad: clamp(20px, 4vw, 64px);

    /* template variables re-pointed to the dark theme */
    --theme-color: #b82025;
    --title-color: #f3f1ec;
    --body-color: #b5b3ad;
    --smoke-color: #0a1722;
    --border-color: rgba(243, 241, 236, 0.12);
}

html { scroll-behavior: auto !important; }
body {
    background: var(--fg-bg);
    color: var(--fg-text);
    font-family: var(--fg-body);
}
body.fg-cursor-on, body.fg-cursor-on a, body.fg-cursor-on button { cursor: none; }
::selection { background: var(--fg-red); color: #fff; }
img { max-width: 100%; }
a { color: inherit; }
a:hover { color: var(--fg-red); }
h1, h2, h3, h4, h5, h6 { color: var(--fg-text); font-family: var(--fg-display); }
p { color: var(--body-color); }

.fg-wrap { width: 100%; padding-left: var(--fg-pad); padding-right: var(--fg-pad); max-width: 1680px; margin: 0 auto; }
.fg-section { padding: clamp(90px, 12vw, 180px) 0; position: relative; }
.fg-section.tight { padding: clamp(60px, 8vw, 110px) 0; }
.text-red, .text-brand { color: var(--fg-red) !important; }
.fg-mono { font-family: var(--fg-mono); }

/* grain */
.fg-grain {
    position: fixed;
    inset: -50%;
    z-index: 9990;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    animation: fgGrain 1s steps(4) infinite;
}
@keyframes fgGrain {
    0% { transform: translate(0, 0); }
    25% { transform: translate(-3%, 2%); }
    50% { transform: translate(2%, -3%); }
    75% { transform: translate(-1%, 3%); }
    100% { transform: translate(0, 0); }
}

/* ---------------------------------------------------------------- type */
.fg-eyebrow {
    font-family: var(--fg-mono);
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: lowercase;
    color: var(--fg-red);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 26px;
}
.fg-eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.fg-h2 {
    font-family: var(--fg-display);
    font-weight: 600;
    font-size: clamp(38px, 6vw, 96px);
    line-height: 0.98;
    letter-spacing: -0.04em;
    margin: 0;
}
.fg-h3 { font-family: var(--fg-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 36px); letter-spacing: -0.03em; line-height: 1.1; }
.fg-lead { font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--fg-muted); max-width: 620px; }
.fg-outline { color: transparent; -webkit-text-stroke: 1.5px var(--fg-text); }
.fg-split .fg-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fg-split .fg-w > span { display: inline-block; will-change: transform; }

/* ---------------------------------------------------------------- buttons */
.fg-btn {
    --c: var(--fg-text);
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 30px;
    border-radius: 100px;
    border: 1px solid var(--fg-line);
    font-family: var(--fg-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c);
    overflow: hidden;
    isolation: isolate;
    transition: color 0.5s var(--fg-ease), border-color 0.5s var(--fg-ease);
}
.fg-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fg-red);
    border-radius: inherit;
    transform: translateY(101%);
    transition: transform 0.5s var(--fg-ease);
    z-index: -1;
}
.fg-btn:hover { color: #fff; border-color: var(--fg-red); }
.fg-btn:hover::before { transform: translateY(0); }
.fg-btn.solid { background: var(--fg-red); border-color: var(--fg-red); color: #fff; }
.fg-btn.solid::before { background: var(--fg-text); }
.fg-btn.solid:hover { color: var(--fg-bg); border-color: var(--fg-text); }
.fg-btn i { font-size: 12px; transition: transform 0.4s var(--fg-ease); }
.fg-btn:hover i { transform: rotate(-45deg); }

.fg-arrow-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--fg-mono);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
}

/* ---------------------------------------------------------------- loader */
.fg-loader {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--fg-bg);
    display: flex;
    align-items: flex-end;
    padding: var(--fg-pad);
}
.fg-loader-inner { display: flex; justify-content: space-between; align-items: flex-end; width: 100%; }
.fg-loader-word { font-family: var(--fg-display); font-weight: 700; font-size: clamp(40px, 9vw, 140px); letter-spacing: -0.05em; line-height: 0.9; overflow: hidden; }
.fg-loader-word span { display: inline-block; }
.fg-loader-word em { color: var(--fg-red); font-style: normal; }
.fg-loader-count { font-family: var(--fg-mono); font-size: clamp(16px, 2vw, 22px); color: var(--fg-muted); }
.fg-loader-bar { position: absolute; left: 0; top: 0; height: 3px; width: 0; background: var(--fg-red); }
html.fg-loaded .fg-loader { display: none; }
.preloader { display: none !important; }

/* ---------------------------------------------------------------- cursor */
.fg-cursor, .fg-cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; border-radius: 50%; opacity: 0; }
.fg-cursor {
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 1px solid rgba(243, 241, 236, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.4s var(--fg-ease), height 0.4s var(--fg-ease), margin 0.4s var(--fg-ease), background 0.4s, border-color 0.4s;
}
.fg-cursor-dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--fg-red); }
.fg-cursor-label { font-family: var(--fg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: #fff; opacity: 0; transition: opacity 0.3s; white-space: nowrap; }
body.fg-cursor-on .fg-cursor, body.fg-cursor-on .fg-cursor-dot { opacity: 1; }
.fg-cursor.is-link { width: 64px; height: 64px; margin: -32px 0 0 -32px; border-color: var(--fg-red); }
.fg-cursor.is-label { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: var(--fg-red); border-color: var(--fg-red); }
.fg-cursor.is-label .fg-cursor-label { opacity: 1; }
.fg-cursor.is-label + .fg-cursor-dot { opacity: 0; }

/* ---------------------------------------------------------------- header */
.fg-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 900;
    transition: transform 0.5s var(--fg-ease), background 0.4s, backdrop-filter 0.4s;
}
.fg-header.is-scrolled { background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.fg-header.is-hidden { transform: translateY(-100%); }
.fg-header-inner { display: flex; align-items: center; justify-content: space-between; gap: 30px; height: 92px; }
.fg-header.is-scrolled .fg-header-inner { height: 76px; }
.brand-logo { display: inline-flex; align-items: baseline; color: var(--fg-text); line-height: 1; }
.brand-logo:hover { color: var(--fg-text); }
.brand-logo .logo-text { font-family: var(--fg-display); font-size: 24px; font-weight: 700; letter-spacing: -0.05em; }
.brand-logo .logo-dot { font-family: var(--fg-display); font-size: 34px; font-weight: 800; line-height: 0.5; color: var(--fg-red); display: inline-block; transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55); }
.brand-logo:hover .logo-dot { transform: scale(1.6); }
.fg-nav > ul { display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fg-nav li { position: relative; }
.fg-nav > ul > li > a {
    display: block;
    padding: 10px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--fg-text);
    border-radius: 100px;
    transition: background 0.3s, color 0.3s;
}
.fg-nav > ul > li > a:hover, .fg-nav > ul > li.active > a { background: rgba(243, 241, 236, 0.08); color: var(--fg-text); }
.fg-nav > ul > li.active > a::after { content: ""; display: inline-block; width: 5px; height: 5px; background: var(--fg-red); border-radius: 50%; margin-left: 6px; vertical-align: middle; }
.fg-nav .sub {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 270px;
    list-style: none;
    margin: 0;
    padding: 12px;
    background: var(--fg-bg-2);
    border: 1px solid var(--fg-line);
    border-radius: 18px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.35s var(--fg-ease);
}
.fg-nav li:hover > .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.fg-nav .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.fg-nav .sub a { display: block; padding: 10px 14px; border-radius: 10px; font-size: 14px; color: var(--fg-muted); }
.fg-nav .sub a:hover { background: rgba(243, 241, 236, 0.06); color: var(--fg-text); }
.fg-header-right { display: flex; align-items: center; gap: 22px; }
.fg-clock { font-family: var(--fg-mono); font-size: 12px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.fg-clock b { color: var(--fg-text); font-weight: 400; }
.fg-burger {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid var(--fg-line);
    background: transparent;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    transition: border-color 0.3s, background 0.3s;
}
.fg-burger span { width: 18px; height: 1.5px; background: var(--fg-text); transition: width 0.3s; }
.fg-burger span:last-child { width: 10px; margin-left: 8px; }
.fg-burger:hover { border-color: var(--fg-red); background: var(--fg-red); }
.fg-burger:hover span:last-child { width: 18px; margin-left: 0; }
.fg-header .fg-btn { padding: 13px 22px; }
@media (max-width: 1199px) { .fg-clock { display: none; } }

/* template side panel + mobile menu → dark */
.sidemenu-wrapper .sidemenu-content { background: var(--fg-bg-2); border-left: 1px solid var(--fg-line); }
.sidemenu-wrapper .closeButton { background: var(--fg-red); border-color: var(--fg-red); }
.sidemenu-wrapper .closeButton img { filter: invert(1); }
.sidemenu-wrapper .about-text, .sidemenu-wrapper h6, .sidemenu-wrapper h6 a { color: var(--fg-text); }
.sidemenu-wrapper .chat-btn { background: var(--fg-red); color: #fff; }
.mobile-menu-wrapper .mobile-menu-area { background: var(--fg-bg-2); }
.mobile-menu-wrapper .mobile-menu ul li a, .mobile-menu-wrapper h6, .mobile-menu-wrapper h6 a { color: var(--fg-text); }
.mobile-menu-wrapper .mobile-menu ul li ul li a { color: var(--fg-muted); }
.mobile-menu-wrapper .menu-toggle { background: var(--fg-red); color: #fff; border-color: var(--fg-red); }
.mobile-menu-wrapper .mobile-menu ul li .mean-expand-class { color: var(--fg-text); }
.mobile-menu-wrapper .mobile-menu ul li.active > a { color: var(--fg-red); }
.social-btn a { border-color: var(--fg-line) !important; color: var(--fg-text) !important; background: transparent !important; }
.social-btn a:hover { background: var(--fg-red) !important; border-color: var(--fg-red) !important; color: #fff !important; }

/* ---------------------------------------------------------------- home hero */
.fg-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: flex-end;
    padding: 150px 0 60px;
    overflow: hidden;
}
.fg-hero::before {
    content: "";
    position: absolute;
    width: 70vw;
    height: 70vw;
    right: -25vw;
    top: -30vw;
    background: radial-gradient(circle, rgba(184, 32, 37, 0.22) 0%, transparent 60%);
    pointer-events: none;
}
.fg-hero-floats { position: absolute; inset: 0; pointer-events: none; }
.fg-float { position: absolute; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); will-change: transform; }
.fg-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-float.f1 { width: 16vw; max-width: 260px; aspect-ratio: 3/4; right: 8vw; top: 16vh; transform: rotate(7deg); }
.fg-float.f2 { width: 13vw; max-width: 210px; aspect-ratio: 1; right: 27vw; top: 9vh; transform: rotate(-9deg); opacity: 0.85; }
.fg-float.f3 { width: 18vw; max-width: 300px; aspect-ratio: 4/3; right: 4vw; top: 66vh; transform: rotate(-5deg); }
.fg-float.f4 { width: 9vw; max-width: 150px; aspect-ratio: 3/4; right: 40vw; top: 7vh; transform: rotate(10deg); opacity: 0.55; }
.fg-hero-content { position: relative; z-index: 2; width: 100%; }
.fg-hero-top { display: flex; flex-wrap: wrap; gap: 14px 34px; font-family: var(--fg-mono); font-size: 13px; color: var(--fg-muted); margin-bottom: 34px; }
.fg-status { display: inline-flex; align-items: center; gap: 10px; color: var(--fg-text); }
.fg-status i { width: 8px; height: 8px; border-radius: 50%; background: #2bd96b; box-shadow: 0 0 0 0 rgba(43, 217, 107, 0.6); animation: fgPing 1.8s infinite; }
@keyframes fgPing { 70% { box-shadow: 0 0 0 10px rgba(43, 217, 107, 0); } 100% { box-shadow: 0 0 0 0 rgba(43, 217, 107, 0); } }
.fg-hero-title {
    font-family: var(--fg-display);
    font-weight: 700;
    font-size: clamp(44px, 8.2vw, 170px);
    line-height: 0.9;
    letter-spacing: -0.055em;
    margin: 0 0 50px;
    text-transform: uppercase;
}
.fg-hero-title .line { display: block; overflow: hidden; padding-bottom: 0.04em; }
.fg-hero-title .line > span { display: inline-block; }
.fg-hero-title .fg-outline { -webkit-text-stroke-width: 2px; }
.fg-pill-img {
    display: inline-block;
    width: 1.9em;
    height: 0.78em;
    border-radius: 1em;
    overflow: hidden;
    vertical-align: middle;
    margin: -0.1em 0.12em 0;
    position: relative;
}
.fg-pill-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.15); }
.fg-hero-bottom { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 40px; border-top: 1px solid var(--fg-line); padding-top: 32px; }
.fg-hero-bottom p { margin: 0 0 24px; max-width: 520px; font-size: 18px; color: var(--fg-muted); }
.fg-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* rotating badge */
.fg-badge { position: relative; width: 150px; height: 150px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.fg-badge svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: fgSpin 14s linear infinite; }
.fg-badge text { font-family: var(--fg-mono); font-size: 10.5px; letter-spacing: 3.2px; fill: var(--fg-text); text-transform: uppercase; }
.fg-badge-core { width: 64px; height: 64px; border-radius: 50%; background: var(--fg-red); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; transition: transform 0.5s var(--fg-ease); }
.fg-badge:hover .fg-badge-core { transform: scale(1.15) rotate(45deg); color: #fff; }
@keyframes fgSpin { to { transform: rotate(360deg); } }

/* ---------------------------------------------------------------- tapes */
.fg-tapes { position: relative; height: 230px; overflow: hidden; margin: 40px 0; }
.fg-tape { position: absolute; left: -5%; right: -5%; top: 50%; padding: 22px 0; overflow: hidden; white-space: nowrap; }
.fg-tape-track { display: inline-flex; animation: fgMarquee 38s linear infinite; }
.fg-tape-track span { font-family: var(--fg-display); font-weight: 600; font-size: clamp(22px, 2.6vw, 38px); text-transform: uppercase; letter-spacing: -0.02em; padding: 0 26px; display: inline-flex; align-items: center; gap: 52px; }
.fg-tape-track span::after { content: "✦"; font-size: 0.7em; }
.fg-tape.red { background: var(--fg-red); color: #fff; transform: translateY(-50%) rotate(-4deg); z-index: 2; }
.fg-tape.light { background: var(--fg-text); color: var(--fg-bg); transform: translateY(-50%) rotate(3deg); }
.fg-tape.light .fg-tape-track { animation-direction: reverse; animation-duration: 46s; }
@keyframes fgMarquee { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- statement */
.fg-statement-text {
    font-family: var(--fg-display);
    font-weight: 500;
    font-size: clamp(26px, 3.6vw, 60px);
    line-height: 1.18;
    letter-spacing: -0.035em;
    margin: 0;
    color: var(--fg-text);
}
.fg-statement-text .fg-word { opacity: 0.16; transition: opacity 0.2s; }
.fg-statement-text em { font-style: normal; color: var(--fg-red); }
.fg-inline-img { display: inline-block; width: 1.6em; height: 0.85em; border-radius: 0.5em; overflow: hidden; vertical-align: middle; margin: -0.12em 0.08em 0; }
.fg-inline-img img { width: 100%; height: 100%; object-fit: cover; }

.fg-stats { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--fg-line); margin-top: clamp(60px, 8vw, 120px); }
.fg-stat { padding: 34px 26px 0 0; border-right: 1px solid var(--fg-line); }
.fg-stat:last-child { border-right: 0; }
.fg-stat + .fg-stat { padding-left: 26px; }
.fg-stat-num { font-family: var(--fg-display); font-weight: 600; font-size: clamp(48px, 6vw, 104px); line-height: 1; letter-spacing: -0.05em; display: block; }
.fg-stat-num sup { color: var(--fg-red); font-size: 0.45em; top: -0.9em; }
.fg-stat h4 { font-family: var(--fg-body); font-size: 16px; font-weight: 600; margin: 18px 0 6px; }
.fg-stat p { margin: 0; font-size: 14px; color: var(--fg-muted); }
@media (max-width: 991px) {
    .fg-stats { grid-template-columns: repeat(2, 1fr); }
    .fg-stat:nth-child(2) { border-right: 0; }
    .fg-stat:nth-child(3) { padding-left: 0; }
    .fg-stat:nth-child(n+3) { border-top: 1px solid var(--fg-line); margin-top: 34px; }
}

/* ---------------------------------------------------------------- horizontal work */
.fg-hwork { position: relative; padding: clamp(90px, 12vw, 160px) 0 0; }
.fg-hwork-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; flex-wrap: wrap; margin-bottom: 60px; }
.fg-hwork-pin { overflow: hidden; }
.fg-hwork-track { display: flex; gap: 28px; padding: 0 var(--fg-pad) clamp(90px, 10vw, 140px); width: max-content; will-change: transform; }
.fg-panel { display: block; width: min(42vw, 640px); flex: none; color: var(--fg-text); }
.fg-panel:hover { color: var(--fg-text); }
.fg-panel-img { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 22px; background: var(--fg-bg-2); }
.fg-panel-img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.06); transition: transform 1.2s var(--fg-ease); }
.fg-panel:hover .fg-panel-img img { transform: scale(1); }
.fg-panel-num { position: absolute; left: 22px; top: 22px; font-family: var(--fg-mono); font-size: 12px; padding: 7px 14px; border-radius: 30px; background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(6px); color: #fff; }
.fg-panel-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding-top: 22px; }
.fg-panel-info h3 { font-size: clamp(26px, 2.6vw, 44px); font-weight: 600; letter-spacing: -0.04em; margin: 0 0 6px; transition: color 0.3s; }
.fg-panel:hover h3 { color: var(--fg-red); }
.fg-panel-info p { margin: 0; color: var(--fg-muted); }
.fg-panel-count { font-family: var(--fg-mono); font-size: 12px; color: var(--fg-muted); white-space: nowrap; padding-top: 12px; }
.fg-panel.end { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; }
.fg-panel-end {
    width: min(30vw, 420px);
    aspect-ratio: 1;
    border-radius: 50%;
    border: 1px solid var(--fg-line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-family: var(--fg-display);
    font-size: clamp(24px, 2.4vw, 40px);
    font-weight: 600;
    letter-spacing: -0.03em;
    transition: background 0.5s var(--fg-ease), border-color 0.5s;
}
.fg-panel-end i { font-size: 0.8em; transition: transform 0.5s var(--fg-ease); }
.fg-panel.end:hover .fg-panel-end { background: var(--fg-red); border-color: var(--fg-red); color: #fff; }
.fg-panel.end:hover .fg-panel-end i { transform: rotate(-45deg); }
@media (max-width: 991px) {
    .fg-hwork-pin { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .fg-hwork-pin::-webkit-scrollbar { display: none; }
    .fg-panel { width: 78vw; scroll-snap-align: start; }
    .fg-panel-end { width: 60vw; }
}

/* ---------------------------------------------------------------- services list */
.fg-svc-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg-line); }
.fg-svc-row {
    position: relative;
    display: grid;
    grid-template-columns: 80px 1.3fr 1fr 60px;
    align-items: center;
    gap: 30px;
    padding: 38px 0;
    border-bottom: 1px solid var(--fg-line);
    color: var(--fg-text);
    overflow: hidden;
    isolation: isolate;
}
.fg-svc-row::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--fg-red);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform 0.6s var(--fg-ease);
    z-index: -1;
}
.fg-svc-row:hover { color: #fff; }
.fg-svc-row:hover::before { transform: scaleY(1); transform-origin: top; }
.fg-svc-num { font-family: var(--fg-mono); font-size: 13px; color: var(--fg-muted); padding-left: 10px; transition: color 0.4s; }
.fg-svc-name { font-family: var(--fg-display); font-weight: 600; font-size: clamp(26px, 3.4vw, 56px); letter-spacing: -0.045em; line-height: 1; transition: transform 0.6s var(--fg-ease); }
.fg-svc-desc { color: var(--fg-muted); font-size: 15px; transition: color 0.4s; }
.fg-svc-arrow { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--fg-line); display: flex; align-items: center; justify-content: center; transition: all 0.5s var(--fg-ease); }
.fg-svc-row:hover .fg-svc-num, .fg-svc-row:hover .fg-svc-desc { color: rgba(255, 255, 255, 0.85); }
.fg-svc-row:hover .fg-svc-name { transform: translateX(18px); }
.fg-svc-row:hover .fg-svc-arrow { background: #fff; color: var(--fg-red); border-color: #fff; transform: rotate(-45deg); }
.fg-svc-float {
    position: fixed;
    top: 0;
    left: 0;
    width: 300px;
    height: 380px;
    border-radius: 18px;
    overflow: hidden;
    pointer-events: none;
    z-index: 50;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.35s, transform 0.5s var(--fg-ease);
}
.fg-svc-float.show { opacity: 1; transform: scale(1); }
.fg-svc-float img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 991px) {
    .fg-svc-row { grid-template-columns: 40px 1fr 44px; gap: 16px; padding: 28px 0; }
    .fg-svc-desc { grid-column: 2 / 4; grid-row: 2; }
    .fg-svc-arrow { width: 44px; height: 44px; }
    .fg-svc-float { display: none; }
}

/* ---------------------------------------------------------------- stacked websites */
.fg-stack-list { position: relative; }
.fg-stack-card {
    position: sticky;
    top: calc(110px + var(--i) * 22px);
    margin-bottom: 60px;
    background: var(--fg-bg-2);
    border: 1px solid var(--fg-line);
    border-radius: 26px;
    padding: 18px;
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 34px;
    align-items: center;
    transform-origin: top center;
    will-change: transform;
}
.fg-browser { border-radius: 14px; overflow: hidden; background: #01060a; }
.fg-browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #112230; }
.fg-browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3c4b; }
.fg-browser-bar i:first-child { background: var(--fg-red); }
.fg-browser-bar span { margin-left: 14px; font-family: var(--fg-mono); font-size: 12px; color: var(--fg-muted); background: #000000; padding: 4px 14px; border-radius: 20px; }
.fg-browser img { display: block; width: 100%; aspect-ratio: 16 / 9.4; object-fit: cover; }
.fg-stack-info { padding: 20px 26px 20px 0; }
.fg-stack-info .num { font-family: var(--fg-mono); color: var(--fg-red); font-size: 13px; }
.fg-stack-info h3 { font-size: clamp(30px, 3vw, 52px); font-weight: 600; letter-spacing: -0.045em; margin: 14px 0 12px; }
.fg-stack-info p { color: var(--fg-muted); margin-bottom: 26px; }
@media (max-width: 991px) {
    .fg-stack-card { grid-template-columns: 1fr; gap: 10px; top: calc(90px + var(--i) * 14px); }
    .fg-stack-info { padding: 10px 8px 14px; }
}

/* ---------------------------------------------------------------- process */
.fg-process { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--fg-line); }
.fg-step { padding: 40px 30px 40px 0; border-right: 1px solid var(--fg-line); position: relative; }
.fg-step + .fg-step { padding-left: 30px; }
.fg-step:last-child { border-right: 0; }
.fg-step-num { font-family: var(--fg-display); font-size: clamp(60px, 7vw, 120px); font-weight: 700; line-height: 1; letter-spacing: -0.06em; color: transparent; -webkit-text-stroke: 1px rgba(243, 241, 236, 0.35); transition: color 0.4s, -webkit-text-stroke-color 0.4s; display: block; margin-bottom: 30px; }
.fg-step:hover .fg-step-num { color: var(--fg-red); -webkit-text-stroke-color: var(--fg-red); }
.fg-step h4 { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; }
.fg-step p { color: var(--fg-muted); font-size: 15px; margin: 0; }
.fg-step .tag { position: absolute; top: 44px; right: 26px; font-family: var(--fg-mono); font-size: 11px; color: var(--fg-muted); text-transform: uppercase; }
@media (max-width: 991px) {
    .fg-process { grid-template-columns: 1fr 1fr; }
    .fg-step:nth-child(2) { border-right: 0; }
    .fg-step:nth-child(3) { padding-left: 0; }
    .fg-step:nth-child(n+3) { border-top: 1px solid var(--fg-line); }
}
@media (max-width: 575px) {
    .fg-process { grid-template-columns: 1fr; }
    .fg-step, .fg-step + .fg-step { padding: 30px 0; border-right: 0; border-top: 1px solid var(--fg-line); }
}

/* ---------------------------------------------------------------- clients */
.fg-clients { overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; }
.fg-client-row { display: flex; white-space: nowrap; overflow: hidden; }
.fg-client-track { display: inline-flex; animation: fgMarquee 50s linear infinite; }
.fg-client-row.rev .fg-client-track { animation-direction: reverse; animation-duration: 60s; }
.fg-client-track span {
    font-family: var(--fg-display);
    font-weight: 700;
    font-size: clamp(44px, 7vw, 120px);
    letter-spacing: -0.05em;
    text-transform: uppercase;
    padding: 0 0.35em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(243, 241, 236, 0.45);
    transition: color 0.3s, -webkit-text-stroke-color 0.3s;
    line-height: 1.15;
}
.fg-client-track span:hover { color: var(--fg-red); -webkit-text-stroke-color: var(--fg-red); }
.fg-client-row:hover .fg-client-track { animation-play-state: paused; }

/* ---------------------------------------------------------------- CTA */
.fg-cta { position: relative; padding: clamp(100px, 13vw, 200px) 0 clamp(80px, 9vw, 140px); overflow: hidden; border-top: 1px solid var(--fg-line); }
.fg-cta::after {
    content: "";
    position: absolute;
    width: 60vw;
    height: 60vw;
    left: 50%;
    bottom: -40vw;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(184, 32, 37, 0.25), transparent 60%);
    pointer-events: none;
}
.fg-cta-big {
    display: block;
    font-family: var(--fg-display);
    font-weight: 700;
    font-size: clamp(34px, 6.4vw, 150px);
    line-height: 0.95;
    letter-spacing: -0.03em;
    text-transform: uppercase;
    color: var(--fg-text);
    position: relative;
    z-index: 1;
}
.fg-cta-big span { display: block; white-space: nowrap; transition: transform 0.8s var(--fg-ease), color 0.4s; }
.fg-cta-big span:last-child { padding-left: 8vw; }
.fg-cta-big .fg-outline { -webkit-text-stroke-width: 2px; }
.fg-cta-big:hover span:first-child { transform: translateX(4vw); }
.fg-cta-big:hover span:last-child { transform: translateX(-2vw); color: var(--fg-red); -webkit-text-stroke-color: var(--fg-red); }
.fg-cta-big b { color: var(--fg-red); }
.fg-cta-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 60px; position: relative; z-index: 1; }
.fg-cta-links { display: flex; flex-wrap: wrap; gap: 12px; }
.fg-copy { position: relative; }
.fg-copy .fg-copied { position: absolute; left: 50%; top: -34px; transform: translateX(-50%); font-family: var(--fg-mono); font-size: 11px; background: var(--fg-text); color: var(--fg-bg); padding: 4px 10px; border-radius: 20px; opacity: 0; transition: opacity 0.3s; pointer-events: none; white-space: nowrap; }
.fg-copy.done .fg-copied { opacity: 1; }

/* ---------------------------------------------------------------- footer */
.fg-footer { border-top: 1px solid var(--fg-line); padding-top: clamp(70px, 8vw, 110px); overflow: hidden; position: relative; }
.fg-footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.3fr 1.2fr; gap: 40px; }
.fg-footer h5 { font-family: var(--fg-mono); font-size: 12px; font-weight: 400; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 22px; }
.fg-footer ul { list-style: none; margin: 0; padding: 0; }
.fg-footer li { margin-bottom: 10px; }
.fg-footer a { color: var(--fg-text); transition: color 0.3s; }
.fg-footer a:hover { color: var(--fg-red); }
.fg-footer-about { color: var(--fg-muted); max-width: 340px; margin: 20px 0 26px; }
.fg-socials { display: flex; gap: 10px; flex-wrap: wrap; }
.fg-socials a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--fg-line); display: inline-flex; align-items: center; justify-content: center; transition: all 0.4s var(--fg-ease); }
.fg-socials a:hover { background: var(--fg-red); border-color: var(--fg-red); color: #fff; transform: translateY(-4px); }
.fg-wordmark {
    font-family: var(--fg-display);
    font-weight: 800;
    font-size: 12.6vw;
    line-height: 0.78;
    letter-spacing: -0.075em;
    text-align: center;
    margin: clamp(60px, 8vw, 110px) 0 0;
    white-space: nowrap;
    background: linear-gradient(180deg, var(--fg-text) 0%, rgba(243, 241, 236, 0.08) 95%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    user-select: none;
}
.fg-wordmark b { color: var(--fg-red); -webkit-text-fill-color: var(--fg-red); }
.fg-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 14px; padding: 26px 0 34px; border-top: 1px solid var(--fg-line); font-size: 13px; color: var(--fg-muted); position: relative; z-index: 1; background: var(--fg-bg); }
.fg-footer-bottom p { margin: 0; color: var(--fg-muted); }
@media (max-width: 991px) { .fg-footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 575px) { .fg-footer-grid { grid-template-columns: 1fr; } }

/* scroll-top (template) restyle */
.scroll-top { right: 24px; bottom: 24px; background: var(--fg-bg-2); box-shadow: none; }
.scroll-top:after { color: var(--fg-text); }
.scroll-top svg path { stroke: var(--fg-red); }
.fg-whatsapp {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 99;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #25d366;
    color: #fff;
    font-size: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    transition: transform 0.4s var(--fg-ease);
}
.fg-whatsapp:hover { color: #fff; transform: scale(1.1) rotate(-8deg); }

/* ---------------------------------------------------------------- inner page hero */
.fg-page-hero { position: relative; padding: clamp(170px, 20vw, 260px) 0 clamp(50px, 6vw, 90px); overflow: hidden; }
.fg-page-hero::before { content: ""; position: absolute; width: 50vw; height: 50vw; right: -15vw; top: -20vw; background: radial-gradient(circle, rgba(184, 32, 37, 0.18), transparent 60%); pointer-events: none; }
.fg-crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-family: var(--fg-mono); font-size: 12px; color: var(--fg-muted); margin-bottom: 30px; list-style: none; padding: 0; }
.fg-crumbs li + li::before { content: "/"; margin-right: 8px; opacity: 0.5; }
.fg-crumbs a:hover { color: var(--fg-red); }
.fg-page-title { font-family: var(--fg-display); font-weight: 700; font-size: clamp(50px, 10vw, 180px); line-height: 0.9; letter-spacing: -0.06em; margin: 0; text-transform: uppercase; }
.fg-page-hero-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 30px; margin-top: 50px; padding-top: 30px; border-top: 1px solid var(--fg-line); }
.fg-page-hero-bottom .fg-lead { margin: 0; }
.fg-meta { display: flex; flex-wrap: wrap; gap: 14px 46px; list-style: none; margin: 0; padding: 0; }
.fg-meta li span { display: block; font-family: var(--fg-mono); font-size: 11px; text-transform: uppercase; color: var(--fg-muted); letter-spacing: 0.08em; margin-bottom: 6px; }
.fg-meta li { color: var(--fg-text); font-weight: 500; }

/* full-bleed parallax banner */
.fg-banner { position: relative; overflow: hidden; border-radius: 26px; aspect-ratio: 16 / 8; background: var(--fg-bg-2); }
.fg-banner img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }

/* ---------------------------------------------------------------- portfolio grid */
.fg-filter { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 60px; }
.fg-filter button {
    border: 1px solid var(--fg-line);
    background: transparent;
    color: var(--fg-text);
    padding: 12px 22px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.35s var(--fg-ease);
}
.fg-filter button sup { color: var(--fg-red); margin-left: 4px; font-family: var(--fg-mono); }
.fg-filter button:hover { border-color: var(--fg-text); }
.fg-filter button.active { background: var(--fg-text); border-color: var(--fg-text); color: var(--fg-bg); }
.fg-grid { margin-left: -14px; margin-right: -14px; }
.fg-grid > .filter-item { padding: 0 14px; margin-bottom: 44px; }
.fg-card { display: block; color: var(--fg-text); }
.fg-card:hover { color: var(--fg-text); }
.fg-card-img { position: relative; overflow: hidden; border-radius: 18px; background: var(--fg-bg-2); }
.fg-card-img img { width: 100%; display: block; transition: transform 1s var(--fg-ease), filter 0.6s; }
.fg-card:hover .fg-card-img img { transform: scale(1.06); }
.fg-card-img::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); pointer-events: none; }
.fg-card-meta { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding-top: 18px; }
.fg-card-meta h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.03em; margin: 0 0 4px; }
.fg-card-meta p { margin: 0; font-size: 14px; color: var(--fg-muted); }
.fg-card-cat { font-family: var(--fg-mono); font-size: 11px; color: var(--fg-muted); text-transform: uppercase; border: 1px solid var(--fg-line); border-radius: 30px; padding: 5px 12px; white-space: nowrap; }
.fg-visit { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; font-family: var(--fg-mono); font-size: 12px; text-transform: uppercase; color: var(--fg-red); }
.fg-visit:hover { color: var(--fg-text); }

.fg-video { border-radius: 22px; overflow: hidden; margin-bottom: 70px; background: #000; }
.fg-video video { width: 100%; display: block; }
.fg-video-popup { max-width: 1100px; margin: 0 auto; }
.fg-video-popup video { width: 100%; display: block; border-radius: 12px; }

/* big next link */
.fg-next { display: block; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); padding: clamp(50px, 6vw, 90px) 0; color: var(--fg-text); text-align: center; }
.fg-next small { display: block; font-family: var(--fg-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 18px; }
.fg-next strong { font-family: var(--fg-display); font-weight: 700; font-size: clamp(40px, 8vw, 140px); letter-spacing: -0.06em; line-height: 0.95; display: inline-flex; align-items: center; gap: 0.25em; transition: color 0.4s; }
.fg-next strong i { font-size: 0.5em; transition: transform 0.6s var(--fg-ease); }
.fg-next:hover strong { color: var(--fg-red); }
.fg-next:hover strong i { transform: translateX(0.3em) rotate(-45deg); }

/* ---------------------------------------------------------------- services page blocks */
.fg-svc-block { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 100px); align-items: center; padding: clamp(50px, 6vw, 90px) 0; border-top: 1px solid var(--fg-line); }
.fg-svc-block:nth-child(even) .fg-svc-block-img { order: 2; }
.fg-svc-block-img { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 5 / 4; }
.fg-svc-block-img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.fg-svc-block .num { font-family: var(--fg-mono); color: var(--fg-red); font-size: 13px; }
.fg-svc-block h2 { font-size: clamp(34px, 4vw, 64px); font-weight: 600; letter-spacing: -0.05em; line-height: 1; margin: 18px 0 22px; }
.fg-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 34px; }
.fg-chip { border: 1px solid var(--fg-line); border-radius: 40px; padding: 7px 16px; font-size: 13px; color: var(--fg-text); transition: all 0.3s; }
.fg-chip:hover { border-color: var(--fg-red); color: var(--fg-red); }
@media (max-width: 991px) {
    .fg-svc-block { grid-template-columns: 1fr; }
    .fg-svc-block:nth-child(even) .fg-svc-block-img { order: 0; }
}

/* service detail */
.fg-two { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 110px); }
@media (max-width: 991px) { .fg-two { grid-template-columns: 1fr; } }
.fg-numlist { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--fg-line); counter-reset: n; }
.fg-numlist li { counter-increment: n; display: flex; gap: 24px; align-items: baseline; padding: 20px 0; border-bottom: 1px solid var(--fg-line); font-size: 18px; color: var(--fg-text); transition: padding 0.4s var(--fg-ease), color 0.3s; }
.fg-numlist li::before { content: counter(n, decimal-leading-zero); font-family: var(--fg-mono); font-size: 12px; color: var(--fg-red); }
.fg-numlist li:hover { padding-left: 14px; color: var(--fg-red); }
.fg-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 50px; }
.fg-benefit { background: var(--fg-bg-2); border: 1px solid var(--fg-line); border-radius: 20px; padding: 30px; transition: border-color 0.4s, transform 0.5s var(--fg-ease); }
.fg-benefit:hover { border-color: var(--fg-red); transform: translateY(-6px); }
.fg-benefit i { font-size: 24px; color: var(--fg-red); margin-bottom: 22px; display: block; }
.fg-benefit h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; }
.fg-benefit p { margin: 0; color: var(--fg-muted); }
@media (max-width: 575px) { .fg-benefits { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- about */
.fg-about-img { position: relative; overflow: hidden; border-radius: 22px; aspect-ratio: 4 / 5; }
.fg-about-img img { position: absolute; left: 0; top: -10%; width: 100%; height: 120%; object-fit: cover; }
.fg-tools { display: flex; flex-wrap: wrap; gap: 12px; }
.fg-tools span { font-family: var(--fg-display); font-size: clamp(20px, 2.4vw, 36px); font-weight: 500; letter-spacing: -0.03em; padding: 12px 26px; border: 1px solid var(--fg-line); border-radius: 100px; transition: all 0.4s var(--fg-ease); }
.fg-tools span:hover { background: var(--fg-red); border-color: var(--fg-red); color: #fff; transform: rotate(-3deg); }

/* ---------------------------------------------------------------- FAQ */
.fg-faq { border-top: 1px solid var(--fg-line); }
.fg-faq-item { border-bottom: 1px solid var(--fg-line); }
.fg-faq-q {
    width: 100%;
    background: none;
    border: 0;
    display: grid;
    grid-template-columns: 60px 1fr 44px;
    gap: 16px;
    align-items: center;
    text-align: left;
    padding: 32px 0;
    color: var(--fg-text);
    font-family: var(--fg-display);
    font-size: clamp(19px, 1.9vw, 28px);
    font-weight: 500;
    letter-spacing: -0.03em;
    transition: color 0.3s;
}
.fg-faq-q .n { font-family: var(--fg-mono); font-size: 12px; color: var(--fg-red); }
.fg-faq-q .plus { position: relative; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--fg-line); transition: all 0.4s var(--fg-ease); }
.fg-faq-q .plus::before, .fg-faq-q .plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.4s var(--fg-ease); }
.fg-faq-q .plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.fg-faq-q:not(.collapsed) .plus { background: var(--fg-red); border-color: var(--fg-red); color: #fff; }
.fg-faq-q:not(.collapsed) .plus::after { transform: translate(-50%, -50%) rotate(0); }
.fg-faq-q:hover { color: var(--fg-red); }
.fg-faq-a { padding: 0 60px 34px 76px; color: var(--fg-muted); font-size: 17px; line-height: 1.7; }
@media (max-width: 575px) {
    .fg-faq-q { grid-template-columns: 34px 1fr 40px; }
    .fg-faq-a { padding: 0 0 28px 50px; }
}

/* ---------------------------------------------------------------- contact */
.fg-link-rows { border-top: 1px solid var(--fg-line); }
.fg-link-row {
    display: grid;
    grid-template-columns: 160px 1fr 56px;
    align-items: center;
    gap: 20px;
    padding: 30px 0;
    border-bottom: 1px solid var(--fg-line);
    color: var(--fg-text);
}
.fg-link-row .k { font-family: var(--fg-mono); font-size: 12px; text-transform: uppercase; color: var(--fg-muted); letter-spacing: 0.08em; }
.fg-link-row .v { font-family: var(--fg-display); font-size: clamp(20px, 2.6vw, 42px); font-weight: 500; letter-spacing: -0.04em; transition: transform 0.6s var(--fg-ease), color 0.3s; word-break: break-word; }
.fg-link-row .a { width: 56px; height: 56px; border-radius: 50%; border: 1px solid var(--fg-line); display: flex; align-items: center; justify-content: center; transition: all 0.5s var(--fg-ease); }
.fg-link-row:hover { color: var(--fg-text); }
.fg-link-row:hover .v { transform: translateX(14px); color: var(--fg-red); }
.fg-link-row:hover .a { background: var(--fg-red); border-color: var(--fg-red); color: #fff; transform: rotate(-45deg); }
@media (max-width: 767px) {
    .fg-link-row { grid-template-columns: 1fr 44px; }
    .fg-link-row .k { grid-column: 1 / -1; }
    .fg-link-row .a { width: 44px; height: 44px; }
}
.fg-form .row { --bs-gutter-x: 30px; }
.fg-field { position: relative; margin-bottom: 34px; }
.fg-field label { display: block; font-family: var(--fg-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); margin-bottom: 8px; }
.fg-field input, .fg-field textarea, .fg-field select {
    width: 100%;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--fg-line);
    border-radius: 0;
    color: var(--fg-text);
    font-size: 20px;
    padding: 10px 0 14px;
    outline: none;
    transition: border-color 0.3s;
    height: auto;
}
.fg-field select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23f3f1ec' stroke-width='1.5' d='M2 5l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 4px center / 14px; }
.fg-field select option { background: var(--fg-bg-2); color: var(--fg-text); }
.fg-field textarea { min-height: 130px; resize: vertical; }
.fg-field input::placeholder, .fg-field textarea::placeholder { color: rgba(243, 241, 236, 0.28); }
.fg-field input:focus, .fg-field textarea:focus, .fg-field select:focus { border-color: var(--fg-red); }
.fg-field .is-invalid { border-color: var(--fg-red) !important; }
.fg-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-messages { font-family: var(--fg-mono); font-size: 13px; margin-top: 20px; }
.form-messages.success { color: #2bd96b; }
.form-messages.error { color: var(--fg-red); }
.fg-map { border-radius: 22px; overflow: hidden; aspect-ratio: 16 / 7; border: 1px solid var(--fg-line); }
.fg-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1) invert(0.92) contrast(0.9); }

/* ---------------------------------------------------------------- 404 */
.fg-404 { min-height: 100vh; display: flex; align-items: center; text-align: center; padding: 140px 0 80px; }
.fg-404 h1 { font-family: var(--fg-display); font-weight: 800; font-size: clamp(140px, 30vw, 460px); line-height: 0.8; letter-spacing: -0.08em; margin: 0 0 30px; position: relative; }
.fg-404 h1 span { color: var(--fg-red); display: inline-block; animation: fgWobble 3s var(--fg-ease) infinite; }
@keyframes fgWobble { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(14deg) scale(0.95); } }

/* ---------------------------------------------------------------- misc */
.mfp-bg { background: #000000; opacity: 0.94 !important; }
.mfp-title { font-family: var(--fg-mono); font-size: 12px; }
[data-reveal] { will-change: transform, opacity; }
@media (max-width: 991px) {
    .fg-float.f2, .fg-float.f4 { display: none; }
    .fg-float.f1 { width: 34vw; top: 14vh; right: -6vw; opacity: 0.5; }
    .fg-float.f3 { width: 40vw; top: auto; bottom: 46vh; right: -8vw; opacity: 0.35; }
    .fg-hero-bottom { grid-template-columns: 1fr; }
    .fg-badge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-grain, .fg-tape-track, .fg-client-track, .fg-badge svg { animation: none; }
}

/* horizontal work: size panels by viewport height on desktop so captions always fit */
@media (min-width: 992px) {
    .fg-hwork-track { align-items: flex-start; padding-top: 4vh; padding-bottom: 0; height: 88vh; }
    .fg-panel { width: auto; }
    .fg-panel-img { height: 68vh; width: calc(68vh * 0.8); aspect-ratio: auto; }
    .fg-panel-info { max-width: calc(68vh * 0.8); }
    .fg-panel-end { width: 46vh; }
    .fg-hwork { padding-bottom: 60px; }
}

/* clean outline text: text-stroke shows inner contour lines on variable fonts,
   so outlines are drawn with an 8-way text-shadow instead */
.fg-outline,
.fg-client-track span,
.fg-step-num {
    --oc: rgba(243, 241, 236, 0.9);
    --ow: 1.5px;
    -webkit-text-stroke: 0 !important;
    color: var(--fg-bg) !important;
    text-shadow:
        calc(var(--ow) * -1) calc(var(--ow) * -1) 0 var(--oc), var(--ow) calc(var(--ow) * -1) 0 var(--oc),
        calc(var(--ow) * -1) var(--ow) 0 var(--oc), var(--ow) var(--ow) 0 var(--oc),
        0 var(--ow) 0 var(--oc), var(--ow) 0 0 var(--oc), 0 calc(var(--ow) * -1) 0 var(--oc), calc(var(--ow) * -1) 0 0 var(--oc);
    transition: color 0.35s, text-shadow 0.35s;
}
.fg-hero-title .fg-outline, .fg-cta-big .fg-outline, .fg-page-title .fg-outline { --ow: 2px; }
.fg-client-track span { --oc: rgba(243, 241, 236, 0.4); }
.fg-client-track span:hover { color: var(--fg-red) !important; --oc: var(--fg-red); }
.fg-step-num { --oc: rgba(243, 241, 236, 0.35); --ow: 1px; }
.fg-step:hover .fg-step-num { color: var(--fg-red) !important; --oc: var(--fg-red); }
.fg-cta-big:hover span:last-child.fg-outline { color: var(--fg-red) !important; --oc: var(--fg-red); }
.fg-whatsapp { left: auto; right: 22px; bottom: 96px; width: 50px; height: 50px; font-size: 24px; }

/* inner page hero collage */
.fg-ph-floats .fg-float { opacity: 0.95; }
.fg-ph-floats .fg-float.p1 { width: 15vw; max-width: 250px; aspect-ratio: 3 / 4; right: 7vw; top: 120px; transform: rotate(6deg); }
.fg-ph-floats .fg-float.p2 { width: 17vw; max-width: 280px; aspect-ratio: 4 / 3; right: 24vw; top: 380px; transform: rotate(-7deg); }
.fg-ph-floats .fg-float.p3 { width: 11vw; max-width: 180px; aspect-ratio: 1; right: 4vw; top: 420px; transform: rotate(-3deg); opacity: 0.7; }
.fg-page-hero .fg-wrap { z-index: 2; }
.fg-field select { height: auto !important; line-height: 1.4; font-size: 20px; padding: 10px 28px 14px 0; color: var(--fg-text); }
@media (max-width: 991px) {
    .fg-hwork-pin { scroll-padding-left: var(--fg-pad); }
    .fg-panel-info h3 { font-size: 26px; }
}
@media (max-width: 767px) {
    .fg-cta-big { font-size: 11vw; }
    .fg-cta-big span { white-space: normal; }
    .fg-cta-big span:last-child { padding-left: 0; }
}

/* =====================================================================
   v2 · creative effects (fx.js) + responsive layer
   ===================================================================== */

/* page transition wipe */
.fg-wipe {
    position: fixed;
    inset: 0;
    z-index: 10001;
    background: var(--fg-red);
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    pointer-events: none;
}
.fg-wipe-word { font-family: var(--fg-display); font-weight: 800; font-size: clamp(44px, 9vw, 150px); letter-spacing: -0.06em; color: var(--fg-bg); }
.fg-wipe-word em { font-style: normal; color: #fff; }

/* variable-weight headline letters */
.fg-hero-title.fg-weighted .fg-ch {
    display: inline-block;
    font-variation-settings: "wght" 700;
    transition: font-variation-settings 0.35s var(--fg-ease), transform 0.35s var(--fg-ease);
}

/* hero cursor trail */
.fg-trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.fg-trail img {
    position: absolute;
    left: 0;
    top: 0;
    width: clamp(120px, 12vw, 200px);
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    will-change: transform, opacity;
}

/* cursor spotlight */
.fg-spot {
    position: absolute;
    left: 0;
    top: 0;
    width: 560px;
    height: 560px;
    margin: -280px 0 0 -280px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 32, 37, 0.28) 0%, rgba(184, 32, 37, 0.08) 40%, transparent 70%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.6s;
    z-index: 0;
}
.fg-spot.on { opacity: 1; }

/* tilt glare */
.fg-tilt { transform-style: preserve-3d; will-change: transform; }
.fg-panel-img.fg-tilt::after, .fg-browser.fg-tilt::after, .fg-card-img.fg-tilt::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, 0.18), transparent 55%);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    opacity: 0;
    transition: opacity 0.4s;
}
.fg-browser { position: relative; }
.fg-tilt:hover::after { opacity: 1; }

/* ------------------------------------------------ responsive: type */
.fg-page-title { font-size: clamp(36px, 10vw, 180px); }
.fg-h2 { overflow-wrap: break-word; }

/* ------------------------------------------------ responsive: tablet + phone hero */
@media (max-width: 991px) {
    .fg-hero { flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 0; padding: 104px 0 50px; }
    .fg-hero .fg-hero-floats { position: relative; inset: auto; order: 0; height: 58vw; max-height: 470px; margin: 0 var(--fg-pad) 28px; }
    .fg-hero .fg-hero-floats .fg-float { display: block; opacity: 1; top: auto; right: auto; bottom: auto; left: auto; max-width: none; border: 3px solid var(--fg-bg); }
    .fg-hero .fg-hero-floats .fg-float.f1 { width: 34%; aspect-ratio: 3 / 4; left: 2%; top: 10%; transform: rotate(-8deg); z-index: 2; }
    .fg-hero .fg-hero-floats .fg-float.f2 { width: 30%; aspect-ratio: 1; left: 34%; top: 0; transform: rotate(5deg); z-index: 1; }
    .fg-hero .fg-hero-floats .fg-float.f3 { width: 42%; aspect-ratio: 4 / 3; right: 0; top: 30%; transform: rotate(8deg); z-index: 3; }
    .fg-hero .fg-hero-floats .fg-float.f4 { width: 25%; aspect-ratio: 3 / 4; left: 30%; top: 44%; transform: rotate(-3deg); z-index: 4; }
    .fg-hero-content { order: 1; }
    .fg-hero-title { font-size: 9.6vw; margin-bottom: 34px; }
    .fg-hero-top { margin-bottom: 22px; }
}
@media (max-width: 575px) {
    .fg-hero-title { font-size: 11.6vw; }
    .fg-hero-top { font-size: 11.5px; gap: 8px 18px; }
    .fg-hero-bottom p { font-size: 16px; }
    .fg-hero-actions .fg-btn { flex: 1 1 auto; justify-content: center; padding: 16px 20px; }
    .fg-pill-img { width: 1.6em; }
}

/* ------------------------------------------------ responsive: inner page hero collage */
@media (max-width: 991px) {
    .fg-page-hero { display: flex; flex-direction: column; padding-top: 130px; }
    .fg-page-hero .fg-wrap { order: 1; }
    .fg-page-hero .fg-ph-floats { position: relative; inset: auto; order: 2; height: 54vw; max-height: 400px; margin: 46px var(--fg-pad) 0; }
    .fg-page-hero .fg-ph-floats .fg-float { top: auto; right: auto; max-width: none; opacity: 1; border: 3px solid var(--fg-bg); }
    .fg-page-hero .fg-ph-floats .fg-float.p1 { width: 34%; aspect-ratio: 3 / 4; left: 4%; top: 4%; transform: rotate(-7deg); }
    .fg-page-hero .fg-ph-floats .fg-float.p2 { width: 46%; aspect-ratio: 4 / 3; left: 34%; top: 12%; transform: rotate(5deg); z-index: 2; }
    .fg-page-hero .fg-ph-floats .fg-float.p3 { width: 26%; aspect-ratio: 1; left: 22%; top: 50%; transform: rotate(-2deg); z-index: 3; }
}

/* ------------------------------------------------ responsive: header */
@media (min-width: 992px) and (max-width: 1199px) {
    .fg-nav > ul > li > a { padding: 10px 11px; font-size: 14px; }
    .fg-header-right { gap: 12px; }
    .fg-header .fg-btn { padding: 12px 16px; font-size: 12px; }
}
@media (max-width: 575px) {
    .fg-header-inner { height: 76px; }
    .brand-logo .logo-text { font-size: 21px; }
}

/* ------------------------------------------------ responsive: sections */
@media (max-width: 767px) {
    .fg-tapes { height: 150px; margin: 20px 0; }
    .fg-tape { padding: 13px 0; }
    .fg-filter { flex-wrap: nowrap; overflow-x: auto; margin-left: calc(var(--fg-pad) * -1); margin-right: calc(var(--fg-pad) * -1); padding: 0 var(--fg-pad) 6px; scrollbar-width: none; }
    .fg-filter::-webkit-scrollbar { display: none; }
    .fg-filter button { flex: none; }
    .fg-section { padding: 80px 0; }
    .fg-svc-block { padding: 44px 0; }
    .fg-stat-num { font-size: 52px; }
    .fg-step-num { font-size: 64px; margin-bottom: 18px; }
    .fg-cta-row { margin-top: 36px; }
    .fg-cta-links { width: 100%; }
    .fg-cta-links .fg-btn { flex: 1 1 auto; justify-content: center; }
    .fg-next strong { font-size: 11vw; }
    .fg-grid > .filter-item { margin-bottom: 34px; }
}
@media (hover: none) {
    .fg-svc-row:active::before { transform: scaleY(1); }
}
.fg-hero-title .fg-wd { display: inline-block; white-space: nowrap; }

/* =====================================================================
   v3 · intro loader — "the type specimen" (assets/js/loader.js)
   ===================================================================== */
.fg-loader { display: block; padding: 0; overflow: hidden; cursor: pointer; background: var(--fg-bg); }
.fg-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(243, 241, 236, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(243, 241, 236, 0.035) 1px, transparent 1px);
    background-size: 48px 48px;
    pointer-events: none;
}
.fg-ld-stage {
    --ls: clamp(38px, 10.5vw, 190px);
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: var(--ls);
    transform: translateY(-50%);
    z-index: 2;
}
.fg-ld-word {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: var(--fg-display);
    font-weight: 800;
    font-size: var(--ls);
    line-height: 1;
    letter-spacing: -0.05em;
    color: var(--fg-text);
    white-space: nowrap;
}
.fg-ld-glyph { display: inline-block; transform-origin: 50% 60%; line-height: 1; will-change: transform; }
.fg-ld-rest { display: inline-flex; }
.fg-ld-mask { display: inline-block; overflow: hidden; line-height: 1; padding-bottom: 0.08em; margin-bottom: -0.08em; }
.fg-ld-mask > span { display: inline-block; }
.fg-ld-dot {
    position: relative;
    align-self: flex-start;
    width: 0.2em;
    height: 0.2em;
    margin-left: 0.05em;
    border-radius: 50%;
    background: var(--fg-red);
    opacity: 0;
    visibility: hidden;
    will-change: transform;
}
.fg-ld-guide {
    position: absolute;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(243, 241, 236, 0.16);
    transform-origin: 50% 50%;
}
.fg-ld-guide.g-base { background: rgba(243, 241, 236, 0.4); }
.fg-ld-guide em {
    position: absolute;
    left: var(--fg-pad);
    bottom: 5px;
    font-family: var(--fg-mono);
    font-style: normal;
    font-size: 10.5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
    white-space: nowrap;
}
.fg-ld-guide.g-base em { color: var(--fg-red); }
.fg-ld-vguide {
    position: absolute;
    left: 0;
    top: -60vh;
    height: calc(100% + 120vh);
    width: 1px;
    background: rgba(243, 241, 236, 0.12);
    transform-origin: 50% 50%;
}
.fg-ld-meta {
    position: absolute;
    font-family: var(--fg-mono);
    font-size: 11px;
    line-height: 1.7;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--fg-muted);
    z-index: 3;
}
.fg-ld-meta b { color: var(--fg-text); font-weight: 400; }
.fg-ld-meta.tl { left: var(--fg-pad); top: 32px; }
.fg-ld-meta.tr { right: var(--fg-pad); top: 32px; text-align: right; }
.fg-ld-meta.tr .fg-ld-font { color: var(--fg-red); }
.fg-ld-meta.bl { left: var(--fg-pad); bottom: 34px; }
.fg-ld-hint { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); font-family: var(--fg-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 241, 236, 0.35); z-index: 3; }
.fg-ld-count {
    position: absolute;
    right: var(--fg-pad);
    bottom: 22px;
    font-family: var(--fg-display);
    font-weight: 300;
    font-size: clamp(54px, 9vw, 150px);
    line-height: 0.85;
    letter-spacing: -0.06em;
    color: var(--fg-text);
    font-variant-numeric: tabular-nums;
    z-index: 3;
}
.fg-ld-count small { font-family: var(--fg-mono); font-size: 0.16em; letter-spacing: 0; color: var(--fg-red); vertical-align: top; margin-left: 0.2em; }
.fg-ld-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(243, 241, 236, 0.08); z-index: 3; }
.fg-ld-bar i { display: block; height: 100%; background: var(--fg-red); transform: scaleX(0); transform-origin: left center; }
@media (max-width: 767px) {
    .fg-ld-meta.tr { display: none; }
    .fg-ld-meta { font-size: 10px; }
    .fg-ld-meta.tl { top: 24px; }
    .fg-ld-hint { left: var(--fg-pad); transform: none; bottom: auto; top: 76px; }
    .fg-ld-guide em { font-size: 9px; }
}
@media (hover: none) { .fg-ld-hint { display: none; } }

/* hero: smaller headline for the "Visualize your business" slogan */
.fg-hero-title { font-size: clamp(40px, 6.6vw, 132px); }
@media (max-width: 991px) { .fg-hero-title { font-size: 8.6vw; } }
@media (max-width: 575px) { .fg-hero-title { font-size: 10.6vw; } }

/* v5 · ScrollSmoother: sticky is replaced by GSAP pins (smooth.js) */
.fg-smooth .fg-stack-card { position: relative; top: auto; }

/* =====================================================================
   v6 · hero "bankai" scene — blood moon, red mist, crescent slash
   ===================================================================== */
.fg-hero::before { display: none; }
.fg-bankai { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.fg-mist { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-moon-wrap {
    position: absolute;
    right: 6vw;
    top: 50%;
    width: min(44vw, 640px);
    aspect-ratio: 1;
    margin-top: calc(min(44vw, 640px) * -0.46);   /* no transform: ScrollSmoother animates it */
}
.fg-moon {
    --glow: 0;
    width: 100%;
    height: 100%;
    filter:
        drop-shadow(0 0 calc(14px + var(--glow) * 16px) rgba(184, 32, 37, 0.85))
        drop-shadow(0 0 calc(60px + var(--glow) * 50px) rgba(184, 32, 37, 0.45))
        drop-shadow(0 0 160px rgba(184, 32, 37, 0.25));
    will-change: transform, filter;
}
.fg-moon svg { width: 100%; height: 100%; display: block; overflow: visible; }
.fg-moon-shadow { fill: #000000; stroke: none; }
.fg-slash { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fg-slash path { fill: none; stroke-linecap: round; visibility: hidden; }
.fg-slash-glow { stroke: rgba(184, 32, 37, 0.55); stroke-width: 34; filter: blur(14px); }
.fg-slash-core { stroke: #fff2f4; stroke-width: 5; filter: drop-shadow(0 0 8px #b82025) drop-shadow(0 0 22px #b82025); }
.fg-slash-flash { position: absolute; inset: 0; background: radial-gradient(ellipse at 60% 40%, rgba(255, 60, 80, 0.9), rgba(184, 32, 37, 0.35) 45%, transparent 75%); opacity: 0; mix-blend-mode: screen; }
.fg-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, transparent 45%, rgba(0, 0, 0, 0.85) 100%), linear-gradient(180deg, transparent 70%, var(--fg-bg) 100%); }
.fg-hero-content { position: relative; z-index: 2; }

/* headline: the outlined word glows like reiatsu */
.fg-hero-title .fg-outline { --oc: #ff2d4d; filter: drop-shadow(0 0 14px rgba(184, 32, 37, 0.6)); }
.fg-hero-title .text-red { text-shadow: 0 0 24px rgba(184, 32, 37, 0.8); }

/* tablet + phone: moon sits above the headline */
@media (max-width: 991px) {
    .fg-hero { padding-top: calc(110px + 68vw); }
    .fg-moon-wrap { width: 64vw; right: auto; left: 50%; top: 88px; margin: 0 0 0 -32vw; }
}
@media (max-width: 575px) {
    .fg-hero { padding-top: calc(110px + 92vw); }
    .fg-moon-wrap { width: 76vw; top: 84px; margin-left: -38vw; }
    .fg-slash-glow { stroke-width: 24; }
}
@media (prefers-reduced-motion: reduce) { .fg-moon { --glow: 0.5; } }

/* =====================================================================
   v7 · typography from the Aixor reference: Urbanist + Arapey
   sizes: hero 96 / 74 (≤1440) / 52 (≤809) · display 96/110 Arapey ·
   section titles 48/60 · card titles 32/40 · numbers 64 · subheads 20/28 ·
   body & buttons 16/28. The logo keeps its own Unbounded letterforms.
   ===================================================================== */
:root {
    --fg-display: "Urbanist", sans-serif;
    --fg-body: "Urbanist", sans-serif;
    --fg-mono: "Urbanist", sans-serif;
    --fg-serif: "Arapey", serif;
    --title-font: "Urbanist", sans-serif;
    --body-font: "Urbanist", sans-serif;
}
body { font-family: var(--fg-body); font-size: 16px; line-height: 28px; font-weight: 500; }
p { font-size: 16px; line-height: 28px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--fg-display); font-weight: 400; }

/* brand marks keep the logotype font */
.brand-logo .logo-text, .brand-logo .logo-dot, .fg-wordmark, .fg-ld-word, .fg-wipe-word, .fg-loader-word { font-family: "Unbounded", sans-serif; }

/* hero + page titles: 96 / 74 / 52, line-height = size, -0.04em */
.fg-hero-title, .fg-page-title, .fg-page-title.long {
    font-size: 96px;
    line-height: 1;
    letter-spacing: -0.04em;
    font-weight: 400;
    text-transform: none;
}
.fg-hero-title .line { padding: 0.06em 0 0.1em; margin-bottom: -0.1em; }
.fg-serif-line, .fg-serif-line .fg-ch { font-family: var(--fg-serif); font-weight: 400; letter-spacing: -0.02em; }
.fg-hero-title.fg-weighted .fg-ch { font-variation-settings: "wght" 400; }
.fg-hero-title .fg-outline { --ow: 1.5px; }
.fg-page-title .fg-outline, .fg-cta-big .fg-outline { --ow: 1.5px; }
@media (max-width: 1440px) { .fg-hero-title, .fg-page-title, .fg-page-title.long { font-size: 74px; } }
@media (max-width: 991px) { .fg-hero-title, .fg-page-title, .fg-page-title.long { font-size: 74px; } }
@media (max-width: 809px) { .fg-hero-title, .fg-page-title, .fg-page-title.long { font-size: 52px; } }
@media (max-width: 380px) { .fg-hero-title, .fg-page-title, .fg-page-title.long { font-size: 46px; } }

/* big display statements: 96/110 Arapey */
.fg-cta-big, .fg-next strong {
    font-family: var(--fg-serif);
    font-size: 96px;
    line-height: 110px;
    font-weight: 400;
    letter-spacing: -0.02em;
    text-transform: none;
}
.fg-cta-big .fg-outline { font-family: var(--fg-display); }
@media (max-width: 809px) { .fg-cta-big, .fg-next strong { font-size: 52px; line-height: 52px; } }

/* section titles: 48/60, -2px */
.fg-h2, .fg-svc-block h2 { font-size: 48px; line-height: 60px; letter-spacing: -2px; font-weight: 400; }
.fg-statement-text { font-size: 48px; line-height: 60px; letter-spacing: -2px; font-weight: 400; }
.fg-statement-text em { font-family: var(--fg-serif); }
@media (max-width: 809px) {
    .fg-h2, .fg-svc-block h2 { font-size: 36px; line-height: 44px; letter-spacing: -1px; }
    .fg-statement-text { font-size: 30px; line-height: 40px; letter-spacing: -1px; }
}

/* card / row titles: 32/40, -1px */
.fg-svc-name, .fg-panel-info h3, .fg-stack-info h3, .fg-map h3 { font-size: 32px; line-height: 40px; letter-spacing: -1px; font-weight: 400; }
.fg-tape-track span { font-size: 32px; line-height: 40px; letter-spacing: -1px; font-weight: 500; }
.fg-tools span { font-size: 32px; line-height: 40px; letter-spacing: -1px; font-weight: 400; }
@media (max-width: 809px) {
    .fg-svc-name, .fg-panel-info h3, .fg-stack-info h3 { font-size: 26px; line-height: 32px; }
    .fg-tape-track span, .fg-tools span { font-size: 24px; line-height: 32px; }
}

/* numbers: 64/64, -0.03em */
.fg-stat-num, .fg-step-num { font-size: 64px; line-height: 64px; letter-spacing: -0.03em; font-weight: 400; }
.fg-stat-num sup { font-size: 40px; top: -0.6em; }

/* clients: awards-size lines */
.fg-client-track span { font-size: 64px; line-height: 80px; letter-spacing: -0.04em; font-weight: 500; text-transform: none; }

/* contact links: 40/52 */
.fg-link-row .v { font-size: 40px; line-height: 52px; letter-spacing: -0.02em; font-weight: 400; }
@media (max-width: 809px) { .fg-link-row .v { font-size: 26px; line-height: 34px; } }

/* subheads: 20/28, 500 */
.fg-card-meta h3, .fg-step h4, .fg-benefit h4, .fg-stat h4, .fg-faq-q, .fg-legal h2 { font-family: var(--fg-display); font-size: 20px; line-height: 28px; font-weight: 500; letter-spacing: 0; }
.fg-lead, .fg-hero-copy > p, .fg-hero-bottom p, .fg-faq-a, .fg-numlist li { font-size: 20px; line-height: 28px; }
@media (max-width: 809px) { .fg-lead, .fg-hero-bottom p { font-size: 18px; line-height: 28px; } }

/* labels, buttons, nav: 16px Urbanist */
.fg-eyebrow { font-size: 16px; line-height: 20px; letter-spacing: 0; text-transform: none; font-weight: 500; }
.fg-btn, .fg-arrow-link, .fg-visit { font-size: 16px; line-height: 16px; letter-spacing: 0; text-transform: none; font-weight: 600; }
.fg-header .fg-btn { font-size: 15px; }
.fg-nav > ul > li > a { font-size: 16px; font-weight: 500; }
.fg-nav .sub a, .fg-footer li, .fg-chip, .fg-filter button { font-size: 16px; }
.fg-hero-top, .fg-crumbs, .fg-clock, .fg-meta li span, .fg-card-cat, .fg-panel-count, .fg-panel-num, .fg-svc-num,
.fg-stack-info .num, .fg-step .tag, .fg-faq-q .n, .fg-link-row .k, .fg-field label, .fg-footer h5, .fg-next small,
.fg-footer-bottom, .form-messages, .fg-copy .fg-copied, .fg-cursor-label, .fg-ld-meta, .fg-ld-hint, .fg-ld-guide em {
    font-family: var(--fg-body);
    letter-spacing: 0.02em;
}
.fg-hero-top, .fg-crumbs, .fg-meta li span, .fg-footer h5, .fg-link-row .k, .fg-field label { font-size: 14px; }
.fg-field input, .fg-field textarea, .fg-field select { font-size: 20px; font-family: var(--fg-body); }
.fg-svc-desc, .fg-stack-info p, .fg-card-meta p, .fg-step p, .fg-benefit p, .fg-stat p, .fg-footer-about { font-size: 16px; line-height: 28px; }
.fg-badge text { font-family: "Urbanist", sans-serif; font-weight: 700; font-size: 11.5px; letter-spacing: 2.3px; }

/* =====================================================================
   v8 · home hero, rebuilt: centred moon, one-line slogan, fan of work
   ===================================================================== */
.fg-h8 {
    --ms: clamp(230px, min(40vh, 52vw), 460px);      /* moon size */
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 92px;
    overflow: hidden;
    text-align: center;
}
.fg-h8 .fg-moon-wrap { width: var(--ms); left: 50%; right: auto; top: calc(92px + 2vh); margin: 0 0 0 calc(var(--ms) / -2); }
.fg-h8-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: calc(2vh + var(--ms) * 0.72);       /* headline crosses the moon's lower edge */
    margin-bottom: 40px;
}
.fg-h8 .fg-status { font-size: 14px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid var(--fg-line); border-radius: 40px; padding: 8px 18px 8px 14px; }
.fg-h8-title {
    font-family: var(--fg-display);
    font-weight: 400;
    font-size: clamp(52px, 6.7vw, 116px);
    line-height: 1;
    letter-spacing: -0.04em;
    margin: 22px 0 20px;
    text-wrap: balance;
    text-shadow: 0 4px 40px rgba(0, 0, 0, 0.75);
}
.fg-h8-title .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0.08em 0.05em 0.18em; margin: -0.08em -0.05em -0.18em; }
.fg-h8-title .w > * { display: inline-block; will-change: transform; }
.fg-h8-title em { font-family: var(--fg-serif); font-style: italic; letter-spacing: -0.02em; padding-right: 0.04em; }
.fg-h8-title b { font-weight: inherit; color: var(--fg-red); text-shadow: 0 0 26px rgba(184, 32, 37, 0.9); }
.fg-h8-sub { max-width: 700px; margin: 0; font-size: 20px; line-height: 28px; color: rgba(243, 241, 236, 0.74); }
.fg-h8-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.fg-h8-meta { position: absolute; bottom: 36px; z-index: 3; font-size: 14px; line-height: 22px; letter-spacing: 0.02em; color: var(--fg-muted); }
.fg-h8-meta b { color: var(--fg-text); font-weight: 600; }
.fg-h8-meta.l { left: var(--fg-pad); text-align: left; }
.fg-h8-meta.r { right: var(--fg-pad); text-align: right; }

/* the fan of work, rising from the bottom edge */
.fg-fan { --cw: clamp(130px, 13.5vw, 215px); position: relative; z-index: 2; width: 100%; height: clamp(150px, 21vh, 220px); margin-top: auto; flex: none; }
.fg-fan-card {
    position: absolute;
    left: 50%;
    top: 14px;
    width: var(--cw);
    margin-left: calc(var(--cw) / -2);
    aspect-ratio: 3 / 4;
    transform-origin: 50% 260%;
    z-index: calc(10 - max(var(--i), -1 * var(--i)));
    will-change: transform;
}
.fg-fan-card span { display: block; width: 100%; height: 100%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 -10px 50px rgba(0, 0, 0, 0.55), 0 0 40px rgba(184, 32, 37, 0.12); transition: transform 0.55s var(--fg-ease), box-shadow 0.4s; background: var(--fg-bg-2); }
.fg-fan-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fg-fan-card:hover { z-index: 20; }
.fg-fan-card:hover span { transform: translateY(-36px); box-shadow: 0 -10px 60px rgba(0, 0, 0, 0.6), 0 0 60px rgba(184, 32, 37, 0.45); }

@media (max-width: 1199px) { .fg-h8-meta { display: none; } }
@media (max-width: 767px) {
    .fg-h8 { --ms: 62vw; padding-top: 80px; }
    .fg-h8 .fg-moon-wrap { top: 86px; }
    .fg-h8-content { padding-top: calc(var(--ms) * 0.76 + 6px); margin-bottom: 44px; }
    .fg-h8-title { margin: 18px 0 16px; }
    .fg-h8-sub { font-size: 17px; line-height: 26px; }
    .fg-h8-actions { width: 100%; margin-top: 26px; }
    .fg-h8-actions .fg-btn { flex: 1 1 auto; justify-content: center; padding: 16px 18px; }
    .fg-fan { --cw: 31vw; height: 165px; }
    .fg-fan-card.c0, .fg-fan-card.c6 { display: none; }
}
@media (max-width: 380px) { .fg-h8-title { font-size: 46px; } }

/* tablet portrait: bigger headline and fan so the tall screen is filled */
@media (min-width: 768px) and (max-width: 1199px) and (orientation: portrait) {
    .fg-h8-title { font-size: 9vw; }
    .fg-h8-sub { max-width: 620px; }
    .fg-fan { --cw: 22vw; height: 32vh; }
    .fg-fan-card { top: 24px; }
}

/* =====================================================================
   v9 · the eclipse — an enormous incandescent moon swallowed by a
   perfect black shadow (sequence in assets/js/bankai.js).
   The CSS state below is the resting ring (also the reduced-motion view).
   ===================================================================== */
.fg-h8 { --ms: clamp(480px, min(88vh, 80vw), 1100px); }
.fg-h8 .fg-moon-wrap { width: var(--ms); height: var(--ms); left: 50%; right: auto; top: 45%; margin: calc(var(--ms) / -2) 0 0 calc(var(--ms) / -2); }
.fg-moon-rig { position: absolute; inset: 0; will-change: transform, opacity; }
.fg-corona {
    position: absolute;
    inset: -32%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 40, 0.42) 36%, rgba(255, 0, 40, 0.14) 52%, rgba(255, 0, 40, 0) 68%);
    opacity: 0.45;
    will-change: opacity, transform;
}
.fg-moon-glow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: 0 0 50px 8px rgba(255, 20, 60, 0.95), 0 0 150px 40px rgba(255, 0, 40, 0.55), 0 0 360px 120px rgba(255, 0, 40, 0.25);
    opacity: 0.5;
    will-change: opacity;
}
.fg-h8 .fg-moon {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    border-radius: 50%;
    overflow: hidden;                     /* the shadow only exists on the moon's face */
    filter: none;
    background: radial-gradient(circle at 50% 50%, #ff3350 0%, #ff1136 42%, #ee0029 76%, #c2001e 100%);
    isolation: isolate;
}
.fg-h8 .fg-moon::before {                 /* faint maria so the disc reads as a moon, not a dot */
    content: "";
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.008' numOctaves='4' seed='11'/%3E%3CfeColorMatrix values='0 0 0 0 0.35  0 0 0 0 0  0 0 0 0 0.02  0 0 0 -1.6 0.95'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / cover;
    mix-blend-mode: multiply;
    opacity: 0.55;
}
.fg-shadow-rig { position: absolute; inset: 0; will-change: transform; }
.fg-shadow {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: #010407;
    box-shadow: 0 0 5px 2px #010407;
    transform: translate(-2.3%, -2.2%) scale(0.95);
    will-change: transform;
}
.fg-blackout { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.fg-h8 .fg-vignette { background: radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.7) 100%), linear-gradient(180deg, transparent 78%, var(--fg-bg) 100%); }

/* content now sits in the middle of the dark disc */
.fg-h8-content { flex: 1 1 auto; justify-content: center; padding-top: 0; padding-bottom: 10px; margin-bottom: 30px; }
.fg-h8 .fg-status { background: rgba(1, 4, 7, 0.6); }

@media (max-width: 767px) {
    .fg-h8 { --ms: 128vw; }
    .fg-h8 .fg-moon-wrap { top: 44%; }
    .fg-h8-content { padding-top: 0; margin-bottom: 30px; }
}

/* =====================================================================
   v10 · eclipse ring matched to the reference: a full ring, hair-thin
   on the left, thick crescent on the right, crisp edge, textured red.
   Phones / portrait: ring on top, text below. Desktop landscape: the
   ring is enormous and the text sits inside the dark disc.
   ===================================================================== */
.fg-shadow { transform: translate(-9.25%, -1.2%) scale(0.785); box-shadow: 0 0 2px 1px #010407; }
.fg-h8 .fg-moon { background: radial-gradient(circle at 60% 50%, #ff1a38 0%, #f4062a 50%, #d9001f 85%, #b0001a 100%); }
.fg-h8 .fg-moon::before {
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.02' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0  0 0 0 0 0.02  0 0 0 -2.1 1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='2'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -1.2 0.75'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    opacity: 0.8;
}
.fg-moon-glow { box-shadow: 0 0 18px 1px rgba(255, 30, 60, 0.9), 0 0 70px 14px rgba(255, 0, 40, 0.38), 0 0 200px 60px rgba(255, 0, 40, 0.14); }
.fg-corona { background: radial-gradient(circle, rgba(255, 0, 40, 0.26) 38%, rgba(255, 0, 40, 0.08) 52%, rgba(255, 0, 40, 0) 66%); }

/* default: ring on top, headline crossing its lower edge */
.fg-h8 { --ms: clamp(220px, min(38vh, 64vw), 440px); }
.fg-h8 .fg-moon-wrap { top: 88px; margin: 0 0 0 calc(var(--ms) / -2); }
.fg-h8-content { flex: 0 0 auto; justify-content: flex-start; padding-top: calc(var(--ms) * 0.95); padding-bottom: 0; margin-bottom: 36px; }
.fg-h8-br { display: none; }

/* desktop landscape: enormous ring, text inside the dark disc */
@media (min-width: 992px) and (orientation: landscape) {
    .fg-h8 { --ms: clamp(540px, min(87vh, 72vw), 1100px); }
    .fg-h8 .fg-moon-wrap { top: 47%; margin: calc(var(--ms) / -2) 0 0 calc(var(--ms) / -2); }
    .fg-h8-content {
        flex: 1 1 auto;
        justify-content: center;
        width: calc(var(--ms) * 0.68);
        padding: 0 0 10px;
        margin-bottom: 30px;
        transform: translateX(calc(var(--ms) * -0.0925));     /* centred on the shadow, not the moon */
    }
    .fg-h8-br { display: inline; }
    .fg-h8-title { font-size: calc(var(--ms) * 0.102); margin: 20px 0 18px; text-shadow: none; }
    .fg-h8-sub { max-width: calc(var(--ms) * 0.5); font-size: 18px; line-height: 26px; }
    .fg-h8-actions { margin-top: 24px; }
}

/* =====================================================================
   v11 · near-total eclipse (reference frame): an enormous disc, pure
   black, with one razor-thin limb of light — white-hot at its centre,
   fading to red toward the ends, with a soft bloom.
   Landscape: limb on the right. Portrait: rig rotated, limb across the top.
   ===================================================================== */
.fg-shadow {
    transform: translate(-0.85%, 0) scale(1.006);
    background: radial-gradient(circle at 100% 50%, #3d000d 0%, #1a0008 5%, #010407 15%);
    box-shadow: none;
}
.fg-h8 .fg-moon {
    --hot: 1;
    background:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='700' height='700'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.02' numOctaves='5' seed='4'/%3E%3CfeColorMatrix values='0 0 0 0 0.25  0 0 0 0 0  0 0 0 0 0.02  0 0 0 -2.1 1.15'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23m)'/%3E%3C/svg%3E") center / cover,
        radial-gradient(circle at 60% 50%, #ff1a38 0%, #f4062a 50%, #d9001f 85%, #b0001a 100%);
}
.fg-h8 .fg-moon::before {                 /* the white-hot point on the limb */
    background: radial-gradient(circle at 100% 50%, #fff 0%, #ffd9df 2.5%, #ff7088 6%, rgba(255, 40, 80, 0.6) 11%, rgba(255, 20, 60, 0) 20%);
    mix-blend-mode: normal;
    opacity: var(--hot);
}
/* glow hugging the limb only (the rest of the circumference stays black) */
.fg-corona {
    inset: -20%;
    background: radial-gradient(circle closest-side, rgba(255, 0, 40, 0) 69.5%, rgba(255, 60, 90, 0.9) 71.3%, rgba(255, 10, 50, 0.5) 72.6%, rgba(255, 0, 40, 0.2) 76%, rgba(255, 0, 40, 0.06) 82%, rgba(255, 0, 40, 0) 90%);
    -webkit-mask-image: radial-gradient(ellipse 30% 58% at 85.7% 50%, #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 30% 58% at 85.7% 50%, #000 0%, rgba(0, 0, 0, 0.55) 50%, transparent 100%);
    opacity: 0.8;
}
/* soft bloom around the hot point */
.fg-moon-glow {
    inset: auto;
    left: 100%;
    top: 50%;
    width: 15%;
    height: 34%;
    margin: -17% 0 0 -7.5%;
    border-radius: 50%;
    box-shadow: none;
    background: radial-gradient(ellipse closest-side, rgba(255, 150, 165, 0.55) 0%, rgba(255, 40, 80, 0.3) 30%, rgba(255, 0, 40, 0.1) 60%, rgba(255, 0, 40, 0) 100%);
    opacity: 0.75;
}
.fg-h8 .fg-vignette { background: linear-gradient(180deg, transparent 80%, var(--fg-bg) 100%); }

/* portrait (phones, upright tablets): the limb arcs across the top */
.fg-h8 { --ms: 150vw; }
.fg-h8 .fg-moon-wrap { top: 92px; left: 50%; margin: 0 0 0 calc(var(--ms) / -2); }
.fg-moon-rig { transform: rotate(-90deg); }
.fg-h8-content { flex: 1 1 auto; justify-content: center; padding-top: 70px; padding-bottom: 0; margin-bottom: 30px; }

/* landscape desktop: the limb stands on the right, headline back on one line */
@media (min-width: 992px) and (orientation: landscape) {
    .fg-h8 { --ms: clamp(600px, 100vh, 1500px); }
    .fg-h8 .fg-moon-wrap { top: 50%; left: 50%; margin: calc(var(--ms) / -2) 0 0 calc(var(--ms) / -2); }
    .fg-moon-rig { transform: none; }
    .fg-h8-content { width: 100%; padding: 0 var(--fg-pad) 10px; margin-bottom: 30px; transform: none; }
    .fg-h8-br { display: none; }
    .fg-h8-title { font-size: min(6.2vw, calc(var(--ms) * 0.099)); margin: 22px 0 20px; text-shadow: 0 4px 40px rgba(0, 0, 0, 0.75); }   /* sized to stay inside the disc */
    .fg-h8-sub { max-width: 700px; font-size: 20px; line-height: 28px; }
    .fg-h8-actions { margin-top: 28px; }
}

/* v11b · thinner limb, hotter core, disc edge invisible against the sky */
.fg-shadow { background: radial-gradient(circle at 100% 50%, #45000f 0%, #1c0009 4%, #000000 13%); }
.fg-h8 .fg-moon::before { background: radial-gradient(circle at 100% 50%, #fff 0%, #fff 5%, #ffdbe1 9%, #ff7890 15%, rgba(255, 40, 80, 0.6) 23%, rgba(255, 20, 60, 0) 36%); }
.fg-corona {
    background: radial-gradient(circle closest-side, rgba(255, 0, 40, 0) 70.7%, rgba(255, 90, 115, 0.85) 71.4%, rgba(255, 20, 60, 0.38) 72.1%, rgba(255, 0, 40, 0.14) 74.5%, rgba(255, 0, 40, 0.04) 80%, rgba(255, 0, 40, 0) 87%);
    -webkit-mask-image: radial-gradient(ellipse 26% 52% at 85.7% 50%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
    mask-image: radial-gradient(ellipse 26% 52% at 85.7% 50%, #000 0%, rgba(0, 0, 0, 0.5) 50%, transparent 100%);
}
.fg-moon-glow {
    width: 11%;
    height: 38%;
    margin: -19% 0 0 -5.5%;
    background: radial-gradient(ellipse closest-side, rgba(255, 190, 200, 0.7) 0%, rgba(255, 70, 100, 0.34) 28%, rgba(255, 0, 40, 0.1) 62%, rgba(255, 0, 40, 0) 100%);
}
/* after totality the far side of the disc is masked out, so no hairline shows at its edge */
.fg-h8 .fg-moon {
    --lm: 0;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--lm)) 0%, rgba(0, 0, 0, var(--lm)) 30%, #000 62%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, var(--lm)) 0%, rgba(0, 0, 0, var(--lm)) 30%, #000 62%);
}

/* v12 · the moon's face is the supplied blood-moon photograph */
.fg-h8 .fg-moon {
    background: #b0001a url("../img/fg/moon-photo.jpg") center / cover no-repeat;
    background-image: image-set(url("../img/fg/moon-photo.webp") type("image/webp"), url("../img/fg/moon-photo.jpg") type("image/jpeg"));
}

/* =====================================================================
   v13 · the moon as a lit sphere + flare, shockwave and scroll reveal
   (layers documented at the top of assets/js/bankai.js)
   ===================================================================== */
.fg-h8 .fg-moon {
    background: #2a0005;
    --lm: 0; --lm2: 0; --hot: 1; --hot2: 1;
    -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, max(var(--lm), var(--lm2))) 0%, rgba(0, 0, 0, max(var(--lm), var(--lm2))) 30%, #000 62%);
    mask-image: linear-gradient(90deg, rgba(0, 0, 0, max(var(--lm), var(--lm2))) 0%, rgba(0, 0, 0, max(var(--lm), var(--lm2))) 30%, #000 62%);
}
.fg-h8 .fg-moon::before { content: none; }
.fg-moon-face {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    background: #7a000c url("../img/fg/moon-photo.jpg") center / cover no-repeat;
    background-image: image-set(url("../img/fg/moon-photo.webp") type("image/webp"), url("../img/fg/moon-photo.jpg") type("image/jpeg"));
    will-change: transform;
}
.fg-moon-shade {                            /* sphere: soft highlight + darkening toward the limb */
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 38% 34%, rgba(255, 150, 130, 0.2) 0%, rgba(255, 150, 130, 0) 44%),
        radial-gradient(circle, rgba(30, 0, 4, 0) 56%, rgba(30, 0, 4, 0.42) 86%, rgba(12, 0, 2, 0.82) 100%);
}
.fg-moon-hot {                              /* the white-hot point on the limb */
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 100% 50%, #fff 0%, #fff 5%, #ffdbe1 9%, #ff7890 15%, rgba(255, 40, 80, 0.6) 23%, rgba(255, 20, 60, 0) 36%);
    opacity: calc(var(--hot) * var(--hot2));
}
.fg-shadow { --pen: 0; box-shadow: 0 0 calc(var(--pen) * 1px) calc(var(--pen) * 0.45px) #000000; }
.fg-halo {                                  /* red atmosphere around the full moon */
    --h1: 0; --h2: 0;
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    background: radial-gradient(circle closest-side, rgba(255, 0, 40, 0) 68%, rgba(255, 30, 60, 0.6) 69.6%, rgba(255, 0, 40, 0.26) 76%, rgba(255, 0, 40, 0.09) 87%, rgba(255, 0, 40, 0) 100%);
    opacity: clamp(0, calc(var(--h1) + var(--h2)), 1);
    pointer-events: none;
}
.fg-limb { position: absolute; inset: 0; pointer-events: none; }
.fg-shock {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 110, 130, 0.9);
    box-shadow: 0 0 34px 6px rgba(255, 0, 40, 0.5), inset 0 0 34px 6px rgba(255, 0, 40, 0.3);
    opacity: 0;
    visibility: hidden;
    will-change: transform, opacity;
}
.fg-flare { position: absolute; left: 100%; top: 50%; width: 0; height: 0; transform: scale(0.7); opacity: 0.8; will-change: transform, opacity; }
.fg-flare::before {                         /* the bead */
    content: "";
    position: absolute;
    left: -6px;
    top: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 22px 9px rgba(255, 215, 222, 0.9), 0 0 70px 30px rgba(255, 40, 80, 0.5);
}
.fg-flare i { position: absolute; display: block; border-radius: 4px; }
.fg-flare i:first-child {                   /* streak along the limb */
    left: -1.5px;
    width: 3px;
    top: calc(var(--ms) * -0.2);
    height: calc(var(--ms) * 0.4);
    background: linear-gradient(180deg, rgba(255, 200, 210, 0), rgba(255, 225, 230, 0.95) 50%, rgba(255, 200, 210, 0));
    filter: blur(1px);
}
.fg-flare i:last-child {                    /* streak outward */
    top: -1px;
    height: 2px;
    left: calc(var(--ms) * -0.11);
    width: calc(var(--ms) * 0.22);
    background: linear-gradient(90deg, rgba(255, 120, 140, 0), rgba(255, 235, 238, 0.95) 50%, rgba(255, 120, 140, 0));
    filter: blur(0.6px);
}
.fg-moon-wrap { will-change: transform; }

/* =====================================================================
   v14 · WebGL moon (assets/js/bankai.js). When it is running (.is-gl)
   the CSS moon layers are switched off; without WebGL or with reduced
   motion they remain as the still version.
   ===================================================================== */
.fg-moon-gl { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%; pointer-events: none; display: block; }
.fg-h8.is-gl .fg-halo, .fg-h8.is-gl .fg-limb, .fg-h8.is-gl .fg-moon { display: none; }
.fg-h8.is-gl .fg-moon-rig { transform: none; }
.fg-h8 .fg-slash, .fg-h8 .fg-slash-flash, .fg-h8 .fg-blackout { display: none; }

/* v19 · the bottom gradient is driven by two factors (intro, scroll) so it never dims the lit moon */
.fg-h8 .fg-vignette { --vi: 1; --vs: 1; opacity: calc(var(--vi) * var(--vs)); }

/* =====================================================================
   v21 · hero background is pure black (the rest of the site stays rgb(0, 0, 0)).
   Layers inside the hero use var(--fg-bg), so redefining it here turns them black too.
   The bottom fade blends from black into the page colour of the next section.
   ===================================================================== */
.fg-h8 { --fg-bg: #000; --fg-bg-2: #0b0b0b; background: #000; }
.fg-h8 .fg-shadow { background: #000; }
.fg-h8 .fg-status { background: rgba(0, 0, 0, 0.6); }
.fg-h8 .fg-h8-title { text-shadow: 0 4px 40px rgba(0, 0, 0, 0.75); }
.fg-h8 .fg-vignette {
    background:
        radial-gradient(ellipse at 50% 45%, transparent 62%, rgba(0, 0, 0, 0.7) 100%),
        linear-gradient(180deg, transparent 80%, rgb(0, 0, 0) 100%);
}

/* =====================================================================
   v23 · preloader: the ring of light (assets/js/loader.js)
   ===================================================================== */
.fg-loader { background: #000; display: block; padding: 0; overflow: hidden; cursor: pointer; }
.fg-loader::after { content: none; }
.fg-pl-stars { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-pl-ring {
    --rs: min(46vh, 74vw);                        /* ring diameter */
    --lw: 1.6px;                                  /* line weight */
    position: absolute;
    left: 50%;
    top: 50%;
    width: var(--rs);
    height: var(--rs);
    margin: calc(var(--rs) / -2) 0 0 calc(var(--rs) / -2);
    will-change: transform, opacity;
}
.fg-pl-ring > span { position: absolute; inset: 0; border-radius: 50%; }
.fg-pl-track { border: 1px solid rgba(255, 255, 255, 0.07); }
/* the arc: a conic gradient (faint tail → red → white head) cut to a thin ring */
.fg-pl-arc, .fg-pl-arc-glow, .fg-pl-full {
    --p: 0deg;
    -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - var(--lw) - 0.6px), #000 calc(100% - var(--lw)), #000 calc(100% - 0.6px), transparent 100%);
    mask: radial-gradient(circle closest-side, transparent calc(100% - var(--lw) - 0.6px), #000 calc(100% - var(--lw)), #000 calc(100% - 0.6px), transparent 100%);
}
.fg-pl-arc {
    background: conic-gradient(from 0deg,
        rgba(184, 32, 37, 0) 0deg,
        rgba(184, 32, 37, 0.55) calc(var(--p) * 0.55),
        rgba(200, 44, 44, 1) calc(var(--p) * 0.94),
        #f6dcd8 calc(var(--p) - 1deg),
        transparent var(--p));
}
.fg-pl-arc-glow {
    inset: -8px;
    --lw: 14px;
    background: conic-gradient(from 0deg, rgba(184, 32, 37, 0) 0deg, rgba(184, 32, 37, 0.35) calc(var(--p) * 0.8), rgba(212, 70, 64, 0.7) var(--p), transparent var(--p));
    filter: blur(8px);
}
.fg-pl-full {
    background: conic-gradient(from 0deg, #c42a2c, #d6504a, #f1cbc6 50%, #d6504a, #c42a2c);
    opacity: 0;
    box-shadow: none;
}
/* the white-hot bead at the leading point */
.fg-pl-head { transform-origin: 50% 50%; opacity: 0; }
.fg-pl-head i {
    position: absolute;
    left: 50%;
    top: 0;
    width: 8px;
    height: 8px;
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 10px 3px rgba(246, 214, 209, 0.95), 0 0 34px 10px rgba(184, 32, 37, 0.55);
}
.fg-pl-flare {
    inset: -18%;
    background: radial-gradient(circle closest-side, rgba(184, 32, 37, 0) 74%, rgba(255, 70, 100, 0.55) 81%, rgba(184, 32, 37, 0.14) 88%, rgba(184, 32, 37, 0) 100%);
    opacity: 0;
    visibility: hidden;
}
/* inside the ring */
.fg-pl-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.fg-pl-word { display: flex; font-family: "Unbounded", sans-serif; font-weight: 700; font-size: calc(var(--rs) * 0.105); line-height: 1; letter-spacing: -0.05em; color: #f3f1ec; white-space: nowrap; }
.fg-pl-word .m { display: inline-block; overflow: hidden; padding: 0.06em 0 0.12em; margin: -0.06em 0 -0.12em; }
.fg-pl-word .m > span { display: inline-block; will-change: transform; }
.fg-pl-word .dot { color: #b82025; }
.fg-pl-sub { margin-top: calc(var(--rs) * 0.035); font-family: "Urbanist", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(243, 241, 236, 0.5); }
.fg-pl-count { position: absolute; left: 0; right: 0; bottom: calc(var(--rs) * 0.17); font-family: "Urbanist", sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.12em; color: rgba(243, 241, 236, 0.75); font-variant-numeric: tabular-nums; }
.fg-pl-count small { font-size: 10px; margin-left: 2px; color: #b82025; }
/* corners */
.fg-pl-meta { position: absolute; font-family: "Urbanist", sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(243, 241, 236, 0.42); }
.fg-pl-meta.tl { left: var(--fg-pad); top: 30px; }
.fg-pl-meta.tr { right: var(--fg-pad); top: 30px; }
.fg-pl-meta.bl { left: var(--fg-pad); bottom: 30px; }
.fg-pl-meta.br { right: var(--fg-pad); bottom: 30px; }
.fg-pl-hint { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); font-family: "Urbanist", sans-serif; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(243, 241, 236, 0.28); }
@media (max-width: 767px) {
    .fg-pl-meta.tr, .fg-pl-meta.br { display: none; }
    .fg-pl-meta { font-size: 10.5px; }
    .fg-pl-sub { font-size: 10px; }
}
@media (hover: none) { .fg-pl-hint { display: none; } }

/* =====================================================================
   v24 · footer: the page ends the way it begins — a black sky, a live
   studio line, clear columns, and the "Fontogram." wordmark rising from
   behind an eclipsed moon on the horizon (assets/js/footer.js)
   ===================================================================== */
.fg-ft {
    position: relative;
    overflow: hidden;
    background: linear-gradient(180deg, rgb(0, 0, 0) 0%, #000 220px);
    border-top: 1px solid rgba(243, 241, 236, 0.08);
    padding-top: clamp(56px, 6vw, 88px);
    color: var(--fg-text);
}
.fg-ft-sky {                                   /* a few faint stars, pure CSS */
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.55;
    background-image:
        radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 27% 64%, rgba(255,255,255,.7) 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 41% 32%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 58% 12%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 66% 48%, #fff 50%, transparent 51%),
        radial-gradient(1.4px 1.4px at 79% 22%, rgba(255,240,230,.9) 50%, transparent 51%),
        radial-gradient(1px 1px at 88% 58%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 94% 9%, rgba(255,255,255,.6) 50%, transparent 51%),
        radial-gradient(1px 1px at 6% 46%, rgba(220,230,255,.8) 50%, transparent 51%),
        radial-gradient(1px 1px at 35% 8%, #fff 50%, transparent 51%),
        radial-gradient(1px 1px at 52% 70%, rgba(255,255,255,.5) 50%, transparent 51%),
        radial-gradient(1px 1px at 73% 76%, rgba(255,255,255,.6) 50%, transparent 51%);
}
.fg-ft > .fg-wrap { position: relative; z-index: 2; }

/* top line */
.fg-ft-top { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; padding-bottom: 28px; border-bottom: 1px solid rgba(243, 241, 236, 0.1); }
.fg-ft-status { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; }
.fg-ft-status i { width: 9px; height: 9px; border-radius: 50%; background: #2bd96b; box-shadow: 0 0 0 0 rgba(43, 217, 107, 0.6); animation: fgPing 1.8s infinite; }
.fg-ft-time { font-size: 15px; color: var(--fg-muted); }
.fg-ft-time b { color: var(--fg-text); font-weight: 600; font-variant-numeric: tabular-nums; }
.fg-ft-time em { font-style: normal; font-size: 12px; opacity: 0.7; margin-left: 2px; }
.fg-ft-up {
    margin-left: auto;
    display: inline-flex; align-items: center; gap: 10px;
    font-size: 15px; font-weight: 600; color: var(--fg-text);
    padding: 12px 20px; border-radius: 40px; border: 1px solid rgba(243, 241, 236, 0.2);
    transition: background 0.35s var(--fg-ease), border-color 0.35s, color 0.35s;
}
.fg-ft-up i { font-size: 12px; transition: transform 0.4s var(--fg-ease); }
.fg-ft-up:hover { background: var(--fg-text); border-color: var(--fg-text); color: #000; }
.fg-ft-up:hover i { transform: translateY(-3px); }

/* columns */
.fg-ft-grid { display: grid; grid-template-columns: 1.55fr 0.8fr 1.15fr 0.9fr; gap: 40px; padding: clamp(44px, 5vw, 72px) 0 clamp(40px, 5vw, 64px); }
.fg-ft h5 { font-family: var(--fg-body); font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 22px; }
.fg-ft ul { list-style: none; margin: 0; padding: 0; }
.fg-ft a { color: var(--fg-text); }
.fg-ft-mail {
    position: relative; display: inline-block;
    font-family: var(--fg-display); font-weight: 500;
    font-size: clamp(24px, 2.5vw, 38px); line-height: 1.15; letter-spacing: -0.03em;
    word-break: break-word;
}
.fg-ft-mail .u { background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat; transition: background-size 0.6s var(--fg-ease), color 0.3s; padding-bottom: 4px; }
.fg-ft-mail:hover .u { background-size: 100% 2px; color: var(--fg-red); }
.fg-ft-mail .fg-copied { top: -30px; left: 0; transform: none; }
.fg-ft-phone { display: block; margin-top: 14px; font-size: 20px; font-weight: 500; color: var(--fg-muted) !important; transition: color 0.3s; }
.fg-ft-phone:hover { color: var(--fg-text) !important; }
.fg-ft-wa { margin-top: 26px; }
.fg-ft-nav li + li, .fg-ft-list li + li, .fg-ft-social li + li { margin-top: 12px; }
.fg-ft-nav a { display: inline-flex; align-items: baseline; gap: 12px; font-size: 18px; font-weight: 500; transition: color 0.3s, transform 0.4s var(--fg-ease); }
.fg-ft-nav small { font-size: 11px; font-weight: 600; color: var(--fg-red); letter-spacing: 0.05em; }
.fg-ft-nav a:hover { color: var(--fg-red); transform: translateX(6px); }
.fg-ft-list a { font-size: 16px; color: var(--fg-muted); transition: color 0.3s; }
.fg-ft-list a:hover { color: var(--fg-text); }
.fg-ft-social a { display: inline-flex; align-items: center; gap: 12px; font-size: 17px; font-weight: 500; transition: color 0.3s; }
.fg-ft-social i { width: 18px; text-align: center; color: var(--fg-muted); transition: color 0.3s; }
.fg-ft-social span { font-size: 14px; color: var(--fg-muted); transition: transform 0.4s var(--fg-ease), color 0.3s; }
.fg-ft-social a:hover, .fg-ft-social a:hover i, .fg-ft-social a:hover span { color: var(--fg-red); }
.fg-ft-social a:hover span { transform: translate(3px, -3px); }
.fg-ft-place { margin: 26px 0 0; font-size: 14px; line-height: 22px; color: var(--fg-muted); }

/* the horizon: wordmark rising from behind an eclipsed moon */
.fg-ft-horizon { position: relative; height: clamp(170px, 21vw, 400px); }
.fg-ft-word {
    position: absolute; left: 0; right: 0; bottom: 22%;
    display: flex; justify-content: center;
    font-family: "Unbounded", sans-serif; font-weight: 800;
    font-size: 15.2vw; line-height: 0.9; letter-spacing: -0.065em;
    color: #f3f1ec; white-space: nowrap; user-select: none;
}
.fg-ft-word .l { display: inline-block; overflow: hidden; padding: 0.04em 0.02em 0.02em; margin: -0.04em -0.02em -0.02em; }
.fg-ft-word .l > span { display: inline-block; will-change: transform;
    background: linear-gradient(180deg, #f3f1ec 30%, #8f8b84 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fg-ft-word .dot { background: none !important; -webkit-background-clip: border-box; color: #b82025 !important; }
.fg-ft-moon {                                   /* a vast dark disc whose top edge is the horizon */
    position: absolute; left: 50%; top: 66%;
    width: 210vw; aspect-ratio: 1; margin-left: -105vw;
    border-radius: 50%; background: #000; z-index: 1;
}
.fg-ft-limb {                                   /* the backlit edge: thin, white-hot at the top, red along the curve */
    position: absolute; inset: -1px; border-radius: 50%;
    box-shadow: 0 -1px 0 0 rgba(255, 228, 232, 0.95), 0 -4px 14px 0 rgba(255, 30, 70, 0.75), 0 -18px 60px 4px rgba(184, 32, 37, 0.35), 0 -60px 160px 20px rgba(184, 32, 37, 0.12);
    -webkit-mask: radial-gradient(ellipse 34% 6% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
    mask: radial-gradient(ellipse 34% 6% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.6) 55%, transparent 100%);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
}
.fg-ft-limb::before {                           /* hot point at the top of the arc */
    content: ""; position: absolute; left: 50%; top: -3px; width: 220px; height: 6px; margin-left: -110px;
    background: radial-gradient(ellipse at center, #fff 0%, rgba(255, 200, 210, 0.8) 30%, rgba(255, 40, 80, 0) 70%);
    filter: blur(1px);
}

/* bottom line */
.fg-ft-bottom { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 30px; padding: 22px 0 28px; border-top: 1px solid rgba(243, 241, 236, 0.08); }
.fg-ft-bottom p { margin: 0; font-size: 13px; color: var(--fg-muted); }
.fg-ft-bottom .fg-ft-legal { flex: 1 1 360px; text-align: center; opacity: 0.75; }
.fg-ft-bottom i { color: var(--fg-red); font-size: 11px; margin: 0 2px; }

@media (max-width: 991px) {
    .fg-ft-grid { grid-template-columns: 1fr 1fr; gap: 44px 30px; }
    .fg-ft-hello { grid-column: 1 / -1; }
}
@media (max-width: 575px) {
    .fg-ft-grid { grid-template-columns: 1fr 1fr; }
    .fg-ft-up { margin-left: 0; }
    .fg-ft-top { gap: 12px 20px; }
    .fg-ft-word { font-size: 15.6vw; bottom: 26%; }
    .fg-ft-horizon { height: 150px; }
    .fg-ft-bottom { flex-direction: column; align-items: flex-start; }
    .fg-ft-bottom .fg-ft-legal { text-align: left; flex: none; }
}

/* v24b · footer horizon tuning: wordmark fits the width, the moon's limb reads clearly */
.fg-ft-horizon { height: clamp(160px, 19vw, 360px); }
.fg-ft-word { font-size: 13.4vw; bottom: 30%; }
.fg-ft-moon { top: 70%; width: 260vw; margin-left: -130vw; }
.fg-ft-limb {
    box-shadow: 0 -1px 0 0 rgba(255, 232, 236, 1), 0 -3px 10px 0 rgba(255, 40, 80, 0.9), 0 -14px 46px 2px rgba(184, 32, 37, 0.5), 0 -50px 140px 16px rgba(184, 32, 37, 0.18);
    -webkit-mask: radial-gradient(ellipse 30% 9% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
    mask: radial-gradient(ellipse 30% 9% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.75) 45%, transparent 100%);
}
.fg-ft-limb::before { width: 340px; margin-left: -170px; height: 5px; top: -2px; }
@media (max-width: 575px) {
    .fg-ft-word { font-size: 13.6vw; bottom: 34%; }
    .fg-ft-horizon { height: 140px; }
}

/* v24c · the limb glow lives in a layer larger than the disc, so the mask no longer cuts it off */
.fg-ft-limb {
    inset: -90px;
    box-shadow: none;
    background: radial-gradient(circle closest-side,
        transparent calc(100% - 92px),
        rgba(255, 236, 240, 1) calc(100% - 90px),
        rgba(255, 60, 95, 0.85) calc(100% - 86px),
        rgba(184, 32, 37, 0.38) calc(100% - 70px),
        rgba(184, 32, 37, 0.12) calc(100% - 40px),
        transparent 100%);
    -webkit-mask: radial-gradient(ellipse 26% 7% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
    mask: radial-gradient(ellipse 26% 7% at 50% 0%, #000 0%, rgba(0, 0, 0, 0.7) 50%, transparent 100%);
}
.fg-ft-limb::before { top: 87px; }

/* =====================================================================
   v28 · footer: "the plate" (assets/js/footer.js)
   No effects. A precise grid, crisp type, and one real detail: tonight's
   moon over Konya (the hero's photograph, shaded to the actual current
   phase, captioned like a printed plate). A huge wordmark closes the page,
   cut by the bottom edge.
   ===================================================================== */
.fg-pf {
    position: relative; overflow: hidden;
    background: linear-gradient(180deg, var(--fg-bg) 0%, #000 160px);
    color: var(--fg-text); font-family: var(--fg-body);
    padding-top: clamp(64px, 8vw, 128px);
}
.fg-pf-label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin: 0 0 18px; }
.fg-pf-label b { color: var(--fg-red); font-weight: 500; margin-right: 8px; }

/* ---- head: contact + tonight's moon */
.fg-pf-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 120px); align-items: end; padding-bottom: clamp(56px, 6vw, 96px); }
.fg-pf-mail {
    position: relative; display: inline-block; color: var(--fg-text);
    font-size: clamp(30px, 4.7vw, 82px); font-weight: 300; letter-spacing: -0.04em; line-height: 1; word-break: break-word;
}
.fg-pf-mail .u { background: linear-gradient(var(--fg-text), var(--fg-text)) 0 100% / 0 1px no-repeat; transition: background-size 0.8s var(--fg-ease); padding-bottom: 6px; }
.fg-pf-mail:hover { color: var(--fg-text); }
.fg-pf-mail:hover .u { background-size: 100% 1px; }
.fg-pf-lines { display: flex; flex-wrap: wrap; gap: 8px 32px; margin-top: 28px; font-size: 15px; }
.fg-pf-lines a { color: var(--fg-text); border-bottom: 1px solid var(--fg-line); padding-bottom: 2px; transition: border-color 0.3s; }
.fg-pf-lines a:hover { color: var(--fg-text); border-color: var(--fg-text); }
.fg-pf-lines span { color: var(--fg-muted); }

.fg-pf-plate { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; justify-self: end; }
.fg-pf-moon { position: relative; width: clamp(120px, 12vw, 188px); aspect-ratio: 1; }
.fg-pf-moon canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.fg-pf-moon::before, .fg-pf-moon::after {          /* registration marks, as on a printed plate */
    content: ""; position: absolute; inset: -14px; pointer-events: none;
    background:
        linear-gradient(var(--fg-line), var(--fg-line)) 50% 0 / 1px 8px no-repeat,
        linear-gradient(var(--fg-line), var(--fg-line)) 50% 100% / 1px 8px no-repeat,
        linear-gradient(var(--fg-line), var(--fg-line)) 0 50% / 8px 1px no-repeat,
        linear-gradient(var(--fg-line), var(--fg-line)) 100% 50% / 8px 1px no-repeat;
}
.fg-pf-moon::after { inset: -14px; background: none; border: 1px solid rgba(243, 241, 236, 0.06); border-radius: 50%; }
.fg-pf-cap { font-size: 13px; line-height: 1.75; color: var(--fg-muted); font-variant-numeric: tabular-nums; min-width: 0; }
.fg-pf-cap strong { display: block; font-family: var(--fg-serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--fg-text); line-height: 1.2; margin-bottom: 6px; }
.fg-pf-cap b { color: var(--fg-text); font-weight: 500; }

/* ---- index: four columns on hairlines */
.fg-pf-index { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg-line); }
.fg-pf-col { padding: 28px 24px 40px 0; }
.fg-pf-col + .fg-pf-col { border-left: 1px solid var(--fg-line); padding-left: 24px; }
.fg-pf-col ul { list-style: none; margin: 0; padding: 0; }
.fg-pf-col li + li { margin-top: 9px; }
.fg-pf-col a { color: var(--fg-text); font-size: 15px; display: inline-flex; align-items: baseline; gap: 10px; transition: color 0.3s; }
.fg-pf-col a small { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; min-width: 16px; }
.fg-pf-col a:hover { color: var(--fg-red); }
.fg-pf-col p { margin: 0; font-size: 15px; line-height: 1.7; color: var(--fg-muted); }
.fg-pf-col p b { color: var(--fg-text); font-weight: 400; }
.fg-pf-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #2bd96b; margin-right: 8px; vertical-align: 1px; }

/* ---- base line */
.fg-pf-base {
    display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap;
    border-top: 1px solid var(--fg-line); padding: 18px 0; font-size: 12px; color: var(--fg-muted);
}
.fg-pf-base p { margin: 0; }
.fg-pf-up { color: var(--fg-text); display: inline-flex; align-items: center; gap: 10px; font-size: 13px; }
.fg-pf-up i { font-size: 11px; transition: transform 0.4s var(--fg-ease); }
.fg-pf-up:hover { color: var(--fg-text); }
.fg-pf-up:hover i { transform: translateY(-3px); }

/* ---- the wordmark, cut by the bottom edge */
.fg-pf-word {
    display: block; overflow: hidden; user-select: none; text-align: center; white-space: nowrap;
    font-family: "Urbanist", sans-serif; font-weight: 800; letter-spacing: -0.065em; color: #f3f1ec;
    font-size: 19.8vw; line-height: 0.76; padding: 0.04em 0 0.2em; margin: clamp(8px, 1.5vw, 24px) -0.03em 0 0;
}
.fg-pf-word .l { display: inline-block; }
.fg-pf-word b { color: var(--fg-red); font-weight: 800; }

@media (max-width: 991px) {
    .fg-pf-head { grid-template-columns: 1fr; align-items: start; }
    .fg-pf-plate { justify-self: start; }
    .fg-pf-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-pf-col:nth-child(3) { border-left: 0; padding-left: 0; }
    .fg-pf-col:nth-child(n+3) { border-top: 1px solid var(--fg-line); }
}
@media (max-width: 575px) {
    .fg-pf-mail { font-size: clamp(24px, 8.2vw, 40px); }
    .fg-pf-lines { flex-direction: column; gap: 10px; }
    .fg-pf-plate { gap: 22px; }
    .fg-pf-moon { width: 112px; }
    .fg-pf-index { grid-template-columns: 1fr; }
    .fg-pf-col, .fg-pf-col + .fg-pf-col { border-left: 0; padding: 22px 0 26px; }
    .fg-pf-col + .fg-pf-col { border-top: 1px solid var(--fg-line); }
    .fg-pf-base { flex-direction: column; align-items: flex-start; }
}

/* v28b · the plate, animated + more responsive.
   Each block (head / index / base) gets .is-in when it scrolls into view (footer.js). Until JS arms the
   footer (.is-armed) everything is simply visible. */
.fg-pf.is-armed [data-rv] { opacity: 0; transform: translate3d(0, 22px, 0); }
.fg-pf [data-rv] { transition: opacity 0.9s var(--fg-ease) calc(var(--d, 0) * 1s), transform 1.2s var(--fg-ease) calc(var(--d, 0) * 1s); }
.fg-pf.is-armed .is-in [data-rv] { opacity: 1; transform: none; }

/* the email rises out of a mask, like a line of type being set */
.fg-pf-mask { display: inline-block; overflow: hidden; padding-bottom: 8px; margin-bottom: -8px; vertical-align: bottom; }
.fg-pf-mask .u { display: inline-block; transition: transform 1.3s var(--fg-ease) 0.1s, background-size 0.8s var(--fg-ease); }
.fg-pf.is-armed .fg-pf-mask .u { transform: translate3d(0, 105%, 0); }
.fg-pf.is-armed .is-in .fg-pf-mask .u { transform: none; }

/* hairlines draw themselves */
.fg-pf-index { border-top: 0; position: relative; }
.fg-pf-index::before, .fg-pf-base::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-line);
    transform-origin: 0 50%; transition: transform 1.6s var(--fg-ease);
}
.fg-pf-base { border-top: 0; position: relative; }
.fg-pf-col { position: relative; }
.fg-pf-col + .fg-pf-col { border-left: 0; }
.fg-pf-col + .fg-pf-col::before {
    content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--fg-line);
    transform-origin: 50% 0; transition: transform 1.4s var(--fg-ease) 0.25s;
}
.fg-pf.is-armed .fg-pf-index::before, .fg-pf.is-armed .fg-pf-base::before { transform: scaleX(0); }
.fg-pf.is-armed .fg-pf-col + .fg-pf-col::before { transform: scaleY(0); }
.fg-pf.is-armed .is-in::before, .fg-pf.is-armed .is-in .fg-pf-col + .fg-pf-col::before { transform: none; }

/* the plate: registration marks turn into place */
.fg-pf-moon::before { transition: transform 1.6s var(--fg-ease) 0.3s, opacity 1s ease 0.3s; }
.fg-pf.is-armed .fg-pf-moon::before { transform: rotate(-45deg) scale(0.85); opacity: 0; }
.fg-pf.is-armed .is-in .fg-pf-moon::before { transform: none; opacity: 1; }

/* rolling link labels */
.fg-pf-roll { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.35; }
.fg-pf-roll > span { display: inline-block; position: relative; transition: transform 0.55s var(--fg-ease); }
.fg-pf-roll > span::after { content: attr(data-t); position: absolute; left: 0; top: 100%; color: var(--fg-red); white-space: nowrap; }
a:hover > .fg-pf-roll > span, a:focus-visible > .fg-pf-roll > span { transform: translateY(-100%); }
.fg-pf-col a:hover { color: var(--fg-text); }
.fg-pf-col a small { transition: color 0.3s, transform 0.5s var(--fg-ease); }
.fg-pf-col a:hover small { color: var(--fg-red); transform: translateX(4px); }
.fg-pf-arr { display: inline-block; color: var(--fg-muted); transition: transform 0.5s var(--fg-ease), color 0.3s; }
.fg-pf-col a:hover .fg-pf-arr { transform: translate(3px, -3px); color: var(--fg-red); }

/* back to top: the arrow leaves through the top and comes back from below */
.fg-pf-up:hover i { animation: fgPfUp 0.7s var(--fg-ease); transform: none; }
@keyframes fgPfUp { 0% { transform: none; opacity: 1; } 45% { transform: translateY(-12px); opacity: 0; } 46% { transform: translateY(12px); opacity: 0; } 100% { transform: none; opacity: 1; } }

/* small living details */
.fg-pf-dot { box-shadow: 0 0 0 0 rgba(43, 217, 107, 0.6); animation: fgPing 1.8s infinite; }
.fg-pf-cap .colon { animation: fgPfBlink 1s steps(1) infinite; }
@keyframes fgPfBlink { 50% { opacity: 0.2; } }
.fg-pf-cap [data-pf-phase] b, .fg-pf-cap .num { font-variant-numeric: tabular-nums; }

/* the wordmark answers the cursor (footer.js lifts letters near it) */
.fg-pf-word .l { will-change: transform; }

/* ---- responsive */
@media (min-width: 1600px) {
    .fg-pf-col a, .fg-pf-col p { font-size: 16px; }
    .fg-pf-moon { width: 200px; }
}
@media (max-width: 1199px) and (min-width: 992px) {
    .fg-pf-head { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
    .fg-pf-mail { font-size: clamp(30px, 4.1vw, 56px); }
    .fg-pf-plate { grid-template-columns: auto; justify-items: start; gap: 22px; }
}
@media (max-width: 991px) {
    .fg-pf-head { gap: 44px; }
    .fg-pf-mail { font-size: clamp(30px, 6.4vw, 60px); }
    .fg-pf-col:nth-child(3)::before { display: none; }
    .fg-pf-col:nth-child(n+3) { border-top: 0; }
    .fg-pf-col:nth-child(n+3)::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-line); }
    .fg-pf-col:nth-child(4) { padding-left: 24px; }
}
@media (max-width: 575px) {
    .fg-pf { padding-top: 56px; }
    .fg-pf-head { gap: 40px; padding-bottom: 44px; }
    .fg-pf-mail { font-size: clamp(22px, 7.6vw, 34px); letter-spacing: -0.03em; }
    .fg-pf-lines { flex-direction: row; flex-wrap: wrap; gap: 12px 22px; }
    .fg-pf-lines span { flex-basis: 100%; }
    .fg-pf-plate { grid-template-columns: auto 1fr; gap: 20px; }
    .fg-pf-moon { width: 96px; }
    .fg-pf-cap strong { font-size: 19px; }
    .fg-pf-cap { font-size: 12px; }
    /* studio + elsewhere side by side, services and location full width */
    .fg-pf-index { grid-template-columns: 1fr 1fr; grid-template-areas: "a c" "b b" "d d"; }
    .fg-pf-c1 { grid-area: a; } .fg-pf-c2 { grid-area: b; } .fg-pf-c3 { grid-area: c; } .fg-pf-c4 { grid-area: d; }
    .fg-pf-col, .fg-pf-col + .fg-pf-col, .fg-pf-col:nth-child(4) { padding: 22px 0 26px; border-top: 0; }
    .fg-pf-c3 { padding-left: 20px !important; }
    .fg-pf-col::before, .fg-pf-col::after { display: none !important; }
    .fg-pf-c3::before { display: block !important; }
    .fg-pf-c2::after, .fg-pf-c4::after { display: block !important; content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-line); }
    .fg-pf-c2 ul { columns: 2; column-gap: 20px; }
    .fg-pf-c2 li { break-inside: avoid; margin: 0 0 9px !important; }
    .fg-pf-base { gap: 8px; padding: 18px 0 14px; }
    .fg-pf-up { margin-top: 6px; }
}
@media (max-width: 380px) {
    .fg-pf-c2 ul { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-pf [data-rv], .fg-pf-mask .u, .fg-pf-index::before, .fg-pf-base::before, .fg-pf-col::before { transition: none !important; }
    .fg-pf-dot, .fg-pf-cap .colon { animation: none; }
}
@media (max-width: 991px) { .fg-pf-plate { padding-left: 14px; } }
/* v28c · the giant wordmark is gone: the base line closes the page */
.fg-pf-base { padding-bottom: clamp(28px, 3vw, 44px); }

/* =====================================================================
   v28d · the moon plate becomes an instrument (assets/js/footer.js)
   Orbit ring = the lunar month (red arc up to tonight, a dot where we
   are), live data for Konya (illumination, age, moonrise, moonset,
   distance, next full moon) and a bar chart of the month's light that
   can be scrubbed by pointer, touch or arrow keys.
   ===================================================================== */
.fg-pf-luna {
    margin: 0; justify-self: end; width: min(100%, 520px);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "orb ttl" "orb data" "cal cal";
    column-gap: clamp(22px, 2.4vw, 36px); row-gap: 14px; align-items: center;
}
.fg-pf-orb { grid-area: orb; position: relative; width: clamp(150px, 13vw, 208px); aspect-ratio: 1; perspective: 700px; align-self: center; }
.fg-pf-orb-in { position: absolute; inset: 0; transform-style: preserve-3d; }
.fg-pf-orb svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.fg-pf-orb canvas { position: absolute; inset: 15%; width: 70%; height: 70%; border-radius: 50%; cursor: grab; }
.fg-pf-orb .trk { fill: none; stroke: var(--fg-line); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fg-pf-orb .arc { fill: none; stroke: var(--fg-red); stroke-width: 1.6; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.fg-pf-orb .tk { stroke: rgba(243, 241, 236, 0.28); stroke-width: 1; vector-effect: non-scaling-stroke; }
.fg-pf-orb .tk.q { stroke: rgba(243, 241, 236, 0.55); }
.fg-pf-orb .dot { fill: var(--fg-text); }
.fg-pf-orb .dot-halo { fill: none; stroke: var(--fg-red); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: fgPfHalo 2.4s var(--fg-ease) infinite; }
@keyframes fgPfHalo { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }
.fg-pf-orb .lbl { font: 500 7px/1 var(--fg-body); fill: var(--fg-muted); letter-spacing: 0.08em; text-transform: uppercase; }

.fg-pf-lt { grid-area: ttl; align-self: end; }
.fg-pf-lt strong { display: block; font-family: var(--fg-serif); font-style: italic; font-weight: 400; font-size: clamp(20px, 1.7vw, 26px); line-height: 1.15; color: var(--fg-text); }
.fg-pf-lt > span { display: block; margin-top: 6px; font-size: 13px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }
.fg-pf-lt > span b { color: var(--fg-text); font-weight: 500; }

.fg-pf-data { grid-area: data; align-self: start; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 0; }
.fg-pf-data div { border-top: 1px solid var(--fg-line); padding-top: 7px; min-width: 0; }
.fg-pf-data dt { font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); font-weight: 400; }
.fg-pf-data dd { margin: 2px 0 0; font-size: 15px; color: var(--fg-text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-pf-data dd.red { color: #e0544c; }

.fg-pf-cal { grid-area: cal; position: relative; margin-top: 10px; outline: none; touch-action: pan-y; cursor: ew-resize; user-select: none; }
.fg-pf-cal:focus-visible { outline: 1px solid var(--fg-line); outline-offset: 6px; }
.fg-pf-bars { display: flex; align-items: flex-end; gap: 3px; height: 38px; }
.fg-pf-bars i {
    flex: 1 1 0; min-width: 2px; height: var(--h); border-radius: 1px; background: rgba(243, 241, 236, 0.16);
    transform-origin: 50% 100%; transition: transform 0.9s var(--fg-ease) calc(0.4s + var(--i) * 0.02s), background 0.3s;
}
.fg-pf-bars i.past { background: rgba(243, 241, 236, 0.3); }
.fg-pf-bars i.now { background: var(--fg-red); }
.fg-pf-bars i.sel { background: var(--fg-text); }
.fg-pf.is-armed .fg-pf-bars i { transform: scaleY(0); }
.fg-pf.is-armed .is-in .fg-pf-bars i { transform: none; }
.fg-pf-calx { display: flex; justify-content: space-between; margin-top: 8px; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.fg-pf-calx em { font-style: normal; color: var(--fg-text); text-transform: none; letter-spacing: 0; font-size: 12px; transition: opacity 0.4s; }
.fg-pf-cal.used .fg-pf-calx em { opacity: 0.45; }
.fg-pf-cursor { position: absolute; top: -6px; height: 50px; width: 1px; background: var(--fg-text); left: 0; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
.fg-pf-cal.scrub .fg-pf-cursor { opacity: 0.8; }

/* reveal: the orbit draws itself */
.fg-pf-orb .trk { stroke-dasharray: 100; transition: stroke-dashoffset 1.8s var(--fg-ease) 0.3s; }
.fg-pf.is-armed .fg-pf-orb .trk { stroke-dashoffset: 100; }
.fg-pf.is-armed .is-in .fg-pf-orb .trk { stroke-dashoffset: 0; }
.fg-pf-orb .tk, .fg-pf-orb .lbl { transition: opacity 1s ease 0.9s; }
.fg-pf.is-armed .fg-pf-orb .tk, .fg-pf.is-armed .fg-pf-orb .lbl { opacity: 0; }
.fg-pf.is-armed .is-in .fg-pf-orb .tk, .fg-pf.is-armed .is-in .fg-pf-orb .lbl { opacity: 1; }

/* ---- responsive */
@media (max-width: 1199px) and (min-width: 992px) {
    .fg-pf-luna { grid-template-areas: "orb ttl" "data data" "cal cal"; width: min(100%, 400px); }
    .fg-pf-orb { width: 140px; }
}
@media (max-width: 991px) {
    .fg-pf-luna { justify-self: stretch; width: 100%; max-width: 640px; padding-left: 0; }
    .fg-pf-data { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fg-pf-orb { width: 170px; }
}
@media (max-width: 575px) {
    .fg-pf-luna { grid-template-areas: "orb ttl" "data data" "cal cal"; column-gap: 18px; row-gap: 18px; }
    .fg-pf-orb { width: 128px; }
    .fg-pf-lt strong { font-size: 21px; }
    .fg-pf-lt span { font-size: 12px; }
    .fg-pf-data { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
    .fg-pf-bars { height: 34px; gap: 2px; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-pf-orb .dot-halo { animation: none; opacity: 0; }
    .fg-pf-bars i, .fg-pf-orb .trk { transition: none; }
}
.fg-pf-orb .trk, .fg-pf-orb .arc { vector-effect: none; }
.fg-pf-orb .trk { stroke-width: 1; }
.fg-pf-orb .arc { stroke-width: 1.8; }
.fg-pf-lt span .colon, .fg-pf-lt b .colon { display: inline; margin: 0; font-size: inherit; color: inherit; }
.fg-pf-orb canvas { inset: 10%; width: 80%; height: 80%; }

/* =====================================================================
   v29 · header language menu (assets/js/lang.js) — replaces the Konya clock
   ===================================================================== */
.fg-lang { position: relative; }
.fg-lang-btn {
    display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 14px 0 12px;
    border: 1px solid var(--fg-line); border-radius: 40px; background: rgba(0, 0, 0, 0.25); color: var(--fg-text);
    font: 500 13px/1 var(--fg-body); letter-spacing: 0.06em; cursor: pointer; transition: border-color 0.3s, background 0.3s;
}
.fg-lang-btn:hover, .fg-lang.open .fg-lang-btn { border-color: rgba(243, 241, 236, 0.35); background: rgba(255, 255, 255, 0.04); }
.fg-lang-btn img, .fg-lang-menu img { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12); flex: none; }
.fg-lang-btn i { font-size: 9px; color: var(--fg-muted); transition: transform 0.4s var(--fg-ease); }
.fg-lang.open .fg-lang-btn i { transform: rotate(180deg); }
.fg-lang-menu {
    position: absolute; right: 0; top: calc(100% + 10px); z-index: 1000; min-width: 196px; margin: 0; padding: 6px; list-style: none;
    background: rgba(8, 12, 16, 0.96); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
    border: 1px solid var(--fg-line); border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55);
    opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: 100% 0;
    transition: opacity 0.25s ease, transform 0.35s var(--fg-ease), visibility 0s linear 0.35s;
}
.fg-lang.open .fg-lang-menu { opacity: 1; visibility: visible; transform: none; transition: opacity 0.25s ease, transform 0.35s var(--fg-ease), visibility 0s; }
.fg-lang-menu button {
    width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: 9px; background: none;
    color: var(--fg-text); font: 400 14px/1.2 var(--fg-body); text-align: left; cursor: pointer; transition: background 0.2s;
}
.fg-lang-menu button span { flex: 1; }
.fg-lang-menu button small { font-size: 11px; letter-spacing: 0.08em; color: var(--fg-muted); }
.fg-lang-menu button i { font-size: 10px; color: var(--fg-red); opacity: 0; width: 10px; }
.fg-lang-menu button[aria-checked="true"] i { opacity: 1; }
.fg-lang-menu button:hover, .fg-lang-menu button:focus-visible { background: rgba(255, 255, 255, 0.06); outline: none; }
@media (max-width: 575px) {
    .fg-lang-btn { height: 38px; padding: 0 11px 0 10px; gap: 7px; font-size: 12px; }
    .fg-lang-btn i { display: none; }
}

/* =====================================================================
   v30 · project pages, Behance style, dark (assets/js/project.js)
   Owner header → the work as one continuous canvas (justified rows,
   5px gutters, same rows as the live site) → a fixed action rail →
   lightbox → project info band (appreciate, owner, tools) → More by.
   ===================================================================== */
.fg-be { background: #000; color: var(--fg-text); padding-top: clamp(104px, 9vw, 128px); font-family: var(--fg-body); }
.fg-be-wrap { width: min(1240px, 100% - 40px); margin: 0 auto; }
@media (min-width: 1100px) { .fg-be > .fg-be-wrap { width: min(1240px, 100% - 240px); } }

/* ---- owner header */
.fg-be-head { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.fg-be-head img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.fg-be-head h1 { margin: 0; font-family: var(--fg-body); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: #fff; }
.fg-be-head p { margin: 3px 0 0; font-size: 14px; color: rgba(255, 255, 255, 0.72); }
.fg-be-head p span { margin: 0 4px; color: rgba(255, 255, 255, 0.4); }
.fg-be-follow { color: #fff; font-weight: 700; }
.fg-be-follow:hover { color: #fff; text-decoration: underline; }

/* ---- the canvas */
.fg-be-canvas { display: flex; flex-direction: column; gap: 5px; }
.fg-be-tile { position: relative; display: block; overflow: hidden; background: #111; cursor: zoom-in; min-width: 0; }
.fg-be-tile img { display: block; width: 100%; height: auto; transition: transform 0.6s var(--fg-ease), opacity 0.6s ease; }
.fg-be-tile:hover img { transform: scale(1.03); }
.fg-be-cover .fg-be-tile img { width: 100%; }
.fg-be-video video { display: block; width: 100%; height: auto; background: #111; }
.fg-be-row { display: flex; gap: 5px; }
.fg-be-row > .fg-be-tile { flex: var(--ar) 1 0; }                       /* justified: equal heights, no cropping */
.fg-be-three { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 5px; }
.fg-be-three > .big { grid-row: 1 / span 2; }
.fg-be-three > .fg-be-tile:not(.big) img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fg-be.is-js .fg-be-tile img:not(.is-loaded) { opacity: 0; }

/* ---- the action rail (outside the smooth scroller) */
.fg-be-rail {
    position: fixed; right: 26px; top: 50%; z-index: 60; transform: translateY(-50%);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    transition: opacity 0.4s ease, transform 0.5s var(--fg-ease), visibility 0s;
}
.fg-be-rail.is-hidden { opacity: 0; visibility: hidden; transform: translate(20px, -50%); transition: opacity 0.4s ease, transform 0.5s var(--fg-ease), visibility 0s linear 0.5s; }
.fg-be-act { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; background: none; border: 0; padding: 0; color: #fff; cursor: pointer; text-decoration: none; }
.fg-be-ico {
    width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; overflow: hidden;
    background: #1d1d1d; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1); transition: transform 0.35s var(--fg-ease), box-shadow 0.3s;
}
.fg-be-ico img { width: 26px; height: 26px; object-fit: contain; }
.fg-be-ico.av img { width: 100%; height: 100%; object-fit: cover; }
.fg-be-ico.like { background: var(--fg-red); box-shadow: none; color: #fff; font-size: 17px; }
.fg-be-lbl { font-size: 11px; font-weight: 600; color: rgba(255, 255, 255, 0.78); letter-spacing: 0.01em; }
.fg-be-act:hover .fg-be-ico, .fg-be-act:focus-visible .fg-be-ico { transform: scale(1.08); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); }
.fg-be-act:focus-visible { outline: none; }
.fg-be-act::after {                                /* the tooltip, to the left */
    content: attr(data-tip); position: absolute; right: calc(100% + 14px); top: 24px; transform: translate(6px, -50%);
    padding: 8px 12px; border-radius: 6px; background: #fff; color: #111; font: 600 13px/1 var(--fg-body); white-space: nowrap;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.3s var(--fg-ease);
}
.fg-be-act:hover::after, .fg-be-act:focus-visible::after { opacity: 1; transform: translate(0, -50%); }
.fg-be-act.on .fg-be-ico.like { background: #fff; color: var(--fg-red); }

/* ---- project info band */
.fg-be-info { margin-top: clamp(56px, 6vw, 90px); background: #0c0c0c; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); padding: clamp(48px, 5vw, 72px) 0 clamp(52px, 5vw, 80px); }
.fg-be-info-top { text-align: center; padding-bottom: clamp(40px, 4vw, 56px); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.fg-be-info-top h2 { margin: 0 0 26px; font-family: var(--fg-body); font-size: clamp(22px, 2.2vw, 30px); font-weight: 700; color: #fff; letter-spacing: -0.01em; }
.fg-be-appr {
    width: 84px; height: 84px; border-radius: 50%; border: 0; background: var(--fg-red); color: #fff; font-size: 30px; cursor: pointer;
    display: inline-grid; place-items: center; box-shadow: 0 10px 30px rgba(184, 32, 37, 0.35); transition: transform 0.35s var(--fg-ease), background 0.3s, color 0.3s;
}
.fg-be-appr:hover { transform: scale(1.06); }
.fg-be-appr:active { transform: scale(0.94); }
.fg-be-appr.on { background: #fff; color: var(--fg-red); box-shadow: 0 10px 30px rgba(255, 255, 255, 0.12); }
.fg-be-appr.pop i { animation: fgBePop 0.6s var(--fg-ease); }
@keyframes fgBePop { 0% { transform: scale(1); } 35% { transform: scale(1.45) rotate(-12deg); } 100% { transform: scale(1); } }
.fg-be-appr-lbl { margin: 14px 0 0; font-size: 15px; font-weight: 600; color: #fff; }
.fg-be-stats { margin: 14px 0 0; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: rgba(255, 255, 255, 0.6); }
.fg-be-stats span + span::before { content: "•"; margin-right: 22px; color: rgba(255, 255, 255, 0.3); }

.fg-be-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: clamp(32px, 5vw, 80px); padding-top: clamp(40px, 4vw, 56px); }
.fg-be-owner-lbl { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.55); margin-bottom: 16px; }
.fg-be-owner-lbl.mt { margin-top: 28px; }
.fg-be-owner-card { display: flex; align-items: center; gap: 16px; }
.fg-be-owner-card img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; }
.fg-be-owner-card b { display: block; font-size: 17px; color: #fff; }
.fg-be-owner-card span { display: block; font-size: 13px; color: rgba(255, 255, 255, 0.6); line-height: 1.5; }
.fg-be-owner-btns { display: flex; gap: 10px; margin-top: 22px; flex-wrap: wrap; }
.fg-be-btn {
    display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 20px; border-radius: 40px; font-size: 14px; font-weight: 600;
    color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.fg-be-btn:hover { color: #fff; border-color: #fff; }
.fg-be-btn.solid { background: var(--fg-red); border-color: var(--fg-red); }
.fg-be-btn.solid:hover { background: #cf2f2f; border-color: #cf2f2f; }
.fg-be-about p { margin: 0 0 12px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, 0.82); max-width: 720px; }
.fg-be-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fg-be-chip { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 32px; background: #1d1d1d; color: #fff; font-size: 13px; font-weight: 500; transition: background 0.3s; }
a.fg-be-chip:hover { background: var(--fg-red); color: #fff; }

/* ---- more by */
.fg-be-more { padding: clamp(48px, 5vw, 72px) 0 clamp(40px, 5vw, 80px); }
.fg-be-more-head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.fg-be-more-head h3 { margin: 0; font-family: var(--fg-body); font-size: 19px; font-weight: 700; color: #fff; }
.fg-be-more-head a { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); }
.fg-be-more-head a:hover { color: #fff; }
.fg-be-more-head a i { font-size: 11px; margin-left: 6px; transition: transform 0.4s var(--fg-ease); }
.fg-be-more-head a:hover i { transform: translateX(4px); }
.fg-be-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.fg-be-card { display: block; color: #fff; }
.fg-be-card-img { position: relative; display: block; aspect-ratio: 4 / 3.1; overflow: hidden; border-radius: 6px; background: #111; }
.fg-be-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--fg-ease); }
.fg-be-card-ov { position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px; background: linear-gradient(transparent, rgba(0, 0, 0, 0.75)); opacity: 0; transition: opacity 0.35s; }
.fg-be-card-ov b { font-size: 15px; font-weight: 700; color: #fff; }
.fg-be-card:hover .fg-be-card-ov { opacity: 1; }
.fg-be-card:hover .fg-be-card-img img { transform: scale(1.04); }
.fg-be-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; font-weight: 600; color: #fff; }
.fg-be-card-meta img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.fg-be-card-meta em { margin-left: auto; font-style: normal; font-weight: 500; color: rgba(255, 255, 255, 0.55); }

/* ---- lightbox */
.fg-be-lb { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; background: rgba(0, 0, 0, 0.94); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0s linear 0.3s; touch-action: pan-y; }
.fg-be-lb.open { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0s; }
.fg-be-lb img { max-width: min(94vw, 1800px); max-height: 88vh; object-fit: contain; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); transform: scale(0.97); transition: transform 0.45s var(--fg-ease), opacity 0.25s; }
.fg-be-lb.open img { transform: none; }
.fg-be-lb img.swap { opacity: 0; }
.fg-be-lb button { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.1); color: #fff; font-size: 16px; cursor: pointer; display: grid; place-items: center; transition: background 0.3s; }
.fg-be-lb button:hover { background: rgba(255, 255, 255, 0.22); }
.fg-be-lb .x { top: 20px; right: 20px; }
.fg-be-lb .prev { left: 20px; top: 50%; transform: translateY(-50%); }
.fg-be-lb .next { right: 20px; top: 50%; transform: translateY(-50%); }
.fg-be-lb .count { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); font-size: 13px; color: rgba(255, 255, 255, 0.7); font-variant-numeric: tabular-nums; }

/* ---- responsive */
@media (max-width: 1099px) { .fg-be-rail { display: none; } }
@media (max-width: 991px) {
    .fg-be-info-grid { grid-template-columns: 1fr; }
    .fg-be-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-be-cards .fg-be-card:nth-child(3) { display: none; }
}
@media (max-width: 767px) {
    .fg-be-wrap { width: calc(100% - 24px); }
    .fg-be-canvas, .fg-be-row, .fg-be-three { gap: 3px; }
    .fg-be-row.n4 { flex-wrap: wrap; }
    .fg-be-row.n4 > .fg-be-tile { flex: 0 0 calc(50% - 1.5px); aspect-ratio: 1; }
    .fg-be-row.n4 > .fg-be-tile img { height: 100%; object-fit: cover; }
    .fg-be-head { gap: 12px; margin-bottom: 16px; }
    .fg-be-head img { width: 40px; height: 40px; }
    .fg-be-head h1 { font-size: 17px; }
    .fg-be-appr { width: 72px; height: 72px; font-size: 26px; }
    .fg-be-lb .prev, .fg-be-lb .next { top: auto; bottom: 14px; transform: none; }
    .fg-be-lb .count { bottom: 30px; }
}
@media (max-width: 575px) {
    .fg-be-cards { grid-template-columns: 1fr; gap: 28px; }
    .fg-be-cards .fg-be-card:nth-child(3) { display: block; }
    .fg-be-card-ov { opacity: 1; }
    .fg-be-stats span + span::before { margin-right: 10px; }
    .fg-be-stats { gap: 6px 10px; }
}
.fg-pf-lt > span i { font-style: normal; }
/* v30b · page change: a black veil hands over to the ring-of-light preloader on the next page */
.fg-wipe { background: #000; }

/* =====================================================================
   v31 · homepage below the hero — total redesign (assets/js/home.js)
   One editorial system with the footer: numbered red labels, hairlines,
   Urbanist light titles with Arapey italic accents, restrained motion.
   ===================================================================== */
.fg-hs { position: relative; padding: clamp(80px, 10vw, 160px) 0 0; background: var(--fg-bg); color: var(--fg-text); }
.fg-hs:last-of-type { padding-bottom: clamp(80px, 10vw, 150px); }

/* ---- shared head */
.fg-hp-head {
    display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); row-gap: 22px;
    padding-top: 22px; border-top: 1px solid var(--fg-line); margin-bottom: clamp(44px, 5vw, 80px); align-items: start;
}
.fg-hp-label, .fg-hp-cta .fg-hp-label { display: block; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); padding-top: 10px; }
.fg-hp-label b { color: var(--fg-red); font-weight: 500; margin-right: 10px; }
.fg-hp-title {
    grid-column: 2; margin: 0; font-family: var(--fg-body); font-weight: 300; color: var(--fg-text);
    font-size: clamp(38px, 6vw, 96px); line-height: 1; letter-spacing: -0.045em;
}
.fg-hp-title em, .fg-hp-cta-title em { font-family: var(--fg-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.fg-hp-title b, .fg-hp-cta-title b { font-weight: 300; }
.fg-hp-side { grid-column: 2; display: flex; align-items: flex-end; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; }
.fg-hp-side p { margin: 0; max-width: 460px; font-size: 17px; line-height: 1.6; color: var(--fg-muted); }
.fg-hp-link { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--fg-text); padding-bottom: 4px; border-bottom: 1px solid var(--fg-line); transition: border-color 0.3s; white-space: nowrap; }
.fg-hp-link i { font-size: 11px; transition: transform 0.5s var(--fg-ease); }
.fg-hp-link:hover { color: var(--fg-text); border-color: var(--fg-text); }
.fg-hp-link:hover i { transform: translateX(4px); }

/* ---- 01 studio */
.fg-hp-statement.fg-statement-text {
    margin: 0 0 clamp(56px, 6vw, 96px) calc(25% + 12px); max-width: 1080px;
    font-family: var(--fg-body); font-weight: 300; font-size: clamp(26px, 3.1vw, 50px); line-height: 1.22; letter-spacing: -0.03em; color: var(--fg-text);
}
.fg-hp-statement.fg-statement-text em { color: var(--fg-text); font-family: var(--fg-serif); font-style: italic; }
.fg-hp-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg-line); }
.fg-hp-fact { padding: 26px 24px 0 0; display: flex; flex-direction: column; }
.fg-hp-fact + .fg-hp-fact { border-left: 1px solid var(--fg-line); padding-left: 24px; }
.fg-hp-fact .n { font-weight: 200; font-size: clamp(54px, 6.4vw, 108px); line-height: 0.9; letter-spacing: -0.06em; color: var(--fg-text); font-variant-numeric: tabular-nums; }
.fg-hp-fact .n sup { font-size: 0.4em; top: -1.1em; color: var(--fg-red); font-weight: 300; margin-left: 2px; }
.fg-hp-fact b { margin-top: 18px; font-size: 15px; font-weight: 500; color: var(--fg-text); }
.fg-hp-fact .d { font-size: 14px; color: var(--fg-muted); margin-top: 2px; }

/* ---- 02 selected work */
.fg-hp-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: start; }
.fg-hp-col { display: flex; flex-direction: column; gap: clamp(48px, 6vw, 96px); }
.fg-hp-col.r { padding-top: clamp(80px, 12vw, 200px); }
.fg-hp-tile { display: block; color: var(--fg-text); }
.fg-hp-tile-img { position: relative; display: block; overflow: hidden; background: #0a0f14; border-radius: 4px; }
.fg-hp-tile-img img { position: absolute; inset: -8% 0; width: 100%; height: 116%; object-fit: cover; transition: transform 1.2s var(--fg-ease), filter 0.8s; will-change: transform; }
.fg-hp-tile:hover .fg-hp-tile-img img { transform: scale(1.045); }
.fg-hp-tile-cap { display: flex; align-items: baseline; gap: 14px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--fg-line); }
.fg-hp-tile-cap b { font-size: 12px; font-weight: 500; color: var(--fg-red); letter-spacing: 0.06em; }
.fg-hp-tile-cap strong { font-size: clamp(22px, 2vw, 30px); font-weight: 400; letter-spacing: -0.02em; transition: transform 0.6s var(--fg-ease); }
.fg-hp-tile-cap em { margin-left: auto; font-style: normal; font-size: 14px; color: var(--fg-muted); white-space: nowrap; transition: color 0.3s; }
.fg-hp-tile-cap em i { font-size: 10px; margin-left: 6px; transition: transform 0.5s var(--fg-ease); }
.fg-hp-tile:hover .fg-hp-tile-cap strong { transform: translateX(6px); font-family: var(--fg-serif); font-style: italic; }
.fg-hp-tile:hover .fg-hp-tile-cap em { color: var(--fg-text); }
.fg-hp-tile:hover .fg-hp-tile-cap em i { transform: translateX(4px); }
.fg-hp-tile-sub { display: block; margin-top: 6px; padding-left: 34px; font-size: 14px; color: var(--fg-muted); }

/* ---- 03 services */
.fg-hp-svcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--fg-line); border-left: 1px solid var(--fg-line); }
.fg-hp-svc {
    position: relative; display: flex; flex-direction: column; min-height: 380px; padding: 30px 30px 28px;
    border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); color: var(--fg-text); overflow: hidden;
    transition: background 0.5s ease;
}
.fg-hp-svc::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--fg-red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--fg-ease); }
.fg-hp-svc:hover { background: rgba(255, 255, 255, 0.025); color: var(--fg-text); }
.fg-hp-svc:hover::before { transform: scaleX(1); }
.fg-hp-svc .n { font-size: 12px; letter-spacing: 0.08em; color: var(--fg-muted); transition: color 0.3s; }
.fg-hp-svc:hover .n { color: var(--fg-red); }
.fg-hp-svc h3 { margin: 56px 0 14px; font-family: var(--fg-body); font-size: clamp(24px, 2vw, 32px); font-weight: 400; line-height: 1.1; letter-spacing: -0.025em; color: var(--fg-text); }
.fg-hp-svc p { margin: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.fg-hp-svc ul { list-style: none; margin: 0 0 26px; padding: 0; }
.fg-hp-svc li { font-size: 14px; color: rgba(243, 241, 236, 0.75); padding: 7px 0; border-top: 1px solid rgba(243, 241, 236, 0.07); }
.fg-hp-svc .go { margin-top: auto; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-text); }
.fg-hp-svc .go i { font-size: 11px; transition: transform 0.5s var(--fg-ease); }
.fg-hp-svc:hover .go i { transform: translateX(5px); }

/* ---- 04 websites directory */
.fg-hp-dir { position: relative; }
.fg-hp-dir-head, .fg-hp-dir-row { display: grid; grid-template-columns: 70px minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, 1.2fr) 110px; align-items: center; column-gap: 20px; }
.fg-hp-dir-head { padding-bottom: 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); border-bottom: 1px solid var(--fg-line); }
.fg-hp-dir-row { position: relative; padding: 24px 0; border-bottom: 1px solid var(--fg-line); color: var(--fg-text); font-size: 16px; transition: color 0.3s; }
.fg-hp-dir-row::before { content: ""; position: absolute; inset: 0 -14px; background: rgba(255, 255, 255, 0.03); opacity: 0; transition: opacity 0.35s; border-radius: 4px; }
.fg-hp-dir-row:hover { color: var(--fg-text); }
.fg-hp-dir-row:hover::before { opacity: 1; }
.fg-hp-dir-row .n { font-size: 12px; color: var(--fg-muted); letter-spacing: 0.06em; position: relative; }
.fg-hp-dir-row .c { position: relative; font-size: clamp(20px, 1.8vw, 28px); font-weight: 400; letter-spacing: -0.02em; display: flex; align-items: center; gap: 14px; transition: transform 0.6s var(--fg-ease); }
.fg-hp-dir-row .c img { display: none; width: 64px; height: 40px; object-fit: cover; border-radius: 3px; }
.fg-hp-dir-row:hover .c { transform: translateX(8px); }
.fg-hp-dir-row .u { position: relative; color: rgba(243, 241, 236, 0.8); }
.fg-hp-dir-row .s { position: relative; color: var(--fg-muted); font-size: 15px; }
.fg-hp-dir-row .v { position: relative; justify-self: end; font-size: 14px; display: inline-flex; align-items: center; gap: 8px; }
.fg-hp-dir-row .v i { font-size: 10px; transform: rotate(-45deg); transition: transform 0.5s var(--fg-ease), color 0.3s; }
.fg-hp-dir-row:hover .v i { transform: rotate(-45deg) translateX(4px); color: var(--fg-red); }
.fg-hp-dir-prev {
    position: absolute; left: 0; top: 0; z-index: 5; width: clamp(280px, 26vw, 420px); aspect-ratio: 16 / 10; pointer-events: none;
    border-radius: 6px; overflow: hidden; box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
    opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s ease, transform 0.45s var(--fg-ease);
}
.fg-hp-dir.show .fg-hp-dir-prev { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.fg-hp-dir-prev img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ---- 05 process */
.fg-hp-steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 48px); padding-top: 40px; }
.fg-hp-line { position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--fg-line); }
.fg-hp-line i { position: absolute; inset: 0; background: var(--fg-red); transform: scaleX(var(--pl, 0)); transform-origin: 0 50%; }
.fg-hp-step { position: relative; }
.fg-hp-step .dot { position: absolute; left: 0; top: -40px; width: 15px; height: 15px; border-radius: 50%; background: var(--fg-bg); border: 1px solid rgba(243, 241, 236, 0.3); transition: background 0.4s, border-color 0.4s, box-shadow 0.4s; }
.fg-hp-step.on .dot { background: var(--fg-red); border-color: var(--fg-red); box-shadow: 0 0 0 6px rgba(184, 32, 37, 0.18); }
.fg-hp-step .n { display: block; font-weight: 200; font-size: clamp(48px, 5vw, 84px); line-height: 1; letter-spacing: -0.05em; color: rgba(243, 241, 236, 0.22); transition: color 0.6s; }
.fg-hp-step.on .n { color: var(--fg-text); }
.fg-hp-step h3 { margin: 20px 0 10px; font-family: var(--fg-body); font-size: 24px; font-weight: 400; letter-spacing: -0.02em; color: var(--fg-text); }
.fg-hp-step p { margin: 0 0 18px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); max-width: 300px; }
.fg-hp-step .tag { display: inline-block; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-text); padding: 6px 12px; border: 1px solid var(--fg-line); border-radius: 30px; }

/* ---- 06 clients */
.fg-hp-names { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--fg-line); border-left: 1px solid var(--fg-line); }
.fg-hp-names li { position: relative; display: flex; align-items: center; justify-content: center; text-align: center; min-height: 130px; padding: 20px 14px; border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); }
.fg-hp-names li span { font-size: clamp(16px, 1.3vw, 20px); font-weight: 500; letter-spacing: -0.01em; color: rgba(243, 241, 236, 0.5); transition: color 0.4s; }
.fg-hp-names li::after { content: ""; position: absolute; right: 14px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: var(--fg-red); transform: scale(0); transition: transform 0.4s var(--fg-ease); }
.fg-hp-names li:hover span { color: var(--fg-text); }
.fg-hp-names li:not(.you):hover::after { transform: scale(1); }
.fg-hp-names li.you a { font-family: var(--fg-serif); font-style: italic; font-size: clamp(18px, 1.5vw, 24px); color: var(--fg-text); display: inline-flex; align-items: center; gap: 10px; }
.fg-hp-names li.you a i { font-size: 11px; color: var(--fg-red); transition: transform 0.5s var(--fg-ease); }
.fg-hp-names li.you:hover a i { transform: translateX(4px); }

/* ---- closing call to action (every page) */
.fg-hp-cta { position: relative; padding: clamp(90px, 11vw, 170px) 0 clamp(90px, 10vw, 150px); background: var(--fg-bg); overflow: hidden; }
.fg-hp-cta::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--fg-line); }
.fg-hp-cta-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(40px, 6vw, 120px); align-items: end; margin-top: 28px; }
.fg-hp-cta-title { margin: 0; font-family: var(--fg-body); font-weight: 300; font-size: clamp(46px, 8.4vw, 150px); line-height: 0.95; letter-spacing: -0.055em; color: var(--fg-text); max-width: 12ch; }
.fg-hp-cta-act { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; padding-bottom: 12px; }
.fg-hp-orb {
    position: relative; width: clamp(150px, 13vw, 200px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
    background: var(--fg-red); color: #fff; font-size: 17px; line-height: 1.15; text-align: center; transition: background 0.4s;
}
.fg-hp-orb::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(184, 32, 37, 0.45); transition: inset 0.6s var(--fg-ease), opacity 0.6s; }
.fg-hp-orb:hover { background: #cf2f2f; color: #fff; }
.fg-hp-orb:hover::after { inset: -20px; opacity: 0; }
.fg-hp-orb i { font-size: 14px; transition: transform 0.5s var(--fg-ease); }
.fg-hp-orb:hover i { transform: translateX(5px); }
.fg-hp-cta-act p { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.6; color: var(--fg-muted); }
.fg-hp-cta-act p a { color: var(--fg-text); border-bottom: 1px solid var(--fg-line); }
.fg-hp-cta-act p a span { color: var(--fg-red); }
.fg-hp-cta-act p a:hover { border-color: var(--fg-text); color: var(--fg-text); }

/* ---- responsive */
@media (max-width: 1199px) {
    .fg-hp-dir-head, .fg-hp-dir-row { grid-template-columns: 50px minmax(0, 1.4fr) minmax(0, 1.3fr) minmax(0, 1fr) 90px; }
    .fg-hp-names { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .fg-hp-names li:nth-last-child(-n+2) { grid-column: span 2; }
}
@media (max-width: 991px) {
    .fg-hp-head { grid-template-columns: 1fr; }
    .fg-hp-title, .fg-hp-side { grid-column: 1; }
    .fg-hp-label { padding-top: 0; }
    .fg-hp-statement.fg-statement-text { margin-left: 0; }
    .fg-hp-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-hp-fact:nth-child(3) { border-left: 0; padding-left: 0; }
    .fg-hp-fact:nth-child(n+3) { border-top: 1px solid var(--fg-line); margin-top: 26px; }
    .fg-hp-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-hp-svc { min-height: 340px; }
    .fg-hp-dir-head { display: none; }
    .fg-hp-dir-row { grid-template-columns: 40px minmax(0, 1fr) auto; row-gap: 4px; padding: 20px 0; }
    .fg-hp-dir-row .n { grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
    .fg-hp-dir-row .c { grid-column: 2; }
    .fg-hp-dir-row .c img { display: block; }
    .fg-hp-dir-row .u { grid-column: 2; grid-row: 2; font-size: 14px; padding-left: 78px; }
    .fg-hp-dir-row .s { display: none; }
    .fg-hp-dir-row .v { grid-column: 3; grid-row: 1 / span 2; }
    .fg-hp-dir-prev { display: none; }
    .fg-hp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
    .fg-hp-line { display: none; }
    .fg-hp-step { padding-top: 26px; border-top: 1px solid var(--fg-line); }
    .fg-hp-step .dot { top: -8px; }
    .fg-hp-names { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fg-hp-names li:nth-last-child(-n+2) { grid-column: auto; }
    .fg-hp-names li.you { grid-column: span 3 !important; min-height: 100px; }
    .fg-hp-cta-grid { grid-template-columns: 1fr; align-items: start; }
    .fg-hp-cta-act { flex-direction: row; align-items: center; gap: 28px; }
}
@media (max-width: 767px) {
    .fg-hp-tiles { grid-template-columns: 1fr; gap: 56px; }
    .fg-hp-col.r { padding-top: 0; }
    .fg-hp-col { gap: 56px; }
    .fg-hp-tile-img { aspect-ratio: 4 / 3.4 !important; }
}
@media (max-width: 575px) {
    .fg-hp-statement.fg-statement-text { font-size: 25px; line-height: 1.28; }
    .fg-hp-fact { padding-right: 12px; }
    .fg-hp-fact + .fg-hp-fact { padding-left: 16px; }
    .fg-hp-fact .n { font-size: 54px; }
    .fg-hp-svcs { grid-template-columns: 1fr; }
    .fg-hp-svc { min-height: 0; padding: 26px 22px 24px; }
    .fg-hp-svc h3 { margin-top: 28px; }
    .fg-hp-dir-row .c { font-size: 19px; gap: 12px; }
    .fg-hp-dir-row .c img { width: 52px; height: 34px; }
    .fg-hp-dir-row .u { padding-left: 64px; font-size: 13px; }
    .fg-hp-dir-row .v { font-size: 0; }
    .fg-hp-dir-row .v i { font-size: 12px; }
    .fg-hp-steps { grid-template-columns: 1fr; row-gap: 40px; }
    .fg-hp-names { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-hp-names li { min-height: 92px; }
    .fg-hp-names li.you { grid-column: span 2 !important; }
    .fg-hp-cta-act { flex-direction: column; align-items: flex-start; }
    .fg-hp-tile-sub { padding-left: 0; }
}
@media (max-width: 575px) { .fg-hp-fact:nth-child(3) { padding-left: 0; } }

/* v31b · clients as logos (assets/img/clients) */
.fg-hp-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fg-hp-logos li { min-height: 180px; padding: 28px 22px; }
.fg-hp-logos li:nth-last-child(-n+2) { grid-column: auto; }
.fg-hp-logos img { display: block; width: min(84%, var(--w, 150px)); height: auto;
    filter: grayscale(1) brightness(1.15); opacity: 0.62; transition: filter 0.5s ease, opacity 0.5s ease, transform 0.6s var(--fg-ease); }
.fg-hp-logos li:hover img { filter: none; opacity: 1; transform: scale(1.06); }
@media (max-width: 1199px) {
    .fg-hp-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fg-hp-logos li:nth-last-child(-n+2) { grid-column: auto; }
    .fg-hp-logos li.you { grid-column: auto !important; }
}
@media (max-width: 575px) {
    .fg-hp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-hp-logos li { min-height: 120px; padding: 20px 16px; }
    .fg-hp-logos li.you { grid-column: auto !important; min-height: 120px; }
    .fg-hp-logos img { width: min(84%, calc(var(--w, 150px) * 0.8)); }
}

/* v31c · fourteen client logos: 5 across (+ "Your brand?"), 3 on tablets, 2 on phones */
.fg-hp-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.fg-hp-logos li { min-height: 168px; }
@media (max-width: 1199px) { .fg-hp-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 575px) {
    .fg-hp-logos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-hp-logos li.you { grid-column: span 2 !important; }
}
.fg-hp-logos img[alt="Jetpak Plastik"] { filter: grayscale(1) brightness(2.3); }
.fg-hp-logos li:hover img[alt="Jetpak Plastik"] { filter: none; }
@media (max-width: 991px) { .fg-hp-logos li { min-height: 132px; } }
@media (max-width: 575px) { .fg-hp-logos li, .fg-hp-logos li.you { min-height: 104px; padding: 18px 14px; } }

/* v31d · eighteen logos: "Your brand?" stretches so every row is full (5×4 · 3×7 · 2×10) */
.fg-hp-logos li.you { grid-column: span 2 !important; }
@media (max-width: 1199px) { .fg-hp-logos li.you { grid-column: span 3 !important; } }
@media (max-width: 575px) { .fg-hp-logos li.you { grid-column: span 2 !important; } }

/* =====================================================================
   v32 · contact page: four branches (assets/js/contact.js)
   ===================================================================== */
.fg-ct { position: relative; background: var(--fg-bg); color: var(--fg-text); padding-top: clamp(80px, 9vw, 140px); }
.fg-ct:first-of-type { padding-top: clamp(130px, 13vw, 200px); }

/* ---- head + map */
.fg-ct-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); row-gap: 26px; align-items: end; }
.fg-ct-head .fg-hp-label { align-self: start; padding-top: 14px; }
.fg-ct-title { grid-column: 2; margin: 0; font-family: var(--fg-body); font-weight: 300; color: var(--fg-text); font-size: clamp(72px, 14vw, 230px); line-height: 0.84; letter-spacing: -0.06em; }
.fg-ct-title em { font-family: var(--fg-serif); font-style: italic; font-weight: 400; letter-spacing: -0.03em; }
.fg-ct-title b { font-weight: 300; }
.fg-ct-lead { grid-column: 2; margin: 0; max-width: 620px; font-size: clamp(17px, 1.4vw, 21px); line-height: 1.6; color: var(--fg-muted); }

.fg-ct-map { margin: clamp(56px, 6vw, 96px) 0 0; border-top: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); padding: 26px 0 18px; }
.fg-ct-map svg { display: block; width: 100%; height: auto; overflow: visible; }
.fg-ct-map .grid line { stroke: rgba(243, 241, 236, 0.07); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 2 5; }
.fg-ct-map .ticks text { font: 500 10px var(--fg-body); fill: rgba(243, 241, 236, 0.3); letter-spacing: 0.06em; }
.fg-ct-map .arcs path { fill: none; stroke: rgba(184, 32, 37, 0.7); stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fg-ct-map.is-in .arcs path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s var(--fg-ease) 0.4s; }
.fg-ct-map .arcs path:nth-child(2) { transition-delay: 0.6s; }
.fg-ct-map .arcs path:nth-child(3) { transition-delay: 0.8s; }
.fg-ct-map .node .dot { fill: var(--fg-text); transition: fill 0.3s, r 0.3s; }
.fg-ct-map .node .halo { fill: none; stroke: var(--fg-red); stroke-width: 1; vector-effect: non-scaling-stroke; transform-box: fill-box; transform-origin: center; animation: fgCtPing 2.6s var(--fg-ease) infinite; }
.fg-ct-map .node:nth-of-type(2) .halo { animation-delay: 0.6s; }
.fg-ct-map .node:nth-of-type(3) .halo { animation-delay: 1.2s; }
.fg-ct-map .node:nth-of-type(4) .halo { animation-delay: 1.8s; }
@keyframes fgCtPing { 0% { transform: scale(0.3); opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
.fg-ct-map .node .city { font: 400 22px var(--fg-body); fill: var(--fg-text); letter-spacing: -0.02em; }
.fg-ct-map .node .meta { font: 500 10px var(--fg-body); fill: rgba(243, 241, 236, 0.45); letter-spacing: 0.06em; }
.fg-ct-map .node.on .dot { fill: var(--fg-red); }
.fg-ct-map .node.on .city { fill: #fff; }
.fg-ct-map figcaption { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }

/* ---- branch cards */
.fg-ct-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--fg-line); border-left: 1px solid var(--fg-line); }
.fg-ct-card {
    position: relative; display: flex; flex-direction: column; padding: 26px 26px 26px; min-height: 420px;
    border-right: 1px solid var(--fg-line); border-bottom: 1px solid var(--fg-line); transition: background 0.5s ease;
}
.fg-ct-card::before { content: ""; position: absolute; left: 0; top: -1px; width: 100%; height: 2px; background: var(--fg-red); transform: scaleX(0); transform-origin: 0 50%; transition: transform 0.7s var(--fg-ease); }
.fg-ct-card:hover, .fg-ct-card.on { background: rgba(255, 255, 255, 0.025); }
.fg-ct-card:hover::before, .fg-ct-card.on::before { transform: scaleX(1); }
.fg-ct-card header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: 0.06em; color: var(--fg-muted); }
.fg-ct-card .n { color: var(--fg-red); font-weight: 500; }
.fg-ct-card .clock { display: inline-flex; align-items: center; gap: 7px; text-transform: uppercase; }
.fg-ct-card .clock i { width: 6px; height: 6px; border-radius: 50%; background: #2bd96b; box-shadow: 0 0 0 0 rgba(43, 217, 107, 0.6); animation: fgPing 1.8s infinite; }
.fg-ct-card .clock b { color: var(--fg-text); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.fg-ct-card h2 { margin: 64px 0 2px; font-family: var(--fg-body); font-weight: 300; font-size: clamp(34px, 3vw, 52px); line-height: 1; letter-spacing: -0.045em; color: var(--fg-text); }
.fg-ct-card .country { margin: 0 0 30px; font-family: var(--fg-serif); font-style: italic; font-size: 20px; color: var(--fg-muted); }
.fg-ct-card ul { list-style: none; margin: 0 0 26px; padding: 0; }
.fg-ct-card li { display: flex; flex-direction: column; gap: 3px; padding: 11px 0; border-top: 1px solid rgba(243, 241, 236, 0.08); }
.fg-ct-card li > span { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); }
.fg-ct-card li a { position: relative; align-self: flex-start; color: var(--fg-text); font-size: 15px; word-break: break-word; background: linear-gradient(var(--fg-red), var(--fg-red)) 0 100% / 0 1px no-repeat; transition: background-size 0.6s var(--fg-ease); padding-bottom: 2px; }
.fg-ct-card li a:hover { color: var(--fg-text); background-size: 100% 1px; }
.fg-ct-card li a i { font-size: 10px; margin-left: 6px; color: var(--fg-red); }
.fg-ct-card .fg-copy .fg-copied { top: -30px; }
.fg-ct-dir { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; color: var(--fg-text); padding: 9px 16px; border: 1px solid var(--fg-line); border-radius: 40px; transition: background 0.3s, border-color 0.3s; }
.fg-ct-dir i { font-size: 10px; transform: rotate(-45deg); transition: transform 0.5s var(--fg-ease); }
.fg-ct-dir:hover { background: var(--fg-red); border-color: var(--fg-red); color: #fff; }
.fg-ct-dir:hover i { transform: rotate(-45deg) translateX(3px); }

/* ---- brief */
.fg-ct-brief { padding-bottom: clamp(90px, 10vw, 150px); }
.fg-ct-form { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(24px, 3vw, 48px); }
.fg-ct-form aside p { margin: 0 0 28px; font-size: 16px; line-height: 1.65; color: var(--fg-muted); max-width: 320px; }
.fg-ct-notes { list-style: none; margin: 0; padding: 0; }
.fg-ct-notes li { padding: 12px 0; border-top: 1px solid var(--fg-line); font-size: 14px; color: var(--fg-text); }
.fg-ct-notes li b { display: block; font-size: 11px; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-muted); margin-bottom: 3px; }
.fg-ct-form .fg-form { margin: 0; }

@media (max-width: 1199px) {
    .fg-ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .fg-ct-card { min-height: 380px; }
}
@media (max-width: 991px) {
    .fg-ct-head, .fg-ct-form { grid-template-columns: 1fr; }
    .fg-ct-title, .fg-ct-lead { grid-column: 1; }
    .fg-ct-head .fg-hp-label { padding-top: 0; }
    .fg-ct-form aside { margin-bottom: 36px; }
    .fg-ct-map .node .city { font-size: 28px; }
    .fg-ct-map .node .meta { font-size: 13px; }
    .fg-ct-map .ticks text { font-size: 14px; }
}
@media (max-width: 575px) {
    .fg-ct-cards { grid-template-columns: 1fr; }
    .fg-ct-card { min-height: 0; padding: 22px 20px 24px; }
    .fg-ct-card h2 { margin-top: 36px; }
    .fg-ct-map .node .city { font-size: 40px; }
    .fg-ct-map .node .meta { display: none; }
    .fg-ct-map .ticks text { font-size: 20px; }
    .fg-ct-map figcaption span + span { display: none; }
}
@media (prefers-reduced-motion: reduce) {
    .fg-ct-map .node .halo, .fg-ct-card .clock i { animation: none; }
    .fg-ct-map .arcs path { stroke-dashoffset: 0; }
}

/* v32b · offices: 2×2 cards beside a square map */
.fg-ct-net { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(28px, 3vw, 56px); align-items: start; }
.fg-ct-net .fg-ct-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fg-ct-net .fg-ct-card { min-height: 360px; }
.fg-ct-net .fg-ct-card h2 { margin-top: 44px; }
.fg-ct-net .fg-ct-map { margin: 0; padding-top: 18px; }
.fg-ct-map .node .city { font-size: 19px; }
.fg-ct-map .node .meta { font-size: 9px; }
.fg-ct-map .ticks text { font-size: 9px; }
@media (max-width: 991px) {
    .fg-ct-net { grid-template-columns: 1fr; }
    .fg-ct-net .fg-ct-map { order: -1; }
    .fg-ct-map .node .city { font-size: 22px; }
    .fg-ct-map .node .meta { font-size: 11px; }
    .fg-ct-map .ticks text { font-size: 11px; }
}
@media (max-width: 575px) {
    .fg-ct-net .fg-ct-cards { grid-template-columns: 1fr; }
    .fg-ct-net .fg-ct-card { min-height: 0; }
    .fg-ct-map .node .city { font-size: 30px; }
    .fg-ct-map .ticks text { font-size: 16px; }
}

/* =====================================================================
   v32c · contact page: light content (header, the dark head with its breadcrumb, and the footer stay dark).
   Everything inside .fg-light runs on the same tokens, redefined for paper.
   ===================================================================== */
.fg-light {
    --fg-bg: #f3f1ec; --fg-bg-2: #ebe8e2; --fg-text: #0b0f14; --fg-muted: #66676b; --fg-line: rgba(11, 15, 20, 0.13);
    background: var(--fg-bg); color: var(--fg-text);
}
.fg-ct-head .fg-ct-crumbs { grid-column: 1 / -1; margin: 0 0 6px; }
.fg-ct-branches.fg-light { margin-top: clamp(70px, 8vw, 120px); }
.fg-light .fg-hp-head { border-top-color: var(--fg-line); }
.fg-light .fg-ct-card:hover, .fg-light .fg-ct-card.on { background: rgba(11, 15, 20, 0.035); }
.fg-light .fg-ct-card li { border-top-color: rgba(11, 15, 20, 0.09); }
.fg-light .fg-ct-card .clock i { background: #1fa855; }
.fg-light .fg-copy .fg-copied { background: var(--fg-text); color: #f3f1ec; }
.fg-light .fg-ct-dir:hover, .fg-light .fg-ct-dir:hover i { color: #fff; }
.fg-light .fg-ct-map .grid line { stroke: rgba(11, 15, 20, 0.12); }
.fg-light .fg-ct-map .ticks text { fill: rgba(11, 15, 20, 0.38); }
.fg-light .fg-ct-map .node .meta { fill: rgba(11, 15, 20, 0.5); }
.fg-light .fg-ct-map .node.on .city { fill: var(--fg-red); }
.fg-light .fg-ct-map .arcs path { stroke: rgba(184, 32, 37, 0.85); }
.fg-light .fg-field input::placeholder, .fg-light .fg-field textarea::placeholder { color: rgba(11, 15, 20, 0.32); }
.fg-light .fg-field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%230b0f14' stroke-width='1.5' d='M2 5l6 6 6-6'/%3E%3C/svg%3E"); }
.fg-light .fg-field select option { background: #fff; color: #0b0f14; }
.fg-light .fg-btn.solid::before { background: #0b0f14; }
.fg-light .fg-btn.solid:hover { color: #fff; border-color: #0b0f14; }
.fg-light .form-messages { color: var(--fg-text); }
.fg-light ::selection { background: var(--fg-red); color: #fff; }
/* the header stays dark over light content */
body:has(.fg-light) .fg-header.is-scrolled { background: rgba(0, 0, 0, 0.96); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06); }