/*
Theme Name: Arc Security
Author: Arc Security
Description: A one-page block theme for Arc Security with editable services and contact details.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
Text Domain: arc-security
*/


.arc-site {
  --navy:#051842;
  --ink:#111f39;
  --line:#d5dbe2;
  --soft:#f1f4f7;
  font-family:"Segoe UI",Arial,sans-serif;
  color:var(--ink);
  background:white;
  scroll-behavior:smooth
}
.arc-site * {
  box-sizing:border-box
}
.arc-site {
  margin:0
}
.arc-site a {
  color:inherit;
  text-decoration:none
}
.arc-site button,
.arc-site input,
.arc-site textarea {
  font:inherit
}
.arc-site a:focus-visible,
.arc-site button:focus-visible {
  outline:3px solid #51a6ee;
  outline-offset:5px
}
.arc-site .skip {
  position:absolute;
  left:1rem;
  top:-10rem;
  background:white;
  color:var(--ink);
  padding:12px;
  z-index:3
}
.arc-site .skip:focus {
  top:1rem
}
.arc-site .wrap {
  width:min(86%,1280px);
  margin-inline:auto
}
.arc-site .mast,
.arc-site footer {
  background:var(--navy);
  color:white
}
.arc-site header,
.arc-site nav,
.arc-site .brand,
.arc-site :is(.cta, .arc-cta .wp-block-button__link),
.arc-site footer .wrap {
  display:flex;
  align-items:center
}
.arc-site header {
  justify-content:space-between;
  min-height:84px;
  border-bottom:1px solid #ffffff38
}
.arc-site .brand {
  gap:13px
}
.arc-site .brand .arc-mark img {
  width:28px;
  height:auto
}
.arc-site .brand .arc-wordmark img {
  width:150px;
  height:auto
}
.arc-site nav {
  gap:34px;
  font-size:.94rem
}
.arc-site .nav-contact {
  border:1px solid #ffffff66;
  padding:10px 16px;
  display:flex;
  align-items:center;
  gap:18px
}
.arc-site nav a:hover,
.arc-site footer a:hover {
  text-decoration:underline;
  text-underline-offset:4px
}
.arc-site .hero {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  align-items:center;
  gap:6%;
  padding-block:clamp(50px,5vw,88px)
}
.arc-site h1,
.arc-site h2,
.arc-site h3,
.arc-site p {
  margin:0
}
.arc-site h1,
.arc-site h2 {
  font-weight:550;
  letter-spacing:-.058em
}
.arc-site h1 {
  font-size:clamp(64px,7.6vw,116px);
  line-height:.99
}
.arc-site .intro p {
  color:#d6dfed;
  font-size:clamp(17px,1.28vw,21px);
  line-height:1.5;
  margin:24px 0 32px
}
.arc-site :is(.cta, .arc-cta .wp-block-button__link) {
  width:fit-content;
  gap:28px;
  background:white;
  color:var(--navy);
  border:0;
  padding:15px 21px;
  font-weight:600;
  font-size:.95rem;
  cursor:pointer
}
.arc-site :is(.cta, .arc-cta .wp-block-button__link):hover {
  background:#deebfa
}
.arc-site :is(.cta, .arc-cta .wp-block-button__link) span {
  font-size:1.15em
}
.arc-site .drawing {
  display:grid;
  place-items:center;
  position:relative;
  background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);
  background-size:32px 32px;
  isolation:isolate;
  padding:24px
}
.arc-site .plate {
  position:relative;
  width:84%;
  display:grid;
  place-items:center;
  padding:20px
}
.arc-site .plate img {
  width:clamp(145px,17vw,235px);
  height:auto
}
.arc-site .plate i {
  position:absolute;
  width:11px;
  height:11px;
  color:#9dabbd
}
.arc-site .plate i::before,
.arc-site .plate i::after {
  content:"";
  position:absolute;
  background:currentColor
}
.arc-site .plate i::before {
  height:1px;
  width:11px;
  top:5px
}
.arc-site .plate i::after {
  height:11px;
  width:1px;
  left:5px
}
.arc-site .plate i:nth-child(1) {
  left:0;
  top:0
}
.arc-site .plate i:nth-child(2) {
  right:0;
  top:0
}
.arc-site .plate i:nth-child(3) {
  left:0;
  bottom:0
}
.arc-site .plate i:nth-child(4) {
  right:0;
  bottom:0
}
.arc-site h2 {
  font-size:clamp(36px,3.3vw,54px);
  line-height:1.1
}
.arc-site .services {
  padding-block:52px 56px
}
.arc-site .service-list {
  list-style:none;
  padding:0;
  margin:30px 0 0;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line)
}
.arc-site .service-list .arc-service {
  padding:0 20px 0 24px;
  margin-top:24px;
  border-left:1px solid var(--line)
}
.arc-site .service-list .arc-service:first-child {
  padding-left:0;
  border-left:0
}
.arc-site .service-list svg {
  display:block;
  width:30px;
  height:30px;
  fill:none;
  stroke:var(--navy);
  stroke-width:1.5;
  stroke-linejoin:round;
  stroke-linecap:round
}
.arc-site h3 {
  font-size:clamp(18px,1.55vw,24px);
  font-weight:550;
  letter-spacing:-.035em;
  margin-top:14px
}
.arc-site .contact {
  background:var(--soft);
  padding-block:60px
}
.arc-site .contact-grid {
  display:grid;
  grid-template-columns:1fr 1.18fr;
  gap:7%
}
.arc-site address {
  display:grid;
  justify-items:start;
  margin-top:30px;
  font-style:normal;
  line-height:1.65
}
.arc-site address strong {
  font-size:1.2rem
}
.arc-site address span {
  color:#536078
}
.arc-site address a:hover {
  text-decoration:underline
}
.arc-site .tel {
  margin-top:16px
}
.arc-site .fields {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px
}
.arc-site label {
  display:grid;
  gap:8px;
  font-size:.9rem;
  font-weight:600
}
.arc-site form>label {
  margin:18px 0
}
.arc-site input,
.arc-site textarea {
  width:100%;
  min-width:0;
  background:white;
  border:1px solid #b8c2d0;
  border-radius:0;
  padding:12px;
  color:var(--ink);
  font-weight:400;
  font-size:1rem
}
.arc-site textarea {
  resize:vertical
}
.arc-site input:focus,
.arc-site textarea:focus {
  outline:2px solid #547db1;
  outline-offset:1px
}
.arc-site .cta.send {
  background:var(--navy);
  color:white
}
.arc-site .cta.send:hover {
  background:#17376b
}
.arc-site footer .wrap {
  justify-content:space-between;
  padding-block:24px
}
.arc-site footer a {
  font-size:.85rem
}
.arc-site footer .brand {
  gap:9px
}
.arc-site footer .brand .arc-mark img {
  width:20px
}
.arc-site footer .brand .arc-wordmark img {
  width:110px
}
@media(max-width:760px) {
.arc-site .wrap {
    width:89%
  }
.arc-site header {
    min-height:70px
  }
.arc-site .brand {
    gap:8px
  }
.arc-site .brand .arc-wordmark img {
    width:115px
  }
.arc-site .brand .arc-mark img {
    width:23px
  }
.arc-site nav {
    gap:15px
  }
.arc-site .nav-contact {
    padding:9px 10px;
    gap:7px
  }
.arc-site .hero {
    gap:2%;
    grid-template-columns:1.35fr .8fr
  }
.arc-site .drawing {
    padding:9px
  }
.arc-site .plate {
    width:100%;
    padding:14px
  }
.arc-site .plate img {
    width:100%;
    max-width:142px
  }
.arc-site .intro p {
    font-size:16px
  }
.arc-site .service-list {
    grid-template-columns:1fr 1fr;
    row-gap:10px
  }
.arc-site .service-list .arc-service:nth-child(3) {
    border:0;
    padding-left:0
  }
.arc-site .contact-grid {
    grid-template-columns:1fr;
    gap:32px
  }
.arc-site .services,
.arc-site .contact {
    padding-block:38px
  }
}
@media(max-width:520px) {
.arc-site nav {
    font-size:13px;
    gap:13px
  }
.arc-site .hero {
    grid-template-columns:1fr;
    padding-block:42px;
    position:relative
  }
.arc-site .drawing {
    position:absolute;
    top:43px;
    right:0;
    width:23%;
    padding:6px
  }
.arc-site .plate {
    padding:6px
  }
.arc-site .plate i {
    display:none
  }
.arc-site h1 {
    font-size:clamp(45px,11.9vw,62px);
    max-width:76%
  }
.arc-site .intro p {
    max-width:285px;
    margin:20px 0 25px
  }
.arc-site .service-list .arc-service {
    padding-left:15px;
    padding-right:6px
  }
.arc-site .fields {
    grid-template-columns:1fr
  }
.arc-site .brand .arc-wordmark img {
    width:96px
  }
.arc-site .brand .arc-mark img {
    width:20px
  }
}
@media(prefers-reduced-motion:reduce) {
.arc-site {
    scroll-behavior:auto
  }
}

.arc-site .wp-block-group {
  min-width: 0;
}

.arc-site figure {
  margin: 0;
}

.arc-site .brand {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
}

.arc-site .brand figure {
  flex-shrink: 0;
}

.arc-site .brand img {
  display: block;
}

.arc-site .wp-block-button__link {
  border-radius: 0;
  line-height: 1.5;
}

.arc-site .contact-person {
  margin-top: 30px;
  line-height: 1.65;
}

.arc-site .person-name {
  font-size: 1.2rem;
}

.arc-site .person-role {
  color: #536078;
}

.arc-site .person-phone {
  margin-top: 16px;
}

.arc-site .person-email {
  overflow-wrap: anywhere;
}

.arc-site .contact-person a:hover {
  text-decoration: underline;
}

.arc-site .plate {
  border: 1px solid #ffffff26;
}

.arc-site input[hidden] {
  display: none;
}