/* ---------------------------------------------------------------
   berko.studio — inner pages (offers, blog)
   Same sheet as the home page: 12 columns split 4 : 8 on desktop.
   Columns 1–3 hold the rail (logo, site nav, page index, CTA);
   column 4 is the datum margin; 5–12 hold the content.
   Tokens and components are copied from index.html: keep in sync.
---------------------------------------------------------------- */
@font-face{ font-family:"Space Grotesk"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/space-grotesk-500.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Sans"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-sans-500.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-400.woff2) format("woff2"); }
@font-face{ font-family:"IBM Plex Mono"; font-style:normal; font-weight:500; font-display:swap; src:url(/assets/fonts/ibm-plex-mono-500.woff2) format("woff2"); }

:root{
  --cobalt:#2C5AC6; --cobalt-strong:#1E3F94;
  --cobalt-100:#E0E8FB; --cobalt-200:#C2CFF6; --cobalt-300:#9BB0EF;
  --paper:#F1F0EC; --white:#FFFFFF;
  --ink-900:#14151A; --ink-800:#23252E; --ink-700:#353844; --ink-600:#4D515F; --ink-500:#676B79; --ink-300:#C2C4CC;
  --clay:#E5633E;
  --line:rgba(20,21,26,.10); --line-soft:rgba(20,21,26,.16); --line-strong:rgba(20,21,26,.28);
  --ease:cubic-bezier(.22,1,.36,1);
  --display:"Space Grotesk",system-ui,sans-serif;
  --body:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --monof:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --bar-h:56px; --gutter:20px; --sec-pt:64px; --sec-pb:72px; --rail-pt:40px; --logo-h:44px;
}
@media (min-width:600px){ :root{ --gutter:32px; } }
@media (min-width:1180px){ :root{ --sec-pt:88px; --sec-pb:96px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; overflow-x:hidden; overflow-x:clip; }
body{ margin:0; background:var(--paper); color:var(--ink-700); font:400 16px/1.6 var(--body); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
h1,h2,h3,h4,p,ol,ul,blockquote,figure,dl,dd{ margin:0; }
ol,ul{ padding:0; list-style:none; }
img,svg{ display:block; }
a{ color:inherit; }
::selection{ background:var(--cobalt); color:#fff; }
:focus-visible{ outline:2px solid var(--cobalt); outline-offset:3px; border-radius:4px; }
p{ text-wrap:pretty; }
.skip{ position:absolute; left:var(--gutter); top:-60px; z-index:100; background:var(--ink-900); color:var(--paper); padding:10px 14px; border-radius:6px; font-size:14px; text-decoration:none; }
.skip:focus{ top:12px; }
.mono{ font:500 12px/1.4 var(--monof); letter-spacing:.14em; text-transform:uppercase; }

/* placeholders to settle before going live: impossible to miss */
.todo{ background:rgba(229,99,62,.14); box-shadow:inset 0 -2px 0 var(--clay); color:inherit; border-radius:2px; padding:0 .15em; }

/* ---------- buttons & links ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; height:48px; padding:0 22px; border-radius:10px; background:var(--cobalt); color:#fff; font:500 15px/1 var(--body); text-decoration:none; white-space:nowrap; transition:background-color 160ms var(--ease), transform 120ms var(--ease); }
.btn:hover{ background:var(--cobalt-strong); }
.btn:active{ transform:translateY(1px); }
.btn--paper{ background:var(--paper); color:var(--cobalt); }
.btn--paper:hover{ background:#fff; }
.tlink{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink-900); font-weight:500; font-size:15px; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:5px; transition:color 160ms var(--ease), text-decoration-color 160ms var(--ease); }
.tlink:hover{ color:var(--cobalt-strong); text-decoration-color:currentColor; }
.arr{ font-family:var(--monof); display:inline-block; text-decoration:none; }

/* ---------- sheet ---------- */
.frame{ max-width:1264px; margin:0 auto; padding-inline:var(--gutter); }
.rail{ display:none; }
.mhead{ padding-top:20px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.mhead__logo{ color:var(--cobalt); }
.mhead__logo svg{ height:40px; width:auto; }
.lang{ display:flex; align-items:center; gap:4px; color:var(--ink-500); }
.lang a{ padding:8px 4px; color:var(--ink-500); text-decoration:none; border-radius:4px; }
.lang a:hover{ color:var(--ink-900); }
.lang a[aria-current="true"]{ color:var(--cobalt); text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:6px; pointer-events:none; }
/* compact site nav: one scrollable row under the logo */
.mnav{ margin-top:16px; display:flex; gap:20px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--line-soft); }
.mnav::-webkit-scrollbar{ display:none; }
.mnav a{ flex:none; padding:12px 0; color:var(--ink-600); text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px; }
.mnav a[aria-current="page"]{ color:var(--cobalt); border-bottom-color:var(--cobalt); }

.sec{ position:relative; padding-top:var(--sec-pt); padding-bottom:var(--sec-pb); border-top:1px solid var(--line-soft); scroll-margin-top:8px; }
/* #top links land at the very top of the page, not on the hero's offset */
#top{ scroll-margin-top:100vh; }
.hero{ border-top:0; padding-top:40px; }
.eyebrow{ display:flex; align-items:center; color:var(--cobalt); }
.eyebrow .idx{ color:var(--ink-600); margin-right:14px; }
.eyebrow .label::before{ content:""; display:inline-block; width:24px; height:1px; background:currentColor; vertical-align:middle; margin-right:12px; position:relative; top:-1px; }

.g8 > * + *{ margin-top:20px; }
@media (min-width:760px){
  .g8{ display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:24px; }
  .g8 > * + *{ margin-top:0; }
  .g8 > .c-l{ grid-column:1 / span 3; }
  .g8 > .c-r{ grid-column:4 / span 5; }
  .g8 > .c-full{ grid-column:1 / -1; }
}

/* ---------- page hero ---------- */
.hero h1{ margin-top:32px; font:500 clamp(2.5rem, 1.3rem + 4.6vw, 4.5rem)/1.04 var(--display); letter-spacing:-.025em; color:var(--ink-900); text-wrap:balance; max-width:15ch; }
.hero h1 .s2{ display:block; color:var(--cobalt); margin-top:.12em; }
.hero__sub{ margin-top:28px; max-width:36rem; font-size:1.125rem; line-height:1.55; }
.hero__cta{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.note{ margin-top:36px; display:flex; gap:14px; align-items:flex-start; max-width:38rem; padding:16px 18px; border-radius:12px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); font-size:15px; line-height:1.5; }
.note .mono{ flex:none; color:var(--cobalt); padding-top:2px; }

/* ---------- offers: a display title and its spec sheet (as on the home page) ---------- */
.svcs{ margin-top:40px; }
.svc{ position:relative; padding:28px 0 48px; border-top:1px solid var(--line-soft); scroll-margin-top:8px; }
.svc::before{ content:""; position:absolute; top:-1px; left:0; width:100%; height:2px; background:var(--cobalt); transform:scaleX(0); transform-origin:left center; transition:transform 320ms var(--ease); }
.svc__n{ color:var(--ink-500); }
.svc h3{ margin-top:12px; font:500 clamp(2.25rem, 1.3rem + 3.4vw, 3.75rem)/1.02 var(--display); letter-spacing:-.03em; color:var(--ink-900); transition:color 200ms var(--ease); }
.svc__tag{ margin-top:12px; font:500 1.25rem/1.3 var(--display); letter-spacing:-.01em; color:var(--cobalt); max-width:30rem; }
.svc__body{ margin-top:24px; }
.svc__desc > p{ font-size:1.0625rem; line-height:1.6; max-width:29rem; }
.svc__desc > p + p{ margin-top:12px; }
.steps{ margin-top:20px; counter-reset:st; max-width:29rem; }
.steps li{ counter-increment:st; display:grid; grid-template-columns:2rem minmax(0,1fr); padding:10px 0; border-top:1px solid var(--line); font-size:15px; line-height:1.5; }
.steps li::before{ content:counter(st, decimal-leading-zero); font:500 12px/1.9 var(--monof); letter-spacing:.08em; color:var(--cobalt); }
.steps strong{ font-weight:500; color:var(--ink-900); }
.spec{ font-size:14px; line-height:1.45; }
.spec > div{ display:grid; grid-template-columns:6.5rem minmax(0,1fr); column-gap:12px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line); }
.spec > div:last-child{ border-bottom:1px solid var(--line); }
.spec dt{ color:var(--cobalt); }
@media (hover:hover){ .svc:hover::before{ transform:scaleX(1); } .svc:hover h3{ color:var(--cobalt); } }
@media (min-width:760px){
  .svc{ padding:32px 0 60px; }
  .g8 > .svc__desc{ grid-column:1 / span 4; }
  .g8 > .spec{ grid-column:5 / -1; margin-top:4px; }
}

/* ---------- how it works ---------- */
.flow{ margin-top:40px; display:grid; border-top:1px solid var(--line-soft); }
.flow > li{ padding:24px 0 28px; border-bottom:1px solid var(--line); }
.flow h4{ margin-top:10px; font:500 clamp(1.5rem, 1.15rem + 1vw, 1.875rem)/1.08 var(--display); letter-spacing:-.025em; color:var(--ink-900); }
.flow p{ margin-top:10px; max-width:22rem; }
.flow .mono{ color:var(--ink-600); }
@media (min-width:760px){
  .flow{ grid-template-columns:repeat(3, minmax(0,1fr)); border-bottom:1px solid var(--line); }
  .flow > li{ padding:28px 24px 32px 0; border-bottom:0; }
  .flow > li + li{ padding-left:24px; border-left:1px solid var(--line); }
}

/* ---------- cobalt band (closing call to action) ---------- */
.sec--blue{
  --ink-900:#F1F0EC; --ink-700:#E0E8FB; --ink-600:#C2CFF6; --ink-500:#C2CFF6;
  --line:rgba(241,240,236,.16); --line-soft:rgba(241,240,236,.22); --line-strong:rgba(241,240,236,.4);
  border-top:0; isolation:isolate; background:var(--cobalt); color:var(--paper);
  box-shadow:0 0 0 100vmax var(--cobalt); clip-path:inset(0 -100vmax);
}
.sec--blue .eyebrow{ color:var(--cobalt-200); }
.sec--blue :focus-visible{ outline-color:var(--paper); }
.cta__title{ margin-top:32px; font:500 clamp(2.5rem, 1.2rem + 5vw, 5rem)/1 var(--display); letter-spacing:-.03em; color:var(--paper); text-wrap:balance; max-width:14ch; }
.cta__body{ margin-top:20px; max-width:30rem; font-size:1.125rem; line-height:1.55; color:var(--cobalt-100); }
.cta__row{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; }
.sec--blue .tlink{ color:var(--paper); }

/* ---------- blog ---------- */
.filters{ margin-top:32px; display:flex; flex-wrap:wrap; gap:8px; }
.chip{ display:inline-flex; align-items:center; height:36px; padding:0 14px; border-radius:999px; border:1px solid var(--line-soft); background:transparent; color:var(--ink-700); font:500 12px/1 var(--monof); letter-spacing:.1em; text-transform:uppercase; cursor:pointer; transition:background-color 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease); }
.chip:hover{ border-color:var(--ink-500); color:var(--ink-900); }
.chip[aria-pressed="true"]{ background:var(--cobalt); border-color:var(--cobalt); color:#fff; }
.posts{ margin-top:32px; border-top:1px solid var(--line-soft); }
.post{ border-bottom:1px solid var(--line-soft); }
.post > a{ display:grid; gap:10px; padding:28px 0 32px; text-decoration:none; color:inherit; }
.post__meta{ display:flex; flex-wrap:wrap; gap:6px 16px; color:var(--ink-600); }
.post__aud{ color:var(--cobalt); }
.post h2{ font:500 clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem)/1.1 var(--display); letter-spacing:-.025em; color:var(--ink-900); text-wrap:balance; max-width:24ch; transition:color 160ms var(--ease); }
.post p{ max-width:36rem; color:var(--ink-700); }
.post .tlink{ min-height:0; font-size:14px; }
.post > a:hover h2{ color:var(--cobalt); }
.post[hidden]{ display:none; }
@media (min-width:760px){
  .post > a{ grid-template-columns:repeat(8,minmax(0,1fr)); column-gap:24px; row-gap:10px; }
  .post__meta{ grid-column:1 / span 3; grid-row:1 / span 3; flex-direction:column; padding-top:6px; }
  .post h2, .post p, .post .tlink{ grid-column:4 / -1; }
}
.subscribe{ margin-top:48px; padding:24px; border-radius:14px; background:var(--white); box-shadow:inset 0 0 0 1px var(--line); display:grid; gap:12px; }
.subscribe h2{ font:500 1.5rem/1.15 var(--display); letter-spacing:-.02em; color:var(--ink-900); }
@media (min-width:760px){ .subscribe{ padding:32px 40px; grid-template-columns:minmax(0,1fr) auto; align-items:center; column-gap:32px; } .subscribe h2, .subscribe p{ grid-column:1; } .subscribe .btn{ grid-column:2; grid-row:1 / span 2; } }

/* ---------- article ---------- */
.art__meta{ margin-top:24px; display:flex; flex-wrap:wrap; gap:6px 20px; color:var(--ink-600); }
.art__meta .post__aud{ color:var(--cobalt); }
.art h1{ max-width:20ch; }
.prose{ margin-top:48px; max-width:40rem; font-size:1.0625rem; line-height:1.7; color:var(--ink-700); }
.prose > * + *{ margin-top:1.1em; }
.prose h2{ margin-top:2.2em; font:500 clamp(1.5rem, 1.2rem + 1vw, 2rem)/1.15 var(--display); letter-spacing:-.025em; color:var(--ink-900); }
.prose h3{ margin-top:1.8em; font:500 1.25rem/1.25 var(--display); letter-spacing:-.015em; color:var(--ink-900); }
.prose strong{ font-weight:500; color:var(--ink-900); }
.prose a{ color:var(--cobalt); text-decoration:underline; text-underline-offset:3px; text-decoration-color:rgba(44,90,198,.35); }
.prose a:hover{ color:var(--cobalt-strong); text-decoration-color:currentColor; }
.prose ul{ padding-left:0; }
.prose ul li{ position:relative; padding-left:24px; }
.prose ul li + li{ margin-top:.5em; }
.prose ul li::before{ content:""; position:absolute; left:2px; top:.8em; width:10px; height:1px; background:var(--cobalt); }
.prose blockquote{ margin-top:1.8em; margin-bottom:.4em; padding-left:20px; border-left:2px solid var(--cobalt); font:500 1.375rem/1.35 var(--display); letter-spacing:-.015em; color:var(--ink-900); }
.prose code{ font:400 .9em/1 var(--monof); background:var(--white); box-shadow:inset 0 0 0 1px var(--line); border-radius:4px; padding:.15em .35em; }
.prose figure{ margin-top:2em; }
.prose figure .ph{ aspect-ratio:16 / 9; border-radius:12px; background:repeating-linear-gradient(135deg, var(--cobalt-100) 0 10px, transparent 10px 20px); box-shadow:inset 0 0 0 1px var(--line); }
.prose figcaption{ margin-top:10px; font-size:14px; color:var(--ink-600); }
.author{ margin-top:56px; max-width:40rem; padding-top:24px; border-top:1px solid var(--line-soft); display:flex; gap:16px; align-items:center; }
.author img{ width:56px; height:56px; border-radius:50%; object-fit:cover; flex:none; }
.author p{ font-size:15px; line-height:1.5; }
.author strong{ display:block; font-weight:500; color:var(--ink-900); }

/* ---------- footer ---------- */
.foot{ margin-top:56px; padding-top:20px; border-top:1px solid var(--line-soft); display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px; color:var(--ink-600); }
.sec--blue .foot{ color:var(--cobalt-200); }
.foot .brand{ text-transform:none; letter-spacing:.06em; }
.foot a{ color:inherit; text-decoration:underline; text-decoration-color:var(--line-strong); text-underline-offset:3px; }

/* ---------- desktop: the rail ---------- */
.legend a, .pnav a{ display:flex; align-items:center; gap:12px; min-height:28px; color:var(--ink-600); text-decoration:none; transition:color 160ms var(--ease); }
.legend a .r, .pnav a .r{ flex:none; width:12px; height:1px; background:currentColor; transition:width 280ms var(--ease); }
.legend a:hover, .pnav a:hover{ color:var(--ink-900); }
.pnav a[aria-current="page"], .legend a[aria-current="true"]{ color:var(--cobalt); }
.pnav a[aria-current="page"] .r, .legend a[aria-current="true"] .r{ width:28px; }
.rail__h{ color:var(--ink-500); margin-bottom:8px; }

@media (min-width:1180px){
  .frame{ display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); column-gap:24px; }
  .mhead, .mnav{ display:none; }
  .rail{ display:flex; flex-direction:column; align-items:flex-start; grid-column:1 / span 3; grid-row:1; position:sticky; top:0; align-self:start; height:100vh; height:100svh; padding-block:var(--rail-pt); z-index:5; }
  .rail__logo{ display:flex; align-items:center; height:var(--logo-h); color:var(--cobalt); }
  .rail__logo svg{ height:40px; width:auto; }
  .pnav{ margin-top:56px; }
  .legend{ margin-top:40px; }
  .rail__foot{ margin-top:auto; display:flex; flex-direction:column; align-items:flex-start; gap:16px; }
  .field{ grid-column:4 / -1; grid-row:1; min-width:0; border-left:1px solid var(--line-soft); }
  .sec{ padding-left:calc((100% - 192px) / 9 + 24px); }
  .eyebrow .idx{ position:absolute; left:24px; margin:0; }
  .hero{ padding-top:var(--rail-pt); }
  .hero .eyebrow{ height:var(--logo-h); }
  .hero h1{ margin-top:56px; }
  .lang--hero{ position:absolute; right:0; top:var(--rail-pt); height:var(--logo-h); }
  /* the cobalt band stops at the rail's edge: the rail stays readable on paper */
  .sec--blue{ clip-path:inset(0 -100vmax 0 0); }
  .hero__cta .btn{ display:none; }
}
@media (max-width:1179px){ .lang--hero{ display:none; } }

/* ---------- compact bar (below 1180 px), as on the home page ---------- */
.bar{ position:fixed; left:0; right:0; bottom:0; z-index:50; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:var(--bar-h); padding:6px var(--gutter) calc(6px + env(safe-area-inset-bottom, 0px)); background:var(--paper); border-top:1px solid var(--line-soft); }
.bar details{ flex:1 1 auto; min-width:0; }
.bar summary{ display:flex; align-items:center; gap:12px; min-height:44px; cursor:pointer; list-style:none; color:var(--ink-900); border-radius:6px; -webkit-tap-highlight-color:transparent; }
.bar summary::-webkit-details-marker{ display:none; }
.mini{ flex:none; width:38px; height:38px; }
.mini .track{ fill:none; stroke:var(--cobalt-200); stroke-width:14; }
.mini .prog{ fill:none; stroke:var(--cobalt); stroke-width:14; stroke-dasharray:1000 1000; stroke-dashoffset:1000; }
.mini .head{ fill:var(--clay); }
.mini text{ font:500 62px/1 var(--monof); fill:var(--ink-900); text-anchor:middle; }
.bar__label{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--cobalt); }
.bar__label::after{ content:"+"; margin-left:10px; color:var(--ink-500); }
.bar details[open] .bar__label::after{ content:"–"; }
.bar.at-contact .btn{ visibility:hidden; }
.btn--sm{ height:40px; padding:0 16px; font-size:14px; }
.bar .btn .long{ display:none; }
@media (min-width:440px){ .bar .btn .long{ display:inline; } .bar .btn .short{ display:none; } }
.idx-panel{ position:absolute; left:0; right:0; bottom:100%; padding:4px var(--gutter) 8px; background:var(--paper); border-top:1px solid var(--line-soft); }
.idx-panel a{ display:flex; align-items:center; gap:16px; height:52px; border-bottom:1px solid var(--line); color:var(--ink-800); text-decoration:none; }
.idx-panel li:last-child a{ border-bottom:0; }
.idx-lang{ display:flex; align-items:center; height:52px; }
.idx-panel a .n{ color:var(--ink-500); }
.idx-panel a[aria-current="true"]{ color:var(--cobalt); }
@media (max-width:1179px){ body{ padding-bottom:calc(var(--bar-h) + env(safe-area-inset-bottom, 0px)); } }
@media (min-width:1180px){ .bar{ display:none; } }

/* ---------- motion ---------- */
@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}