/* ==========================================================================
   Lorova · shared design system · v2
   Derived from the brand deck: Cloud canvas, ultraviolet washes, Deep Plum
   bands, deck panels (1px line, 36px radius, soft plum shadow), Familjen
   eyebrows at .32em tracking, gradient strictly Orchid Pop to Ultraviolet.
   Plain CSS, no build step. Page-specific styles live inside each page.
   ========================================================================== */

/* Self-hosted variable fonts */
@font-face{
  font-family:'Manrope';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('/assets/fonts/manrope-latin-wght-normal.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Familjen Grotesk';
  font-style:normal;
  font-display:swap;
  font-weight:400 700;
  src:url('/assets/fonts/familjen-grotesk-latin-wght-normal.woff2') format('woff2-variations');
}

/* Tokens */
:root{
  --pop:#F03FA8;        /* Orchid Pop · signature A */
  --uv:#A97CFF;         /* Ultraviolet · signature B */
  --plum:#241430;       /* Deep Plum · ink and dark bands */
  --cloud:#FBFAFE;      /* Cloud · canvas */
  --lav:#F4EFFC;        /* Lavender Milk · support */
  --blush:#F9D9EB;      /* Blush · support */
  --cream:#FBF4EA;      /* Cream · text on plum */
  --pink:#D42B8E;       /* on-light accent cut */
  --violet:#7C4BE8;     /* on-light accent cut */
  --ink:#241430;
  --body:#555062;
  --muted:#8A8499;
  --line:#E9E5F2;
  --plum-line:rgba(251,244,234,.18);
  --plum-soft:#B7AECB;
  --grad:linear-gradient(135deg,var(--pop),var(--uv));
  --grad-h:linear-gradient(90deg,var(--pop),var(--uv));
  --radius:26px;
  --radius-lg:36px;
  --shadow-card:0 18px 54px rgba(33,26,46,.09);
  --shadow-lift:0 26px 64px rgba(33,26,46,.13);
  --shadow-glow:0 16px 40px rgba(240,63,168,.28);
  --container:1180px;
}

/* Base */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:'Manrope','Segoe UI',system-ui,-apple-system,sans-serif;
  font-size:17px;
  font-weight:450;
  line-height:1.65;
  color:var(--ink);
  background:var(--cloud);
}
img{max-width:100%;height:auto}
h1,h2,h3{margin:0 0 20px;font-weight:800;line-height:1.06}
h1{font-size:clamp(42px,7.2vw,88px);letter-spacing:-0.03em;line-height:1.02}
h2{font-size:clamp(30px,4.6vw,52px);letter-spacing:-0.02em}
h3{font-size:20px;letter-spacing:-0.005em;line-height:1.25;margin-bottom:8px}
p{margin:0 0 16px}
p:last-child{margin-bottom:0}
a{color:var(--violet);text-decoration-thickness:1.5px;text-underline-offset:3px}
a:hover{color:var(--pink)}
:focus-visible{outline:3px solid var(--violet);outline-offset:3px;border-radius:6px}
::selection{background:var(--blush);color:var(--plum)}

.visually-hidden{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--plum);color:var(--cream);font-weight:700;
  padding:12px 20px;border-radius:0 0 14px 0;text-decoration:none;
}
.skip-link:focus{left:0}

/* Layout */
.container{max-width:var(--container);margin:0 auto;padding:0 28px}
.section{padding:104px 0}
.section-head{max-width:780px;margin-bottom:52px}
.section-head h2{margin-bottom:16px}
.section-head--row{
  max-width:none;display:flex;align-items:flex-end;justify-content:space-between;
  gap:32px;
}
.section-head--row .head-main{max-width:780px}
.head-aside{
  font-family:'Familjen Grotesk','Manrope',sans-serif;
  font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);white-space:nowrap;padding-bottom:10px;
}
.lead{font-size:clamp(18px,2.2vw,22px);line-height:1.55;color:var(--body)}
.prose{max-width:70ch}
.prose h2{font-size:clamp(25px,3.4vw,34px);margin:0 0 14px}
.prose p{color:var(--body)}

/* Eyebrow · deck tracking */
.eyebrow{
  font-family:'Familjen Grotesk','Manrope',sans-serif;
  font-weight:700;font-size:13px;letter-spacing:.32em;text-transform:uppercase;
  color:var(--pink);margin:0 0 18px;
}
.eyebrow--violet{color:var(--violet)}
.eyebrow--uv{color:var(--uv)}

/* Gradient rule · Orchid Pop to Ultraviolet only */
.grule{height:4px;border-radius:99px;background:var(--grad-h)}

/* Status chip */
.chip{
  display:inline-flex;align-items:center;gap:10px;
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 19px;font-size:13.5px;font-weight:700;color:var(--body);
  box-shadow:0 8px 24px rgba(33,26,46,.07);
}
.chip::before{
  content:"";flex:0 0 auto;width:9px;height:9px;border-radius:50%;
  background:var(--grad);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border-radius:999px;padding:16px 30px;
  font-family:inherit;font-size:16px;font-weight:800;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,color .16s ease;
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{background:var(--plum);color:#fff}
.btn--primary:hover{color:#fff;box-shadow:0 14px 32px rgba(36,20,48,.28)}
.btn--ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--violet);color:var(--violet)}
.btn--cream{background:var(--cream);color:var(--plum)}
.btn--cream:hover{color:var(--plum);box-shadow:var(--shadow-glow)}
.text-link{font-weight:700;color:var(--violet)}
.text-link:hover{color:var(--pink)}

/* Numbered dot · echoes the guide page */
.num{
  width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  background:var(--grad);color:#fff;
  font-weight:800;font-size:13px;line-height:1;
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:18px;
}

/* Header */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(251,250,254,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  min-height:80px;
}
.brand{display:inline-flex;align-items:center;border-radius:8px}
.site-header .brand img{width:140px;display:block}
.site-nav{display:flex;align-items:center;gap:30px}
.site-nav a{font-size:15px;font-weight:700;color:var(--ink);text-decoration:none}
.site-nav a:hover{color:var(--pink)}
.site-nav a[aria-current="page"]{color:var(--pink)}

/* Decorative washes · Orchid Pop and Ultraviolet at low opacity */
.wash{
  background:
    radial-gradient(ellipse 62% 58% at 82% -4%, rgba(169,124,255,.24), transparent 62%),
    radial-gradient(ellipse 52% 48% at 4% 104%, rgba(240,63,168,.13), transparent 60%),
    var(--cloud);
}

/* Deck panel · white, hairline, 36px radius, soft plum shadow */
.panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
}
.panel--wash{
  background:
    radial-gradient(ellipse 60% 55% at 12% 0%, rgba(169,124,255,.16), transparent 60%),
    radial-gradient(ellipse 55% 50% at 88% 100%, rgba(240,63,168,.12), transparent 60%),
    #fff;
}
.panel--lav{
  background:
    radial-gradient(ellipse 60% 55% at 88% 0%, rgba(169,124,255,.14), transparent 60%),
    radial-gradient(ellipse 55% 50% at 8% 100%, rgba(240,63,168,.08), transparent 60%),
    var(--lav);
  border:1px solid #E4DCF3;
}

/* Deep Plum band with washes and the linked O watermark */
.band-plum{
  position:relative;overflow:hidden;
  background:
    radial-gradient(ellipse 62% 58% at 82% 0%, rgba(169,124,255,.30), transparent 62%),
    radial-gradient(ellipse 55% 50% at 8% 100%, rgba(240,63,168,.16), transparent 60%),
    var(--plum);
  color:var(--cream);
  padding:104px 0;
}
.band-plum h2{color:var(--cream)}
.band-plum p{color:var(--plum-soft)}
.band-plum .lead{color:var(--plum-soft)}
.band-plum .container{position:relative;z-index:1}
.band-plum > .watermark{
  position:absolute;right:-130px;bottom:-150px;width:540px;height:auto;
  opacity:.08;pointer-events:none;user-select:none;
}

/* Cards */
.card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-card);
}
.card h3{margin-bottom:8px}
.card p{margin:0;color:var(--body);font-size:15.5px;line-height:1.62}
.card-grid{display:grid;gap:24px}
.card-grid--2{grid-template-columns:repeat(2,1fr)}
.card-grid--3{grid-template-columns:repeat(3,1fr)}
.card-grid--4{grid-template-columns:repeat(4,1fr)}
.card-grid .card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.card-grid .card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift);border-color:#DED6EE}

/* Honesty callout · quiet, like the guide's soft note */
.callout{
  border-left:4px solid var(--uv);background:var(--lav);
  border-radius:0 14px 14px 0;
  padding:16px 22px;font-size:15.5px;line-height:1.6;color:var(--body);
}

/* Company facts */
.facts-card{padding:40px}
.facts-card h2{font-size:24px;letter-spacing:-0.01em;margin-bottom:24px}
.facts-card dl{margin:0;display:grid;gap:19px}
.facts-card dt{
  font-family:'Familjen Grotesk','Manrope',sans-serif;
  font-weight:700;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);
}
.facts-card dd{margin:4px 0 0;font-weight:600;font-size:16px;color:var(--ink)}

/* Shared interior page hero */
.page-hero{padding:64px 0 72px}
.page-hero .grule{margin-bottom:44px}
.page-hero h1{font-size:clamp(36px,5.8vw,66px);margin-bottom:18px}
.page-hero .lead{max-width:62ch}
.page-hero .eyebrow{margin-bottom:16px}

/* Footer · deck cover close */
.site-footer{background:var(--plum);color:var(--plum-soft);padding:72px 0 48px;font-size:14.5px}
.site-footer .top{
  display:flex;justify-content:space-between;align-items:center;gap:34px;flex-wrap:wrap;
  padding-bottom:36px;border-bottom:1px solid var(--plum-line);margin-bottom:36px;
}
.site-footer .brand img{width:172px;display:block}
.footer-nav{display:flex;gap:12px 30px;flex-wrap:wrap}
.footer-nav a{color:var(--cream);font-weight:600;text-decoration:none}
.footer-nav a:hover{color:#fff;text-decoration:underline}
.site-footer .mid{
  display:flex;justify-content:space-between;align-items:baseline;gap:24px;flex-wrap:wrap;
  margin-bottom:36px;
}
.site-footer .motto{
  margin:0;color:var(--cream);font-weight:800;
  font-size:clamp(22px,3vw,30px);letter-spacing:-0.015em;
}
.site-footer .house{
  margin:0;font-family:'Familjen Grotesk','Manrope',sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--plum-soft);
}
.site-footer .legal{font-size:13.5px;line-height:1.7;max-width:74ch;margin:0 0 8px}
.site-footer .copyright{font-size:13.5px;margin:0}

/* Scroll-reveal · classes applied by JS only, nothing hides without it */
.will-reveal{opacity:0;transform:translateY(20px)}
.will-reveal.is-in{
  opacity:1;transform:none;
  transition:opacity .65s cubic-bezier(.2,.6,.2,1),transform .65s cubic-bezier(.2,.6,.2,1);
}
@media (prefers-reduced-motion:reduce){
  .will-reveal{opacity:1;transform:none;transition:none}
  .btn,.card-grid .card{transition:none}
  .btn:hover,.card-grid .card:hover{transform:none}
}

/* Responsive */
@media (max-width:980px){
  .card-grid--3,.card-grid--4{grid-template-columns:1fr 1fr}
  .section{padding:76px 0}
  .band-plum{padding:84px 0}
}
@media (max-width:720px){
  .section-head--row{flex-direction:column;align-items:flex-start;gap:6px}
  .head-aside{padding-bottom:0}
}
@media (max-width:640px){
  .section{padding:64px 0}
  .band-plum{padding:72px 0}
  .band-plum > .watermark{width:380px;right:-110px;bottom:-120px}
  .page-hero{padding:44px 0 56px}
  .page-hero .grule{margin-bottom:34px}
  .card-grid--2,.card-grid--3,.card-grid--4{grid-template-columns:1fr}
  .card{padding:26px 24px}
  .facts-card{padding:30px 26px}
  .site-footer .top{flex-direction:column;align-items:flex-start;gap:26px}
  .site-footer .brand img{width:150px}
}
@media (max-width:480px){
  .site-header .brand img{width:116px}
  .site-nav{gap:16px}
  .site-nav a{font-size:14px}
  .container{padding:0 20px}
}