/* ============================================================
   SOLVICRAFT LEATHER — MASTER DESIGN SYSTEM
   Tactile leather ambiance · pronounced 3D · real glassmorphism
   ============================================================ */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  /* Leather palette */
  --hide-900: #1C110A;
  --hide-800: #2A1A12;
  --hide-700: #3D2718;
  --hide-600: #452B1B;
  --hide-500: #6D4522;
  --brand:    #8B5A2B;
  --brand-lt: #A9743C;
  --tan-200:  #D9BFA1;
  --tan-100:  #F0E2D0;
  --cream:    #FCFAF8;
  --parchment:#FBF6EF;
  --linen:    #F5EBE1;

  /* Metal accents */
  --brass:      #B8862B;
  --brass-lt:   #D9A94A;
  --brass-glow: rgba(184, 134, 43, 0.38);

  /* Semantic */
  --success: #2C7A5A;
  --warning: #B47A1E;
  --danger:  #A63A22;
  --info:    #4A6B8A;

  /* Text */
  --ink:      #2A1A12;
  --ink-soft: #5C4632;
  --ink-mute: #9C8571;

  /* Glass */
  --glass-light: rgba(255, 255, 255, 0.72);
  --glass-warm:  rgba(251, 246, 239, 0.78);
  --glass-dark:  rgba(28, 17, 10, 0.62);
  --glass-brd:   rgba(255, 255, 255, 0.85);
  --glass-brd-d: rgba(217, 191, 161, 0.28);
  --blur:        24px;
  --blur-heavy:  40px;

  /* Elevation — warm-tinted, never grey */
  --lift-1: 0 2px 4px rgba(42,26,18,.08), 0 4px 10px rgba(42,26,18,.06);
  --lift-2: 0 4px 8px rgba(42,26,18,.10), 0 10px 24px rgba(42,26,18,.10);
  --lift-3: 0 8px 16px rgba(42,26,18,.12), 0 22px 48px rgba(42,26,18,.14);
  --lift-4: 0 14px 28px rgba(42,26,18,.16), 0 40px 80px rgba(42,26,18,.20);
  --lift-5: 0 24px 48px rgba(42,26,18,.20), 0 64px 120px rgba(42,26,18,.26);
  --inset-top: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(139,90,43,.08);
  --inset-deep: inset 0 2px 8px rgba(28,17,10,.12);

  /* Geometry */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-xl: 26px;
  --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --t-fast: .18s;
  --t-med: .32s;
  --t-slow: .6s;

  /* Type */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

/* ---------- 2. RESET & BASE ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.65;
  overflow-x: hidden;
  background:
    radial-gradient(ellipse 1200px 800px at 15% -5%, rgba(217,191,161,.30), transparent 60%),
    radial-gradient(ellipse 1000px 700px at 90% 8%, rgba(184,134,43,.16), transparent 55%),
    radial-gradient(ellipse 900px 600px at 50% 100%, rgba(139,90,43,.14), transparent 60%),
    linear-gradient(180deg,#FDFBF9,#F7EFE6 55%,#FDFBF9);
  background-attachment: fixed;
}

body.sc-grain::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .85;
  background-image:
    repeating-conic-gradient(from 0deg at 50% 50%, rgba(139,90,43,.028) 0deg 12deg, transparent 12deg 24deg),
    radial-gradient(circle at 20% 25%, rgba(69,43,27,.05) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 65% 55%, rgba(139,90,43,.045) 0 1.5px, transparent 1.6px),
    radial-gradient(circle at 85% 80%, rgba(69,43,27,.04) 0 1.5px, transparent 1.6px);
  background-size: 180px 180px, 38px 38px, 52px 52px, 29px 29px;
}

h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  color: var(--hide-800);
  margin: 0 0 .5em;
  line-height: 1.22;
  letter-spacing: -.01em;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
input, select, button, textarea { font-family: inherit; font-size: inherit; }

/* ---------- 3. TYPE SCALE ---------- */
.sc-display { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 4rem); font-weight: 700; }
.sc-h1 { font-family: var(--font-display); font-size: clamp(1.9rem, 3.4vw, 2.8rem); font-weight: 700; }
.sc-h2 { font-family: var(--font-display); font-size: clamp(1.5rem, 2.4vw, 2.1rem); font-weight: 600; }
.sc-h3 { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; }
.sc-lead { font-size: 1.06rem; color: var(--ink-soft); font-weight: 300; }
.sc-body { font-size: .95rem; }
.sc-small { font-size: .82rem; color: var(--ink-soft); }
.sc-micro { font-size: .7rem; color: var(--ink-mute); }

.sc-eyebrow {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--brand);
  display: block;
}

.sc-gild {
  background: linear-gradient(100deg, var(--hide-800) 0%, var(--brand) 45%, var(--brass-lt) 72%, var(--brand) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sc-rule {
  height: 1px;
  border: 0;
  background: linear-gradient(90deg, transparent, var(--tan-200) 22%, var(--brand) 50%, var(--tan-200) 78%, transparent);
  margin: 1.6rem 0;
}

/* ---------- 4. GLASS SURFACES ---------- */
.sc-glass, .sc-glass-warm {
  position: relative;
  background: linear-gradient(150deg, rgba(255,255,255,.82), rgba(255,255,255,.52));
  -webkit-backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.06);
  backdrop-filter: blur(var(--blur)) saturate(200%) brightness(1.06);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: var(--r-lg);
  box-shadow:
    var(--lift-4),
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -20px 40px -20px rgba(139,90,43,.10);
}
.sc-glass::before, .sc-glass-warm::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(150deg, rgba(255,255,255,.55) 0%, transparent 32%, transparent 70%, rgba(184,134,43,.09) 100%);
}

.sc-glass-dark {
  background: linear-gradient(150deg, rgba(42,26,18,.72), rgba(28,17,10,.58));
  -webkit-backdrop-filter: blur(var(--blur-heavy)) saturate(180%);
  backdrop-filter: blur(var(--blur-heavy)) saturate(180%);
  border: 1px solid rgba(217,191,161,.28);
  border-radius: var(--r-lg);
  color: var(--tan-100);
  box-shadow: var(--lift-5), inset 0 1px 0 rgba(217,191,161,.22);
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .sc-glass, .sc-glass-warm { background: rgba(255,255,255,.97); }
  .sc-glass-dark { background: var(--hide-900); }
}

/* ---------- 5. 3D CARDS ---------- */
.sc-card {
  position: relative;
  background: linear-gradient(165deg,#fff,#FDFAF6);
  border: 1px solid var(--linen);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-2), var(--inset-top);
  transition: transform var(--t-med) var(--ease-out),
              box-shadow var(--t-med) var(--ease-out),
              border-color var(--t-med) var(--ease-soft);
  will-change: transform;
}
.sc-card:hover {
  transform: translateY(-10px);
  box-shadow: var(--lift-4), 0 0 0 1px rgba(184,134,43,.22);
  border-color: var(--tan-200);
}

.sc-tilt { perspective: 1600px; }
.sc-tilt > .sc-tilt-plane {
  transition: transform var(--t-med) var(--ease-out), box-shadow var(--t-med) var(--ease-out);
  transform-style: preserve-3d;
}
.sc-tilt:hover > .sc-tilt-plane {
  transform: rotateX(3deg) rotateY(-3.5deg) translateY(-10px) scale(1.02);
  box-shadow: var(--lift-5);
}

.sc-sheen { position: relative; overflow: hidden; }
.sc-sheen::after {
  content: '';
  position: absolute;
  top: 0; left: -120%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform: skewX(-18deg);
  transition: left var(--t-slow) var(--ease-out);
  pointer-events: none;
}
.sc-sheen:hover::after { left: 130%; }

.sc-float-shadow { position: relative; }
.sc-float-shadow::after {
  content: '';
  position: absolute;
  left: 8%; right: 8%; bottom: -22px; height: 26px;
  background: radial-gradient(ellipse at center, rgba(42,26,18,.30), transparent 72%);
  filter: blur(14px);
  opacity: 0;
  transition: opacity var(--t-med) var(--ease-out), transform var(--t-med) var(--ease-out);
  z-index: -1;
}
.sc-float-shadow:hover::after { opacity: 1; transform: scale(1.08); }

.sc-emboss {
  background: linear-gradient(160deg,#FFFDFB,#F6EDE3);
  border: 1px solid rgba(217,191,161,.7);
  border-radius: var(--r-md);
  box-shadow: var(--lift-2), var(--inset-top);
}
.sc-deboss {
  background: linear-gradient(160deg, var(--linen), var(--parchment));
  border: 1px solid rgba(139,90,43,.22);
  border-radius: var(--r-md);
  box-shadow: var(--inset-deep);
}

.sc-stitch { position: relative; border-radius: var(--r-lg); }
.sc-stitch::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1.5px dashed rgba(217,191,161,.85);
  border-radius: calc(var(--r-lg) - 5px);
  pointer-events: none;
}
.sc-stitch-brass::before { border-color: rgba(184,134,43,.5); }

/* ---------- 6. BUTTONS ---------- */
.sc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  padding: .85rem 1.7rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 0;
  border-radius: var(--r-sm);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
  transition: transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background var(--t-fast) var(--ease-soft);
}
.sc-btn:active { transform: translateY(1px) scale(.995); }

.sc-btn-primary {
  background: linear-gradient(168deg,#4A2F1D 0%, var(--hide-800) 48%, #150C06 100%);
  color: var(--tan-100);
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(217,191,161,.35), inset 0 -2px 6px rgba(0,0,0,.35);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.sc-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-4), 0 0 28px var(--brass-glow), inset 0 1px 0 rgba(217,191,161,.45);
}

.sc-btn-brass {
  background: linear-gradient(168deg,#E8C368 0%, var(--brass-lt) 35%, var(--brass) 70%, #8A6318 100%);
  color: #fff;
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.6), inset 0 -2px 6px rgba(0,0,0,.25);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sc-btn-brass:hover {
  transform: translateY(-3px);
  box-shadow: var(--lift-4), 0 0 30px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,.7);
}

.sc-btn-ghost {
  background: rgba(255,255,255,.5);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--hide-800);
  border: 1.5px solid var(--hide-800);
  box-shadow: var(--lift-1);
}
.sc-btn-ghost:hover {
  background: var(--hide-800);
  color: var(--tan-100);
  transform: translateY(-3px);
  box-shadow: var(--lift-3);
}

.sc-btn-glass {
  background: linear-gradient(150deg, rgba(255,255,255,.85), rgba(255,255,255,.55));
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  backdrop-filter: blur(16px) saturate(180%);
  color: var(--hide-800);
  border: 1px solid rgba(255,255,255,.85);
  box-shadow: var(--lift-2), inset 0 1px 0 rgba(255,255,255,.9);
}
.sc-btn-glass:hover { transform: translateY(-3px); box-shadow: var(--lift-3); }

.sc-btn-danger {
  background: linear-gradient(168deg,#D45A3C,#C04A2E 45%,#7E2A18);
  color: #fff;
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sc-btn-danger:hover { transform: translateY(-3px); box-shadow: var(--lift-4); }

.sc-btn-success {
  background: linear-gradient(168deg,#42B489,#369A70 45%,#1E5A41);
  color: #fff;
  box-shadow: var(--lift-3), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.3);
}
.sc-btn-success:hover { transform: translateY(-3px); box-shadow: var(--lift-4); }

.sc-btn:disabled, .sc-btn[disabled] {
  background: var(--linen);
  color: var(--ink-mute);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
  text-shadow: none;
}
.sc-btn-sm { padding: .5rem 1rem; font-size: .66rem; }
.sc-btn-lg { padding: 1.05rem 2.2rem; font-size: .8rem; }
.sc-btn-block { width: 100%; }

/* ---------- 7. FORMS ---------- */
.sc-field { margin-bottom: 1.1rem; }
.sc-label {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--brand);
  margin-bottom: .45rem;
}
.sc-label .sc-req { color: var(--danger); margin-left: 2px; }

.sc-input, .sc-select, .sc-textarea {
  width: 100%;
  padding: .8rem 1rem;
  font-size: .9rem;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--tan-200);
  border-radius: var(--r-sm);
  box-shadow: var(--inset-deep);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.sc-input:focus, .sc-select:focus, .sc-textarea:focus {
  outline: 0;
  border-color: var(--brand);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(139,90,43,.15), var(--inset-deep);
}
.sc-input::placeholder, .sc-textarea::placeholder { color: var(--ink-mute); }
.sc-input.sc-invalid, .sc-select.sc-invalid, .sc-textarea.sc-invalid {
  border-color: var(--danger);
  box-shadow: 0 0 0 4px rgba(166,58,34,.14);
}
.sc-textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

.sc-select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg xmlns='http://www.w3.org/2000/svg' width='292' height='292'%3E%3Cpath fill='%238B5A2B' d='M287 69.4a17.6 17.6 0 0 0-13-5.4H18.4c-5 0-9.3 1.8-12.9 5.4A17.6 17.6 0 0 0 0 82.2c0 5 1.8 9.3 5.4 12.9l128 127.9c3.6 3.6 7.8 5.4 12.8 5.4s9.2-1.8 12.8-5.4L287 95c3.5-3.5 5.4-7.8 5.4-12.8 0-5-1.9-9.2-5.5-12.8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  background-size: .6rem;
  padding-right: 2.4rem;
}
.sc-help { font-size: .72rem; color: var(--ink-mute); margin-top: .35rem; }
.sc-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.sc-row-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 700px) { .sc-row-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sc-row-2, .sc-row-3 { grid-template-columns: 1fr; } }

/* ---------- 8. BADGES ---------- */
.sc-badge {
  display: inline-flex; align-items: center; gap: .35rem;
  padding: .28rem .7rem;
  font-size: .63rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  box-shadow: var(--lift-1);
}
.sc-badge-neutral    { background: var(--linen); color: var(--hide-600); border-color: var(--tan-200); }
.sc-badge-placed     { background:#EAF1F8; color:#2E5A87; border-color:#CFE0EF; }
.sc-badge-processing { background:#FBF2DE; color:#7A5C1E; border-color:#EBD9AE; }
.sc-badge-shipped    { background:#EDE7F6; color:#553C8B; border-color:#D5C9EC; }
.sc-badge-delivered  { background:#E3F3EC; color:#1F6B4E; border-color:#BFE3D3; }
.sc-badge-cancelled  { background:#F8E6E1; color:#8A3320; border-color:#EBC8BE; }
.sc-badge-brass      { background: linear-gradient(150deg, var(--brass-lt), var(--brass)); color:#fff; border-color: rgba(255,255,255,.3); }
.sc-badge-dark       { background: linear-gradient(150deg, var(--hide-700), var(--hide-900)); color: var(--tan-100); }

/* ---------- 9. ALERTS ---------- */
.sc-alert {
  display: flex; align-items: flex-start; gap: .75rem;
  padding: .95rem 1.15rem;
  border-radius: var(--r-md);
  font-size: .87rem; font-weight: 500;
  border-left: 4px solid;
  box-shadow: var(--lift-2);
  margin: 1.1rem 0;
}
.sc-alert-success { background:#E3F3EC; border-color: var(--success); color:#1B5A41; }
.sc-alert-error   { background:#F8E6E1; border-color: var(--danger);  color:#7E2F1B; }
.sc-alert-warn    { background:#FBF2DE; border-color: var(--warning); color:#6B5017; }
.sc-alert-info    { background:#EDF2F7; border-color: var(--info);    color:#33485C; }

/* ---------- 10. LAYOUT ---------- */
.sc-wrap { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.sc-wrap-narrow { max-width: 960px; margin: 0 auto; padding: 0 1.5rem; position: relative; z-index: 1; }
.sc-section { padding: clamp(3rem, 7vw, 6rem) 0; }
.sc-stack > * + * { margin-top: 1rem; }
.sc-flex { display: flex; align-items: center; gap: 1rem; }
.sc-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }

/* ---------- 11. SOCIAL ICONS — bare white glyphs, no rings, no fills ---------- */
.sc-soc,
.sc-soc-fb, .sc-soc-ig, .sc-soc-wa, .sc-soc-mail, .sc-soc-call {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.02rem;
  color: rgba(240,226,208,.72);
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  flex-shrink: 0;
  transition: color var(--t-fast), transform var(--t-fast) var(--ease-out);
}
.sc-soc:hover,
.sc-soc-fb:hover, .sc-soc-ig:hover, .sc-soc-wa:hover,
.sc-soc-mail:hover, .sc-soc-call:hover {
  color: #fff;
  transform: translateY(-3px) scale(1.08);
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---------- 12. MOTION ---------- */
@keyframes sc-rise { from { opacity:0; transform: translateY(22px); } to { opacity:1; transform:none; } }
@keyframes sc-fade { from { opacity:0; } to { opacity:1; } }
@keyframes sc-scale-in { from { opacity:0; transform: scale(.94); } to { opacity:1; transform:none; } }
@keyframes sc-shimmer { 0%{background-position:-460px 0;} 100%{background-position:460px 0;} }
@keyframes sc-pulse-brass {
  0%,100% { box-shadow: 0 0 0 0 var(--brass-glow); }
  50%     { box-shadow: 0 0 0 12px rgba(184,134,43,0); }
}

.sc-rise { animation: sc-rise var(--t-slow) var(--ease-out) both; }
.sc-fade { animation: sc-fade var(--t-med) var(--ease-soft) both; }
.sc-in   { animation: sc-scale-in var(--t-med) var(--ease-out) both; }
.sc-d1 { animation-delay:.07s; } .sc-d2 { animation-delay:.14s; }
.sc-d3 { animation-delay:.21s; } .sc-d4 { animation-delay:.28s; }
.sc-d5 { animation-delay:.35s; } .sc-d6 { animation-delay:.42s; }

.sc-skeleton {
  background: linear-gradient(90deg, var(--linen) 25%, var(--parchment) 50%, var(--linen) 75%);
  background-size: 920px 100%;
  animation: sc-shimmer 1.5s linear infinite;
  border-radius: var(--r-sm);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .sc-card:hover, .sc-tilt:hover > .sc-tilt-plane, .sc-btn:hover { transform: none; }
}

/* ---------- 13. SCROLLBAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--linen); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--brand), var(--hide-600));
  border-radius: var(--r-pill);
  border: 2px solid var(--linen);
}
::-webkit-scrollbar-thumb:hover { background: var(--hide-700); }
.sc-no-scrollbar::-webkit-scrollbar { display: none; }
.sc-no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* ---------- 14. UTILITIES ---------- */
.sc-hide { display: none !important; }
.sc-lock { overflow: hidden; }
.sc-mono { font-family: var(--font-mono); font-size: .84em; letter-spacing: -.02em; }
.sc-center { text-align: center; }
.sc-right { text-align: right; }
.sc-muted { color: var(--ink-mute); }
.sc-brand-text { color: var(--brand); }
.sc-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sc-white-bg { background: #fff !important; }

/* ---------- 15. MOBILE ALIGNMENT ---------- */
@media (max-width: 768px) {
  .sc-wrap, .sc-wrap-narrow { padding: 0 1.1rem; }
  .sc-section { padding: 2.6rem 0; }

  .sc-display { font-size: 2.05rem; line-height: 1.18; }
  .sc-h1 { font-size: 1.65rem; }
  .sc-h2 { font-size: 1.35rem; }
  .sc-h3 { font-size: 1.15rem; }
  .sc-lead { font-size: .95rem; }

  .sc-btn { padding: .78rem 1.3rem; font-size: .7rem; }
  .sc-btn-lg { padding: .9rem 1.5rem; font-size: .74rem; }

  .sc-soc,
  .sc-soc-fb, .sc-soc-ig, .sc-soc-wa, .sc-soc-mail, .sc-soc-call {
    width: 30px; height: 30px; font-size: .92rem;
  }

  .sc-alert { padding: .85rem 1rem; font-size: .82rem; }
  .sc-emboss, .sc-deboss { border-radius: var(--r-sm); }
}

@media (max-width: 400px) {
  .sc-display { font-size: 1.8rem; }
  .sc-wrap, .sc-wrap-narrow { padding: 0 .9rem; }
}