/* Reset */
* {
 padding: 0;
 margin: 0;
 outline: 0;
 box-sizing: border-box;
}

img {
 height: auto;
 display: inline-block;
 vertical-align: middle;
}

a,
button,
input[type="submit"],
input[type="button"],
input[type="reset"],
input[type="file"],
input[type="image"],
label[for] {
 cursor: pointer;
}

input[type="button"],
input[type="text"],
input[type="password"],
input[type="date"],
input[type="datetime"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="email"],
input[type="number"],
input[type="search"],
input[type="tel"],
input[type="time"],
input[type="url"],
input[type="color"],
textarea,
a[href^="tel"] {
 appearance: none;
}

/* Base styles */
html {
 font-size: 10px;
}

body {
 color: #fff;
 background: #000;
 font-family: 'Bruichladdich Sans', sans-serif;
}

/* Typography */
h1 {
 font-size: 3rem;
 line-height: 1;
 font-family: 'Bruichladdich Sans', sans-serif;
 text-transform: uppercase;
}

h2 {
 font-size: 2rem;
 line-height: 1.14;
 font-weight: 400;
}

h3 {
 font-size: 2rem;
 line-height: 1.2;
}

/* Shell */
.shell {
 width: 100%;
 max-width: 160rem;
 padding: 0 5rem;
 margin-inline: auto;
}

.shell--large {
 max-width: 192rem;
 padding: 0 5rem;
}

/* Header */
.header {
 padding: 1.5rem 0;
}

.header .header__logo {
 display: flex;
 justify-content: center;
 max-width: 15rem;
}

.header .header__logo img {
 max-width: 100%;
}

/* Section Form */
.section-form {
 padding: 8.8rem 0 11.6rem;
}

/* Form */
.form .form__entry + .form__entry {
 margin-top: 8.8rem;
}

.form .form__title {
 padding-bottom: 4rem;
 margin-bottom: 4rem;
 border-bottom: .1rem solid #D9D9D9;
}

.form__fields {
 display: grid;
 gap: 4rem;
 grid-template-columns: 1fr 37.3%;
}

.form .form__cols {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 4rem;
}

.form .form__col-title {
 margin-bottom: 2.4rem;
}

.form .form__col-checkboxes {
 display: flex;
 flex-direction: column;
 gap: 1.6rem;
}

.form .form__controls:has(input:not([type=checkbox])) label {
 display: block;
}

.form .form__controls:has(.hidden-state) {
 display: none;
}

.form .form__wrapper-entry + .form__wrapper-entry {
 margin-top: 3.2rem;
}

.form .form__group {
 width: 100%;
}

.form .form__group-row {
 display: flex;
}

.form .form__group-row .form__controls {
 flex-grow: 1;
}

.form .form__info {
 color: #F2A62A;
 font-size: 1.6rem;
 text-align: right;
 margin-bottom: 1.8rem;
}

.form .form__row {
 display: flex;
 flex-wrap: wrap;
 margin: -.8rem;
}

.form .form__row + .form__row {
 margin-top: .8rem;
}

.form .form__controls,
.form .form__description,
.form .form__row > label {
 width: 100%;
 padding: .8rem;
}

.form .form__row > label {
 padding-top: 0;
 padding-bottom: 0;
}

.form .form__description {
 text-align: right;
 padding-top: 0;
 font-size: 1.4rem;
}

.form .form__description a {
 color: inherit;
 transition: color .4s;
}

.form .form__description a:hover {
 color: #F2A62A;
}

.form .form__controls--1of2 {
 width: 50%;
}

.form .form__controls--1of3 {
 width: 33.33%;
}

.form .form__row > label,
.form .form__controls label {
 display: block;
 margin-bottom: 1rem;
 font-size: 1.5rem;
 font-weight: 400;
}

.form .form__controls label > span {
 color: #F2A62A;
}

.form .form__actions {
 margin-top: 7.7rem;
}

.form input[type=submit] {
 cursor: pointer;
 background: #10cfc9;
 color: #000;
 padding: 1.4rem 5.9rem;
 text-transform: uppercase;
 font-size: 1.8rem;
 border: 0;
 outline: none;
 font-family: 'New Frank', sans-serif;
 transition: background .4s;
}

.form input[type=submit]:hover {
 background: #d9d9d9;
}

.form .form__note {
 margin-top: 3rem;
 font-size: 1.4rem;
 line-height: 1.7143;
}

.form .form__image {
 position: relative;
 width: 78.9%;
 margin-inline: auto;
 aspect-ratio: 442/673;
 overflow: hidden;
}

.form .form__image img {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Checkbox */
.checkbox {
 position: relative;
 color: rgba(256, 256, 256, .7);
 font-size: 1.5rem;
 line-height: 1.33;
 display: grid;
 gap: .8rem;
 grid-template-columns: 2rem 1fr;
}

.checkbox--alt {
 gap: .4rem;
}

.checkbox:after {
 content: '';
 position: absolute;
 top: .2rem;
 left: .7rem;
 display: inline-block;
 transform: rotate(45deg);
 height: 1.1rem;
 width: .5rem;
 border-bottom: .2rem solid #F2A62A;
 border-right: .2rem solid #F2A62A;
 opacity: 0;
 visibility: hidden;
 transition: opacity .3s, visibility .3s; 
}
 
.checkbox input {
 margin-top: 0.1rem;
 appearance: none;
 -webkit-appearance: none;
 width: 2rem;
 height: 2rem;
 border: 1px solid #d9d9d9;
 border-radius: .2rem;
 background: transparent;
}

.checkbox:has(input:checked):after {
 opacity: 1;
 visibility: visible;
}

/* Field */
input:not([type=checkbox]):not([type=radio]):not([type=submit]),
select {
 background: #18181A;
 color: rgba(255, 255, 255, .5);
 border: 1px solid rgba(217, 217, 217, .1);
 padding: 0 2rem;
 height: 5.2rem;
 line-height: 5rem;
 border-radius: .4rem;
 font-size: 1.5rem;
 width: 100%;
 font-family: 'New Frank', sans-serif;
}

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type="date"] {
 font-weight: 300;
}

input[type="date"]::-webkit-calendar-picker-indicator { 
 width: 1.8rem;
 height: 1.8rem;
 background: url(https://image.communications.bruichladdich.com/lib/fe39157075640579721677/m/1/aa809013-822b-41db-903a-913f9536b9e0.png); 
 background-size: contain;
 background-repeat: no-repeat;
}

/* Select */
.select {
 position: relative;
}

.select:after {
 content: '';
 position: absolute;
 top: 45%;
 right: 2.7rem;
 border: solid rgba(255, 255, 255, .5);
 border-width: 0 .2rem .2rem 0;
 display: inline-block;
 padding: .4rem;
 transform: translateY(-50%) rotate(45deg);
}

.select select {
 appearance: none;
 -webkit-appearance: none;
}

.read-only {
     background: #3b3b3b !important;
   }

/* Footer */
.footer .footer__wrapper {
 padding: 6rem 0;
 border: solid #303030;
 border-width: .1rem 0;
 display: flex;
 gap: 3.2rem;
 flex-direction: column;
 align-items: center;
 justify-content: center;
}

.footer .footer__bar {
 padding: 2.2rem 0 4.5rem;
 font-size: 1.5rem;
 line-height: 1;
 color: rgba(255, 255, 255, .7);
}

.footer .footer__bar a {
 color: rgba(255, 255, 255, .7);
 text-decoration: none;
}

.footer .footer__bar ul {
 list-style-type: none;
 display: flex;
 justify-content: center;
}

.footer .footer__bar ul li {
 display: flex;
 align-items: center;
}

.footer .footer__bar ul li + li {
 border-left: 1px solid rgba(255, 255, 255, .7);
 margin-left: 1rem;
 padding-left: 1rem;
}

.footer .footer__bar ul li a {
 transition: color .4s;
}

@media(hover: hover) and (pointer: fine) {
 .footer .footer__bar ul li a:hover {
  color: #fff;
 }
}

/* List Socials */
.list-socials {
 list-style-type: none;
 display: flex;
 gap: 1.6rem;
 align-items: center;
}

.list-socials a {
 display: flex;
 align-items: center;
 justify-content: center;
 width: 3.2rem;
 height: 3.2rem;
 border-radius: 50%;
 border: .1rem solid #fff;
 color: #fff;
 transition: color .4s, background .4s;
}

@media(hover: hover) and (pointer: fine) {
 .list-socials a:hover {
  background: #fff;
  color: #000;
 }
}

@media only screen and (max-width: 1199px) {
 /* Shell */
 .shell {
  padding: 0 4rem;
 }

 /* Section Form */
 .section-form {
  padding: 7rem 0 10rem;
 }

 /* Footer */
 .footer .footer__wrapper {
  padding: 4rem 0;
  gap: 2.8rem;
 }

 .footer .footer__bar {
  padding: 2.5rem 0 2.4rem;
 }
}

@media only screen and (max-width: 1023px) {
 /* Typography */
 h1 {
  font-size: 3rem;
 }

 h2 {
  font-size: 2rem;
 }

 /* Shell */
 .shell {
  padding: 0 3rem;
 }

 /* Section Form */
 .section-form {
  padding: 5rem 0 7rem;
 }

 /* Form */
 .form .form__title {
  padding-bottom: 3rem;
  margin-bottom: 3rem;
 }

 .form .form__actions {
  margin-top: 4rem;
 }

 .form .form__entry + .form__entry {
  margin-top: 7rem;
 }

 .form .form__image {
  width: 100%;
 }

 .form__fields {
  gap: 2rem;
  grid-template-columns: 1fr 30%;
 }
}

@media only screen and (max-width: 767px) {
 /* Typography */
 h1 {
  font-size: 2.5rem;
 }

 h3 {
  font-size: 1.5rem;
 }

 /* Shell */
 .shell {
  padding: 0 2rem;
 }

 /* Checkbox */
 .checkbox {
  font-size: 1.5rem;
  line-height: 1.4;
 }

 .checkbox label {
  margin-bottom: 0;
 }

 /* Section Form */
 .section-form {
  padding: 5rem 0;
 }

 /* Form */
 .form .form__actions {
  margin-top: 4rem;
 }

 .form .form__entry + .form__entry {
  margin-top: 6.4rem;
 }

 .form .form__fields {
  gap: 4rem;
  grid-template-columns: 1fr;
 }

 .form .form__row > label, 
 .form .form__controls label {
  font-size: 1.2rem;
  line-height: 1.4;
 }

 /* Footer */
 .footer .footer__wrapper {
  padding-top: 0;
  border-top: 0;
 }
}

@media only screen and (max-width: 575px) {
 /* Typography */
 h1 {
  font-size: 2.5rem;
  line-height: 1.3125;
 }

 h2 {
  font-size: 1.5rem;
 }

 /* Section Form */
 .section-form {
  padding: 1.8rem 0 1.1rem;
 }

 /* Form */
 .form .form__title {
  padding-bottom: 1.5rem;
  margin-bottom: 3rem;
 }

 .form .form__info {
  margin-bottom: 1.2rem;
 }

 .form .form__col-title {
  margin-bottom: 3rem;
 }

 .form .form__actions {
  margin-top: 2.5rem;
 }

 .form .form__entry + .form__entry {
  margin-top: 5rem;
 }

 .form .form__cols {
  grid-template-columns: 1fr;
  gap: 4rem;
 }

 .form .form__controls--1of2 {
  width: 100%;
 }

 .form .form__group-row {
  flex-wrap: wrap;
 }

 .form .form__description {
  text-align: left;
  line-height: 1.14;
  padding-top: .7rem;
 }

 .form .form__wrapper-entry + .form__wrapper-entry {
  margin-top: 2.2rem;
 }

 .form .form__group {
  grid-template-columns: 1fr;
 }

 .form input:not([type=checkbox]):not([type=radio]):not([type=submit]), select {
  font-size: 1.5rem;
 }
}