/*
 * Identity layer for Ecommerce Repair Service.
 * Isolated to this replica; commercial copy and layout remain unchanged.
 */
:root {
  --navy:#123126; --navy-2:#184334; --navy-3:#205845;
  --ink:#173128; --paper:#F3F7F1; --muted:#63766B; --line:#D5E1D8;
  --blue:#168760; --blue-bright:#22A978; --cyan:#6BCB9A;
  --amber:#F0C34E; --danger:#D95F55;
  --soft-blue:#E2F3EA; --soft-cyan:#E8F7EE;
  --radius:14px;
  --sans:'Plus Jakarta Sans', sans-serif; --serif:'Plus Jakarta Sans', sans-serif;
  --shadow:0 28px 80px color-mix(in srgb, var(--navy) 18%, transparent);
}
body {font-family:var(--sans);}
h1,h2,.service-grid h3,.protocol-list h3,.specialist-card h3,.article-content>p,
.article-content>ul li,.article-content>ol li,.brand strong,.big-copy {font-family:var(--serif);}
.brand strong {font-family:var(--sans);font-weight:800;}
.brand-symbol {background:var(--navy);border-radius:var(--radius);color:#fff;}
.brand-symbol svg {width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:2.25;stroke-linecap:round;stroke-linejoin:round;}
.site-header {background:color-mix(in srgb, var(--paper) 92%, transparent);}
.hero,.page-hero,.article-head {
  background:linear-gradient(122deg,color-mix(in srgb,var(--paper) 94%,#fff),color-mix(in srgb,var(--soft-blue) 68%,var(--paper)));
}
.hero:before {background-image:linear-gradient(color-mix(in srgb,var(--blue) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--blue) 7%,transparent) 1px,transparent 1px);}
.hero:after,.page-hero:after,.article-head:after {border-color:color-mix(in srgb,var(--blue) 18%,transparent);}
.button-primary {box-shadow:0 14px 34px color-mix(in srgb,var(--blue) 28%,transparent);}
.button-primary:hover {background:var(--blue-bright);}
.header-cta-visible {background:var(--amber);border-color:color-mix(in srgb,var(--amber) 75%,var(--navy));color:var(--navy);box-shadow:0 10px 28px color-mix(in srgb,var(--amber) 28%,transparent);}
.header-cta-visible:hover {background:color-mix(in srgb,var(--amber) 82%,#fff);}
.evidence {background:color-mix(in srgb,var(--paper) 78%,var(--line));}
.faq {background:color-mix(in srgb,var(--paper) 92%,var(--line));}
.site-footer {background:color-mix(in srgb,var(--navy) 88%,#000);}
.footer-brand .brand-symbol {background:#fff;color:var(--navy);}
.specialist-card,.closing,.mobile-emergency,.trust-rail {background:var(--blue);}
.incident-console,.protocol {background:var(--navy);}
.service-grid>a,.post-grid article,.seo-check-grid article,.guide-hub-grid a {border-radius:calc(var(--radius) * .55);}
@media(max-width:600px) {
  .brand>span:last-child {max-width:190px;}
  .brand strong {overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
}


/* Sans-only hierarchy: identity is built with weight, scale and spacing. */
body {font-family:var(--sans);font-weight:400;}
h1,h2,h3,.big-copy,.article-content>p,.article-content>ul li,.article-content>ol li,
.service-grid h3,.protocol-list h3,.specialist-card h3 {
  font-family:var(--sans);
  font-style:normal;
}
h1 {font-weight:800;letter-spacing:-.06em;}
h2 {font-weight:750;letter-spacing:-.048em;}
h3,.service-grid h3,.protocol-list h3,.specialist-card h3 {font-weight:700;letter-spacing:-.035em;}
h1 em,h2 em,.hero h1 em,.blog-hero h1 em {
  font-family:var(--sans);
  font-weight:600;
  font-style:italic;
  letter-spacing:-.045em;
}
.big-copy,.article-content>p,.article-content>ul li,.article-content>ol li {
  font-weight:450;
  letter-spacing:-.018em;
}
.kicker,.button,.brand strong,.site-header nav a {font-family:var(--sans);font-weight:800;}

/* Layout differentiation v1 — 2026-07-27 */
@media (min-width: 901px) {
  .hero-grid{grid-template-columns:minmax(360px,.82fr) minmax(0,1.18fr);gap:64px}
  .hero-copy{order:2}.incident-console{order:1}
  .incident-console{border-radius:22px;transform:rotate(-1deg)}
  .proof-row{justify-content:flex-end}
  .section-heading{display:grid;grid-template-columns:1.25fr .75fr}
  .service-grid{grid-template-columns:1.15fr .85fr;border:0;gap:16px}
  .service-grid>a{border:1px solid var(--line);min-height:198px}
  .service-grid>a:first-child{grid-row:span 2;min-height:412px}
  .service-grid>a:not(:first-child){display:grid;grid-template-columns:55px 1fr;column-gap:20px}
  .service-grid>a:not(:first-child) .service-mark{display:none}
  .service-grid>a:not(:first-child) p,.service-grid>a:not(:first-child) strong{grid-column:2}
  .protocol-grid{grid-template-columns:1fr 1fr}
  .evidence-grid{grid-template-columns:.88fr 1.12fr}
}
.trust-rail span{text-align:center}.closing-grid{grid-template-columns:.8fr 1.2fr}
/* Console identity: store operations dashboard */
.incident-console{background:#fff;color:var(--navy);border:1px solid color-mix(in srgb,var(--cyan) 38%,var(--line));box-shadow:0 28px 65px color-mix(in srgb,var(--navy) 14%,transparent)}
.incident-console:before{background-image:linear-gradient(color-mix(in srgb,var(--cyan) 8%,transparent) 1px,transparent 1px);background-size:100% 48px}
.console-head{background:var(--navy);color:#b9d8d0}
.console-body{padding:26px}.console-label{color:var(--navy);font-weight:750}
.console-body>a{border:1px solid var(--line);border-radius:12px;margin-top:10px;padding:14px;background:color-mix(in srgb,var(--paper) 75%,#fff)}
.console-body>a:hover strong{color:var(--blue)}
.console-body small{color:var(--muted)}.console-body>a>b{color:var(--cyan)}
.console-icon{border:0;border-radius:10px;background:var(--soft-cyan);color:var(--blue)}
.console-foot{color:var(--muted);background:var(--soft-cyan);border-top:1px solid var(--line)}
/* Header/footer identity: commerce navigation and light closing */
@media (min-width:901px){
  .site-header{border-bottom:0}.header-inner{display:grid;grid-template-columns:auto 1fr auto;min-height:92px}
  .site-header nav{justify-self:center}.header-action{justify-self:end}
  .confidence-bar .wrap{justify-content:flex-start;gap:46px}
  .footer-lead{grid-template-columns:.8fr 1.2fr}.footer-grid{grid-template-columns:1fr 1fr 1fr}
}
.site-footer{background:var(--paper);color:var(--navy);border-top:1px solid var(--line)}
.footer-lead>div:last-child p,.footer-grid p,.footer-grid a,.footer-brand small{color:var(--muted)}
.footer-grid{border-top-color:var(--line)}.footer-grid a:hover{color:var(--blue)}
.footer-brand .brand-symbol{background:var(--navy);color:#fff}.footer-bottom{color:var(--muted);border-top-color:var(--line)}
@media (max-width: 900px) {
  .closing-grid{display:grid;grid-template-columns:1fr;text-align:left}
  .closing-grid>div:last-child{width:100%}
}