/* =========================================================
   SMP ENGINEERING
   Concept A v2 — Technical Dark
   ========================================================= */

:root {
  --bg:#080d11;
  --bg-soft:#0b1218;
  --bg-elevated:#101920;
  --bg-card:#111c25;
  --bg-card-hover:#162530;
  --line:#263541;
  --line-light:#344653;
  --line-blue:#075c91;
  --text:#f1f5f7;
  --text-soft:#c6d0d6;
  --text-muted:#9aaab5;
  --text-dim:#71828e;
  --blue:#00aaff;
  --blue-light:#25baff;
  --blue-dark:#006fae;
  --blue-deep:#004c78;
  --container:1200px;
  --header-height:86px;
  --radius:2px;
  --ease:cubic-bezier(0.2,0.65,0.3,1);
}

/* RESET */

*,
*::before,
*::after {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--header-height) + 20px);
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

img {
  display:block;
  max-width:100%;
  height:auto;
}

a {
  color:inherit;
  text-decoration:none;
}

button,
input,
textarea,
select {
  font:inherit;
}

button,
a {
  -webkit-tap-highlight-color:transparent;
}

::selection {
  background:var(--blue);
  color:#00131d;
}

/* ACCESSIBILITY */

.skip-link {
  position:fixed;
  z-index:1000;
  left:16px;
  top:-100px;
  padding:12px 18px;
  background:var(--blue);
  color:#00131d;
  font-size:12px;
  font-weight:800;
}

.skip-link:focus {
  top:16px;
}

/* CONTAINER */

.container {
  width:min(var(--container),calc(100% - 64px));
  margin-inline:auto;
}

/* TYPOGRAPHY */

h1,
h2,
h3 {
  margin:0;
  font-family:"Arial","Helvetica Neue",Helvetica,sans-serif;
  font-weight:800;
  line-height:1.06;
  letter-spacing:-0.045em;
}

h1 {
  font-size:clamp(48px,5.8vw,78px);
}

h2 {
  font-size:clamp(36px,4.2vw,54px);
}

h3 {
  font-size:24px;
}

h2 span {
  color:var(--text-muted);
}

p {
  margin:0;
  color:var(--text-muted);
}

.eyebrow {
  color:var(--blue-light);
  font-size:11px;
  font-weight:800;
  line-height:1.5;
  letter-spacing:.2em;
  text-transform:uppercase;
}

.eyebrow span {
  color:var(--text-dim);
  margin-inline:5px;
}

/* BUTTONS */

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  min-height:48px;
  padding:13px 19px;
  border:1px solid transparent;
  border-radius:var(--radius);
  font-size:11px;
  font-weight:800;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
  transition:background 180ms var(--ease),border-color 180ms var(--ease),color 180ms var(--ease),transform 180ms var(--ease);
}

.button span {
  font-size:17px;
  line-height:.8;
}

.button-primary {
  background:var(--blue);
  border-color:var(--blue);
  color:#00131d;
}

.button-primary:hover {
  background:var(--blue-light);
  border-color:var(--blue-light);
  transform:translateY(-2px);
}

.button-outline {
  border-color:var(--line-light);
  color:var(--text);
}

.button-outline:hover {
  border-color:var(--blue);
  color:var(--blue-light);
  transform:translateY(-2px);
}

/* TEXT LINKS */

.text-link {
  display:inline-flex;
  align-items:center;
  gap:15px;
  color:var(--blue-light);
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.text-link span {
  font-size:17px;
  line-height:.7;
  transition:transform 180ms var(--ease);
}

.text-link:hover span {
  transform:translate(4px,-3px);
}

/* HEADER */

.site-header {
  position:absolute;
  z-index:100;
  top:0;
  left:0;
  width:100%;
  border-bottom:1px solid rgba(130,160,180,.16);
}

.header-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:var(--header-height);
}

.brand {
  display:inline-flex;
  align-items:center;
  width:165px;
}

.brand-logo {
  width:100%;
  height:auto;
  object-fit:contain;
}

.main-nav {
  display:flex;
  align-items:center;
  gap:30px;
}

.main-nav > a {
  color:var(--text-muted);
  font-size:13px;
  font-weight:700;
  line-height:1;
  letter-spacing:.08em;
  text-transform:uppercase;
  transition:color 180ms ease;
}

.main-nav > a:hover {
  color:var(--blue-light);
}

.main-nav .nav-cta {
  display:inline-flex;
  align-items:center;
  gap:11px;
  padding:11px 15px;
  border:1px solid var(--blue);
  color:var(--blue-light);
  font-size:12px;
}

.main-nav .nav-cta span {
  font-size:15px;
}

.main-nav .nav-cta:hover {
  background:var(--blue);
  color:#00131d;
}

.menu-toggle,
.menu-button {
  display:none;
}

/* HERO */

.hero {
  position:relative;
  min-height:760px;
  padding-top:calc(var(--header-height) + 40px); /* 方案一：加上 40px 緩衝間距，解決圖片與 Header 底線重疊問題 */
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:
    radial-gradient(circle at 78% 48%,rgba(0,170,255,.08),transparent 30%),
    linear-gradient(90deg,#080d11 0%,#080d11 35%,#0b141b 100%);
}

.hero::after {
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    linear-gradient(rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:linear-gradient(to right,transparent,black 45%,black 100%);
  opacity:.35;
}

.hero-grid {
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  align-items:center;
  gap:65px;
  min-height:620px;
}

.hero-content {
  position:relative;
  z-index:2;
  max-width:560px;
}

.hero h1 {
  margin-top:20px;
  color:var(--text);
  letter-spacing:-.06em;
  white-space:nowrap;
}

.hero h1 span {
  color:var(--blue);
  font-weight:400;
}

.hero-description {
  max-width:440px;
  margin-top:27px;
  color:var(--text-muted);
  font-size:18px;
  line-height:1.75;
}

.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:11px;
  margin-top:35px;
}

.hero-visual {
  position:relative;
  min-height:490px;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--bg-card);
}

.hero-visual::before {
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  left:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,transparent,var(--blue),transparent);
  opacity:.7;
}

.hero-visual img {
  width:100%;
  height:490px;
  object-fit:cover;
  filter:saturate(.72) contrast(1.05);
  transition:transform 700ms var(--ease);
}

.hero-visual:hover img {
  transform:scale(1.025);
}

.hero-visual-overlay {
  position:absolute;
  inset:0;
  z-index:2;
  background:
    linear-gradient(90deg,rgba(8,13,17,.25),transparent 70%),
    linear-gradient(0deg,rgba(8,13,17,.92),transparent 60%);
}

.hero-visual-label {
  position:absolute;
  z-index:3;
  left:23px;
  bottom:21px;
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--text-soft);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.hero-image-main,
.hero-image-hover {
  width:100%;
  height:490px;
  object-fit:cover;
  filter:saturate(.72) contrast(1.05);
  transition:opacity 450ms var(--ease),transform 700ms var(--ease);
}
.hero-image-main {
  position:relative;
  z-index:1;
  opacity:1;
}
.hero-image-hover {
  position:absolute;
  z-index:2;
  inset:0;
  opacity:0;
}
.hero-visual:hover .hero-image-main {
  opacity:0;
  transform:scale(1.025);
}
.hero-visual:hover .hero-image-hover {
  opacity:1;
  transform:scale(1.025);
}

.status-dot {
  width:7px;
  height:7px;
  flex:0 0 auto;
  border-radius:50%;
  background:var(--blue);
  box-shadow:0 0 13px rgba(0,170,255,.65);
}

.hero-bottom {
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  padding-bottom:23px;
}

.hero-bottom > span {
  color:var(--text-dim);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.hero-bottom .scroll-indicator {
  color:var(--blue-light);
}

/* SECTIONS */

.section {
  padding:120px 0;
  border-bottom:1px solid var(--line);
}

.section-heading {
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:50px;
  margin-bottom:52px;
}

.section-heading h2 {
  margin-top:17px;
}

.section-intro {
  max-width:360px;
  color:var(--text-muted);
  font-size:15px;
  line-height:1.8;
}

/* SERVICES */

.services-section {
  background:linear-gradient(180deg,rgba(18,30,39,.4),transparent 45%);
}

.services-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:17px;
}

.service-card {
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);
  transition:border-color 220ms var(--ease),background 220ms var(--ease),transform 220ms var(--ease),box-shadow 220ms var(--ease);
}

.service-card:hover {
  background:var(--bg-card-hover);
  border-color:var(--line-blue);
  transform:translateY(-4px);
  box-shadow:0 18px 45px rgba(0,0,0,.22);
}

.service-image {
  position:relative;
  height:220px;
  overflow:hidden;
  border-bottom:1px solid var(--line);
}

.service-image img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:saturate(.72);
  transition:transform 500ms var(--ease),filter 500ms var(--ease);
}

.service-card:hover .service-image img {
  transform:scale(1.04);
  filter:saturate(.95);
}

.service-number {
  position:absolute;
  top:17px;
  right:17px;
  color:var(--blue-light);
  font-size:13px;
  font-weight:800;
  letter-spacing:.08em;
}

.service-content {
  display:flex;
  flex:1;
  flex-direction:column;
  padding:27px 27px 25px;
}

.service-icon {
  display:flex;
  align-items:center;
  justify-content:center;
  width:37px;
  height:37px;
  margin-bottom:21px;
  border:1px solid var(--blue-dark);
  color:var(--blue-light);
  font-size:19px;
  transition:background 220ms ease,color 220ms ease,border-color 220ms ease;
}

.service-card:hover .service-icon {
  background:rgba(0,170,255,.08);
  border-color:var(--blue);
  color:var(--blue-light);
}

.service-title-row {
  display:flex;
  flex-direction:column;
}

.service-label {
  margin-bottom:7px;
  color:var(--text-dim);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.service-card h3 {
  color:var(--text);
  font-size:24px;
  letter-spacing:-.035em;
}

.service-card p {
  min-height:80px;
  margin-top:14px;
  color:var(--text-muted);
  font-size:14px;
  line-height:1.75;
}

.service-card ul {
  list-style:none;
  margin:22px 0 27px;
  padding:17px 0 0;
  border-top:1px solid var(--line);
}

.service-card li {
  position:relative;
  padding-left:14px;
  color:var(--text-soft);
  font-size:13px;
  line-height:2.0;
}

.service-card li::before {
  content:"";
  position:absolute;
  top:.85em;
  left:0;
  width:4px;
  height:4px;
  background:var(--blue);
}

.service-card .text-link {
  margin-top:auto;
}

/* PROCESS */

.process-section {
  background:var(--bg-elevated);
}

.process-layout {
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:100px;
  align-items:start;
}

.process-heading h2 {
  margin-top:18px;
}

.process-list {
  border-top:1px solid var(--line);
}

.process-item {
  display:grid;
  grid-template-columns:55px 1fr;
  gap:25px;
  padding:27px 0;
  border-bottom:1px solid var(--line);
}

.process-number {
  color:var(--blue-light);
  font-size:12px;
  font-weight:800;
  letter-spacing:.1em;
}

.process-label {
  display:block;
  margin-bottom:7px;
  color:var(--text-dim);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

.process-item h3 {
  color:var(--text);
  font-size:21px;
}

.process-item p {
  max-width:520px;
  margin-top:9px;
  color:var(--text-muted);
  font-size:14px;
  line-height:1.75;
}

/* PROJECTS */

.projects-section {
  background:var(--bg);
}

.projects-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:23px;
}

.project-card {
  display:block;
}

.project-image {
  position:relative;
  height:280px;
  overflow:hidden;
  background:var(--bg-card);
  border:1px solid var(--line);
}

.project-image-main,
.project-image-hover {
  width:100%;
  height:100%;
  object-fit:cover;
  transition:opacity 450ms var(--ease),transform 600ms var(--ease),filter 500ms var(--ease);
}

.project-image-main {
  position:relative;
  z-index:1;
  filter:saturate(.7);
  opacity:1;
}

.project-image-hover {
  position:absolute;
  z-index:2;
  inset:0;
  filter:saturate(.7);
  opacity:0;
}

.project-card:hover .project-image-main {
  opacity:0;
  transform:scale(1.045);
}

.project-card:hover .project-image-hover {
  opacity:1;
  transform:scale(1.045);
  filter:saturate(1);
}

.project-arrow {
  position:absolute;
  z-index:5;
  top:15px;
  right:15px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  background:var(--blue);
  color:#00131d;
  font-size:19px;
  opacity:0;
  transform:translate(-5px,5px);
  transition:opacity 180ms ease,transform 180ms ease;
}

.project-card:hover .project-arrow {
  opacity:1;
  transform:translate(0,0);
}

.project-meta {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-top:18px;
}

.project-meta span {
  color:var(--blue-light);
  font-size:11px;
  font-weight:800;
  letter-spacing:.14em;
}

.project-card h3 {
  margin-top:9px;
  color:var(--text);
  font-size:22px;
}

.project-card > p {
  margin-top:5px;
  color:var(--text-dim);
  font-size:13px;
}

/* MAINTENANCE */

.maintenance-section {
  background:var(--bg-elevated);
}

.maintenance-layout {
  display:grid;
  grid-template-columns:1fr .9fr;
  gap:90px;
  align-items:center;
}

.maintenance-content h2 {
  margin-top:18px;
}

.maintenance-content > p {
  max-width:520px;
  margin-top:27px;
  color:var(--text-muted);
  font-size:16px;
  line-height:1.8;
}

.check-list {
  list-style:none;
  margin:26px 0 32px;
  padding:0;
}

.check-list li {
  position:relative;
  padding-left:26px;
  color:var(--text-soft);
  font-size:13px;
  line-height:2.0;
}

.check-list li::before {
  content:"✓";
  position:absolute;
  left:0;
  color:var(--blue-light);
  font-weight:800;
}

.maintenance-image {
  position:relative;
  overflow:hidden;
  border:1px solid var(--line);
}

.maintenance-image img {
  width:100%;
  min-height:390px;
  object-fit:cover;
  filter:saturate(.7);
  transition:transform 600ms var(--ease),filter 500ms var(--ease);
}

.maintenance-image:hover img {
  transform:scale(1.025);
  filter:saturate(.9);
}

.image-caption {
  position:absolute;
  bottom:16px;
  left:18px;
  color:var(--text-soft);
  font-size:10px;
  font-weight:800;
  letter-spacing:.15em;
}

/* ABOUT */

.about-section {
  background:var(--bg);
}

.about-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:100px;
}

.about-copy {
  max-width:560px;
}

.about-copy p {
  margin-bottom:21px;
  color:var(--text-muted);
  font-size:16px;
  line-height:1.8;
}

/* CONTACT */

.contact-section {
  position:relative;
  overflow:hidden;
  padding:110px 0;
  background:
    radial-gradient(circle at 90% 50%,rgba(0,170,255,.08),transparent 32%),
    var(--bg-card);
  border-bottom:1px solid var(--line);
}

.contact-section::before {
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:2px;
  height:100%;
  background:linear-gradient(transparent,var(--blue),transparent);
  opacity:.7;
}

.contact-inner {
  position:relative;
}

.contact-inner h2 {
  max-width:850px;
  margin-top:18px;
  font-size:clamp(38px,5vw,66px);
}

.contact-inner > p:not(.eyebrow) {
  margin-top:22px;
  color:var(--text-muted);
  font-size:16px;
}

.contact-inner .button {
  margin-top:31px;
}

/* FOOTER */

.site-footer {
  background:#05090c;
}

.footer-top {
  display:flex;
  justify-content:space-between;
  gap:60px;
  padding:70px 0;
}

.footer-brand {
  max-width:280px;
}

.footer-logo {
  width:175px;
  height:auto;
}

.footer-brand p {
  margin-top:19px;
  color:var(--text-dim);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}

.footer-links {
  display:flex;
  gap:100px;
}

.footer-links > div {
  display:flex;
  flex-direction:column;
  gap:9px;
}

.footer-links h3 {
  margin-bottom:8px;
  color:var(--text);
  font-size:11px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.footer-links a {
  color:var(--text-dim);
  font-size:12px;
  transition:color 180ms ease;
}

.footer-links a:hover {
  color:var(--blue-light);
}

.footer-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 0;
  border-top:1px solid var(--line);
}

.footer-bottom p {
  color:var(--text-dim);
  font-size:10px;
  letter-spacing:.08em;
}

/* TABLET */

@media (max-width:1000px) {
  .container {
    width:min(var(--container),calc(100% - 48px));
  }

  .main-nav {
    gap:19px;
  }

  .hero-grid {
    grid-template-columns:1fr;
    gap:45px;
    padding:65px 0 35px;
  }

  .hero {
    min-height:auto;
  }

  .hero-content {
    max-width:680px;
  }

  .hero-visual {
    min-height:390px;
  }

  .hero-visual img {
    height:390px;
  }

  .services-grid,
  .projects-grid {
    grid-template-columns:repeat(2,1fr);
  }

  .services-grid .service-card:last-child {
    grid-column:1/-1;
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .services-grid .service-card:last-child .service-image {
    height:100%;
    min-height:320px;
    border-right:1px solid var(--line);
    border-bottom:0;
  }

  .process-layout,
  .maintenance-layout,
  .about-layout {
    gap:55px;
  }

  .process-layout {
    grid-template-columns:.75fr 1.25fr;
  }

  .maintenance-layout {
    grid-template-columns:1fr 1fr;
  }

  .about-layout {
    grid-template-columns:1fr 1fr;
  }

  .footer-links {
    gap:55px;
  }
}

/* MOBILE */

@media (max-width:680px) {
  :root {
    --header-height:72px;
  }

  .container {
    width:calc(100% - 36px);
  }

  .section {
    padding:76px 0;
  }

  h2 {
    font-size:35px;
  }

  .site-header {
    background:rgba(8,13,17,.94);
    backdrop-filter:blur(12px);
  }

  .header-inner {
    min-height:var(--header-height);
  }

  .brand {
    width:128px;
  }

  .menu-button {
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:5px;
    width:42px;
    height:42px;
    padding:10px;
    border:1px solid var(--line);
    cursor:pointer;
  }

  .menu-button span {
    display:block;
    width:100%;
    height:2px;
    background:var(--text);
    transition:transform 180ms ease,opacity 180ms ease;
  }

  .menu-toggle:checked + .menu-button span:nth-child(1) {
    transform:translateY(7px) rotate(45deg);
  }

  .menu-toggle:checked + .menu-button span:nth-child(2) {
    opacity:0;
  }

  .menu-toggle:checked + .menu-button span:nth-child(3) {
    transform:translateY(-7px) rotate(-45deg);
  }

  .main-nav {
    position:absolute;
    top:var(--header-height);
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:10px 18px 20px;
    background:#0a1117;
    border-bottom:1px solid var(--line);
  }

  .menu-toggle:checked ~ .main-nav {
    display:flex;
  }

  .main-nav > a {
    padding:15px 0;
    font-size:14px;
    border-bottom:1px solid var(--line);
  }

  .main-nav .nav-cta {
    justify-content:center;
    margin-top:13px;
    border:1px solid var(--blue);
  }

  .hero {
    padding-top:calc(var(--header-height) + 20px);
  }

  .hero-grid {
    padding:55px 0 28px;
    gap:32px;
  }

  .hero h1 {
    font-size:clamp(38px,10vw,52px);
    line-height:1.12;
    white-space:normal;
  }

  .hero-description {
    max-width:370px;
    margin-top:20px;
    font-size:15px;
    line-height:1.75;
  }

  .hero-actions {
    margin-top:26px;
    gap:9px;
  }

  .button {
    min-height:46px;
    gap:11px;
    padding:12px 14px;
    font-size:10px;
  }

  .hero-visual {
    min-height:260px;
  }

  .hero-visual img {
    height:260px;
  }

  .hero-visual-label {
    left:16px;
    bottom:16px;
    font-size:9px;
  }
  
  .hero-image-main,
  .hero-image-hover {
    height:260px;
  }

  .hero-bottom {
    display:none;
  }

  .section-heading {
    display:block;
    margin-bottom:34px;
  }

  .section-heading h2 {
    margin-top:15px;
  }

  .section-intro {
    max-width:100%;
    margin-top:21px;
    font-size:13px;
  }

  .services-grid,
  .projects-grid {
    grid-template-columns:1fr;
    gap:16px;
  }

  .services-grid .service-card:last-child {
    display:flex;
    grid-column:auto;
  }

  .services-grid .service-card:last-child .service-image {
    height:205px;
    min-height:0;
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .service-image {
    height:205px;
  }

  .service-content {
    padding:24px;
  }

  .service-card p {
    min-height:0;
    font-size:13px;
  }

  .service-card h3 {
    font-size:24px;
  }

  .service-card li {
    font-size:12px;
  }

  .process-layout,
  .maintenance-layout,
  .about-layout {
    grid-template-columns:1fr;
    gap:36px;
  }

  .process-item {
    grid-template-columns:40px 1fr;
    gap:15px;
    padding:24px 0;
  }

  .process-item h3 {
    font-size:20px;
  }

  .process-item p {
    font-size:13px;
  }

  .project-image {
    height:245px;
  }

  .project-arrow {
    opacity:1;
    transform:none;
  }

  .project-card h3 {
    font-size:22px;
  }

  .maintenance-content > p {
    margin-top:21px;
    font-size:14px;
  }

  .maintenance-image img {
    min-height:260px;
  }

  .about-copy p {
    font-size:14px;
  }

  .contact-section {
    padding:78px 0;
  }

  .contact-inner h2 {
    font-size:36px;
  }

  .contact-inner > p:not(.eyebrow) {
    font-size:14px;
  }

  .footer-top {
    display:block;
    padding:55px 0;
  }

  .footer-links {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;
    margin-top:45px;
  }

  .footer-bottom {
    display:block;
    padding:20px 0;
  }

  .footer-bottom p + p {
    margin-top:8px;
  }
}

/* SMALL MOBILE */

@media (max-width:390px) {
  .container {
    width:calc(100% - 28px);
  }

  .hero h1 {
    font-size:36px;
  }

  .hero-actions {
    flex-direction:column;
    align-items:stretch;
  }

  .hero-actions .button {
    width:100%;
  }

  .service-content {
    padding:21px;
  }

  .footer-links {
    grid-template-columns:1fr;
  }
}

/* REDUCED MOTION */

@media (prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }

  *,
  *::before,
  *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important;
  }
}