/* Salvus Trading — base, components, then responsive overrides. */

@font-face {
  font-family:Manrope;
  src:url('assets/manrope-latin.ttf') format('truetype');
  font-style:normal;
  font-weight:200 800;
  font-display:swap
}

:root {
  --navy:#10243a;
  --blue:#1762d0;
  --muted:#7c8a99;
  --body:#526173;
  --paper:#fff;
  --soft:#f3f6f8;
  --line:#dce2e8;
  --header-height:96px;
  --gutter:clamp(22px,4.5vw,76px);
  --font:Manrope,'Helvetica Neue',Arial,sans-serif
}

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

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

body {
  margin:0;
  background:var(--paper);
  color:var(--navy);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased
}

body,button,input,select,textarea {
  font-family:var(--font)
}

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

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

button,a,input,textarea,select {
  -webkit-tap-highlight-color:transparent
}

button {
  cursor:pointer
}

button:disabled {
  cursor:not-allowed;
  opacity:.6;
}

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

figure,p,h1,h2,h3,dl,dd {
  margin:0
}

button {
  color:inherit
}

a,button {
  touch-action:manipulation
}

button {
  border:0
}

a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:3px solid var(--blue);
  outline-offset:5px
}

[hidden] {
  display:none!important
}

::selection {
  color:white;
  background:var(--blue)
}

.shell {
  width:min(100%,1600px);
  margin-inline:auto;
  padding-inline:var(--gutter)
}

.section-space {
  padding-block:112px
}

.eyebrow {
  font-size:10px;
  font-weight:750;
  letter-spacing:.15em;
  line-height:1.6
}

.blue-square {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--blue);
  margin-right:9px;
  vertical-align:1px
}

h1,h2 {
  font-weight:500;
  letter-spacing:-.055em
}

h2 {
  font-size:clamp(38px,4.2vw,66px);
  line-height:1.12
}

.muted {
  color:var(--muted)
}

.text-link {
  display:inline-flex;
  align-items:center;
  gap:19px;
  font-size:12px;
  font-weight:700;
  line-height:1.6;
  padding-block:7px;
  background:none;
  text-align:left
}

.text-link span {
  font-size:19px;
  transition:transform .25s
}

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

.button {
  display:inline-flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  min-height:52px;
  padding:16px 22px;
  font-size:12px;
  font-weight:650;
  border:1px solid transparent;
  transition:background .2s,transform .2s
}

.button:hover {
  transform:translateY(-2px)
}

.button span {
  font-size:18px;
  line-height:1
}

.button-blue {
  background:var(--blue);
  color:white
}

.button-blue:hover {
  background:#104fae
}

.button-navy {
  background:var(--navy);
  color:white
}

.button-navy:hover {
  background:#25435e
}

.skip-link {
  position:fixed;
  top:10px;
  left:10px;
  z-index:30;
  background:white;
  padding:14px;
  transform:translateY(-160%)
}

.skip-link:focus {
  transform:translateY(0)
}

.site-header {
  position:sticky;
  top:0;
  z-index:20;
  background:rgba(255,255,255,.96);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(16px)
}

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

.brand {
  display:inline-flex;
  gap:11px;
  align-items:center;
  flex-shrink:0
}

.brand-mark {
  width:33px;
  height:37px;
  color:var(--blue)
}

.brand-name {
  font-size:32px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.065em;
  display:block
}

.brand-caption {
  display:block;
  font-size:7px;
  font-weight:700;
  letter-spacing:.18em;
  margin-top:7px
}

.main-nav {
  display:flex;
  align-items:center;
  gap:34px;
  font-size:11px;
  font-weight:650
}

.main-nav>a {
  position:relative;
  padding-block:12px
}

.main-nav>a:not(.nav-contact)::after {
  content:'';
  position:absolute;
  height:2px;
  bottom:4px;
  left:0;
  width:0;
  background:var(--blue);
  transition:width .2s
}

.main-nav>a:hover::after,.main-nav>a[aria-current]::after {
  width:100%
}

.main-nav .nav-contact {
  display:flex;
  gap:33px;
  align-items:center;
  background:var(--navy);
  color:white;
  padding:14px 20px
}

.nav-contact span {
  font-size:18px
}

.nav-contact:hover {
  background:var(--blue)
}

.menu-toggle {
  display:none
}

.hero {
  background:#fafbfc
}

.hero-grid {
  display:grid;
  grid-template-columns:44% 56%;
  align-items:stretch;
  padding-top:32px
}

.hero-copy {
  padding:49px 20px 32px 0;
  position:relative;
  z-index:1
}

.hero .eyebrow {
  font-size:9px
}

.hero h1 {
  font-size:clamp(54px,5.65vw,89px);
  line-height:1.04;
  margin-top:28px
}

.hero h1 em {
  font-style:normal;
  color:var(--blue)
}

.hero-intro {
  font-size:13px;
  line-height:1.9;
  color:var(--body);
  max-width:360px;
  margin-top:25px
}

.hero-actions {
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:30px
}

.hero-actions .text-link {
  font-size:11px;
  gap:10px
}

.hero-footnote {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:9px;
  color:var(--body);
  margin-top:52px
}

.hero-footnote>span {
  color:var(--blue);
  font-size:15px
}

.hero-visual {
  position:relative;
  min-width:0;
  margin-right:calc(-1 * var(--gutter));
  overflow:hidden;
  background:#e3e9ee
}

.hero-visual>img {
  height:100%;
  position:absolute;
  object-fit:cover;
  object-position:52% center
}

.hero-visual figcaption {
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  padding:17px 24px;
  background:rgba(255,255,255,.88);
  display:flex;
  justify-content:space-between;
  gap:16px;
  font-size:8px;
  font-weight:650;
  letter-spacing:.08em
}

.hero-visual figcaption>span:last-child {
  letter-spacing:0
}

.hero-visual figcaption span span {
  margin-left:12px
}

.hero-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  min-height:76px;
  font-size:8px;
  font-weight:600;
  letter-spacing:.1em
}

.hero-bottom>a {
  font-size:10px;
  letter-spacing:0
}

.hero-bottom>a>span {
  margin-left:20px
}

.section-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:30px;
  margin-bottom:56px
}

.section-heading .eyebrow {
  margin-top:10px
}

.section-heading h2 {
  width:65%
}

.about-grid {
  display:grid;
  grid-template-columns:55% 1fr;
  gap:9%;
  align-items:center
}

.about-image {
  background:var(--soft)
}

.about-image>img {
  aspect-ratio:1.16;
  object-fit:cover
}

.about-image figcaption {
  background:white;
  padding-top:17px;
  font-size:8px;
  letter-spacing:.12em;
  color:var(--body)
}

.about-copy {
  padding-right:12px
}

.about-copy .lead {
  font-size:27px;
  line-height:1.35;
  letter-spacing:-.035em;
  margin-bottom:22px
}

.about-copy>p:not(.lead) {
  font-size:12px;
  line-height:1.9;
  color:var(--body);
  margin-bottom:16px
}

.about-copy>.text-link {
  margin-top:6px
}

.about-note {
  margin-top:36px;
  border-top:1px solid var(--line);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  gap:18px
}

.about-note>span {
  font-size:8px;
  letter-spacing:.12em;
  padding-top:3px
}

.about-note>p {
  font-size:13px;
  line-height:1.6
}

.products {
  background:#f5f7f9
}

.products-heading {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:30px;
  margin-bottom:48px
}

.products-heading .eyebrow {
  margin-bottom:22px
}

.products-heading>p {
  font-size:12px;
  color:var(--body);
  line-height:1.9;
  padding-bottom:5px
}

.category-grid {
  display:grid;
  grid-template-columns:repeat(12,minmax(0,1fr));
  gap:40px 24px
}

.category {
  min-width:0
}

.category-mobile {
  grid-column:span 7
}

.category-appliances {
  grid-column:span 5
}

.category-third {
  grid-column:span 4
}

.category-half {
  grid-column:span 6
}

.category a {
  display:block;
  height:100%
}

.category-image {
  position:relative;
  overflow:hidden;
  background:#e7edf2
}

.category-image img {
  height:100%;
  object-fit:cover;
  transition:transform .65s cubic-bezier(.2,.6,.3,1)
}

.category-mobile .category-image,.category-appliances .category-image {
  height:390px
}

.category-third .category-image {
  height:250px
}

.category-half .category-image {
  height:300px
}

.category-appliances img {
  object-position:65% center
}

.category-number {
  position:absolute;
  top:17px;
  left:18px;
  font-size:9px;
  background:rgba(255,255,255,.86);
  padding:5px 7px;
  font-weight:650
}

.category-caption {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding-top:20px
}

.category h3 {
  font-size:clamp(14px,1.3vw,20px);
  font-weight:600;
  letter-spacing:-.025em;
  line-height:1.4
}

.category p {
  font-size:10px;
  color:var(--body);
  line-height:1.8;
  margin-top:7px
}

.category-arrow {
  font-size:25px;
  line-height:1.1;
  transition:transform .25s;
  flex-shrink:0
}

.category a:hover .category-image img {
  transform:scale(1.035)
}

.category a:hover .category-arrow {
  transform:translate(3px,-3px)
}

.products-note {
  margin-top:48px;
  border-top:1px solid var(--line);
  padding-top:25px;
  font-size:12px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px
}

.why {
  padding-bottom:0
}

.why-grid {
  display:grid;
  grid-template-columns:47% 1fr;
  gap:6%;
  padding-bottom:104px
}

.why-heading .eyebrow {
  margin-bottom:26px
}

.why-heading>p:last-child {
  font-size:12px;
  line-height:1.9;
  color:var(--body);
  margin-top:26px
}

.reason {
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:40px 1fr;
  gap:13px;
  padding:25px 0
}

.reason:last-child {
  border-bottom:1px solid var(--line)
}

.reason>span {
  font-size:10px;
  color:var(--blue);
  font-weight:700;
  padding-top:4px
}

.reason h3 {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.035em;
  line-height:1.5
}

.reason p {
  font-size:12px;
  color:var(--body);
  line-height:1.9;
  margin-top:9px;
  max-width:390px
}

.visual-interlude {
  position:relative;
  height:510px;
  max-width:1800px;
  margin-inline:auto;
  overflow:hidden;
  background:#e8e8e5
}

.visual-interlude>img {
  height:100%;
  object-fit:cover;
  object-position:center 57%
}

.interlude-copy {
  position:absolute;
  inset:0;
  padding:64px var(--gutter);
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  background:linear-gradient(90deg,rgba(242,243,242,.97) 0%,rgba(242,243,242,.75) 27%,transparent 62%)
}

.interlude-copy>.eyebrow {
  font-size:8px
}

.interlude-copy>p:not(.eyebrow) {
  font-size:clamp(34px,4.2vw,65px);
  letter-spacing:-.055em;
  line-height:1.1;
  margin:24px 0
}

.interlude-copy em {
  font-style:normal;
  color:var(--blue)
}

.contact {
  display:grid;
  grid-template-columns:46% 1fr;
  gap:8%;
  padding-top:116px;
  padding-bottom:120px
}

.contact-intro .eyebrow {
  margin-bottom:24px
}

.contact-intro>p:not(.eyebrow):not(.placeholder-note) {
  font-size:12px;
  color:var(--body);
  line-height:1.9;
  margin-top:25px
}

.contact-details {
  margin-top:32px;
  display:grid;
  gap:18px
}

.contact-details dt {
  font-size:8px;
  letter-spacing:.13em;
  font-weight:700;
  color:var(--body);
  margin-bottom:5px
}

.contact-details dd {
  font-size:13px;
  line-height:1.6
}

.contact-details a:hover {
  color:var(--blue)
}

.whatsapp-contact {
  margin-top:23px
}

.placeholder-note {
  font-size:9px;
  line-height:1.7;
  color:var(--body);
  max-width:320px;
  margin-top:13px
}

.inquiry-panel {
  padding-top:12px
}

.form-title {
  font-size:29px;
  letter-spacing:-.04em;
  font-weight:550
}

.form-intro {
  font-size:12px;
  color:var(--body);
  line-height:1.8;
  margin-top:10px;
  margin-bottom:30px
}

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

.field {
  margin-bottom:23px;
  min-width:0
}

.field label {
  display:block;
  font-size:10px;
  font-weight:650;
  margin-bottom:10px
}

.field label>span:not(.optional) {
  color:var(--blue)
}

.optional {
  color:var(--body);
  font-weight:400
}

input,select,textarea {
  width:100%;
  min-width:0;
  color:var(--navy);
  background:transparent;
  border:0;
  border-bottom:1px solid #b6c2cc;
  border-radius:0;
  padding:9px 0 13px;
  font-size:12px;
  line-height:1.6
}

input::placeholder,textarea::placeholder {
  color:#657382;
  opacity:1
}

textarea {
  resize:vertical
}

select {
  padding-right:22px;
  white-space:normal;
  font-size:11px
}

input:focus,textarea:focus,select:focus {
  border-color:var(--blue)
}

.form-submit {
  width:100%;
  margin-top:2px
}

.form-note {
  font-size:9px;
  line-height:1.7;
  color:var(--body);
  margin-top:14px
}

.form-status {
  font-size:12px;
  line-height:1.7;
  margin-top:16px;
  color:var(--blue)
}

.form-status:empty {
  display:none
}

.message-preview {
  margin-top:20px;
  background:var(--soft);
  padding:20px
}

.message-preview>label {
  font-size:10px;
  font-weight:700
}

.message-preview textarea {
  margin-top:8px;
  font-size:11px;
  line-height:1.7
}

.preview-actions {
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:10px;
  margin-top:10px
}

.preview-actions .text-link {
  font-size:10px
}

.noscript-note {
  margin-top:16px;
  font-size:12px;
  line-height:1.7
}

.site-footer {
  background:var(--navy);
  color:white
}

.footer-main {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:35px;
  padding-top:52px;
  padding-bottom:43px
}

.footer-brand .brand-mark {
  color:#81afff
}

.footer-main>div>p {
  font-size:10px;
  color:#bbc6d2;
  margin-top:18px
}

.footer-links {
  display:flex;
  flex-wrap:wrap;
  gap:24px;
  font-size:10px
}

.footer-links a:hover,.footer-top:hover {
  color:#9cc0ff
}

.footer-top {
  display:flex;
  gap:24px;
  font-size:10px;
  align-items:center
}

.footer-top span {
  font-size:20px
}

.footer-bottom {
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding-block:23px;
  border-top:1px solid #34465a;
  font-size:8px;
  color:#bbc6d2
}

.reveal.is-pending {
  opacity:0;
  transform:translateY(22px)
}

.reveal {
  transition:opacity .7s ease,transform .7s ease
}

@media(min-width:1600px) {
  .hero-visual {
    margin-right:0
  }

  .hero-copy {
    padding-block:70px 50px
  }

  .hero-footnote {
    margin-top:64px
  }

}

@media(max-width:1100px) {
  :root {
    --header-height:84px
  }

  .main-nav {
    gap:22px
  }

  .main-nav .nav-contact {
    gap:18px
  }

  .hero-grid {
    grid-template-columns:46% 54%
  }

  .hero-copy {
    padding-top:35px
  }

  .hero h1 {
    font-size:6.1vw
  }

  .hero-actions {
    gap:15px
  }

  .hero-actions .button {
    padding-inline:15px;
    gap:17px
  }

  .hero-footnote {
    margin-top:32px
  }

  .hero-visual figcaption {
    padding-inline:16px;
    font-size:7px
  }

  .hero-visual figcaption>span:last-child {
    display:none
  }

  .section-space {
    padding-block:85px
  }

  .about-grid {
    gap:6%
  }

  .about-copy .lead {
    font-size:25px
  }

  .category-mobile .category-image,.category-appliances .category-image {
    height:320px
  }

  .category-third .category-image {
    height:210px
  }

  .category-half .category-image {
    height:260px
  }

  .why {
    padding-bottom:0
  }

  .why-grid {
    padding-bottom:80px
  }

  .visual-interlude {
    height:440px
  }

  .contact {
    gap:6%
  }

  .footer-links {
    gap:15px
  }

  .footer-main {
    gap:24px
  }

  .footer-top {
    gap:15px
  }

}

@media(max-width:900px) {
  .brand-name {
    font-size:29px
  }

  .brand-mark {
    width:29px
  }

  .main-nav {
    font-size:10px;
    gap:17px
  }

  .hero-actions {
    align-items:flex-start;
    flex-direction:column;
    gap:10px
  }

  .hero-intro {
    font-size:12px
  }

  .hero-footnote {
    font-size:8px
  }

  .hero-bottom {
    font-size:7px
  }

  .about-copy .lead {
    font-size:23px
  }

  .about-copy>p:not(.lead) {
    font-size:11px
  }

  .about-note {
    margin-top:23px
  }

  .category-third .category-caption {
    min-height:90px
  }

  .reason h3 {
    font-size:16px
  }

  .reason p {
    font-size:11px
  }

  .reason {
    padding-block:22px
  }

  .footer-links {
    max-width:260px;
    line-height:1.8
  }

  .footer-main {
    align-items:flex-start
  }

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

}

@media(max-width:760px) {
  html:not(.js) .site-header {
    position:static;
  }
  :root {
    --header-height:76px;
    --gutter:24px
  }

  .header-inner {
    flex-wrap:wrap;
    height:auto;
    min-height:var(--header-height);
    gap:0;
    padding-block:18px
  }

  .brand-mark {
    height:32px;
    width:28px
  }

  .brand-name {
    font-size:29px
  }

  .brand-caption {
    font-size:6px
  }

  .menu-toggle:not([hidden]) {
    display:flex;
    align-items:center;
    gap:14px;
    background:transparent;
    padding:9px 0 9px 15px;
    font-size:11px;
    font-weight:650
  }

  .menu-lines {
    display:block;
    width:22px;
    height:14px;
    border-top:1px solid var(--navy);
    border-bottom:1px solid var(--navy);
    position:relative
  }

  .menu-lines::after {
    content:'';
    position:absolute;
    top:6px;
    left:0;
    width:22px;
    border-top:1px solid var(--navy)
  }

  .menu-toggle[aria-expanded=true] .menu-lines {
    border-bottom:0;
    transform:translateY(5px) rotate(45deg)
  }

  .menu-toggle[aria-expanded=true] .menu-lines::after {
    top:-1px;
    transform:rotate(90deg)
  }

  .main-nav {
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding-top:16px;
    font-size:13px
  }

  .main-nav>a {
    padding:14px 2px;
    border-top:1px solid var(--line)
  }

  .main-nav .nav-contact {
    justify-content:space-between;
    margin-top:10px;
    padding:14px 18px
  }

  .main-nav>a:not(.nav-contact)::after {
    display:none
  }

  .main-nav>a[aria-current] {
    color:var(--blue)
  }

  .main-nav>a.nav-contact[aria-current] {
    color:white
  }

  .hero-grid {
    grid-template-columns:1fr;
    padding-top:0
  }

  .hero-copy {
    padding:42px 0 30px
  }

  .hero .eyebrow {
    font-size:8px
  }

  .hero h1 {
    font-size:clamp(54px,10.6vw,78px);
    margin-top:25px;
    line-height:1.03
  }

  .hero-intro {
    font-size:12px;
    max-width:400px;
    margin-top:23px
  }

  .hero-actions {
    flex-direction:row;
    align-items:center;
    gap:20px;
    margin-top:24px
  }

  .hero-actions .button {
    font-size:10px;
    min-height:48px;
    padding:13px 16px;
    gap:17px
  }

  .hero-actions .text-link {
    font-size:10px;
    gap:8px
  }

  .hero-footnote {
    margin-top:26px;
    font-size:8px
  }

  .hero-visual {
    margin-inline:calc(-1 * var(--gutter));
    height:auto;
    aspect-ratio:1.25;
  }

  .hero-visual>img {
    object-position:center;
    height:100%;
    width:100%
  }

  .hero-visual figcaption {
    padding:13px var(--gutter);
    font-size:7px
  }

  .hero-visual figcaption>span:last-child {
    display:block;
    font-size:7px
  }

  .hero-bottom {
    min-height:62px;
    padding-block:16px;
    gap:12px;
    font-size:6px;
    letter-spacing:.07em
  }

  .hero-bottom>span:last-child {
    display:none
  }

  .hero-bottom>a {
    font-size:9px;
    flex-shrink:0
  }

  .hero-bottom>a>span {
    margin-left:10px
  }

  .section-space {
    padding-block:68px
  }

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

  .section-heading .eyebrow {
    margin:0 0 21px
  }

  .section-heading h2 {
    width:auto
  }

  h2 {
    font-size:clamp(36px,7vw,52px)
  }

  .about-grid {
    grid-template-columns:1fr;
    gap:30px
  }

  .about-image>img {
    aspect-ratio:1.3
  }

  .about-image figcaption {
    font-size:7px;
    padding-top:12px
  }

  .about-copy {
    padding:0;
    max-width:530px
  }

  .about-copy .lead {
    font-size:26px
  }

  .about-copy>p:not(.lead) {
    font-size:12px
  }

  .about-copy>.text-link {
    font-size:11px
  }

  .about-note {
    margin-top:27px;
    justify-content:flex-start;
    gap:55px
  }

  .products-heading {
    display:block;
    margin-bottom:28px
  }

  .products-heading .eyebrow {
    margin-bottom:19px
  }

  .products-heading>p {
    margin-top:19px;
    font-size:11px
  }

  .category-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:30px 16px
  }

  .category-mobile,.category-appliances,.category-half {
    grid-column:span 2
  }

  .category-third {
    grid-column:span 1
  }

  .category-third:nth-of-type(5) {
    grid-column:span 2
  }

  .category-mobile .category-image {
    height:auto;
    aspect-ratio:1.4
  }

  .category-appliances .category-image {
    height:auto;
    aspect-ratio:1.5
  }

  .category-third .category-image {
    height:auto;
    aspect-ratio:1
  }

  .category-third:nth-of-type(5) .category-image {
    aspect-ratio:1.65
  }

  .category-half .category-image {
    height:auto;
    aspect-ratio:1.6
  }

  .category-number {
    top:10px;
    left:11px;
    font-size:8px;
    padding:4px 6px
  }

  .category-caption {
    padding-top:13px;
    gap:9px
  }

  .category h3 {
    font-size:16px
  }

  .category-third h3 {
    font-size:13px
  }

  .category p {
    font-size:10px;
    margin-top:5px
  }

  .category-third .category-arrow {
    font-size:20px
  }

  .category-arrow {
    font-size:23px
  }

  .category-third .category-caption {
    min-height:0
  }

  .products-note {
    margin-top:30px;
    padding-top:20px;
    font-size:11px;
    flex-wrap:wrap;
    gap:7px
  }

  .products-note .text-link {
    font-size:11px
  }

  .why {
    padding-bottom:0
  }

  .why-grid {
    grid-template-columns:1fr;
    gap:34px;
    padding-bottom:55px
  }

  .why-heading .eyebrow {
    margin-bottom:20px
  }

  .why-heading h2 br:nth-of-type(2) {
    display:none
  }

  .why-heading>p:last-child {
    font-size:11px;
    margin-top:20px
  }

  .reason {
    grid-template-columns:30px 1fr;
    gap:10px;
    padding-block:22px
  }

  .reason h3 {
    font-size:18px
  }

  .reason p {
    font-size:12px;
    max-width:none
  }

  .visual-interlude {
    height:510px
  }

  .visual-interlude>img {
    object-position:65% center
  }

  .interlude-copy {
    justify-content:flex-start;
    padding:31px var(--gutter);
    background:linear-gradient(180deg,rgba(246,247,246,.98),rgba(246,247,246,.9) 22%,rgba(246,247,246,0) 58%)
  }

  .interlude-copy>p:not(.eyebrow) {
    font-size:37px;
    margin:17px 0 12px
  }

  .interlude-copy>.text-link {
    font-size:10px
  }

  .contact {
    grid-template-columns:1fr;
    gap:40px
  }

  .contact-intro>p:not(.eyebrow):not(.placeholder-note) {
    font-size:12px;
    margin-top:20px
  }

  .contact-details {
    grid-template-columns:1fr 1fr;
    gap:22px 15px
  }

  .contact-details>div:first-child {
    grid-column:span 2
  }

  .contact-details dd {
    font-size:12px;
    overflow-wrap:anywhere
  }

  .contact-intro>.whatsapp-contact {
    font-size:11px
  }

  .placeholder-note {
    max-width:350px
  }

  .inquiry-panel {
    padding-top:30px;
    border-top:1px solid var(--line)
  }

  .form-title {
    font-size:28px
  }

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

  .field {
    margin-bottom:21px
  }

  .field label {
    font-size:10px
  }

  input,select,textarea {
    font-size:16px
  }

  .form-note {
    font-size:10px
  }

  .form-submit {
    font-size:12px
  }

  .footer-main {
    flex-wrap:wrap;
    gap:30px;
    padding-block:36px
  }

  .footer-main>div:first-child {
    flex-basis:100%
  }

  .footer-links {
    max-width:220px;
    gap:14px 22px;
    font-size:10px
  }

  .footer-top {
    font-size:9px;
    margin-left:auto;
    gap:15px
  }

  .footer-bottom {
    flex-wrap:wrap;
    font-size:8px;
    line-height:1.7;
    gap:12px
  }

  .footer-bottom>span:first-child {
    flex-basis:100%
  }

  .footer-bottom>span:last-child {
    margin-left:auto
  }

}

@media(max-width:380px) {
  :root {
    --gutter:20px
  }

  .hero h1 {
    font-size:51px
  }

  .hero-actions {
    gap:12px
  }

  .hero-actions .button {
    font-size:9px;
    padding-inline:12px;
    gap:12px
  }

  .hero-actions .text-link {
    font-size:9px
  }

  .hero-visual figcaption>span:last-child {
    display:none
  }

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

  .category h3 {
    font-size:14px
  }

  .category-third h3 {
    font-size:12px
  }

  .category-caption {
    gap:6px
  }

  .category p {
    font-size:9px
  }

  .footer-top {
    gap:9px
  }

  .footer-links {
    max-width:200px
  }

  .contact-details {
    grid-template-columns:1fr
  }

  .contact-details>div:first-child {
    grid-column:auto
  }

}

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

  *,*::before,*::after {
    transition:none!important;
    animation:none!important
  }

  .reveal.is-pending {
    opacity:1;
    transform:none
  }

}