/* ============================================================
   GRIFFIN SOLUTIONS — style.css v5  · Mälaren Edition
   Palett: #011425 · #1F4959 · #5C7C89 · #242424 · #FFFFFF
   ============================================================ */

:root {
  /* Ny palett */
  --navy:      #011425;   /* djupt marinblå — mörk bas */
  --teal-dk:   #1F4959;   /* djup teal — sekundär mörk */
  --teal-md:   #5C7C89;   /* stålblå — accent + djup */
  --teal-lt:   #7AADBE;   /* ljus teal — CTA-glow, hover */
  --charcoal:  #242424;   /* kol — text på ljus bakgrund */
  --hvit:      #FFFFFF;   /* ren vit */
  --lysgrå:    #F0F4F6;   /* sval ljusgrå — ljus sektion */
  --ben:       #F0EDE6;   /* varm vit — footer-text */

  /* Semantiska alias */
  --signal:       var(--teal-lt);
  --signal-glow:  rgba(122,173,190,0.18);
  --green-acc:    #1E4A38;  /* blueprint-grid, rör ej */

  --font:  'Inter', sans-serif;
  --nav-h: 80px;
  --max:   1400px;
  --ease:  cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}

/* ── Reset ─────────────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; scroll-padding-top:80px; }
body {
  font-family:var(--font); background:var(--navy);
  color:var(--hvit); overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a { text-decoration:none; color:inherit; }
ul { list-style:none; }
img { display:block; max-width:100%; height:auto; }

/* ── NAV ───────────────────────────────────────────────── */
#nav {
  position:fixed; top:0; left:0; right:0;
  height:var(--nav-h); z-index:200;
  transition:background .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
#nav.scrolled {
  background:rgba(1,20,37,.96);
  border-color:rgba(122,173,190,.1);
  backdrop-filter:blur(20px);
}
.nav-inner {
  max-width:var(--max); margin:0 auto; padding:0 2.5rem;
  height:100%; display:grid;
  grid-template-columns:1fr auto 1fr; align-items:center;
}
.nav-group { display:flex; align-items:center; }
.nav-left  { grid-column:1; justify-self:start; gap:2.5rem; }
.nav-logo  { grid-column:2; justify-self:center; display:flex; align-items:center; }
.nav-right { grid-column:3; justify-self:end; gap:2rem; }
.nav-links-right { display:flex; align-items:center; gap:2.5rem; }

.logo-img { height:60px; width:auto; }
.logo-fallback { font-size:15px; font-weight:900; letter-spacing:.12em; color:var(--hvit); display:none; }
.logo-fallback span { font-weight:300; letter-spacing:.3em; opacity:.6; }

.nav-left a,
.nav-links-right a {
  position:relative; padding:6px 0;
  font-size:11px; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(255,255,255,.45); transition:color .25s;
}
.nav-left a::after,
.nav-links-right a::after {
  content:''; position:absolute;
  left:0; bottom:0; width:100%; height:1px;
  background:var(--teal-lt);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s var(--ease);
}
.nav-left a:hover,
.nav-links-right a:hover { color:var(--hvit); }
.nav-left a:hover::after,
.nav-links-right a:hover::after { transform:scaleX(1); }
.nav-link-cta { color:var(--teal-lt) !important; }
.nav-link-cta:hover { color:var(--hvit) !important; }

.lang-toggle {
  display:flex; align-items:center; gap:6px;
  background:none; border:1px solid rgba(122,173,190,.2);
  cursor:pointer; padding:6px 12px; transition:border-color .2s;
}
.lang-toggle:hover { border-color:rgba(122,173,190,.5); }
.lang-sv, .lang-en {
  font-family:var(--font); font-size:10px; font-weight:500;
  letter-spacing:.15em; color:rgba(255,255,255,.3); transition:color .2s;
}
.lang-divider { font-size:10px; color:rgba(255,255,255,.12); }
body.lang-sv .lang-sv { color:var(--hvit); }
body.lang-en .lang-en { color:var(--hvit); }

.nav-toggle {
  grid-column:3; justify-self:end; display:none;
  flex-direction:column; justify-content:center; gap:6px;
  background:none; border:none; cursor:pointer; padding:8px; z-index:300;
}
.nav-toggle span {
  display:block; width:26px; height:2px; background:var(--hvit);
  transition:transform .3s var(--ease), opacity .2s;
  transform-origin:center;
}
.nav-toggle.open span:first-child { transform:translateY(8px) rotate(45deg); }
.nav-toggle.open span:last-child  { transform:translateY(-8px) rotate(-45deg); }

.mobile-menu {
  position:fixed; inset:0;
  background:rgba(1,20,37,.98); backdrop-filter:blur(12px);
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:2.5rem;
  opacity:0; visibility:hidden;
  transition:opacity .4s var(--ease), visibility .4s;
  z-index:250;
}
.mobile-menu.open { opacity:1; visibility:visible; }
.mobile-links { display:flex; flex-direction:column; align-items:center; gap:2.25rem; }
.mobile-links a {
  font-size:1.6rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--hvit); transition:color .2s;
}
.mobile-links a:hover { color:var(--teal-lt); }
.lang-toggle-mobile { margin-top:1.5rem; }

/* ── HERO ──────────────────────────────────────────────── */
#hero {
  position:relative; min-height:100svh; background:var(--navy);
  display:flex; flex-direction:column; justify-content:center;
  padding:calc(var(--nav-h) + 5rem) 2.5rem 7rem; overflow:hidden;
}
#hero-canvas {
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0;
}
#hero::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 80% at 28% 50%,
    rgba(1,20,37,.85) 0%, rgba(1,20,37,.4) 45%, transparent 75%);
  z-index:1; pointer-events:none;
}
/* Subtil djupgradient — arkitektonisk känsla */
#hero::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 80% 60% at 75% 40%,
    rgba(31,73,89,.25) 0%, transparent 60%);
  z-index:1; pointer-events:none;
}
.hero-inner { position:relative; z-index:2; max-width:var(--max); margin:0 auto; width:100%; }

.hero-eyebrow {
  display:flex; align-items:center; gap:1rem;
  font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(122,173,190,.6); margin-bottom:2.5rem;
}
.eyebrow-line { display:block; width:2.5rem; height:1px; background:var(--teal-lt); flex-shrink:0; }
.hero-title { display:block; font-weight:900; line-height:.88; letter-spacing:-.035em; margin-bottom:2.5rem; }
.hero-line { display:block; font-size:clamp(2.4rem,11vw,10rem); color:var(--hvit); }
.hero-line.accent { color:var(--teal-lt); }
.hero-sub {
  font-size:clamp(.95rem,1.8vw,1.2rem); font-weight:300;
  color:rgba(122,173,190,.55); letter-spacing:.08em;
  margin-bottom:3rem; max-width:420px;
}
.hero-bottom {
  position:absolute; bottom:2.5rem; left:2.5rem;
  display:flex; align-items:center; gap:1rem; z-index:2;
}
.hero-scroll-label {
  font-size:10px; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(122,173,190,.3);
  writing-mode:vertical-rl; transform:rotate(180deg);
}
.hero-scroll-line {
  display:block; width:1px; height:4rem;
  background:linear-gradient(to bottom,rgba(122,173,190,.5),transparent);
  animation:scrollline 2.5s ease-in-out infinite;
}
@keyframes scrollline {
  0%   { transform:scaleY(0); transform-origin:top; }
  50%  { transform:scaleY(1); transform-origin:top; }
  51%  { transform:scaleY(1); transform-origin:bottom; }
  100% { transform:scaleY(0); transform-origin:bottom; }
}

/* ── BUTTONS ───────────────────────────────────────────── */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--teal-lt); color:var(--navy);
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:16px 32px; border:2px solid var(--teal-lt); cursor:pointer;
  transition:background .2s, border-color .2s, box-shadow .2s;
}
.btn-primary:hover {
  background:var(--hvit); border-color:var(--hvit);
  box-shadow:0 0 28px rgba(122,173,190,.3);
}
.btn-arrow { transition:transform .2s; }
.btn-primary:hover .btn-arrow { transform:translateX(4px); }

.btn-dark {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--charcoal);
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:14px 28px; border:2px solid rgba(36,36,36,.25); cursor:pointer;
  transition:background .2s, color .2s, border-color .2s; margin-top:2rem;
}
.btn-dark:hover { background:var(--charcoal); color:var(--hvit); border-color:var(--charcoal); }

.btn-outline-light {
  display:inline-flex; align-items:center; gap:.5rem;
  background:transparent; color:var(--hvit);
  font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase;
  padding:14px 28px; border:2px solid rgba(255,255,255,.2); cursor:pointer;
  transition:background .2s, border-color .2s; margin-top:2rem;
}
.btn-outline-light:hover { background:rgba(122,173,190,.1); border-color:var(--teal-lt); }

/* ── SECTION COMMON ────────────────────────────────────── */
.section-inner { max-width:var(--max); margin:0 auto; padding:7rem 2.5rem; position:relative; z-index:1; }
.section-label {
  font-size:10px; font-weight:500; letter-spacing:.3em; text-transform:uppercase;
  color:rgba(255,255,255,.3); margin-bottom:4.5rem;
}
.section-label.on-light { color:rgba(36,36,36,.35); }

/* ── TJÄNSTER — Ren vit ────────────────────────────────── */
#tjanster { background:var(--hvit); color:var(--charcoal); position:relative; overflow:hidden; }
#tjanster .section-label { color:rgba(36,36,36,.3); }
#tjanster::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--teal-md), transparent);
  pointer-events:none; z-index:0; opacity:.4;
}

.services-grid { display:grid; grid-template-columns:1fr 1px 1fr; gap:0 5rem; align-items:start; }
.service-divider { background:rgba(92,124,137,.12); align-self:stretch; }
.service-header { display:flex; align-items:center; gap:1rem; margin-bottom:.4rem; }
.service-icon { font-size:8px; color:var(--charcoal); opacity:.12; }
.service-category {
  font-size:clamp(1.4rem,2.5vw,2rem); font-weight:700;
  letter-spacing:-.025em; line-height:1.1; color:var(--charcoal);
}
.service-target {
  font-size:10px; font-weight:500; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(36,36,36,.3); margin-bottom:2.5rem; padding-bottom:2rem;
  border-bottom:1px solid rgba(92,124,137,.1);
}
.service-list li {
  display:flex; align-items:center;
  font-size:clamp(.9rem,1.4vw,1.05rem); font-weight:400;
  color:rgba(36,36,36,.65); padding:.9rem 0;
  border-bottom:1px solid rgba(92,124,137,.08);
  position:relative; overflow:hidden;
  transition:color .2s, padding-left .22s;
}
.service-list li::before {
  content:''; position:absolute; left:0; top:0; bottom:0;
  width:3px; background:var(--teal-md);
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .25s var(--ease);
}
.service-list li:hover { color:var(--charcoal); padding-left:.75rem; }
.service-list li:hover::before { transform:scaleY(1); }

/* ── PROJEKT — Djup teal ───────────────────────────────── */
#projekt { background:var(--teal-dk); color:var(--hvit); position:relative; overflow:hidden; }
#projekt .section-label { color:rgba(255,255,255,.3); }
#projekt::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 60% 60% at 70% 50%,
    rgba(92,124,137,.2) 0%, transparent 65%);
  pointer-events:none; z-index:0;
  animation:pjBreath 22s ease-in-out infinite alternate;
}
@keyframes pjBreath { 0%{opacity:.5;} 100%{opacity:1;} }

.projekt-placeholder {
  border:1px dashed rgba(122,173,190,.2);
  padding:8rem 2rem; display:flex; align-items:center; justify-content:center;
}
.placeholder-text {
  font-size:11px; font-weight:500; letter-spacing:.3em;
  text-transform:uppercase; color:rgba(255,255,255,.2);
}

/* ── OM — Sval ljusgrå ─────────────────────────────────── */
#om { background:var(--lysgrå); color:var(--charcoal); position:relative; overflow:hidden; }
#om .section-label { color:rgba(36,36,36,.3); }
#om::before {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 50% 50% at 85% 25%,
    rgba(92,124,137,.08) 0%, transparent 60%);
  pointer-events:none; z-index:0;
  animation:omGlow 20s ease-in-out infinite alternate;
}
@keyframes omGlow { 0%{opacity:.4;} 100%{opacity:1;} }

.om-grid { display:grid; grid-template-columns:1fr 1fr; gap:5rem; align-items:start; }
.om-intro h2 {
  font-size:clamp(1.75rem,3.5vw,2.75rem); font-weight:700;
  letter-spacing:-.03em; line-height:1.15; color:var(--charcoal);
}
.om-body p {
  font-size:1.05rem; font-weight:400; line-height:1.85;
  color:rgba(36,36,36,.6); margin-bottom:1.25rem;
}

/* ── KONTAKT — Djupt marinblå ──────────────────────────── */
#kontakt { background:var(--navy); color:var(--hvit); position:relative; overflow:hidden; }
#kontakt .section-label { color:rgba(255,255,255,.25); }
#kontakt::before {
  content:''; position:absolute;
  top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(122,173,190,.3), transparent);
  pointer-events:none; z-index:0;
}
#kontakt::after {
  content:''; position:absolute; inset:0;
  background:radial-gradient(ellipse 55% 65% at 40% 40%,
    rgba(31,73,89,.4) 0%, transparent 65%);
  pointer-events:none; z-index:0;
  animation:ktDepth 25s ease-in-out infinite alternate;
}
@keyframes ktDepth { 0%{opacity:.5;} 100%{opacity:1;} }

.kontakt-grid { display:grid; grid-template-columns:1fr 1.2fr; gap:5rem; align-items:start; }
.kontakt-heading h2 {
  font-size:clamp(2.5rem,5.5vw,4.5rem); font-weight:900;
  letter-spacing:-.04em; line-height:.92; color:var(--hvit); margin-bottom:1.25rem;
}
.kontakt-pitch {
  font-size:1rem; font-weight:300; line-height:1.7;
  color:rgba(122,173,190,.55); max-width:340px; margin-bottom:3rem;
}
.kontakt-direct { border-top:1px solid rgba(122,173,190,.1); padding-top:2rem; }
.kontakt-direct-label {
  font-size:10px; font-weight:500; letter-spacing:.25em;
  text-transform:uppercase; color:rgba(122,173,190,.3); margin-bottom:.75rem;
}
.kontakt-email, .kontakt-phone {
  display:block; font-size:.95rem; font-weight:400;
  letter-spacing:.03em; color:rgba(255,255,255,.4);
  margin-bottom:.35rem; transition:color .2s; word-break:break-all;
}
.kontakt-email:hover, .kontakt-phone:hover { color:var(--teal-lt); }

/* Form */
.kontakt-form { display:flex; flex-direction:column; gap:1.25rem; }
.form-group { display:flex; flex-direction:column; gap:.4rem; }
.form-group label {
  font-size:10px; font-weight:500; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(122,173,190,.35);
}
.form-optional { font-weight:400; letter-spacing:0; text-transform:none; opacity:.6; }
.form-group input, .form-group textarea {
  background:rgba(31,73,89,.25); border:1px solid rgba(122,173,190,.12);
  color:var(--hvit); font-family:var(--font); font-size:.95rem; font-weight:300;
  padding:.85rem 1rem; outline:none;
  transition:border-color .25s, background .25s;
  width:100%; resize:vertical; -webkit-appearance:none;
}
.form-group input::placeholder, .form-group textarea::placeholder { color:rgba(122,173,190,.25); }
.form-group input:focus, .form-group textarea:focus {
  border-color:rgba(122,173,190,.4); background:rgba(31,73,89,.4);
}
.form-submit { width:100%; justify-content:center; margin-top:.5rem; }
.form-promise {
  font-size:10px; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:rgba(122,173,190,.2); text-align:center;
}
.form-success { text-align:center; padding:4rem 2rem; border:1px solid rgba(122,173,190,.15); }
.form-success[hidden] { display:none; }
.success-icon { font-size:2rem; color:var(--teal-lt); margin-bottom:1rem; }
.success-title { font-size:1.25rem; font-weight:700; color:var(--hvit); margin-bottom:.5rem; }
.success-body { font-size:.9rem; font-weight:300; color:rgba(122,173,190,.45); }

/* ── FOOTER ────────────────────────────────────────────── */
#footer { background:#000D1C; border-top:1px solid rgba(122,173,190,.07); }
.footer-inner {
  max-width:var(--max); margin:0 auto; padding:1.75rem 2.5rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:1.5rem; flex-wrap:wrap;
}
.footer-logo-wrap { display:flex; align-items:center; }
.footer-logo { height:36px; width:auto; }
.footer-logo-fallback { font-size:11px; font-weight:700; letter-spacing:.15em; color:rgba(255,255,255,.25); display:none; }
.footer-right { display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap; }
.footer-right span, .footer-right a { font-size:11px; letter-spacing:.05em; color:rgba(255,255,255,.2); }
.footer-right a:hover { color:var(--teal-lt); }
.footer-sep { opacity:.12; }

/* ── DIMENSIONAL ENHANCEMENTS ──────────────────────────── */

/* Bakgrundssiffror — djup i varje sektion */
.section-num {
  position: absolute;
  top: 50%; right: -1%;
  transform: translateY(-50%);
  font-size: clamp(8rem, 18vw, 20rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 1;
}
#tjanster .section-num { color: rgba(92,124,137,.05); }
#projekt  .section-num { color: rgba(255,255,255,.05); }
#om       .section-num { color: rgba(31,73,89,.07); }
#kontakt  .section-num { color: rgba(122,173,190,.05); }

/* Diagonal skärning — hero → Tjänster */
.hero-diagonal {
  position: absolute;
  bottom: -1px; left: 0; right: 0;
  height: 90px; z-index: 4;
  pointer-events: none;
  background: var(--hvit);
  clip-path: polygon(0 100%, 100% 35%, 100% 100%);
}

/* Service-block hover-lyft */
.service-block {
  transition: transform .4s var(--ease);
  cursor: default;
}
.service-block:hover { transform: translateY(-6px); }

/* Service list — djupare hover */
.service-list li:hover {
  background: rgba(92,124,137,.05);
  padding-left: .75rem;
}

/* Custom cursor */
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--teal-lt);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform .1s, background .3s, width .3s, height .3s;
  mix-blend-mode: normal;
}
.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(122,173,190,.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width .4s var(--ease), height .4s var(--ease),
              border-color .3s, opacity .3s;
}
body:has(a:hover) .cursor-ring,
body:has(button:hover) .cursor-ring {
  width: 54px; height: 54px;
  border-color: rgba(122,173,190,.8);
}
body:has(a:hover) .cursor-dot,
body:has(button:hover) .cursor-dot {
  width: 4px; height: 4px;
  background: var(--hvit);
}

/* Glow på CTA-knapp */
.btn-primary {
  position: relative;
}
.btn-primary::after {
  content: '';
  position: absolute;
  inset: -4px;
  background: var(--signal-glow);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.btn-primary:hover::after { opacity: 1; }

/* Nav-logo hover-subtilt */
.nav-logo { transition: opacity .2s; }
.nav-logo:hover { opacity: .8; }

/* Om-sektion pull-quote stil */
.om-intro h2 {
  border-left: 3px solid var(--teal-md);
  padding-left: 1.5rem;
}

/* Tjänster sektion top-accent line */
#tjanster::before {
  background: linear-gradient(90deg, transparent, var(--teal-md), var(--teal-dk), transparent);
  opacity: .35;
}

/* Projekt placeholder hover */
.projekt-placeholder {
  transition: border-color .3s, background .3s;
  cursor: default;
}
.projekt-placeholder:hover {
  border-color: rgba(122,173,190,.35);
  background: rgba(122,173,190,.03);
}

/* Mobile: dölj custom cursor och diagonal */
@media (max-width:768px) {
  .cursor-dot, .cursor-ring { display: none; }
  .hero-diagonal { height: 50px; }
  .service-block:hover { transform: none; }
  .om-intro h2 { padding-left: 1rem; }
}
@media (hover: none) {
  .cursor-dot, .cursor-ring { display: none; }
}

/* ── ANIMATIONS ────────────────────────────────────────── */
.fade-in { opacity:1; transform:none; }
.js .fade-in {
  opacity:0; transform:translateY(28px);
  transition:opacity .8s var(--ease), transform .8s var(--ease);
}
.js .fade-in.visible { opacity:1; transform:none; }
.delay-1 { transition-delay:.1s; }
.delay-2 { transition-delay:.2s; }
.delay-3 { transition-delay:.3s; }
.delay-4 { transition-delay:.4s; }

/* ── RESPONSIVE ────────────────────────────────────────── */
@media (max-width:920px) {
  .nav-left, .nav-right { display:none; }
  .nav-toggle { display:flex; }
  .services-grid { grid-template-columns:1fr; gap:3.5rem 0; }
  .service-divider { display:none; }
  .om-grid, .kontakt-grid { grid-template-columns:1fr; gap:2.5rem; }
}
@media (max-width:768px) {
  :root { --nav-h:66px; scroll-padding-top:66px; }
  html { scroll-padding-top:66px; }
  .logo-img { height:42px; }
  .nav-inner { padding:0 1.25rem; }
  #hero { padding:calc(var(--nav-h) + 2.5rem) 1.25rem 5rem; }
  .hero-bottom { display:none; }
  .section-inner { padding:5rem 1.25rem; }
  .section-label { margin-bottom:3rem; }
  .footer-inner { padding:1.5rem 1.25rem; flex-direction:column; align-items:flex-start; gap:1rem; }
  .kontakt-pitch { max-width:none; }
}
@media (max-width:480px) {
  .hero-line { font-size:clamp(2.6rem,15vw,4rem); }
  .hero-title { margin-bottom:2rem; }
  .kontakt-heading h2 { font-size:clamp(2.4rem,13vw,3.5rem); }
  .om-intro h2 { font-size:clamp(1.6rem,8vw,2.2rem); }
  .mobile-links a { font-size:1.4rem; }
  .btn-primary, .btn-dark, .btn-outline-light { padding:15px 26px; font-size:10px; }
  .service-category { font-size:clamp(1.3rem,7vw,1.8rem); }
}
@media (max-width:360px) {
  .nav-inner { padding:0 1rem; }
  .section-inner { padding:4rem 1rem; }
  #hero { padding:calc(var(--nav-h) + 2rem) 1rem 4rem; }
  .hero-line { font-size:clamp(2.2rem,13.5vw,3rem); }
  .mobile-links a { font-size:1.25rem; }
}
@media (max-height:560px) and (orientation:landscape) {
  #hero { min-height:auto; padding-top:calc(var(--nav-h) + 2rem); padding-bottom:3rem; }
  .mobile-links { gap:1.25rem; }
  .mobile-links a { font-size:1.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .hero-scroll-line { animation:none; }
}