/* site.css — GENERERAD av .source/build-css.sh. Redigera inte här.
 * Handskriven del: .source/_chrome.css. Övrigt kommer ur WordPress-lagren. */

/* ══════════ _chrome ══════════ */
/* ═══════════════════════════════════════════════════════════════════════════
 * Chrome: typsnitt, reset, header, nav, mobilmeny + formulärstatus och prosa.
 *
 * Designen är LJUS: --fd-bg #F4F2EE, --fd-ink #251B4F. Tokens och färger
 * ägs av det delade lagret (body.fd-redesign) — den här filen sätter INGA
 * egna färger på body, och definierar inte footer eller easter-bar alls.
 * Båda stylas redan av det delade lagret; markupen är byggd att matcha det.
 *
 * Headern är sticky, inte fixed. Redesignen har ingen body-offset, och en
 * fixed header hade krävt en magisk padding-top att hålla synkad.
 *
 * Z-INDEX — omhärledd. Den gamla stegen (100000/99999/9999/9998/9990/99) var
 * kalibrerad mot Astras tal. Samma ordning, ensiffriga nivåer. Grain ligger
 * kvar på 9990 i det delade lagret, så header och mobilmeny måste ligga över:
 *   99998 skip-link · 99996 mobilmeny · 99995 header · 99994 dropdown
 * Kommentar: grain är fixed och täcker hela viewporten, därför de höga talen.
 * ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Anton;src:url(/assets/fonts/anton-latin-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(/assets/fonts/inter-latin-var.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Produktionsvärden, avlästa ur www.fabriciusdigital.com med getComputedStyle.
 * KRITISKT: footerns och easter-barens CSS (ur fd_custom_footer respektive
 * fd_easter_egg_bar) säger font-family:inherit på fyra ställen. På produktion
 * ärvde de Astras body-font. Utan den här regeln ärver de ingenting och
 * renderas i Times. */
body{margin:0;font-family:Inter,sans-serif;font-size:16px;font-weight:300;line-height:1.8}
img{max-width:100%;height:auto}

.fd-skip{position:absolute;left:-9999px;top:0;z-index:99998;background:#251B4F;
  color:#F4F2EE;padding:.75rem 1.25rem;text-decoration:none}
.fd-skip:focus{left:0}

.fd-header{position:sticky;top:0;z-index:99995;background:transparent;
  transition:background-color .3s ease,box-shadow .3s ease}
.fd-header.is-scrolled{background:#F4F2EE;box-shadow:0 1px 0 #E8E5DF}
/* Toppbaren är 80px hög, samma som produktionens .main-header-bar.
 * 32px wordmark + 2×24px padding = 80. Wordmarken är medvetet större än
 * produktionens 26px — det är ett designbeslut, inte en avvikelse. */
.fd-header__inner{max-width:1280px;margin:0 auto;
  padding:24px clamp(20px,4vw,56px);display:flex;align-items:center;
  justify-content:space-between;gap:24px}
/* Wordmark: produktionen kör Anton 26px/26px, vikt 400, ls 0.13px, ingen
 * versalisering. Vikt, spacing och versalisering är produktionens värden.
 * STORLEKEN är däremot höjd till 32px på begäran — större än produktion. */
.fd-brand{font-family:Anton,Impact,sans-serif;font-size:32px;line-height:32px;
  font-weight:400;letter-spacing:.005em;text-transform:none;
  text-decoration:none;color:#251B4F}

.fd-nav{display:flex;align-items:center;gap:30px}
.fd-nav a,.fd-nav__toggle{font-family:Inter,sans-serif;font-size:16px;font-weight:300;
  letter-spacing:normal;color:#46463F;text-decoration:none;transition:color .2s ease}
.fd-nav a:hover,.fd-nav a:focus-visible,.fd-nav__toggle:hover{color:#251B4F}
.fd-nav__item{position:relative}
.fd-nav__toggle{background:none;border:0;cursor:pointer;padding:0;
  display:inline-flex;align-items:center}
/* Chevron. Produktionen har en pil här, men den ritades av Astras egen
   span.dropdown-menu-toggle — temamarkup, inte design. Affordansen är ändå
   riktig: utan pil syns det inte att Services öppnar något. Ritad i CSS. */
.fd-nav__toggle::after{content:"";width:6px;height:6px;margin-left:9px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .2s ease}
.fd-nav__item:hover .fd-nav__toggle::after,
.fd-nav__item:focus-within .fd-nav__toggle::after,
.fd-nav__item.is-open .fd-nav__toggle::after{transform:translateY(1px) rotate(225deg)}
.fd-nav__panel{position:absolute;top:calc(100% + 16px);left:0;min-width:250px;
  z-index:99994;background:#F4F2EE;border:1px solid #E8E5DF;border-radius:14px;
  padding:8px;display:none;box-shadow:0 12px 32px rgba(37,27,79,.10)}
.fd-nav__item:hover .fd-nav__panel,
.fd-nav__item:focus-within .fd-nav__panel,
.fd-nav__item.is-open .fd-nav__panel{display:block}
.fd-nav__panel a{display:block;padding:11px 14px;border-radius:9px}
.fd-nav__panel a:hover{background:#E8E5DF}

.fd-burger{display:none;background:none;border:0;width:44px;height:44px;
  cursor:pointer;padding:10px;color:#251B4F}
.fd-burger span{display:block;height:2px;background:currentColor;margin:5px 0}
.fd-mobile{position:fixed;inset:64px 0 0;z-index:99996;background:#F4F2EE;
  display:none;overflow-y:auto}
.fd-mobile.is-open{display:block}
.fd-mobile a{display:flex;align-items:center;min-height:64px;padding:22px 24px;
  font-family:Inter,sans-serif;font-size:20px;font-weight:400;
  line-height:1.35;color:#251B4F;text-decoration:none;
  border-bottom:1px solid #E8E5DF}
@media (max-width:921px){.fd-nav{display:none}.fd-burger{display:block}}

/* ── Formulärstatus utan JavaScript ────────────────────────────────────────
 * Den gamla sajten dolde dessa med inline style="display:none" och avslöjade
 * dem genom att injicera !important-CSS. Det var en av de två tysta fällorna:
 * flyttades göm-regeln in i stylesheeten vann sid-CSS:en och meddelandet
 * visades aldrig. :target gör jobbet i stället — funktionen redirectar till
 * /contact/?fd_sent=1#fd-sent-ok. Ingen inline-stil, inget !important. */
.fd-form-status-ok,.fd-form-status-err{display:none}
.fd-form-status-ok:target,.fd-form-status-err:target{display:block}
.fd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Integritetspolicy: prosalayout, ingen motsvarighet i den gamla sajten */
/* Integritetspolicy. Foljer samma monster som .fd-ab-how och .fd-wk-cases-inner:
   samma vansterkant som hero via var(--fd-pad), radlangden begransad med
   max-width pa BLOCKET — inte genom att centrera en smal spalt. Tidigare hade
   den margin:0 auto, vilket lade brodtexten 372px till hoger om rubriken. */
.fd-pv-hero{padding:84px var(--fd-pad) clamp(40px,4vw,56px);position:relative}
.fd-pv-h1{font-size:clamp(40px,6.4vw,92px);line-height:.94;max-width:18ch;
  margin-top:40px !important}
.fd-pv-meta{margin-top:24px !important;font-size:15px;color:#46463F}
.fd-prose{max-width:900px;padding:0 var(--fd-pad) clamp(70px,8vw,116px)}
.fd-prose h2{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:.01em;
  margin:2.5rem 0 .75rem;font-size:1.3rem}
.fd-prose p{margin:0 0 1.1rem;line-height:1.6;color:#46463F}
.fd-prose a{text-decoration:underline;text-underline-offset:3px}
.fd-prose ul{margin:0 0 1.1rem;padding-left:1.25rem}
.fd-prose li{margin:0 0 .5rem;line-height:1.6;color:#46463F}
.fd-prose strong{color:#251B4F;font-weight:500}

/* ══════════ _global_clean ══════════ */
/* ─── Header: force dark background on all states ──────────────────────── */
/* ─── Remove Astra border-bottom on all header elements ────────────────── */
/* ─── Site title: always white ─────────────────────────────────────────── */
/* ─── Desktop nav links ─────────────────────────────────────────────────── */
.main-navigation a,
.main-navigation ul li a{
    color: #cccccc !important;
    opacity: 1 !important;
}
.main-navigation a:hover,
.main-navigation ul li a:hover,
.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: #ffffff !important;
    opacity: 1 !important;
}
/* ─── Mobile hamburger: transparent button, white SVG lines ─────────────── */
/* ─── Mobile dropdown background ────────────────────────────────────────── */
/* This site uses data-type="dropdown": the visible element is               */
/* .ast-desktop-header-content (Astra sets it to #ffffff by default).        */
/* Also cover popup-drawer type for completeness.                            */
/* Nav list inside the dropdown */
/* ─── Mobile menu links: text colour ───────────────────────────────────── */
/* ─── Mobile nav list: Astra sets bg via var(--ast-global-color-4)=#a0a0a0 ─ */
/* Rule being overridden:                                                     */
/*   .ast-builder-menu-mobile .main-navigation .main-header-menu             */
/*   { background-color: var(--ast-global-color-4); }                        */
#ast-hf-mobile-menu{
    background-color: #0a0a0a !important;
}
/* ─── Active/current menu item: no background, white text ──────────────── */
/* Astra rule being overridden:                                               */
/*   .ast-builder-menu-mobile ... .current-menu-item > .menu-link            */
/*   { color:var(--ast-global-color-1)=#111; background:var(--color-5)=#fff }*/
/* ─── Back to top: dark bg with white arrow ─────────────────────────────── */
.scroll-top{
    background-color: #222222 !important;
    border: 1px solid #3a3a3a !important;
    box-shadow: none !important;
}
.scroll-top svg *{
    fill: #ffffff !important;
    stroke: #ffffff !important;
}
/* ─── Mobile spacing: tighten all sections ───────────────────────────────── */
@media (max-width: 768px) {
.fd-clients {
        padding: 40px 0 44px !important;
    }
.fd-clients-inner {
        padding: 0 24px !important;
    }
.fd-services {
        padding: 64px 0 80px !important;
    }
.fd-services-inner {
        padding: 0 24px !important;
    }
.fd-about-inner {
        padding: 56px 24px 72px !important;
    }
}
/* ─── Full-width dark background: remove white side borders ─────────────── */
html, body {
    background-color: #0a0a0a !important;
}
/* ─── Desktop dropdown: dark theme ─────────────────────────────────────── */
.main-navigation ul ul{
    background-color: #0a0a0a !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 8px 0 !important;
    min-width: 200px !important;
}
.main-navigation ul ul li a{
    color: #cccccc !important;
    background-color: transparent !important;
    padding: 10px 24px !important;
    font-size: 13px !important;
    letter-spacing: 0.04em !important;
}
.main-navigation ul ul li a:hover{
    color: #ffffff !important;
    background-color: transparent !important;
}
/* Services parent — no underline, keep same style */
.main-navigation .menu-item-has-children > a[href=#] {
    cursor: default;
}
/* ─── Inner page headings and labels: force dark-theme colours ──────────── */
.fd-inner-h1 {
    color: #ffffff !important;
}
.page .entry-title{
    color: #ffffff !important;
}
.fd-section-label {
    color: #777777 !important;
}
/* ─── Contact form: consistent transparent input styling ─────────────────── */
.fd-contact-form input[type="text"],
.fd-contact-form input[type="email"],
.fd-contact-form textarea {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #333333 !important;
    color: #ffffff !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.fd-contact-form input:-webkit-autofill,
.fd-contact-form input:-webkit-autofill:hover,
.fd-contact-form input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 1000px #0a0a0a inset !important;
    -webkit-text-fill-color: #ffffff !important;
    border-bottom: 1px solid #333333 !important;
}
.fd-contact-form input::placeholder,
.fd-contact-form textarea::placeholder {
    color: #555555 !important;
    opacity: 1 !important;
}
/* ─── Hide Astra default page title header ───────────────────────────────── */
.page .entry-header,
.page .entry-title {
    display: none !important;
}
/* ─── FIX 1: Global section label consistency ───────────────────────────── */
.fd-section-label,
.fd-sp-eyebrow,
.fd-case-category {
    color: #888888 !important;
    letter-spacing: 0.12em !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    font-family: inherit !important;
}
/* ─── FIX 2: Client ticker brightness + vertical breathing room ──────────── */
.fd-clients {
    padding-top: 80px !important;
    padding-bottom: 88px !important;
}
.fd-marquee span:not(.fd-dot) {
    color: #aaaaaa !important;
}
/* ─── FIX 3: Services section — stronger separation from clients ─────────── */
.fd-services {
    padding-top: 160px !important;
}
/* ─── FIX 5: Inner-page hero — normalize padding to service subpage rhythm ── */
.fd-inner-hero-inner {
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}
@media (max-width: 768px) {
.fd-inner-hero-inner {
        padding-top: 80px !important;
        padding-bottom: 80px !important;
    }
}
/* ─── FIX 6: Service description bottom margin (icons removed) ───────────── */
.fd-service-desc {
    margin-bottom: 32px !important;
}
/* ─── Work page: remove duplicate top border on first case (hero already provides separator) */
.fd-case:first-child {
    border-top: none !important;
}
/* ─── Task 1: Scroll-reveal base classes ───────────────────────────────── */
.fd-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s ease-out, transform 0.9s ease-out;
}
.fd-reveal.fd-visible {
    opacity: 1;
    transform: translateY(0);
}
/* ─── Fix 1: Service card hover — background highlight ───────────────────── */
.fd-service {
    transition: background-color 0.2s ease, opacity 0.9s ease-out, transform 0.9s ease-out;
}
.fd-service:hover {
    background-color: rgba(255, 255, 255, 0.03) !important;
}
.fd-service-link {
    text-decoration: underline !important;
    opacity: 0.6 !important;
    transition: opacity 0.2s ease !important;
}
.fd-service-link:hover {
    opacity: 1 !important;
    text-decoration: underline !important;
}
/* ─── Task 3: Nav link hover transition ────────────────────────────────── */
.main-navigation a,
.main-navigation ul li a,
.main-navigation ul ul li a{
    transition: color 0.2s ease !important;
}
/* ─── Task 4: Navbar — transparent at top, frosted when scrolled ────────── */
/* Overrides the solid #0a0a0a rule declared earlier in this block */
/* ─── Mobile menu: release the containing block while open ──────────────── */
/* The backdrop-filter above has a side effect beyond the blur: an element    */
/* with a backdrop-filter becomes the CONTAINING BLOCK for its position:fixed */
/* descendants. #masthead contains three of them, the mobile menu panel among */
/* them, and #masthead is 0px tall in the scrolled state.                     */
/*                                                                            */
/* Today that is latent rather than visible: the panel's other offsets        */
/* (top:75px, left/right:0, width:100%) happen to resolve the same against    */
/* #masthead as against the viewport, because #masthead is itself pinned to   */
/* the top-left at full width. The one value that does NOT coincide is a      */
/* `bottom` intended to reach the foot of the screen — against a 0px-tall     */
/* containing block it collapses. Measured on the front page: an 825px panel  */
/* became 32px, and the page rendered through it.                             */
/*                                                                            */
/* Global rather than per-page: the hazard is global, and any full-height     */
/* mobile panel added to the other pages during their rebuild would hit it    */
/* the moment it used `bottom`, `height:100%` or a percentage offset.         */
/*                                                                            */
/* Safe to drop the blur here: while the menu is open the panel is an opaque  */
/* sheet, so there is nothing behind the header to blur. background-color is  */
/* untouched, so the header looks the same.                                   */
/* ─── Task 5: Typographic rhythm ───────────────────────────────────────── */
.fd-service-title {
    font-size: 1.2rem !important;
    font-weight: 500 !important;
}
.fd-case-title {
    font-size: 1.4rem !important;
    font-weight: 500 !important;
}
/* ─── Task 6: Testimonial carousel arrow hover ──────────────────────────── */
.fd-t-prev,
.fd-t-next {
    opacity: 0.4 !important;
    transition: opacity 0.2s ease !important;
}
.fd-t-prev:hover,
.fd-t-next:hover {
    opacity: 1 !important;
}
/* ─── Fix 3: Sticky navbar ──────────────────────────────────────────────── */
/* BORTTAGEN: body { padding-top: 75px !important }. Den kompenserade för en
   position:fixed header i den gamla designen. Vår header är sticky och ligger
   kvar i flödet, så de 75 pixlarna blev ren luft ovanför toppbaren. Astra-
   filtret behöll regeln eftersom "body" inte är en Astra-selektor. */
/* ─── Mobile dropdown: position below fixed navbar ─────────────────────── */
/* .main-header-bar is position:fixed, removing it from #masthead's flow,   */
/* so the absolute-positioned dropdown defaults to top:0 (behind the bar).  */
/* Explicitly anchor it below the navbar at 75px.                           */
/* ─── Fix 4: Nav link hover — target Astra's .menu-link class ───────────── */
#ast-desktop-header .main-navigation .menu-item > a{
    color: #cccccc !important;
    transition: color 0.2s ease !important;
}
#ast-desktop-header .main-navigation .menu-item:hover > a{
    color: #ffffff !important;
}
/* Dropdown items */
/* ─── Global button style: transparent default, white-fill hover ────────── */
.fd-form-btn,
.fd-about-cta{
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid #ffffff !important;
    color: #ffffff !important;
    text-transform: uppercase !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
    text-decoration: none !important;
}
.fd-form-btn:hover,
.fd-about-cta:hover{
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #0a0a0a !important;
    border: 1px solid #ffffff !important;
}
/* ══════════ _footerbar ══════════ */
/* Footer- och easter-bar-LAYOUT, missad i första extraktionen.
 * Kom ur fd_custom_footer() och fd_easter_egg_bar() som emitterade egna
 * <style>-block i wp_footer. Färgerna här är den gamla mörka designens;
 * det delade lagret överrider dem med högre specificitet (body.fd-redesign
 * .fd-footer = 0,2,0 mot .fd-footer = 0,1,0), så bara layouten överlever. */

/* Hide Astra default footer */
.fd-footer{
    background: #0a0a0a;
    border-top: 1px solid #1e1e1e;
    font-family: inherit;
}
.fd-footer-inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}
.fd-footer-tagline{
    font-size: 13px;
    color: #555555;
    letter-spacing: 0.06em;
    margin: 0;
    font-family: inherit;
}
.fd-footer-links{
    display: flex;
    align-items: center;
    gap: 32px;
}
.fd-footer-link{
    font-size: 13px;
    color: #888888;
    text-decoration: none;
    font-family: inherit;
    transition: color 0.2s ease;
}
.fd-footer-link:hover{
    color: #ffffff;
}
@media (max-width: 768px) {
.fd-footer-inner{
        flex-direction: column;
        align-items: flex-start;
        padding: 32px 24px;
        gap: 20px;
    }
.fd-footer-links{
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

.fd-easter-bar{
    display: block;
    width: 100%;
    height: 40px;
    background: #0a0a0a;
    text-align: center;
    line-height: 40px;
    transition: background 0.3s ease;
    cursor: pointer;
}
.fd-easter-bar a{
    display: block;
    height: 100%;
    color: #0a0a0a;
    text-decoration: none;
    font-size: 11px;
    letter-spacing: 0.12em;
    font-family: inherit;
    transition: color 0.3s ease;
}
.fd-easter-bar:hover,
.fd-easter-bar:active{
    background: #1a1a1a;
}
.fd-easter-bar:hover a,
.fd-easter-bar:active a{
    color: #333333;
}
@media (max-width: 768px) {
@keyframes easterEggPulse {
0%{ color: #0a0a0a; }
50%{ color: #333333; }
85%{ color: #0a0a0a; }
100%{ color: #0a0a0a; }
}
.fd-easter-bar a{
        animation: easterEggPulse 3s infinite;
    }
}

/* ══════════ _shared_clean ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   SHARED LAYER — every page in the new design system.

   Emitted by fd_shared_styles() on any page carrying the `fd-redesign`
   body class, which fd_redesigned_slugs() controls. Adding a page to the
   new system means adding its slug to that one array — none of the rules
   below need touching.

   This block owns: tokens, the container break-out, the grain overlay,
   type primitives, buttons, octagons, the contact section, and the four
   theme overrides (header, mobile menu, footer, easter bar) that the old
   dark visual layer would otherwise impose.

   Page-specific sections live in fd_page_css_map(): $map['home'],
   $map['work'], and so on.

   Where !important appears it is required, not defensive: the existing
   fd_custom_styles() layer sets heading colour, nav colour and panel
   grounds with !important — and in one case from an ID selector. Each
   instance is marked.
   ═══════════════════════════════════════════════════════════════════════ */
body.fd-redesign {
  --fd-bg:     #F4F2EE;
  --fd-ink:    #251B4F;
  --fd-muted:  #46463F;
  --fd-line:   #E8E5DF;
  --fd-lav:    #9B95F2;
  --fd-orchid: #E3BFF5;
  --fd-yellow: #F3E88E;
  --fd-onDark: #C9C5E8;
  --fd-pad:    clamp(20px, 4vw, 56px);
  --fd-octagon: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
}
/* ── Break out of Astra's container. No 100vw anywhere, so the horizontal
      scrollbar can never be double-counted. ─────────────────────────────── */
html:has(body.fd-redesign) { background-color: #F4F2EE !important; }
body.fd-redesign { background-color: #F4F2EE !important; color: #251B4F; }
body.fd-redesign #primary { margin: 0 !important; padding: 0 !important; width: 100% !important; }
body.fd-redesign .fd-page {
  overflow-x: clip; position: relative;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--fd-ink);
}
body.fd-redesign .fd-page *, body.fd-redesign .fd-page *::before, body.fd-redesign .fd-page *::after { box-sizing: border-box; }
body.fd-redesign .fd-page p { margin: 0; }
body.fd-redesign .fd-page a { text-decoration: none; color: inherit; }
body.fd-redesign .fd-page img { max-width: 100%; }
/* ── Grain overlay — above content (9990), below the navbar (9999) and the
      mobile menu (9998). Fixed, inert, and inherits nothing. ───────────── */
body.fd-redesign .fd-page .fd-grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none;
  opacity: 0.14; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat; background-size: 120px 120px;
}
/* ── Type primitives ──────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-eyebrow {
  font-size: clamp(12px, 1vw, 14px); letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--fd-muted);
  font-family: 'Inter', system-ui, sans-serif; font-weight: 400;
}
body.fd-redesign .fd-page .fd-eyebrow--onDark { color: var(--fd-onDark); }
/* Every Anton heading carries .fd-display. One rule covers all pages, so a
   new page adds no selectors here — only its own size modifiers.
   !important is required: the existing layer sets
   `.page .entry-content h1 { color:#ffffff !important }`. */
body.fd-redesign .fd-page .fd-display {
  font-family: 'Anton', Impact, sans-serif; font-weight: 400;
  letter-spacing: -0.01em; margin: 0;
  color: var(--fd-ink) !important;
}
/* On the violet sections the display type inverts. */
body.fd-redesign .fd-page .fd-display--onDark { color: var(--fd-bg) !important; }
/* Pill highlight. margin-right pulls the following character back across the
   pill's own right padding, so a trailing full stop sits tight against the
   pill instead of floating a padding-width away from it. */
body.fd-redesign .fd-page .fd-pill {
  display: inline-block; border-radius: 999px;
  padding: 0 0.28em 0.08em; margin-right: -0.16em;
  color: var(--fd-ink) !important;
  /* A highlight must never be split across a line break. nowrap makes that
     structural rather than a matter of choosing lucky phrases; every pill
     phrase in use is short enough to fit the narrowest column at 320px. */
  white-space: nowrap;
}
body.fd-redesign .fd-page .fd-pill--yellow { background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-pill--orchid { background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-pill--lav    { background: var(--fd-lav); }
/* ── Buttons ──────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-btn {
  display: inline-flex; align-items: center; gap: 14px; white-space: nowrap;
  border-radius: 999px; font-size: clamp(15px, 1.2vw, 17px); font-weight: 500;
  padding: 20px 34px; transition: background-color .2s ease, color .2s ease;
  font-family: 'Inter', system-ui, sans-serif;
}
body.fd-redesign .fd-page .fd-btn--lg { padding: 22px 38px; font-size: clamp(16px, 1.3vw, 18px); margin-top: 44px; }
body.fd-redesign .fd-page .fd-btn--ink { background: var(--fd-ink); color: var(--fd-bg); }
body.fd-redesign .fd-page .fd-btn--ink:hover { background: var(--fd-lav); color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-btn--lav { background: var(--fd-lav); color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-btn--lav:hover { background: var(--fd-bg); color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-arw { font-size: 1.15em; line-height: 1; }
body.fd-redesign .fd-page .fd-inline-link { text-decoration: underline; text-underline-offset: 3px; }
body.fd-redesign .fd-page .fd-inline-link:hover { color: var(--fd-muted); }
/* ── Octagons ─────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-oct {
  display: block; width: 15px; height: 15px; flex: none;
  background: var(--fd-lav); clip-path: var(--fd-octagon);
}
body.fd-redesign .fd-page .fd-oct--orchid { background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--yellow { background: var(--fd-yellow); }
/* Scattered decorative octagons are absolute; each page positions its own. */
body.fd-redesign .fd-page .fd-oct--float { position: absolute; z-index: 2; }
/* ── Contact section — shared component, identical on every page ───────── */
body.fd-redesign .fd-page .fd-contact-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 34%; gap: 56px;
  padding: clamp(70px, 8vw, 116px) var(--fd-pad) clamp(72px, 8.3vw, 120px);
  position: relative; align-items: start;
}
body.fd-redesign .fd-page .fd-contact-h2 { font-size: clamp(40px, 6.6vw, 96px); line-height: 0.94; }
body.fd-redesign .fd-page .fd-contact-main .fd-display { margin-top: 22px !important; }
body.fd-redesign .fd-page .fd-oct--c1 { top: 40px;  left: 44%; width: 18px; height: 18px; background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--c2 { top: 560px; left: 5%;  width: 24px; height: 24px; }
body.fd-redesign .fd-page .fd-oct--c3 { top: 628px; left: 44%; width: 13px; height: 13px; background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-contact-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px; margin-top: 48px; }
body.fd-redesign .fd-page .fd-contact-copy { font-size: clamp(16px, 1.35vw, 18px); line-height: 1.55; color: var(--fd-muted); }
body.fd-redesign .fd-page .fd-contact-more { margin-top: 14px !important; }
body.fd-redesign .fd-page .fd-contact-cta { display: flex; flex-direction: column; gap: 18px; align-items: flex-start; }
body.fd-redesign .fd-page .fd-contact-note { font-size: 15px; color: var(--fd-muted); }
body.fd-redesign .fd-page .fd-contact-img { position: relative; min-height: 520px; border-radius: 20px; overflow: hidden; }
body.fd-redesign .fd-page .fd-contact-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Shared responsive ────────────────────────────────────────────────── */
@media (max-width: 1024px) {
body.fd-redesign .fd-page .fd-contact-grid { grid-template-columns: 1fr; }
/* The contact image stacks below the text here. It must not keep its 3:4
     portrait ratio — at 414px that rendered 374x499, 55% of the viewport.
     (A `min-height` cannot do this on its own: `height:100%` on the <img> has
     no definite parent height to resolve against, so the image falls back to
     its natural ratio and drives the box.)

     aspect-ratio is width-independent, so one object-position holds at every
     width in this range. The timer occupies y 46%-85% of the source and the
     16:9 window shows 42% of image height; `center 76%` lands that window at
     44%-86%, framing the timer with a little margin at both ends. */
body.fd-redesign .fd-page .fd-contact-img { min-height: 0; aspect-ratio: 16 / 9; }
body.fd-redesign .fd-page .fd-contact-img img { object-position: center 76%; }
body.fd-redesign .fd-page .fd-oct--float { display: none; }
}
@media (max-width: 768px) {
body.fd-redesign .fd-page .fd-contact-cols { grid-template-columns: 1fr; gap: 32px; }
}
@media (prefers-reduced-motion: reduce) {
body.fd-redesign .fd-page .fd-tick-track { animation: none; }
body.fd-redesign .fd-page .fd-card:hover { transform: none; }
}
/* ═══════════════════════════════════════════════════════════════════════
   HEADER — new-design pages only.  ►► OPTIONAL BLOCK: delete to leave the
   header exactly as it is on the not-yet-rebuilt pages. Three further
   blocks follow (mobile menu, footer, easter bar); each is independent and
   separately removable. ◄◄

   Not part of the design files, which ship their own <nav>. That nav cannot
   be installed through a the_content filter (the theme owns the header), so
   the Astra header stays — but it is styled for the old dark site:
   transparent bar, #ffffff title, #cccccc links. On the cream page that is
   white-on-cream, a contrast ratio of about 1.1:1.
   ═══════════════════════════════════════════════════════════════════════ */
/* Wordmark: set in the display face, matching the headlines. Astra sets
   Inter 600 here; Anton ships weight 400 only. */
/* Nav links. The rule that actually wins is in fd_custom_styles():
   `#ast-desktop-header .main-navigation .menu-item > .menu-link` — an ID
   selector with !important (1,2,2), which outranks any class-only selector
   however long. These mirror that exact shape with body.fd-redesign in front
   (1,3,2) so they win on specificity rather than on source order.

   The old values were tuned for the black site and invert on bone:
     rest  #cccccc -> 1.44:1
     hover #ffffff -> 1.12:1   (hover was WORSE than rest)
   Replaced with rest #46463F = 8.5:1 and hover #251B4F = 13.9:1. */
body.fd-redesign #ast-desktop-header .main-navigation .menu-item > a,
body.fd-redesign #ast-mobile-header .main-navigation .menu-item > a{
  color: #46463F !important;
}
body.fd-redesign #ast-desktop-header .main-navigation .menu-item:hover > a,
body.fd-redesign #ast-mobile-header .main-navigation .menu-item:hover > a{
  color: #251B4F !important;
}
body.fd-redesign .menu-toggle{ color: #251B4F !important; fill: #251B4F !important; }
/* ── Mobile menu — new-design pages only ───────────────────────────────────
   Astra's panel was still the old dark site: a #0a0a0a ground with #ffffff /
   #cccccc links. The ground is painted on FOUR nested elements, not the outer
   container — .main-header-bar-navigation, .main-navigation, the
   #ast-hf-mobile-menu list and .sub-menu — which is why recolouring
   .ast-mobile-header-content alone left a black panel inside a cream one.

   The panel was also only as tall as its contents (175px in a 900px viewport,
   measured), so the page showed through underneath and it read as a bug.

   Breakpoint is 921px: Astra's mobile breakpoint, not one of ours.
   #ast-hf-mobile-menu is an ID (1,0,0), so these carry the ID to clear it.

   NOTE: the companion fix — dropping #masthead's backdrop-filter while the
   menu is open, so the panel's `bottom: 0` resolves against the viewport — is
   NOT here. It is a global rule in fd_custom_styles(), because the
   containing-block hazard it removes is global. See the comment there. */
@media (max-width: 921px) {
/* Panel fills from under the fixed navbar to the foot of the viewport.
     top + bottom on a fixed element needs no vh unit, so it is immune to the
     mobile URL-bar viewport change that makes 100vh overshoot. */
/* Every nested ground */
body.fd-redesign #ast-hf-mobile-menu{
    background-color: #F4F2EE !important;
  }
/* Top-level links: body face, calm rhythm, 60px+ tap targets */
body.fd-redesign #ast-mobile-header .main-navigation .menu-item > a{
    color: #251B4F !important;
    font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
    font-size: 20px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    padding: 22px 24px !important;
    min-height: 64px !important;
    display: flex !important;
    align-items: center !important;
    border-bottom: 1px solid #E8E5DF !important;
    background: transparent !important;
  }
/* Submenu: indented, one step quieter */
/* Services chevron — was #ffffff, invisible on bone. */
/* Close (and open) trigger */
body.fd-redesign #ast-mobile-header .menu-toggle{
    color: #251B4F !important;
    fill: #251B4F !important;
    background: transparent !important;
  }
}
/* ── Footer — new-design pages only ────────────────────────────────────
   fd_custom_footer() paints .fd-footer #0a0a0a with #555/#888 text, which
   is the old palette. Recoloured to the Work section's violet; the text
   colours have to come up with it or they fall below readable on violet.
   The not-yet-rebuilt pages are still dark and keep the black footer. */
body.fd-redesign .fd-footer {
  background: #251B4F;
  border-top: 1px solid #3A2F6B;
}
body.fd-redesign .fd-footer-tagline { color: #8F86C6; }
body.fd-redesign .fd-footer-link { color: #C9C5E8; }
body.fd-redesign .fd-footer-link:hover { color: #F4F2EE; }
/* The easter-egg bar sits directly under the footer and is the other half
   of the black band. It is a concealed link — fd_easter_egg_bar() paints
   #0a0a0a text on a #0a0a0a ground so it only surfaces on hover. Recoloured
   to match the violet footer with that concealment intact: the text tracks
   the background, and the hover pair keeps the same small tonal step the
   original used (#0a0a0a/#333333 -> #251B4F/#4F4185). */
body.fd-redesign .fd-easter-bar { background: #251B4F; }
body.fd-redesign .fd-easter-bar a { color: #251B4F; }
body.fd-redesign .fd-easter-bar:hover,
body.fd-redesign .fd-easter-bar:active { background: #2F2461; }
body.fd-redesign .fd-easter-bar:hover a,
body.fd-redesign .fd-easter-bar:active a { color: #4F4185; }
@media (max-width: 768px) {
/* The global pulse animates #0a0a0a -> #333333, which would flash dark
     grey against violet. Re-point it at the new palette. */
@keyframes fdEasterPulseHome {
0%   { color: #251B4F; }
50%  { color: #4F4185; }
85%  { color: #251B4F; }
100% { color: #251B4F; }
}
body.fd-redesign .fd-easter-bar a { animation: fdEasterPulseHome 3s infinite; }
}
/* ══════════ sida: home ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   FRONT PAGE — sections unique to this page.
   Tokens, primitives, the contact section and the four theme overrides are
   in the shared layer (fd_shared_styles()); this file assumes them.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 01 Hero ──────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-hero { position: relative; overflow: hidden; }
body.fd-redesign .fd-page .fd-hero-ghost {
  position: absolute; inset: -40px -160px; z-index: 0; pointer-events: none;
  display: flex; flex-direction: column;
  font-family: 'Anton', Impact, sans-serif;
  /* Texture, not a second headline. Three levers, all needed: a third of
     the original size, open leading so the lines do not mass into a wall,
     and reduced opacity so the field sits behind the headline instead of
     competing with it. */
  font-size: clamp(40px, 4.6vw, 66px); line-height: 1.5;
  letter-spacing: -0.02em; color: var(--fd-line); white-space: nowrap;
  user-select: none; opacity: 0.55;
}
/* Offsets in em so the stagger scales with the type instead of drifting. */
/* Spökordmärket: radförskjutning.
   Tidigare: period 4, förskjutningar 0 till -1.45em — bara 23% av
   upprepningsenheten (6.31em), så alla rader låg inom en fjärdedels ordbredd
   från varandra och stammarna radade upp sig i kolumner.
   Nu: period 10, lika lång som antalet rader, så ingenting upprepas.
   Förskjutningarna är frac(n * 0.618) * 6.31em — gyllene snittet ger den
   sekvens som minimerar klustring och aldrig hamnar i fas. Spann 85% av
   enheten. Raderna har 10 upprepningar var så högerkanten fortfarande
   sticker ut ur boxen efter en förskjutning på upp till 5.96em. */
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+1) { margin-left: -3.90em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+2) { margin-left: -1.49em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+3) { margin-left: -5.39em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+4) { margin-left: -2.98em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+5) { margin-left: -0.57em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+6) { margin-left: -4.47em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+7) { margin-left: -2.06em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+8) { margin-left: -5.96em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n+9) { margin-left: -3.55em; }
body.fd-redesign .fd-page .fd-hero-ghost span:nth-child(10n) { margin-left: -1.14em; }

body.fd-redesign .fd-page .fd-hero-grid {
  position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1fr) 400px; gap: 64px;
  /* Underkanten kapad fran 104px till 56px. Hjalten slutar med CTA:n och hade
     104px dodyta under den — tyngre an de 84px som ligger ovanfor, vilket lat
     sektionen sluta oavslutat. 56px ar samma tal som --fd-pad:s maxvarde,
     alltsa den rytm hjalten redan anvander i sidled. */
  padding: 84px var(--fd-pad) 56px;
}
body.fd-redesign .fd-page .fd-hero-main { position: relative; }
body.fd-redesign .fd-page .fd-hero-main .fd-eyebrow { margin-bottom: 64px; }
body.fd-redesign .fd-page .fd-hero-h1 { font-size: clamp(44px, 8.9vw, 128px); line-height: 0.94; max-width: 16ch; }
body.fd-redesign .fd-page .fd-hero-lede {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  max-width: 34ch; margin-top: 48px; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-hero-side { display: flex; flex-direction: column; gap: 24px; }
body.fd-redesign .fd-page .fd-portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 68% 26%; border-radius: 8px; display: block; height: auto;
  /* Violet duotone (filter defined inline in the markup). The greyscale
     original read as a fourth image style next to the pastel bands. */
  filter: url(#fd-duotone);
}
body.fd-redesign .fd-page .fd-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
body.fd-redesign .fd-page .fd-hero-card { font-size: 15px; line-height: 1.5; }
body.fd-redesign .fd-page .fd-hero-card-copy { color: var(--fd-muted); }
body.fd-redesign .fd-page .fd-hero-card-name {
  font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase;
  margin-bottom: 10px !important; color: var(--fd-ink);
}
body.fd-redesign .fd-page .fd-oct--h1 { top: 18px;  left: 76%; width: 26px; height: 26px; background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--h2 { top: 402px; left: 88%; width: 16px; height: 16px; background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-oct--h3 { top: 640px; left: 64%; width: 20px; height: 20px; }
body.fd-redesign .fd-page .fd-oct--h4 { top: 700px; left: 40%; width: 13px; height: 13px; background: var(--fd-orchid); }

/* ── 02 / 05 Image bands ──────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-band { position: relative; height: 460px; }
body.fd-redesign .fd-page .fd-band--short { height: 420px; }
body.fd-redesign .fd-page .fd-band img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── 03 Client ticker ─────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ticker {
  overflow: hidden; padding: 34px 0;
  border-top: 1px solid var(--fd-line); border-bottom: 1px solid var(--fd-line);
}
body.fd-redesign .fd-page .fd-tick-track { display: flex; width: max-content; animation: fdTick 34s linear infinite; }
body.fd-redesign .fd-page .fd-tick-track:hover { animation-play-state: paused; }
body.fd-redesign .fd-page .fd-tick-row {
  display: flex; align-items: center; gap: 40px; padding-right: 40px;
  font-family: 'Anton', Impact, sans-serif; color: var(--fd-ink);
  font-size: clamp(26px, 2.9vw, 40px); line-height: 1; white-space: nowrap;
}
body.fd-redesign .fd-page .fd-tick-item { display: flex; align-items: center; gap: 40px; }
@keyframes fdTick { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }

/* ── 04 Services ──────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-svc-head {
  padding: clamp(64px, 8vw, 120px) var(--fd-pad) clamp(70px, 9vw, 140px);
  display: grid; grid-template-columns: minmax(0, 1fr) 1fr; gap: 32px; position: relative;
}
body.fd-redesign .fd-page .fd-svc-h2 { font-size: clamp(30px, 2.9vw, 40px); line-height: 1; }
body.fd-redesign .fd-page .fd-svc-lede {
  font-size: clamp(16px, 1.35vw, 18px); line-height: 1.5;
  max-width: 40ch; margin-top: 24px !important; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-oct--s1 { top: 8px;   left: 22%; width: 20px; height: 20px; background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-oct--s2 { top: 148px; left: 9%;  width: 14px; height: 14px; }
body.fd-redesign .fd-page .fd-oct--s3 { top: 232px; left: 33%; width: 24px; height: 24px; background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--s4 { top: 112px; left: 44%; width: 12px; height: 12px; }

body.fd-redesign .fd-page .fd-cards {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px;
  padding: 0 var(--fd-pad) clamp(70px, 9vw, 130px);
}
body.fd-redesign .fd-page .fd-card {
  display: flex; flex-direction: column; padding: 36px 34px 38px;
  border-radius: 20px; border: 1px solid var(--fd-line); min-height: 520px;
  transition: border-color .2s ease, transform .2s ease;
}
body.fd-redesign .fd-page .fd-card:hover { border-color: var(--fd-ink); transform: translateY(-3px); }
body.fd-redesign .fd-page .fd-card--lav    .fd-oct, body.fd-redesign .fd-page .fd-card--lav    .fd-card-list li::before { background: var(--fd-lav); }
body.fd-redesign .fd-page .fd-card--orchid .fd-oct, body.fd-redesign .fd-page .fd-card--orchid .fd-card-list li::before { background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-card--yellow .fd-oct, body.fd-redesign .fd-page .fd-card--yellow .fd-card-list li::before { background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-oct--card { width: 22px; height: 22px; }
body.fd-redesign .fd-page .fd-card-num { font-size: 26px; line-height: 1; margin-top: 28px !important; color: var(--fd-muted) !important; }
body.fd-redesign .fd-page .fd-card-title { font-size: clamp(30px, 3.2vw, 46px); line-height: 0.94; margin-top: 14px !important; }
body.fd-redesign .fd-page .fd-card-copy { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.55; margin-top: 20px !important; color: var(--fd-muted); }
body.fd-redesign .fd-page .fd-card-list {
  margin: auto 0 0 !important; padding: 36px 0 0 !important; list-style: none;
  display: flex; flex-direction: column; gap: 14px;
  font-size: 15px; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-card-list li { display: flex; align-items: center; gap: 12px; margin: 0 !important; }
body.fd-redesign .fd-page .fd-card-list li::before {
  content: ""; display: block; width: 10px; height: 10px; flex: none; clip-path: var(--fd-octagon);
}

/* ── 06 Selected work (dark section) ──────────────────────────────────── */
body.fd-redesign .fd-page .fd-work { background: var(--fd-ink); color: var(--fd-bg); }
body.fd-redesign .fd-page .fd-work-head { padding: clamp(64px, 7.6vw, 110px) var(--fd-pad) 24px; max-width: 1000px; }
body.fd-redesign .fd-page .fd-work-h2 { font-size: clamp(40px, 6.6vw, 96px); line-height: 0.94; }
body.fd-redesign .fd-page .fd-work-lede {
  font-size: clamp(17px, 1.45vw, 19px); line-height: 1.5;
  max-width: 46ch; margin-top: 30px !important; color: var(--fd-onDark);
}
body.fd-redesign .fd-page .fd-wcases { display: flex; flex-direction: column; padding: 0 var(--fd-pad); }
body.fd-redesign .fd-page .fd-wcase {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px;
  align-items: center; padding: 56px 0; border-top: 1px solid var(--fd-muted);
}
body.fd-redesign .fd-page .fd-wcase-h { font-size: clamp(30px, 4.4vw, 64px); line-height: 0.94; margin-top: 20px !important; max-width: 24ch; }
body.fd-redesign .fd-page .fd-metric { border-radius: 22px; color: var(--fd-ink); padding: 30px 32px; }
body.fd-redesign .fd-page .fd-metric--orchid { background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-metric--yellow { background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-metric-v { font-size: clamp(32px, 3vw, 44px); line-height: 0.98; }
body.fd-redesign .fd-page .fd-metric-l { font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 14px !important; color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-work-cta { padding: 48px var(--fd-pad) clamp(64px, 7vw, 100px); }

/* ── 07 Testimonials ──────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-quotes { padding: clamp(70px, 9vw, 130px) var(--fd-pad) clamp(75px, 9.7vw, 140px); }
body.fd-redesign .fd-page .fd-quotes > .fd-eyebrow { margin-bottom: 72px; }
body.fd-redesign .fd-page .fd-quotes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 72px; }
body.fd-redesign .fd-page .fd-quote {
  margin: 0; display: flex; flex-direction: column; gap: 34px;
  /* Astra styles bare <blockquote> with a 5px left border, 20px padding and
     italics. Anton ships no italic, so that renders as a synthesised oblique. */
  border: 0 !important; padding: 0 !important; font-style: normal !important;
}
body.fd-redesign .fd-page .fd-quote-t {
  /* The design sized this for ~15-word placeholder text; the real
     testimonials are ~40 words. */
  font-size: clamp(19px, 2.1vw, 30px); line-height: 1.12;
  color: var(--fd-muted) !important; font-style: normal !important;
}
body.fd-redesign .fd-page .fd-quote-f { font-size: 15px; line-height: 1.5; color: var(--fd-muted); }
body.fd-redesign .fd-page .fd-quote-f span { color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-oct--q { width: 18px; height: 18px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.fd-redesign .fd-page .fd-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  body.fd-redesign .fd-page .fd-hero-side { max-width: 400px; }
  body.fd-redesign .fd-page .fd-svc-head { grid-template-columns: 1fr; gap: 24px; }
  body.fd-redesign .fd-page .fd-cards { grid-template-columns: 1fr; }
  body.fd-redesign .fd-page .fd-card { min-height: 0; }
  body.fd-redesign .fd-page .fd-wcase { grid-template-columns: 1fr; gap: 28px; }
  body.fd-redesign .fd-page .fd-quotes-grid { grid-template-columns: 1fr; gap: 56px; }
}
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-hero-main .fd-eyebrow { margin-bottom: 32px; }
  body.fd-redesign .fd-page .fd-hero-ghost { inset: -20px -80px; }
  body.fd-redesign .fd-page .fd-band { height: 260px; }
  body.fd-redesign .fd-page .fd-band--short { height: 240px; }
  /* Below ~559px the bands crop horizontally (box ratio < the source's 2.33).
     The metronome sits near the centre and survives a centre crop, but the
     spirit level occupies x 45%-92% of its frame and loses its right end.
     Shifting the crop window right keeps the whole level in shot; above
     ~559px there is no horizontal crop and this is inert. */
  body.fd-redesign .fd-page .fd-band--short img { object-position: 80% center; }
  body.fd-redesign .fd-page .fd-quotes > .fd-eyebrow { margin-bottom: 40px; }
}
/* ══════════ sida: service-subpage ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   SERVICE SUBPAGES — one rule set, three pages.

   /performance-marketing/, /digital-strategy/ and /analytics-measurement/
   are structurally identical (verified: the three source pages use an
   identical class set) and fd_page_styles() already folds all three onto
   the 'service-subpage' key, so this block is emitted once per page from a
   single $map entry.

   The only thing that varies between them is the accent colour, and that
   is a DATA difference, not a structural one: each page sets --fd-accent
   via one modifier class on the wrapper, and every accented element reads
   from that property. No per-page rules exist, and adding a fourth service
   page would need none.

   Tokens, primitives and the contact section are in the shared layer.
   ═══════════════════════════════════════════════════════════════════════ */

/* The one axis of variation. */
body.fd-redesign .fd-page.fd-sv--lav    { --fd-accent: var(--fd-lav); }
body.fd-redesign .fd-page.fd-sv--orchid { --fd-accent: var(--fd-orchid); }
body.fd-redesign .fd-page.fd-sv--yellow { --fd-accent: var(--fd-yellow); }

/* ── Hero ─────────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-sv-hero {
  padding: 84px var(--fd-pad) clamp(56px, 6vw, 88px);
  position: relative;
}
body.fd-redesign .fd-page .fd-sv-h1 {
  font-size: clamp(40px, 6.4vw, 92px); line-height: 0.94;
  max-width: 18ch; margin-top: 40px !important;
}
/* The pill takes the page's accent, so the highlight is never a separate
   decision from the page identity. */
body.fd-redesign .fd-page .fd-sv-hero .fd-pill { background: var(--fd-accent); }
body.fd-redesign .fd-page .fd-sv-lede {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  max-width: 42ch; margin-top: 32px !important; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-sv-cta { margin-top: 40px; }
body.fd-redesign .fd-page .fd-oct--sv1 { top: 60px;  left: 64%; width: 24px; height: 24px; background: var(--fd-accent); }
body.fd-redesign .fd-page .fd-oct--sv2 { top: 268px; left: 80%; width: 16px; height: 16px; background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--sv3 { top: 392px; left: 58%; width: 13px; height: 13px; background: var(--fd-yellow); }

/* ── Body: copy left, the service list as an accent card right ────────── */
body.fd-redesign .fd-page .fd-sv-body { padding: 0 var(--fd-pad) clamp(70px, 8vw, 120px); }
body.fd-redesign .fd-page .fd-sv-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px;
  align-items: start;
}
body.fd-redesign .fd-page .fd-sv-copy p {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.65;
  color: var(--fd-muted); max-width: 60ch; margin-top: 26px !important;
}
body.fd-redesign .fd-page .fd-sv-copy p:first-child { margin-top: 0 !important; }
body.fd-redesign .fd-page .fd-sv-more { margin-top: 36px !important; }
body.fd-redesign .fd-page .fd-sv-more a { font-size: clamp(16px, 1.4vw, 19px); }

body.fd-redesign .fd-page .fd-sv-card {
  background: var(--fd-accent); color: var(--fd-ink);
  border-radius: 20px; padding: 36px 34px 38px;
}
body.fd-redesign .fd-page .fd-sv-subhead {
  font-size: 17px; line-height: 1.5; font-weight: 500; color: var(--fd-ink);
}
body.fd-redesign .fd-page .fd-sv-list {
  margin: 28px 0 0 !important; padding: 0 !important; list-style: none;
  display: flex; flex-direction: column; gap: 18px;
  font-size: 16px; line-height: 1.5; color: var(--fd-ink);
}
body.fd-redesign .fd-page .fd-sv-list li {
  display: flex; align-items: flex-start; gap: 14px; margin: 0 !important;
}
/* The bullet sits on the accent ground, so it takes the ink colour rather
   than the accent. */
body.fd-redesign .fd-page .fd-sv-list li::before {
  content: ""; display: block; width: 10px; height: 10px; flex: none;
  margin-top: 0.42em; background: var(--fd-ink); clip-path: var(--fd-octagon);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.fd-redesign .fd-page .fd-sv-grid { grid-template-columns: 1fr; gap: 40px; }
  body.fd-redesign .fd-page .fd-sv-copy p { max-width: none; }
}
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-sv-hero { padding-top: 56px; }
  body.fd-redesign .fd-page .fd-sv-h1 { margin-top: 28px !important; }
  body.fd-redesign .fd-page .fd-sv-lede { margin-top: 24px !important; }
  body.fd-redesign .fd-page .fd-sv-cta { margin-top: 32px; }
  body.fd-redesign .fd-page .fd-sv-card { padding: 30px 26px 32px; }
}
/* ══════════ sida: work ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   WORK PAGE — sections unique to this page.
   Tokens, primitives, the contact section and the four theme overrides are
   in the shared layer (fd_shared_styles()); this file assumes them.

   Replaces the previous $map['work'], which styled the old dark page. None
   of it is carried over.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── W01 Hero ─────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-wk-hero {
  padding: 84px var(--fd-pad) clamp(64px, 7vw, 96px);
  position: relative;
}
body.fd-redesign .fd-page .fd-wk-h1 {
  font-size: clamp(44px, 7.8vw, 112px); line-height: 0.94;
  max-width: 20ch; margin-top: 56px !important;
}
body.fd-redesign .fd-page .fd-wk-lede {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  max-width: 40ch; margin-top: 40px !important; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-oct--w1 { top: 70px;  left: 62%; width: 24px; height: 24px; background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-oct--w2 { top: 300px; left: 78%; width: 16px; height: 16px; background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-oct--w3 { top: 420px; left: 58%; width: 13px; height: 13px; }

/* ── W02 Cases (dark section) ─────────────────────────────────────────────
   A flex column with a rule above each article, NOT a grid with a fixed
   track count. Two cases sit as two rows with nothing reserved for a third;
   adding or removing a case changes nothing but the number of rows. */
body.fd-redesign .fd-page .fd-wk-cases { background: var(--fd-ink); color: var(--fd-bg); }
body.fd-redesign .fd-page .fd-wk-cases-inner {
  display: flex; flex-direction: column;
  padding: 40px var(--fd-pad) clamp(70px, 7.6vw, 110px);
}
body.fd-redesign .fd-page .fd-wk-case {
  display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px;
  padding: clamp(48px, 4.9vw, 70px) 0; border-top: 1px solid var(--fd-muted);
  align-items: start;
}
body.fd-redesign .fd-page .fd-wk-case-h {
  font-size: clamp(32px, 5vw, 72px); line-height: 0.94;
  max-width: 22ch; margin-top: 22px !important;
}
body.fd-redesign .fd-page .fd-wk-case-body {
  font-size: clamp(16px, 1.35vw, 18px); line-height: 1.6;
  max-width: 56ch; margin-top: 28px !important; color: var(--fd-onDark);
}
body.fd-redesign .fd-page .fd-wk-case-attr {
  margin-top: 28px !important; font-size: 15px; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--fd-onDark);
}
body.fd-redesign .fd-page .fd-wk-metrics { display: flex; flex-direction: column; gap: 20px; }
body.fd-redesign .fd-page .fd-wk-metric {
  border-radius: 22px; color: var(--fd-ink); padding: 30px 32px;
}
body.fd-redesign .fd-page .fd-wk-metric--orchid { background: var(--fd-orchid); }
body.fd-redesign .fd-page .fd-wk-metric--yellow { background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-wk-metric-v { font-size: clamp(30px, 2.8vw, 40px); line-height: 1; }
body.fd-redesign .fd-page .fd-wk-metric-l {
  font-size: 15px; line-height: 1.45; margin-top: 14px !important; color: var(--fd-ink);
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body.fd-redesign .fd-page .fd-wk-case { grid-template-columns: 1fr; gap: 32px; }
}
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-wk-hero { padding-top: 56px; }
  body.fd-redesign .fd-page .fd-wk-h1 { margin-top: 32px !important; }
  body.fd-redesign .fd-page .fd-wk-lede { margin-top: 28px !important; }
  body.fd-redesign .fd-page .fd-wk-metrics { gap: 16px; }
}
/* ══════════ sida: about ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   ABOUT — sections unique to this page.

   No design exists for this page in the Claude Design project, so the
   layout is derived from components the system already uses:
     · hero          — the Work/service hero shape (eyebrow, display h1, lede)
     · intro + photo — the front page hero's two-column text/portrait split,
                       including the same violet duotone filter
     · bio           — a violet band, the same device the Work cases use to
                       break a long cream page
     · how I work    — a single measured column, like the service page copy
     · contact       — the shared partial

   Tokens, primitives and the contact section are in the shared layer.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
/* EN rad, TVA celler. Vanstercellen har ALL text — etikett, rubrik, brodtext
   och CTA — i naturligt floede. Hogercellen har portrattet.
   Det ar hela poangen med strukturen: sa lange rubrik och brodtext ligger i
   samma cell kan bildens hojd bara paverka SEKTIONENS totalhojd, aldrig
   avstandet inuti textblocket. Tidigare lag rubriken i den har sektionen och
   brodtexten i en foljande .fd-ab-intro — da strackte bilden rutnatsraden och
   sköt ned brodtexten, sa gapet mellan rubrik och text vaxte med bildhojden.
   align-items:start gor att ingen cell strackes; var och en far sin egen hojd
   och bilden toppjusteras mot textblockets overkant. */
body.fd-redesign .fd-page .fd-ab-hero {
  padding: 84px var(--fd-pad) clamp(48px, 5vw, 72px);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 420px;
  gap: 64px;
  align-items: start;
}
body.fd-redesign .fd-page .fd-ab-h1 {
  font-size: clamp(40px, 6.4vw, 92px); line-height: 0.94;
  max-width: 18ch; margin-top: 40px !important;
}
body.fd-redesign .fd-page .fd-oct--ab1 { top: 56px;  left: 66%; width: 24px; height: 24px; background: var(--fd-orchid); }
/* Flyttad. Pa top:232px/left:82% hamnade den mitt pa ansiktet nar portrattet
   flyttades upp i hero — det last som en flack, inte som en accent. Nu i
   bildens nedre vanstra horn, dar den speglar .fd-oct--ab1 i det ovre. */
body.fd-redesign .fd-page .fd-oct--ab2 { top: 601px; left: 66%; width: 16px; height: 16px; background: var(--fd-yellow); }

/* ── Portrait ────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ab-copy {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.55;
  max-width: 42ch; color: var(--fd-muted);
}
/* Rubrik -> brodtext. Samma 40px som etikett -> rubrik (.fd-ab-h1) och
   brodtext -> CTA, sa textblocket har en enda rytm. Avstandet kommer nu
   HAR och ingen annanstans ifran — tidigare var det en bieffekt av att
   rubrik och brodtext lag i olika sektioner, dar bildens hojd stracker
   rutnatsraden och sköt ned allt under den. */
body.fd-redesign .fd-page .fd-ab-copy { margin-top: 40px; }
body.fd-redesign .fd-page .fd-ab-cta { margin-top: 40px; }
body.fd-redesign .fd-page .fd-ab-portrait {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  object-position: 68% 26%; border-radius: 8px; display: block; height: auto;
  /* Same violet duotone as the front page portrait. Replaces the old
     `filter: grayscale(10%)`, which left the photograph reading as a
     separate greyscale asset next to the pastels. */
  filter: url(#fd-duotone);
}

/* ── Bio, on the violet band ──────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ab-bio { background: var(--fd-ink); color: var(--fd-bg); }
body.fd-redesign .fd-page .fd-ab-bio-inner {
  padding: clamp(64px, 7vw, 104px) var(--fd-pad);
  max-width: 900px;
}
body.fd-redesign .fd-page .fd-ab-bio-body {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7;
  color: var(--fd-onDark); margin-top: 28px !important;
}
body.fd-redesign .fd-page .fd-ab-bio-body:first-of-type { margin-top: 0 !important; }

/* ── How I work ───────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ab-how {
  padding: clamp(70px, 8vw, 116px) var(--fd-pad) clamp(48px, 5vw, 72px);
  max-width: 900px;
}
body.fd-redesign .fd-page .fd-ab-how-h2 { font-size: clamp(30px, 3.4vw, 52px); line-height: 1; }
body.fd-redesign .fd-page .fd-ab-how-body {
  font-size: clamp(16px, 1.4vw, 19px); line-height: 1.7;
  color: var(--fd-muted); margin-top: 28px !important;
}

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Hero staplar till en kolumn. DOM-ordningen ger da: etikett, rubrik,
     brodtext, CTA, bild. Bilden hamnar alltsa SIST, till skillnad fran forr
     da den lag mellan rubriken och brodtexten. Det ar en foljd av att all
     text nu ar en enda cell och gar inte att ordna om utan att dela upp
     textblocket igen. */
  body.fd-redesign .fd-page .fd-ab-hero { grid-template-columns: 1fr; gap: 40px; }
  body.fd-redesign .fd-page .fd-ab-photo { max-width: 420px; }
  body.fd-redesign .fd-page .fd-ab-copy { max-width: none; }
}
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-ab-hero { padding-top: 56px; }
  body.fd-redesign .fd-page .fd-ab-h1 { margin-top: 28px !important; }
  body.fd-redesign .fd-page .fd-ab-cta { margin-top: 32px; }
}
/* ══════════ sida: contact ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   CONTACT — sections unique to this page.

   No design exists for this page in the Claude Design project. Derived
   from the system: the Work/service hero shape, then the form on a single
   measured column, with inputs as underlines in the palette.

   ── CONTRACT NOTES (fd-core.php) ─────────────────────────────────────────
   Two rules below exist because of the frozen contract, not because of the
   design, and must not be "tidied":

   1. .fd-form-status-ok / .fd-form-status-err are hidden by an INLINE
      style="display:none" in the markup, NOT here. fd_contact_page_extras()
      un-hides them by injecting `.fd-form-status-ok{display:block!important}`,
      which beats an inline style only because it carries !important. If the
      hide were moved here as `display:none !important`, this file's higher
      specificity would win and the success message would NEVER appear —
      silently. Nothing below sets `display` on those two classes.

   2. `.fd-contact-form` is a contract class, so fd_custom_styles()'s
      `.fd-contact-form input[type="text"] { color:#ffffff !important; ... }`
      applies here whether we like it or not — white text on a cream ground.
      The overrides below out-specify it (0,4,2 against 0,2,1) rather than
      trying to remove it.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ct-hero {
  padding: 84px var(--fd-pad) clamp(48px, 5vw, 72px);
  position: relative;
}
body.fd-redesign .fd-page .fd-ct-h1 {
  font-size: clamp(40px, 6.4vw, 92px); line-height: 0.94;
  max-width: 18ch; margin-top: 40px !important;
}
body.fd-redesign .fd-page .fd-ct-sub {
  font-size: clamp(17px, 1.6vw, 22px); line-height: 1.45;
  max-width: 40ch; margin-top: 32px !important; color: var(--fd-muted);
}
body.fd-redesign .fd-page .fd-oct--ct1 { top: 60px;  left: 66%; width: 24px; height: 24px; background: var(--fd-lav); }
body.fd-redesign .fd-page .fd-oct--ct2 { top: 250px; left: 82%; width: 16px; height: 16px; background: var(--fd-orchid); }

/* ── Form ─────────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-ct-form-section {
  padding: 0 var(--fd-pad) clamp(70px, 8vw, 120px);
}
body.fd-redesign .fd-page .fd-contact-form {
  display: grid; gap: 40px; max-width: 640px;
}
body.fd-redesign .fd-page .fd-ct-field { display: grid; gap: 10px; }
body.fd-redesign .fd-page .fd-ct-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fd-muted); font-family: 'Inter', system-ui, sans-serif;
}

/* Out-specifying the global !important input rule — see note 2 above. */
body.fd-redesign .fd-page .fd-contact-form input[type="text"],
body.fd-redesign .fd-page .fd-contact-form input[type="email"],
body.fd-redesign .fd-page .fd-contact-form textarea {
  color: var(--fd-ink) !important;
  border-bottom: 1px solid #CFCBC2 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  font-size: 17px !important;
  line-height: 1.5 !important;
  padding-top: 12px !important;
  padding-bottom: 12px !important;
  width: 100%;
  transition: border-color .2s ease;
}
body.fd-redesign .fd-page .fd-contact-form input[type="text"]:focus,
body.fd-redesign .fd-page .fd-contact-form input[type="email"]:focus,
body.fd-redesign .fd-page .fd-contact-form textarea:focus {
  border-bottom: 1px solid var(--fd-ink) !important;
}
body.fd-redesign .fd-page .fd-contact-form input::placeholder,
body.fd-redesign .fd-page .fd-contact-form textarea::placeholder {
  color: #8B8880 !important; opacity: 1 !important;
}
/* The global rule fills autofilled inputs with a #0a0a0a inset shadow and
   white text — unreadable on cream. */
body.fd-redesign .fd-page .fd-contact-form input:-webkit-autofill,
body.fd-redesign .fd-page .fd-contact-form input:-webkit-autofill:hover,
body.fd-redesign .fd-page .fd-contact-form input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #F4F2EE inset !important;
  -webkit-text-fill-color: #251B4F !important;
  border-bottom: 1px solid #CFCBC2 !important;
}
body.fd-redesign .fd-page .fd-ct-textarea { resize: vertical; min-height: 140px; }

/* Status messages. NO `display` property here — see note 1 above. */
body.fd-redesign .fd-page .fd-form-status-ok,
body.fd-redesign .fd-page .fd-form-status-err {
  padding: 16px 18px; border-radius: 12px;
  font-size: 16px; line-height: 1.5;
}
body.fd-redesign .fd-page .fd-form-status-ok  { background: var(--fd-lav);    color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-form-status-err { background: var(--fd-yellow); color: var(--fd-ink); }
body.fd-redesign .fd-page .fd-form-status-err a { color: var(--fd-ink); text-decoration: underline; }

body.fd-redesign .fd-page .fd-ct-submit { justify-self: start; }
/* The submit button deliberately does NOT use .fd-form-btn: that class is in
   fd_custom_styles()'s transparent-outline !important rule, the same one that
   was breaking the About CTA. It is not part of the contract. */
body.fd-redesign .fd-page button.fd-btn { border: 0; cursor: pointer; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-ct-hero { padding-top: 56px; }
  body.fd-redesign .fd-page .fd-ct-h1 { margin-top: 28px !important; }
  body.fd-redesign .fd-page .fd-ct-sub { margin-top: 24px !important; }
  body.fd-redesign .fd-page .fd-contact-form { gap: 32px; }
}
/* ══════════ sida: fun ══════════ */
/* ═══════════════════════════════════════════════════════════════════════
   FUN — sections unique to this page.

   No design exists for this page in the Claude Design project. Derived from
   the system: the standard hero shape, then the game in a violet "console".

   ── CONTRACT NOTE (fd-core.php) ──────────────────────────────────────────
   fd_snake_game() paints the board itself:
       ctx.fillStyle = '#0a0a0a'; ctx.fillRect(0, 0, 400, 400);
   with #ffffff food, #ffffff / rgba(102,102,102) snake and a
   rgba(10,10,10,0.78) overlay. Those colours are in fd-core.php and are not
   ours to change, so the board is a black square whatever the page does.

   Rather than leave a black tile floating on cream, the canvas sits inside a
   #251B4F console with padding and a radius, so the black reads as a screen
   inset in the violet frame — deliberate rather than left over.

   #fd-score and #fd-best receive `.textContent = number`, so they must
   contain the number and NOTHING else. The "SCORE" / "BEST" words are
   siblings, never children.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hero ─────────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-fn-hero {
  padding: 84px var(--fd-pad) clamp(40px, 4vw, 56px);
  position: relative;
}
body.fd-redesign .fd-page .fd-fn-h1 {
  font-size: clamp(40px, 6.4vw, 92px); line-height: 0.94;
  max-width: 18ch; margin-top: 40px !important;
}
body.fd-redesign .fd-page .fd-oct--fn1 { top: 56px;  left: 68%; width: 24px; height: 24px; background: var(--fd-yellow); }
body.fd-redesign .fd-page .fd-oct--fn2 { top: 210px; left: 84%; width: 16px; height: 16px; background: var(--fd-lav); }

/* ── Game console ─────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-fn-section {
  padding: 0 var(--fd-pad) clamp(70px, 8vw, 120px);
  display: flex; justify-content: flex-start;
}
body.fd-redesign .fd-page .fd-fn-console {
  background: var(--fd-ink); border-radius: 28px;
  padding: clamp(22px, 3vw, 40px);
  display: inline-flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 2.2vw, 28px);
  max-width: 100%;
}

/* Score / best row. The words are siblings of the number spans. */
body.fd-redesign .fd-page .fd-snake-meta {
  display: flex; align-items: baseline; gap: 10px;
  align-self: stretch; justify-content: center;
  font-family: 'Inter', system-ui, sans-serif;
}
body.fd-redesign .fd-page .fd-snake-label {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--fd-onDark);
}
body.fd-redesign .fd-page .fd-snake-num {
  font-family: 'Anton', Impact, sans-serif; font-size: 22px; line-height: 1;
  color: var(--fd-bg); margin-right: 22px;
}
body.fd-redesign .fd-page .fd-snake-num:last-child { margin-right: 0; }

/* The canvas keeps its 400x400 backing store (the game draws to RES=400);
   only the display size scales. */
body.fd-redesign .fd-page #fd-snake-canvas {
  display: block; width: min(400px, 100%); height: auto;
  aspect-ratio: 1 / 1; border-radius: 14px;
  background: #0a0a0a;
}

/* ── D-pad ────────────────────────────────────────────────────────────── */
body.fd-redesign .fd-page .fd-snake-controls { display: flex; justify-content: center; }
body.fd-redesign .fd-page .fd-dpad { display: flex; flex-direction: column; gap: 10px; align-items: center; }
body.fd-redesign .fd-page .fd-dpad-row { display: flex; gap: 10px; justify-content: center; }
body.fd-redesign .fd-page .fd-snake-btn {
  width: 56px; height: 56px; border: 0; border-radius: 14px;
  background: var(--fd-lav); color: var(--fd-ink);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, transform .1s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body.fd-redesign .fd-page .fd-snake-btn:hover { background: var(--fd-bg); }
body.fd-redesign .fd-page .fd-snake-btn:active { transform: translateY(1px); }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  body.fd-redesign .fd-page .fd-fn-hero { padding-top: 56px; }
  body.fd-redesign .fd-page .fd-fn-h1 { margin-top: 28px !important; }
  body.fd-redesign .fd-page .fd-fn-section { justify-content: center; }
  body.fd-redesign .fd-page .fd-snake-btn { width: 64px; height: 64px; font-size: 24px; }
}