@font-face {
    font-family: Butler;
    src: url("Font/Butler-Free-Med.otf")
}

@font-face {
    font-family: Bank;
    src: url("Font/F25_Bank_Printer.otf")
}

@font-face {
    font-family: Creato;
    src: url("Font/CreatoDisplay-Light.otf")
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #d9b69d url("Bilder/Mönster4.png") repeat;
    color: #2c1b10;
    font-family: Creato, Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55
}

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

.navbar {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5.2%;
    background: rgba(40, 25, 15, .88);
    gap: 24px
}

.nav-logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto
}

.nav-logo img {
    width: 145px;
    height: 76px;
    object-fit: contain;
    display: block
}

.nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(14px, 2.5vw, 34px);
    flex-wrap: wrap
}

.nav-links a {
    display: flex;
    align-items: center;
    color: #fffaf5;
    font: clamp(12px, .95vw, 16px) Bank, sans-serif;
    letter-spacing: .08em;
    white-space: nowrap;
    transition: color .2s ease
}

.nav-links a:hover,
.nav-links a:focus-visible {
    color: #e5bd99
}

.nav-links img {
    width: 25px;
    height: 25px;
    object-fit: contain
}

.contact-hero {
    width: min(920px, 90%);
    margin: 0 auto;
    padding: 54px 0 36px;
    text-align: center;
    color: #fffaf5
}

.eyebrow {
    margin: 0 0 11px;
    font: 12px Bank, sans-serif;
    letter-spacing: .18em;
    color: #a87954
}

.contact-hero .eyebrow {
    color: #fff0df
}

.contact-hero h1 {
    max-width: 790px;
    margin: 0 auto 12px;
    font: normal clamp(35px, 4.4vw, 58px)/1.12 Butler, Georgia, serif;
    letter-spacing: .01em;
    text-shadow: 0 2px 15px rgba(40, 25, 15, .15)
}

.contact-hero>p:last-child {
    max-width: 670px;
    margin: 0 auto;
    font-size: clamp(16px, 1.3vw, 19px);
    color: #fffaf5;
    line-height: 1.65
}

.contact-layout {
    width: min(1200px, 90%);
    margin: 0 auto 68px;
    display: grid;
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1.35fr);
    gap: 26px;
    align-items: stretch
}

.contact-info {
    position: relative;
    overflow: hidden;
    background: rgba(43, 29, 19, .93);
    color: #fffaf5;
    padding: clamp(27px, 3.2vw, 43px);
    border: 1px solid rgba(255, 250, 245, .14);
    border-radius: 4px
}

.contact-info>.eyebrow {
    color: #e4ba96
}

.contact-info h2,
.form-heading h2 {
    font: normal clamp(27px, 2.5vw, 36px)/1.2 Butler, Georgia, serif;
    margin: 0 0 14px
}

.info-intro {
    margin: 0 0 26px;
    color: #e8dcd2;
    line-height: 1.75
}

.contact-method {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    padding: 13px 12px;
    border: 1px solid rgba(255, 250, 245, .17);
    border-radius: 3px;
    transition: background .2s, border-color .2s;
    min-width: 0
}

.contact-method:hover,
.contact-method:focus-visible {
    background: rgba(255, 250, 245, .08);
    border-color: rgba(255, 250, 245, .42)
}

.method-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    background: #f3dfcd;
    border-radius: 50%
}

.method-icon img {
    width: 23px;
    height: 23px;
    object-fit: contain
}

.method-copy {
    display: flex;
    flex-direction: column;
    min-width: 0
}

.method-copy small {
    font: 10px Bank, sans-serif;
    letter-spacing: .14em;
    color: #d8b08c
}

.method-copy strong {
    font-size: 15px;
    font-weight: normal;
    overflow-wrap: anywhere
}

.method-arrow {
    margin-left: auto;
    color: #e4ba96;
    font-size: 21px
}

.contact-note {
    display: flex;
    gap: 13px;
    margin-top: 27px;
    padding: 19px;
    background: rgba(255, 250, 245, .08);
    border-left: 3px solid #d8b08c
}

.note-mark {
    color: #e4ba96;
    font-size: 23px;
    line-height: 1.2
}

.contact-note strong {
    font-size: 15px;
    font-weight: normal
}

.contact-note p {
    margin: 6px 0 11px;
    color: #e8dcd2;
    font-size: 14px
}

.contact-note a {
    display: inline-block;
    color: #f0c69f;
    font-size: 14px;
    border-bottom: 1px solid rgba(240, 198, 159, .5);
    padding-bottom: 2px
}

.form-panel {
    background: #fffaf5;
    padding: clamp(25px, 3.3vw, 44px);
    border-radius: 4px;
    box-shadow: 0 12px 35px rgba(57, 34, 20, .08)
}

.form-heading {
    padding-bottom: 22px;
    border-bottom: 1px solid #e4d3c5;
    margin-bottom: 22px
}

.form-heading .eyebrow {
    color: #9a704f
}

.form-heading h2 {
    margin-bottom: 9px;
    color: #2c1b10
}

.form-heading>p:last-child {
    margin: 0;
    color: #6a5748
}

.contact-form label:not(.consent):not(.choice) {
    display: flex;
    flex-direction: column;
    gap: 7px;
    font: 13px Bank, sans-serif;
    color: #4b392c;
    letter-spacing: .015em
}

.contact-form label span:not(.consent span) {
    color: #a45e35
}

.contact-form label small {
    font: 12px Creato, Arial, sans-serif;
    color: #887567
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

.contact-form input:not([type=radio]):not([type=checkbox]),
.contact-form select,
.contact-form textarea {
    pointer-events: auto;
    user-select: text;
    position: relative;
    z-index: 1;
    width: 100%;
    min-width: 0;
    border: 1px solid #d8c6b6;
    background: #fff;
    color: #302117;
    border-radius: 2px;
    padding: 12px 13px;
    font: 15px Creato, Arial, sans-serif;
    outline: none;
    transition: border-color .18s, box-shadow .18s
}

.contact-form input:not([type=radio]):not([type=checkbox]),
.contact-form select {
    min-height: 46px
}

.contact-form select {
    cursor: pointer;
    appearance: auto;
    -webkit-appearance: menulist
}

.contact-form textarea {
    resize: vertical;
    min-height: 132px;
    line-height: 1.55
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
    border-color: #9e7454;
    box-shadow: 0 0 0 3px rgba(158, 116, 84, .13)
}

.contact-form>label,
.contact-form .form-row,
.customer-type {
    margin-top: 17px
}

.customer-type {
    padding: 0;
    border: 0;
    margin-left: 0;
    margin-right: 0
}

.customer-type legend {
    margin-bottom: 9px;
    font: 13px Bank, sans-serif;
    color: #4b392c
}

.choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-right: 20px;
    color: #4b392c;
    font-size: 15px;
    cursor: pointer
}

.choice input,
.consent input {
    accent-color: #533925;
    width: 16px;
    height: 16px;
    flex: 0 0 auto
}

.consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 20px;
    color: #665345;
    font-size: 13px;
    line-height: 1.5;
    cursor: pointer
}

.consent input {
    margin-top: 3px
}

.consent b {
    color: #a45e35
}

.submit-button {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: 23px;
    padding: 15px 22px;
    background: #2b1b11;
    color: #fffaf5;
    border: 1px solid #2b1b11;
    border-radius: 2px;
    font: 14px Bank, sans-serif;
    letter-spacing: .09em;
    cursor: pointer;
    transition: background .2s, color .2s, transform .2s
}

.submit-button:hover,
.submit-button:focus-visible {
    background: #553b28;
    border-color: #553b28
}

.submit-button:active {
    transform: translateY(1px)
}

.submit-button:disabled {
    opacity: .65;
    cursor: wait
}

.form-footnote {
    margin: 10px 0 0;
    text-align: center;
    color: #8b7868;
    font-size: 12px
}

.form-status {
    display: none;
    margin: 15px 0 0;
    padding: 12px 14px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 1.5
}

.form-status.success,
.form-status.error {
    display: block
}

.form-status.success {
    background: #e9f3e8;
    color: #28532f;
    border: 1px solid #c5dfc3
}

.form-status.error {
    background: #f9e9e4;
    color: #842f21;
    border: 1px solid #e9c4ba
}

.form-trap {
    position: absolute !important;
    left: -10000px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important
}

.contact-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(25, 16, 10, .68)
}

.contact-modal.is-open {
    display: flex
}

.contact-modal-card {
    width: min(440px, 100%);
    padding: 35px 30px 30px;
    background: #fffaf5;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .25);
    animation: modal-in .18s ease-out
}

.contact-modal-icon {
    width: 54px;
    height: 54px;
    margin: 0 auto 15px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e4efdf;
    color: #35613a;
    font-size: 28px
}

.contact-modal-card h2 {
    margin: 0 0 10px;
    font: normal 29px Butler, Georgia, serif
}

.contact-modal-card p {
    margin: 0 0 22px;
    color: #655244
}

.contact-modal-card button {
    border: 0;
    background: #2b1b11;
    color: #fffaf5;
    padding: 12px 26px;
    font: 13px Bank, sans-serif;
    letter-spacing: .06em;
    cursor: pointer
}

.contact-modal-card button:hover {
    background: #553b28
}

@keyframes modal-in {
    from {
        opacity: 0;
        transform: translateY(8px)
    }

    to {
        opacity: 1;
        transform: translateY(0)
    }
}

footer {
    background: #28190f;
    color: #fffaf5;
    display: grid;
    grid-template-columns: 2fr repeat(3, minmax(0, 1fr));
    gap: 30px;
    padding: 42px max(5%, calc((100% - 1200px)/2));
}

footer img {
    width: 130px;
    max-width: 100%;
    display: block;
    object-fit: contain
}

footer .footer-brand p {
    font: 16px Butler, Georgia, serif;
    margin: 9px 0 0;
    color: #fffaf5
}

footer h4 {
    font: normal 12px Bank, sans-serif;
    letter-spacing: .13em;
    color: #d8b08c;
    margin: 0 0 15px
}

footer a {
    display: block;
    color: #fffaf5;
    font-size: 14px;
    opacity: .82;
    margin: 0 0 9px;
    transition: opacity .2s, color .2s
}

footer a:hover {
    opacity: 1;
    color: #e5bd99
}

@media(max-width:900px) {
    .contact-layout {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
        width: 92%;
        gap: 18px
    }

    .contact-info,
    .form-panel {
        padding: 25px
    }

    .nav-links {
        gap: 16px
    }

    .nav-logo img {
        width: 120px
    }
}

@media(max-width:720px) {
    .navbar {
        align-items: center;
        flex-wrap: wrap;
        padding: 10px 5%;
        gap: 6px 18px
    }

    .nav-logo img {
        width: 110px;
        height: 60px
    }

    .nav-links {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        padding-bottom: 8px
    }

    .nav-links a {
        font-size: 11px
    }

    .nav-links img {
        width: 23px;
        height: 23px
    }

    .contact-hero {
        padding: 38px 0 27px;
        width: 90%
    }

    .contact-hero h1 {
        font-size: clamp(34px, 8vw, 47px)
    }

    .contact-layout {
        grid-template-columns: 1fr;
        width: 90%;
        margin-bottom: 42px
    }

    .contact-info {
        order: 2
    }

    .form-panel {
        order: 1
    }

    .contact-info h2,
    .form-heading h2 {
        font-size: 30px
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 17px
    }

    .form-row label+label {
        margin-top: 0
    }

    footer {
        grid-template-columns: 1fr 1fr;
        gap: 26px;
        padding: 32px 6%
    }

    footer .footer-brand {
        grid-column: 1/-1
    }

    .method-copy strong {
        font-size: 14px
    }
}

@media(max-width:390px) {
    .nav-links {
        gap: 7px
    }

    .nav-links a {
        font-size: 10px
    }

    .contact-info,
    .form-panel {
        padding: 21px
    }

    .choice {
        margin-right: 12px
    }

    footer {
        gap: 20px
    }
}

/* E-postadressen visas som vanlig text, inte som en länk. */
.contact-email {
    cursor: default;
}

.contact-email:hover,
.contact-email:focus-visible {
    background: transparent;
    border-color: rgba(255, 250, 245, .17);
}


/* RESPONSIVITET – endast responsiva tillägg */
@media (max-width: 900px) {
  html, body { max-width: 100%; }
  img, video, iframe { max-width: 100%; }
  .navbar { min-height: 72px; height: auto; padding: 12px 4%; gap: 14px; flex-wrap: wrap; }
  .nav-logo { flex: 0 0 auto; }
  .nav-logo img { width: clamp(95px, 18vw, 145px); height: auto; max-height: 76px; }
  .nav-links { gap: clamp(10px, 2vw, 20px); flex-wrap: wrap; justify-content: center; }
  .nav-links a { font-size: clamp(11px, 1.6vw, 15px); letter-spacing: .04em; }
}
@media (max-width: 600px) {
  .navbar { justify-content: center; padding: 10px 4%; }
  .nav-logo img { width: 105px; max-height: 58px; }
  .nav-links { width: 100%; gap: 10px 14px; }
  .nav-links a { font-size: 11px; white-space: normal; }
  button, input, select, textarea { max-width: 100%; }
  p, li { overflow-wrap: anywhere; }
}

@media (max-width: 900px) {
  .inspiration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .intro-section, .oil-section { grid-template-columns: minmax(0, 1fr); }
  .steps-grid, .quick-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .two-column { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .FormGrid, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .hero, .page-heading { padding: 38px 0 28px; }
}
@media (max-width: 600px) {
  .inspiration-grid, .steps-grid, .quick-steps, .two-column, .form-grid { grid-template-columns: minmax(0, 1fr); }
  .inspiration-page { width: 92%; }
  .content-section { padding: 24px 5%; }
  .help-banner { align-items: flex-start; flex-direction: column; }
  footer { grid-template-columns: minmax(0, 1fr); }
}