/* Shared visual system for ALSTER service pages. Loaded after page-specific CSS. */
:root{
  --bg:#f4f1e9;
  --surface:#fff;
  --surface-2:#edf1e4;
  --dark:#15251f;
  --text:#15251f;
  --muted:#5f6b65;
  --accent:#b8f36b;
  --accent-dark:#42672c;
  --line:rgba(21,37,31,.14);
  --radius:28px;
  --shadow:0 22px 60px rgba(21,37,31,.09);
}

html{overflow-x:hidden}
body.service-page{overflow-x:hidden;background:var(--bg);color:var(--text)}
.service-page .container{width:min(1180px,calc(100% - 44px))}
.service-page .section{padding:92px 0}
.service-page .section-soft{background:#edf1e4}
.service-page .section-dark{background:var(--dark);color:#f8f6ef}

/* Header */
.service-page .site-header{background:rgba(244,241,233,.92);border-bottom:1px solid rgba(21,37,31,.12);backdrop-filter:blur(18px)}
.service-page .nav-wrap{min-height:84px;gap:24px}
.service-page .brand-lockup{display:inline-flex;align-items:center;gap:11px;min-width:230px}
.service-page .brand-mark{display:grid;place-items:center;width:45px;height:45px;flex:0 0 45px}
.service-page .brand-mark img{display:block;width:100%;height:100%;object-fit:contain}
.service-page .brand-wording{display:grid;gap:1px;line-height:1}
.service-page .brand-wording strong{font-size:23px;letter-spacing:.19em;color:var(--ink,var(--text))}
.service-page .brand-wording small{font-size:7px;font-weight:800;letter-spacing:.085em;white-space:nowrap;color:var(--ink,var(--text))}
.service-page .brand-wording b{color:#6fbf25}
.service-page .nav{gap:24px}
.service-page .nav>a,.service-page .nav-dropbtn{color:var(--text);font-weight:700}
.service-page .nav-dropdown-menu{top:61px;border-radius:20px;border-color:var(--line);box-shadow:var(--shadow)}
.service-page .nav-dropdown-menu a:hover{background:rgba(184,243,107,.18)}

/* Type, controls and repeated elements */
.service-page h1,.service-page h2,.service-page h3{color:inherit}
.service-page h1{font-size:clamp(48px,5.6vw,76px);max-width:990px}
.service-page h2{font-size:clamp(34px,4vw,54px)}
.service-page .lead{font-size:20px;line-height:1.55;color:var(--muted)}
.service-page .eyebrow{color:var(--accent-dark);letter-spacing:.14em}
.service-page .eyebrow-light{color:var(--accent)}
.service-page .section-head{margin-bottom:34px}
.service-page .prose{line-height:1.65}
.service-page .button{min-height:52px;padding:0 23px;border-radius:999px}
.service-page .button-primary{background:var(--dark);color:#fff}
.service-page .button-primary:hover{background:#22362f}
.service-page .button-secondary,.service-page .button-ghost{border-color:rgba(21,37,31,.25);background:transparent}
.service-page .button-secondary:hover,.service-page .button-ghost:hover{background:var(--accent);border-color:var(--accent);color:var(--text)}
.service-page .back-link{margin-bottom:28px;color:var(--muted)}
.service-page .brand-slogan-mini span,
.service-page .hero-price,
.service-page .audit-hero-meta span,
.service-page .improvement-hero-meta span{border-color:rgba(21,37,31,.18);background:rgba(184,243,107,.14);color:var(--text)}

/* Hero */
.service-page .hero{position:relative;padding-top:72px;padding-bottom:78px;background:
  radial-gradient(circle at 88% 18%,rgba(184,243,107,.18),transparent 28%),var(--bg)}
.service-page .hero>.container{position:relative}
.service-page .hero-actions{margin-top:30px}
.service-page .hero-price{border-radius:999px}

/* Cards and structured content */
.service-page .service-list>div,
.service-page .cc-outcomes>div,
.service-page .scenario-card,
.service-page .practice-card,
.service-page .project-scope>div,
.service-page .price-box,
.service-page .readiness-side,
.service-page .system-result-grid article,
.service-page .expert-side>div,
.service-page .reporting-card,
.service-page .budget-card,
.service-page .system-price-box,
.service-page .post-launch-links>a,
.service-page .post-launch-links>div,
.service-page .single-task-note,
.service-page .amo-dev-card,
.service-page .amo-example,
.service-page .amo-license-card,
.service-page .case-card,
.service-page .faq-item,
.service-page .price-list-variable{
  border:1px solid var(--line);
  border-radius:22px;
  background:#fff;
  box-shadow:none;
}
.service-page .service-price-box,
.service-page .system-result-line,
.service-page .included-highlight,
.service-page .sequence-final{background:rgba(184,243,107,.2);border:1px solid rgba(66,103,44,.2)}
.service-page .price-list-row{border-color:var(--line)}
.service-page .price-list-row[href]{transition:background .2s ease,padding .2s ease}
.service-page .price-list-row[href]:hover{background:rgba(184,243,107,.15);padding-left:16px;padding-right:16px}
.service-page .related-links{gap:10px}
.service-page .related-links a{border:1px solid rgba(184,243,107,.3);background:rgba(255,255,255,.07);color:#fff;border-radius:999px;text-align:center}
.service-page .related-links a:hover{background:var(--accent);border-color:var(--accent);color:var(--text)}
.service-page .service-crosslink.system-related-service{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:28px;
  align-items:center;
  min-height:0;
  padding:20px 22px;
  border:1px solid var(--line);
  border-radius:16px;
  background:transparent;
}
.service-page .service-crosslink.system-related-service span{
  display:block;
  margin:0;
  color:var(--text);
  font-size:15px;
  font-weight:800;
  line-height:1.4;
  text-transform:none;
  letter-spacing:0;
}
.service-page .service-crosslink.system-related-service a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 18px;
  border:1px solid rgba(21,37,31,.24);
  border-radius:999px;
  color:var(--text);
  font-size:14px;
  font-weight:800;
  line-height:1.35;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .2s ease;
}
.service-page .service-crosslink.system-related-service a:hover{
  background:var(--accent);
  border-color:var(--accent);
  color:var(--text);
  transform:translateY(-1px);
}
.service-page .faq-item{padding-left:20px;padding-right:20px}
.service-page .faq-item p{color:var(--muted)}
.service-page .section-dark .faq-item{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13)}
.service-page .section-dark .faq-item p{color:#c2cbc6}

/* Existing handwritten notes, kept rare and consistent */
.service-page .note-inline,
.service-page .telegram-note{border:1px solid rgba(184,243,107,.42);border-radius:14px;background-color:#f1f5e8;background-image:linear-gradient(rgba(21,37,31,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(21,37,31,.045) 1px,transparent 1px);background-size:18px 18px;color:#36522b}
.service-page .section-dark .note-inline,
.service-page .note-inline.dark{background-color:rgba(255,255,255,.08);background-image:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px);border-color:rgba(184,243,107,.45);color:#e7f8d4}

/* Final CTA and footer */
.service-page .contact-section{background:var(--dark);color:#f8f6ef}
.service-page .contact-section h2,.service-page .contact-section h3{color:#fff}
.service-page .contact-section p:not(.telegram-note){color:#c4cec8}
.service-page .contact-section .button-primary,
.service-page .telegram-cta{background:var(--accent);color:var(--text);border-color:var(--accent)}
.service-page .contact-section .button-primary:hover,
.service-page .telegram-cta:hover{background:#c6fa82}
.service-page .footer{background:var(--dark);border-top:1px solid rgba(255,255,255,.12);color:#aebbb5}

/* Shared product Hero: visual standard is the sales-department page. */
.service-page .product-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.16fr) minmax(340px,.84fr);
  gap:clamp(48px,7vw,90px);
  align-items:center;
}
.service-page .product-hero-copy{min-width:0}
.service-page .product-hero-facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  overflow:hidden;
  border-radius:28px;
  background:#26342d;
  color:#f7f5ee;
  box-shadow:7px 7px 0 rgba(105,132,119,.48);
  transform:rotate(-.35deg);
}
.service-page .product-hero-facts>div{
  min-height:132px;
  padding:24px 22px;
  border-right:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.service-page .product-hero-facts>div:nth-child(2n){border-right:0}
.service-page .product-hero-facts>div:nth-last-child(-n+2){border-bottom:0}
.service-page .product-hero-facts span{
  display:block;
  margin-bottom:13px;
  color:rgba(247,245,238,.62);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.service-page .product-hero-facts strong{
  display:block;
  font-size:clamp(17px,1.55vw,22px);
  line-height:1.25;
}

@media(max-width:980px){
  .service-page .product-hero-grid{
    grid-template-columns:1fr;
    gap:38px;
  }
  .service-page .product-hero-facts{width:min(100%,680px)}
}

@media(max-width:700px){
  .service-page .product-hero-grid{gap:30px}
  .service-page .product-hero-facts{
    box-shadow:7px 7px 0 var(--accent);
    transform:none;
  }
  .service-page .product-hero-facts>div{
    min-height:106px;
    padding:18px 15px;
  }
  .service-page .product-hero-facts span{
    margin-bottom:9px;
    font-size:9px;
  }
  .service-page .product-hero-facts strong{font-size:15px}
}

@media(max-width:980px){
  .service-page .nav-wrap{min-height:76px}
  .service-page .brand-lockup{min-width:auto}
  .service-page .mobile-nav{background:var(--bg);border-color:var(--line)}
  .service-page .mobile-service-links a{font-size:14px;color:var(--muted)}
}

@media(max-width:640px){
  .service-page .container{width:min(100% - 28px,1180px)}
  .service-page .section{padding:54px 0}
  .service-page .hero{padding-top:44px;padding-bottom:50px}
  .service-page .hero h1{font-size:clamp(37px,11vw,48px);line-height:1.04}
  .service-page h2{font-size:clamp(29px,9vw,38px)}
  .service-page .lead{font-size:17px}
  .service-page .brand-mark{width:38px;height:38px;flex-basis:38px}
  .service-page .brand-wording strong{font-size:20px}
  .service-page .brand-wording small{display:none}
  .service-page .section-head{margin-bottom:22px}
  .service-page .button{width:100%}
  .service-page .hero-actions{display:grid;width:100%}
  .service-page .price-list-row[href]:hover{padding-left:0;padding-right:0}
  .service-page .related-links{grid-template-columns:1fr}
  .service-page .service-crosslink.system-related-service{
    grid-template-columns:1fr;
    gap:14px;
    padding:14px 15px;
  }
  .service-page .service-crosslink.system-related-service a{
    width:100%;
    min-height:44px;
    white-space:normal;
  }
}

/* Call-center header uses the approved product-page header without changing other pages. */
.call-center-page .site-header{
  background:rgba(248,246,240,.94);
  border-bottom:1px solid rgba(21,37,31,.1);
  box-shadow:0 8px 24px rgba(21,37,31,.035);
}
.call-center-page .nav-wrap{
  min-height:78px;
  gap:30px;
}
.call-center-page .brand-lockup{
  flex-direction:row;
  align-items:center;
  gap:9px;
  min-width:218px;
}
.call-center-page .brand-mark{
  display:block;
  width:54px;
  height:40px;
  flex:0 0 54px;
}
.call-center-page .brand-mark img{
  display:block;
  width:100%;
  max-width:100%;
  height:100%;
  object-fit:contain;
}
.call-center-page .brand-wording{
  display:flex;
  flex-direction:column;
  gap:5px;
  line-height:normal;
}
.call-center-page .brand-lockup .brand-wording strong{
  font-size:25px;
  line-height:.9;
  letter-spacing:.08em;
  color:var(--text);
}
.call-center-page .brand-lockup .brand-wording small{
  font-size:7px;
  font-weight:400;
  line-height:1;
  letter-spacing:.075em;
  white-space:nowrap;
  color:#55645e;
}
.call-center-page .brand-wording small b{color:var(--accent-dark)}
.call-center-page .brand-slogan-mini{display:none}

@media(max-width:980px){
  .call-center-page .nav-wrap{min-height:70px}
  .call-center-page .brand-lockup{min-width:142px;gap:7px}
  .call-center-page .brand-mark{width:42px;height:31px;flex-basis:42px}
  .call-center-page .brand-lockup .brand-wording strong{font-size:21px}
  .call-center-page .brand-lockup .brand-wording small{display:none}
}