/* I AM Next Era — global CSS (tokens bundled) */

/* fonts.css */
/* Brand typefaces — PP Monument Normal (sans), PP Editorial Old (serif). Licensed from Pangram Pangram. */
@font-face{font-family:"PP Monument Normal";src:url("/assets/fonts/PPMonumentNormal-Regular.woff2") format("woff2"),url("/assets/fonts/PPMonumentNormal-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"PP Monument Normal";src:url("/assets/fonts/PPMonumentNormal-Medium.woff2") format("woff2"),url("/assets/fonts/PPMonumentNormal-Medium.woff") format("woff");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"PP Editorial Old";src:url("/assets/fonts/PPEditorialOld-Regular.woff2") format("woff2"),url("/assets/fonts/PPEditorialOld-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap}

/* colors.css */
/* Palette — Brand Guidelines v1.0, pp.15-17. Values are exact; do not add hues. */
:root{
  /* Primary */
  --color-red:#F92400;            /* Pantone 485 C — primary */
  --color-yellow:#FCE940;         /* Pantone 101 C */
  /* Secondary */
  --color-black:#111111;          /* Pantone 419 C */
  --color-white:#FFFFFF;
  --color-warm-yellow:#FFF9E0;    /* Pantone 5807 C */

  /* Neutral steps — SYSTEM ADDITION: alpha of --color-black only, for UI states.
     Not brand colors; never used as a fill for brand-level graphics. */
  --color-black-a04:rgba(17,17,17,.04);
  --color-black-a08:rgba(17,17,17,.08);
  --color-black-a12:rgba(17,17,17,.12);
  --color-black-a40:rgba(17,17,17,.40);
  --color-black-a60:rgba(17,17,17,.60);
  --color-white-a08:rgba(255,255,255,.08);
  --color-white-a16:rgba(255,255,255,.16);
  --color-white-a60:rgba(255,255,255,.60);
  --color-white-a80:rgba(255,255,255,.80);

  /* Semantic — surfaces. SYSTEM ADDITION: the Guidelines set no usage frequency;
     these are house decisions, revised 2026-09 after reviewing the website kit.
     Black, white and warm yellow are the dominant base. Red as a FILLED surface
     appears at most once per page, at the closing moment. Red as an OUTLINE +
     LABEL (transparent fill, red border, red text) may repeat where it marks the
     same recurring action or state — it reads as the accent, not as a red ground.
     Yellow is reserved for the brand icon and rare full-bleed brand moments —
     never a button, badge or default UI emphasis colour. */
  --surface-page:var(--color-white);
  --surface-warm:var(--color-warm-yellow);
  --surface-inverse:var(--color-black);
  --surface-accent:var(--color-red);       /* rare, high-impact only */
  --surface-highlight:var(--color-yellow); /* brand moments only, not UI */
  --surface-raised:var(--color-white);
  --surface-subtle:var(--color-black-a04);

  /* Semantic — text */
  --text-primary:var(--color-black);
  --text-secondary:var(--color-black-a60);
  --text-muted:var(--color-black-a40);
  --text-on-inverse:var(--color-white);
  --text-on-inverse-secondary:var(--color-white-a60);
  --text-on-accent:var(--color-white);      /* white on red — 5.0:1 */
  --text-on-highlight:var(--color-black);   /* black on yellow — 14.5:1 */
  --text-accent:var(--color-red);           /* on white 5.4:1, warm yellow 5.2:1, black 4.6:1 — all AA. Never on yellow (2.9:1). */

  /* Semantic — lines */
  --border-hairline:var(--color-black-a12);
  --border-strong:var(--color-black);
  --border-inverse:var(--color-white-a16);

  /* Focus */
  --focus-ring:var(--color-red);
}

/* typography.css */
/* Type — Brand Guidelines pp.19-23.
   Sans = PP Monument (workhorse). Serif = PP Editorial Old (expressive headlines & key moments).
   Arial is the sanctioned fallback for environments without the brand fonts.
   Scale, leading and tracking are transcribed from the guideline scale table (p.22),
   converted 1pt : 1px for screen. Leading % -> unitless line-height. Tracking (InDesign
   1/1000 em) -> em: 1 = 0.001em, 2 = 0.002em, -1 = -0.001em, -2 = -0.002em. */
:root{
  --font-sans:"PP Monument Normal",Arial,Helvetica,sans-serif;
  --font-serif:"PP Editorial Old",Georgia,"Times New Roman",serif;
  --font-fallback:Arial,Helvetica,sans-serif;

  --weight-regular:400;  /* body */
  --weight-medium:500;   /* headlines, subheadlines, emphasis body */

  /* Sans scale (p.22, left column) */
  --sans-12:12px; --sans-14:14px; --sans-16:16px; --sans-20:20px; --sans-24:24px;
  --sans-28:28px; --sans-32:32px; --sans-36:36px; --sans-40:40px; --sans-48:48px;
  --sans-56:56px; --sans-64:64px; --sans-80:80px; --sans-96:96px;
  --sans-leading:1.3;        /* sizes <= 56 */
  --sans-leading-large:1.2;  /* sizes >= 60 */
  --sans-tracking:0;         /* sizes <= 32 */
  --sans-tracking-mid:.001em;  /* 36-56 */
  --sans-tracking-large:.002em;/* >= 60 */

  /* Serif scale (p.22, right column) */
  --serif-16:16px; --serif-20:20px; --serif-24:24px; --serif-32:32px; --serif-40:40px;
  --serif-48:48px; --serif-56:56px; --serif-64:64px; --serif-72:72px; --serif-88:88px;
  --serif-104:104px; --serif-128:128px;
  --serif-leading-small:1.3;  /* 16-20 */
  --serif-leading:1.2;        /* 24-96 */
  --serif-leading-large:1.1;  /* >= 100 */
  --serif-tracking:-.001em;   /* 16-44 */
  --serif-tracking-large:-.002em; /* >= 48 */

  /* Eyebrow / label — SYSTEM ADDITION: the guidelines set no small-caps label style.
     Sans, medium, wide tracking, uppercase, used for section labels. */
  --label-size:12px;
  --label-tracking:.14em;

  /* Semantic roles */
  --text-display:var(--serif-104);
  --text-h1:var(--serif-72);
  --text-h2:var(--serif-48);
  --text-h3:var(--serif-32);
  --text-subhead:var(--sans-24);
  --text-body-lg:var(--sans-20);
  --text-body:var(--sans-16);
  --text-body-sm:var(--sans-14);
  --text-caption:var(--sans-12);
}

/* spacing.css */
/* Spacing — SYSTEM ADDITION. The Brand Guidelines define no spacing grid.
   Derived from the guideline type scale (4pt steps) so rhythm matches the typography. */
:root{
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px;
  --space-5:20px; --space-6:24px; --space-8:32px; --space-10:40px;
  --space-12:48px;--space-16:64px;--space-20:80px;--space-24:96px;
  --space-32:128px;--space-40:160px;

  --gutter:var(--space-6);
  --section-y:var(--space-24);
  --page-x:var(--space-10);

  /* Logo clearspace — Brand Guidelines p.12: clear space = X on all sides,
     where X is the height of the icon (lockups) / cap height (wordmark). */
  --logo-clearspace:1em;
}

/* layout.css */
/* Radii, borders, elevation — SYSTEM ADDITION.
   The Brand Guidelines specify no radii or shadows. The identity is geometric and
   flat (square crops, hairline rules, the circular icon), so the system defaults to
   square corners, hairline borders and no shadows. Elevation is expressed by
   surface colour, not by shadow. */
:root{
  --radius-none:0;
  --radius-sm:2px;     /* buttons, inputs, tags */
  --radius-circle:50%; /* icon lockup only */

  --border-width:1px;
  --border-width-strong:2px;

  --shadow-none:none;
  --shadow-overlay:0 24px 64px rgba(17,17,17,.18); /* modals / menus only */

  --container-max:1440px;
  --measure:68ch;      /* body copy max line length */
  --measure-tight:46ch;/* standfirst / lead paragraph */
}

/* motion.css */
/* Motion — SYSTEM ADDITION. Not specified in the Brand Guidelines.
   Tone is calm, honest, present: fades and small offsets, no bounce, no overshoot. */
:root{
  --duration-fast:120ms; /* @kind other */
  --duration-base:200ms; /* @kind other */
  --duration-slow:400ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,0,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,0,.2,1); /* @kind other */

  --hover-opacity:.82; /* @kind other */   /* fills darken via opacity, never a new hue */
  --press-opacity:.7; /* @kind other */
}

/* base.css */
/* Minimal element defaults so specimens and kits render on-brand. */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font-family:var(--font-sans);font-size:var(--text-body);font-weight:var(--weight-regular);line-height:var(--sans-leading);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3{font-family:var(--font-serif);font-weight:var(--weight-regular);letter-spacing:var(--serif-tracking-large);line-height:var(--serif-leading);margin:0}
h1{font-size:var(--text-h1)}h2{font-size:var(--text-h2)}h3{font-size:var(--text-h3)}
p{margin:0}
a{color:var(--text-accent);text-decoration:none;border-bottom:1px solid currentColor;transition:opacity var(--duration-fast) var(--ease-standard)}
a:hover{opacity:var(--hover-opacity)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* components.css */
/* Component layer — SYSTEM ADDITION.
   The Brand Guidelines define no components. Every value below resolves to a token
   from colors.css / typography.css / spacing.css, so no component invents a colour,
   a type size or a radius. Rules honoured here:
   - radius 0 everywhere (pill reserved for small functional labels only)
   - no shadows; depth comes from flat fields, scale and photography
   - black text on red and on yellow (white normal text on red is prohibited)
   - hover/active never switches to a new colour: motion, underline or border only */
:root{
  --nav-height:72px;
  --nav-height-tall:104px;
  --control-height:48px;
  --band-y:112px;   /* one vertical rhythm for every band */
  --band-x:var(--space-12);
}

/* Label / eyebrow */
.iam-eyebrow{margin:0;font-family:var(--font-sans);font-size:var(--label-size);font-weight:var(--weight-medium);letter-spacing:.08em;text-transform:uppercase}

/* Buttons — primary (solid black, the standard action) / accent (solid red, at most one per
   surface, at the closing moment) / outline-on-dark / outline-on-light / tertiary text / yellow.
   Outline padding is 1px tighter so the 1px border keeps the optical box identical. */
.iam-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:var(--control-height);padding:0 var(--space-8);border:1px solid var(--color-black);border-radius:0;background:var(--color-black);color:var(--color-white);font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-medium);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),color var(--duration-base) var(--ease-standard)}
.iam-btn--accent{background:var(--color-red);border-color:var(--color-red);color:var(--color-white)}
.iam-btn:hover{background:var(--color-red);border-color:var(--color-red);color:var(--color-white)}
.iam-btn:active{opacity:var(--press-opacity)}
.iam-btn:focus-visible{outline:2px solid var(--color-black);outline-offset:3px}
.iam-btn--wide{padding:0 var(--space-12)}
.iam-btn--wide.iam-btn--outline-light,.iam-btn--wide.iam-btn--outline-dark{padding:0 calc(var(--space-12) - 1px)}
.iam-btn--yellow{background:var(--color-yellow);border-color:var(--color-yellow);color:var(--color-black)}
.iam-btn--outline-dark{background:transparent;border-color:var(--color-white);color:var(--color-white);padding:0 calc(var(--space-8) - 1px)}
.iam-btn--outline-dark:hover{background:transparent;border-color:var(--color-red);color:var(--color-red)}
.iam-btn--outline-dark:focus-visible{outline-color:var(--color-white)}
.iam-btn--outline-light{background:transparent;border-color:var(--color-black);color:var(--color-black);padding:0 calc(var(--space-8) - 1px)}
.iam-btn--outline-light:hover{background:transparent;border-color:var(--color-red);color:var(--color-red)}
.iam-btn--text{height:auto;padding:0;background:none;border:0;color:inherit;justify-content:flex-start;justify-self:start;width:fit-content}
.iam-btn--text:hover{background:transparent;border-color:transparent;color:var(--color-red);text-decoration:underline;text-underline-offset:6px}

/* Navigation */
.iam-nav{display:flex;align-items:center;justify-content:space-between;gap:var(--space-12);min-height:var(--nav-height);padding:0 var(--band-x)}
.iam-nav--tall{min-height:var(--nav-height-tall)}
.iam-nav--dark{background:var(--color-black);color:var(--color-white)}
.iam-nav--light{background:var(--color-white);color:var(--color-black)}
.iam-nav--warm{background:var(--color-warm-yellow);color:var(--color-black)}
.iam-nav-links{display:flex;align-items:center;gap:var(--space-8);flex-wrap:wrap;justify-content:flex-end}
.iam-nav-link{font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-regular);color:inherit;text-decoration:none;border-bottom:0;opacity:.72;transition:opacity var(--duration-base) var(--ease-standard)}
.iam-nav-link:hover{opacity:1}

/* Bands — one flat surface per section. Dark / light / warm / accent / highlight. */
.iam-band{padding:var(--band-y) var(--band-x)}
.iam-band__inner{max-width:var(--container-max,1440px);margin:0 auto}
.iam-band--dark{background:var(--color-black);color:var(--color-white)}
.iam-band--light{background:var(--color-white);color:var(--color-black)}
.iam-band--warm{background:var(--color-warm-yellow);color:var(--color-black)}
.iam-band--accent{background:var(--color-red);color:var(--color-black)}
.iam-band--highlight{background:var(--color-yellow);color:var(--color-black)}

/* Number display — the figure band (5 platser, 10 samtal, 600 kr) */
.iam-figure{margin:0;font-family:var(--font-sans);font-size:var(--sans-80);font-weight:var(--weight-medium);line-height:1;letter-spacing:var(--sans-tracking-large)}
.iam-figure--serif{font-family:var(--font-serif);font-weight:var(--weight-regular);letter-spacing:var(--serif-tracking-large)}

/* Disclosure row — the + / – service list */
.iam-row{border-top:1px solid currentColor}
.iam-row:last-of-type{border-bottom:1px solid currentColor}
.iam-row summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:var(--space-8);padding:var(--space-8) 0;font-family:var(--font-sans);font-size:var(--sans-28);font-weight:var(--weight-medium);line-height:var(--sans-leading);color:inherit}
.iam-row summary::-webkit-details-marker{display:none}
.iam-row summary::before{content:"+";font-weight:var(--weight-regular);line-height:1;width:26px;flex:none}
.iam-row[open] summary::before{content:"–"}
.iam-row__body{display:grid;gap:var(--space-4);padding:0 0 var(--space-10) 54px;max-width:64ch}
.iam-row__body p{margin:0;font-family:var(--font-sans);font-size:var(--text-body);line-height:1.65}

/* Form field — 0 radius, 1px border, label always visible, 48px minimum */
.iam-field{display:grid;gap:var(--space-2)}
.iam-field label{font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-medium)}
.iam-field input,.iam-field textarea{font-family:var(--font-sans);font-size:var(--text-body);color:var(--color-black);background:var(--color-white);border:1px solid var(--color-black);border-radius:0;min-height:var(--control-height);padding:var(--space-3) var(--space-4)}
.iam-field input:focus-visible,.iam-field textarea:focus-visible{outline:2px solid var(--color-red);outline-offset:2px}

/* Footer */
.iam-footer{background:var(--color-black);color:var(--color-white-a60);padding:var(--space-16) var(--band-x);font-family:var(--font-sans);font-size:var(--text-body-sm)}
.iam-footer a{color:var(--color-white);text-decoration:none;border-bottom:1px solid var(--color-white-a30,rgba(255,255,255,.3))}