/* ==========================================================================
   Rillo — component stylesheet (front end + block editor)
   Tokens live in theme.json; this file carries @font-face, token aliases,
   and the stable class contract from the design spec.
   ========================================================================== */

/* ---- Fonts (self-hosted; latin + latin-ext cover Estonian diacritics) ---- */
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/fraunces-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/fraunces-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;
  src:url("../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("../fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---- Token aliases: map spec names onto theme.json custom properties ------
   A Dark style variation rewrites --wp--custom--* at :root, so these follow. */
:root{
  --background:var(--wp--custom--background);
  --foreground:var(--wp--custom--foreground);
  --card:var(--wp--custom--card);
  --muted:var(--wp--custom--muted);
  --muted-foreground:var(--wp--custom--muted-foreground);
  --border:var(--wp--custom--border);
  --ring:var(--wp--custom--ring);
  --lsp:var(--wp--custom--accent--lsp--base);        --lsp-tint:var(--wp--custom--accent--lsp--tint);
  --strategy:var(--wp--custom--accent--strategy--base);--strategy-tint:var(--wp--custom--accent--strategy--tint);
  --training:var(--wp--custom--accent--training--base);--training-tint:var(--wp--custom--accent--training--tint);
  --change:var(--wp--custom--accent--change--base);   --change-tint:var(--wp--custom--accent--change--tint);
  --radius-xl:var(--wp--custom--radius--xl,.7rem);
  --radius-2xl:var(--wp--custom--radius--2xl,.9rem);
}

/* Per-section accent resolution */
[data-tone="lsp"]{--accent:var(--lsp);--accent-tint:var(--lsp-tint);}
[data-tone="strategy"]{--accent:var(--strategy);--accent-tint:var(--strategy-tint);}
[data-tone="training"]{--accent:var(--training);--accent-tint:var(--training-tint);}
[data-tone="change"]{--accent:var(--change);--accent-tint:var(--change-tint);}
[data-tone="neutral"]{--accent:var(--foreground);--accent-tint:var(--muted);}

/* ---- Base -------------------------------------------------------------- */
body{background:var(--background);color:var(--foreground);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;
  font-feature-settings:"cv11","ss01";line-height:1.6;}
h1,h2,h3,h4{font-family:"Fraunces",ui-serif,Georgia,serif;font-weight:560;letter-spacing:-.01em;line-height:1.1;}
a{color:inherit;}
img{max-width:100%;height:auto;}

/* ---- Utilities --------------------------------------------------------- */
.container-page{max-width:1200px;margin-inline:auto;padding-inline:1.25rem;}
@media(min-width:768px){.container-page{padding-inline:2rem;}}
.prose-page{max-width:720px;}
.font-data{font-family:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;}
.scrim-bottom{position:relative;}
.scrim-bottom::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(0,0,0,.65),rgba(0,0,0,.15) 55%,transparent 80%);pointer-events:none;}

/* ---- Accessibility: skip link + focus ---------------------------------- */
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--foreground);color:var(--background);
  padding:.6rem 1rem;border-radius:0 0 .5rem 0;}
.skip-link:focus{left:0;}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:2px solid var(--ring);outline-offset:2px;border-radius:.2rem;}

/* ---- Button ------------------------------------------------------------ */
.mr-btn{display:inline-flex;height:2.75rem;align-items:center;justify-content:center;
  border-radius:9999px;padding-inline:1.25rem;font-size:.875rem;font-weight:500;
  text-decoration:none;transition:background-color .15s,color .15s,transform .15s,box-shadow .15s;cursor:pointer;border:1px solid transparent;}
.mr-btn--filled{background:var(--accent,var(--lsp));color:#fff;}
.mr-btn--filled:hover{transform:translateY(-1px);box-shadow:0 6px 18px -6px var(--accent,var(--lsp));}
.mr-btn--outline{background:transparent;border-color:var(--accent,var(--border));color:var(--accent,var(--foreground));}
.mr-btn--outline:hover{background:var(--accent-tint);}
.mr-btn--ghost{background:transparent;color:var(--foreground);}
.mr-btn--ghost:hover{background:var(--muted);}
.mr-btn.is-disabled,.mr-btn:disabled{opacity:.5;pointer-events:none;}

/* ---- Badge ------------------------------------------------------------- */
.mr-badge{display:inline-flex;align-items:center;gap:.375rem;border-radius:9999px;
  padding:.25rem .625rem;font-size:.75rem;font-weight:500;text-transform:uppercase;letter-spacing:.04em;
  background:var(--accent-tint);color:var(--accent);width:max-content;}
.mr-badge__dot{width:.375rem;height:.375rem;border-radius:9999px;background:var(--accent);}

/* ---- Cards / grids ----------------------------------------------------- */
.mr-grid{display:grid;gap:1.5rem;}
.mr-grid--services{grid-template-columns:1fr;}
.mr-grid--cases,.mr-grid--posts,.mr-grid--tools{grid-template-columns:1fr;}
@media(min-width:640px){.mr-grid--services,.mr-grid--cases,.mr-grid--posts,.mr-grid--tools{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.mr-grid--services{grid-template-columns:repeat(4,1fr);}
  .mr-grid--cases,.mr-grid--posts{grid-template-columns:repeat(3,1fr);}}
.mr-card{display:flex;flex-direction:column;overflow:hidden;background:var(--card);
  border:1px solid var(--border);border-radius:var(--radius-2xl);text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s;}
.mr-card:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px rgba(0,0,0,.25);}
.mr-card__media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--muted);}
.mr-card--wide .mr-card__media,.mr-post-card .mr-card__media{aspect-ratio:16/9;}
.mr-card__img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.mr-card:hover .mr-card__img{transform:scale(1.03);}
.mr-card__overlay{position:absolute;top:.75rem;left:.75rem;}
.mr-card__body{display:flex;flex-direction:column;gap:.5rem;padding:1.1rem 1.2rem 1.3rem;}
.mr-card__eyebrow{font-size:.75rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);}
.mr-card__title{font-size:1.25rem;}
.mr-card__text{font-size:.95rem;color:var(--muted-foreground);}
.mr-card__more{font-size:.75rem;color:var(--accent);margin-top:auto;}
.mr-case-card__link{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit;}
.mr-case-card.is-featured{border-color:color-mix(in srgb,var(--lsp) 40%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--lsp) 20%,transparent);}

/* ---- Metrics ----------------------------------------------------------- */
.mr-metrics{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem;
  border:1px solid var(--border);border-radius:var(--radius-xl);background:color-mix(in srgb,var(--muted) 40%,transparent);padding:.75rem;}
.mr-metric{display:flex;flex-direction:column;}
.mr-metric__v{font-size:1.1rem;font-weight:500;color:var(--accent);}
.mr-metric__l{font-size:.75rem;color:var(--muted-foreground);}

/* ---- Trust strip ------------------------------------------------------- */
.mr-trust{border-block:1px solid var(--border);background:color-mix(in srgb,var(--muted) 35%,transparent);}
.mr-trust__list{display:flex;flex-wrap:wrap;gap:.5rem 1rem;list-style:none;margin:0;padding:1rem 1.25rem;}
.mr-trust__pill{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);
  border:1px solid var(--border);border-radius:9999px;padding:.25rem .7rem;}

/* ---- Filter + chips ---------------------------------------------------- */
.mr-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem;}
.mr-chip{border:1px solid var(--border);border-radius:9999px;padding:.5rem 1rem;font-size:.875rem;font-weight:500;
  background:transparent;color:var(--foreground);cursor:pointer;}
.mr-chip[data-tone]{--accent:initial;}
.mr-chip.is-active{background:var(--accent,var(--foreground));color:#fff;border-color:transparent;}
.mr-card.is-hidden{display:none;}

/* ---- Steps / data note ------------------------------------------------- */
.mr-steps{display:grid;gap:1.5rem;grid-template-columns:1fr;margin-block:2rem;}
@media(min-width:768px){.mr-steps{grid-template-columns:repeat(3,1fr);}}
.mr-step__n{font-size:.75rem;letter-spacing:.12em;color:var(--muted-foreground);}
.mr-step__title{font-size:1.25rem;margin-top:.25rem;}
.mr-datanote{margin-top:2rem;border:1px solid var(--border);border-radius:var(--radius-xl);
  background:color-mix(in srgb,var(--muted) 40%,transparent);padding:1rem 1.25rem;font-size:.9rem;color:var(--muted-foreground);}

/* ---- Detail (service + case) ------------------------------------------ */
.mr-detail{position:relative;}
.mr-detail__accent{height:4px;background:var(--accent);}
.mr-detail__head{padding-block:2.5rem 1.5rem;display:flex;flex-direction:column;gap:.75rem;}
.mr-detail__head--tint{background:var(--accent-tint);border-radius:0 0 var(--radius-2xl) var(--radius-2xl);padding-inline:2rem;}
.mr-detail__title{font-size:clamp(1.875rem,1.4rem+1.9vw,2.5rem);}
.mr-detail__lede{font-size:1.125rem;color:var(--muted-foreground);max-width:720px;}
.mr-detail__eyebrow,.mr-back{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted-foreground);text-decoration:none;}
.mr-detail__grid{display:grid;grid-template-columns:1fr;gap:2.5rem;padding-block:2rem 3.5rem;}
@media(min-width:1024px){.mr-detail__grid{grid-template-columns:1.3fr 1fr;}}
.mr-detail__section{margin-bottom:2rem;}
.mr-detail__section h2{font-size:1.5rem;margin-bottom:.5rem;}
.mr-detail__side{align-self:start;position:sticky;top:5rem;display:flex;flex-direction:column;gap:1.25rem;}
.mr-panel{border:1px solid var(--border);border-radius:var(--radius-2xl);padding:1.25rem;background:var(--card);}
.mr-panel--cta{background:var(--accent-tint);border-color:transparent;}
.mr-panel--metrics{display:grid;gap:.75rem;}
.mr-process__list{list-style:none;margin:0;padding:0;counter-reset:step;display:grid;gap:.5rem;}
.mr-process__list li{border:1px solid var(--border);border-radius:var(--radius-xl);padding:.6rem .9rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;}
.mr-book{border-left:3px solid var(--accent);background:var(--accent-tint);padding:1rem 1.25rem;border-radius:0 var(--radius-xl) var(--radius-xl) 0;}

/* ---- Contact form ------------------------------------------------------ */
.mr-form{display:flex;flex-direction:column;gap:1rem;max-width:640px;}
.mr-form__note{font-size:.75rem;color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.08em;}
.mr-field{display:flex;flex-direction:column;gap:.35rem;}
.mr-field__label{font-size:.85rem;font-weight:500;}
.mr-field input,.mr-field textarea{border:1px solid var(--border);border-radius:var(--radius-xl);
  padding:.6rem .75rem;background:var(--card);color:var(--foreground);font:inherit;}
.mr-field-row{display:grid;grid-template-columns:1fr;gap:1rem;}
@media(min-width:640px){.mr-field-row{grid-template-columns:repeat(2,1fr);}}
.mr-form__disabled{font-size:.75rem;color:var(--muted-foreground);}

/* ---- Language switch --------------------------------------------------- */
.mr-lang{border:1px solid var(--border);border-radius:9999px;padding:.3rem .7rem;font-size:.75rem;
  letter-spacing:.06em;text-decoration:none;color:var(--foreground);}
.mr-lang:hover{background:var(--muted);}

/* ---- Gallery + lightbox ------------------------------------------------ */
.mr-gallery{display:grid;gap:1rem;grid-template-columns:1fr;}
@media(min-width:640px){.mr-gallery{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1024px){.mr-gallery{grid-template-columns:repeat(3,1fr);}}
.mr-gallery__item{aspect-ratio:4/3;overflow:hidden;border-radius:var(--radius-xl);border:1px solid var(--border);cursor:zoom-in;background:var(--muted);}
.mr-gallery__item img{width:100%;height:100%;object-fit:cover;}
.mr-lightbox{position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
  background:rgba(0,0,0,.85);padding:2rem;}
.mr-lightbox.is-open{display:flex;}
.mr-lightbox img{max-width:100%;max-height:90vh;border-radius:.5rem;}
.mr-lightbox__close{position:absolute;top:1rem;right:1rem;color:#fff;background:none;border:0;font-size:2rem;cursor:pointer;}

/* ---- Blog TOC ---------------------------------------------------------- */
.mr-toc{display:none;}
@media(min-width:1024px){.mr-toc{display:block;position:fixed;top:6rem;right:1.5rem;z-index:30;max-width:16rem;}}
.mr-toc__ticks{display:flex;flex-direction:column;gap:.4rem;}
.mr-toc__tick{height:2px;width:1.5rem;background:var(--border);transition:width .2s,background .2s;}
.mr-toc a.is-active .mr-toc__tick{width:2.5rem;background:var(--lsp);}
.mr-toc__panel{display:none;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:.75rem 1rem;}
.mr-toc:hover .mr-toc__panel{display:block;}
.mr-toc:hover .mr-toc__ticks{display:none;}
.mr-toc a{display:block;font-size:.8rem;color:var(--muted-foreground);text-decoration:none;padding:.15rem 0;}
.mr-toc a.is-active{color:var(--foreground);}

/* ---- Placeholders ------------------------------------------------------ */
.mr-ph{display:flex;width:100%;height:100%;min-height:8rem;align-items:center;justify-content:center;
  border:1px dashed var(--border);border-radius:var(--radius-xl);
  background:repeating-linear-gradient(45deg,var(--muted),var(--muted) 10px,transparent 10px,transparent 20px);}
.mr-ph__label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted-foreground);text-align:center;padding:.5rem;}
.mr-empty{padding:2rem 0;color:var(--muted-foreground);}
.mr-toolph{border:1px dashed var(--border);border-radius:var(--radius-2xl);padding:2rem;text-align:center;margin-block:2rem;
  background:repeating-linear-gradient(45deg,var(--muted),var(--muted) 12px,transparent 12px,transparent 24px);}
.mr-toolph__bar{height:.5rem;border-radius:9999px;background:var(--muted);max-width:20rem;margin:0 auto 1rem;overflow:hidden;}
.mr-toolph__bar span{display:block;height:100%;width:35%;background:var(--accent);}
.mr-toolph__title{font-weight:500;margin-bottom:.5rem;}
.mr-toolph__text{color:var(--muted-foreground);max-width:34rem;margin:0 auto;font-size:.95rem;}

/* ---- Feature band ------------------------------------------------------ */
.mr-band{background:var(--accent-tint);padding-block:3.5rem;}
.mr-hero__grid{display:grid;gap:1rem;grid-template-columns:repeat(2,1fr);}
.mr-hero__grid .mr-ph,.mr-hero__grid img{aspect-ratio:1;border-radius:var(--radius-xl);object-fit:cover;}

/* Respect reduced motion */
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important;}}