@font-face{
  font-family:Unbounded;
  src:url('assets/fonts/unbounded.ttf') format('truetype');
  font-weight:700 900;
  font-display:swap
}
@font-face{
  font-family:Roboto;
  src:url('assets/fonts/roboto.ttf') format('truetype');
  font-weight:400 500;
  font-display:swap
}
@font-face{
  font-family:Roboto;
  src:url('assets/fonts/roboto-bold.ttf') format('truetype');
  font-weight:600 900;
  font-display:swap
}
:root{
  --orange:#de8c00;
  --ink:#111210;
  --muted:#858585;
  --soft:#f5f5f5;
  --display:Unbounded,'Arial Black',sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:2rem
}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:Roboto,Arial,sans-serif;
  font-size:0.75rem
}
button,input,select{
  font:inherit
}
button,a,input,select{
  -webkit-tap-highlight-color:transparent
}
a{
  color:inherit;
  text-decoration:none
}
button{
  cursor:pointer
}
img{
  display:block;
  max-width:100%;
  object-fit:cover
}
button{
  border:0
}
button,a,input,select{
  outline-offset:0.3125rem
}
button:focus-visible,a:focus-visible{
  outline:2px solid var(--orange)
}
h1,h2,h3,p{
  margin:0
}
.site-shell{
  width:100%;
  min-height:100vh;
  overflow:hidden;
  position:relative
}
.container{
  width:86%;
  max-width:60rem;
  margin-inline:auto
}
.header{
  height:4rem;
  display:flex;
  align-items:center;
  gap:3.125rem;
  position:relative;
  z-index:2
}
.logo{
  display:flex;
  flex-direction:column;
  width:5.125rem;
  flex:none
}
.logo svg{
  height:1.4375rem;
  width:5.125rem;
  fill:none;
  stroke:currentColor;
  stroke-width:1.4
}
.logo .logo-accent{
  stroke:var(--orange);
  stroke-width:1.2
}
.logo span{
  font-weight:900;
  font-size:0.4375rem;
  font-style:italic;
  text-align:center;
  white-space:nowrap
}
.nav{
  display:flex;
  gap:1.4375rem;
  font-size:0.625rem;
  color:#5c5c5c;
  white-space:nowrap
}
.nav a:hover{
  color:var(--orange)
}
.header-contact{
  display:flex;
  gap:1rem;
  align-items:center;
  margin-left:auto;
  white-space:nowrap
}
.phone{
  font-weight:700;
  font-size:0.625rem;
  white-space:nowrap
}
.phone span{
  color:#22ae8c;
  font-size:0.9375rem;
  margin-right:0.25rem
}
.button{
  display:inline-flex;
  justify-content:center;
  align-items:center;
  min-height:2.4375rem;
  padding:0 1.5rem;
  border-radius:0.375rem;
  background:linear-gradient(110deg,#e59400,#d98500);
  color:white;
  font-size:0.625rem;
  font-weight:500;
  transition:background .18s,transform .18s,box-shadow .18s
}
.button:hover{
  background:#c87c00;
  box-shadow:0 0.3125rem 0.9375rem #d88b0025;
  transform:translateY(-1px)
}
.button-outline{
  min-height:1.6875rem;
  padding-inline:1.5rem;
  border:1px solid #9b9d9e;
  color:#545454;
  background:transparent;
  font-weight:400
}
.button-outline:hover{
  color:var(--orange);
  background:transparent
}
.menu-toggle{
  display:none
}
.mobile-nav[hidden]{
  display:none
}
.hero{
  height:32.5rem;
  position:relative;
  text-align:center;
  padding-top:2.125rem;
  isolation:isolate
}
.hero:before{
  content:'';
  position:absolute;
  z-index:-2;
  background:linear-gradient(#e9edf1,#f4f4f4);
  inset:-4rem 0 auto;
  height:25.625rem;
  border-radius:0 0 50% 8% / 0 0 8% 4%
}
.hero-copy{
  position:relative;
  z-index:1
}
.hero h1{
  font:900 2.75rem/1.13 var(--display);
  letter-spacing:-1.5px
}
.hero h1>span{
  color:var(--orange);
  font-size:2.5rem;
  white-space:nowrap
}
.japan-flag{
  display:inline-flex;
  width:2.25rem;
  height:1.75rem;
  background:white;
  box-shadow:0 0 0 1px #dedede;
  border-radius:50%;
  vertical-align:middle;
  align-items:center;
  justify-content:center;
  position:relative;
  top:-0.1875rem;
  margin-left:0.375rem;
  transform:rotate(-12deg)
}
.japan-flag:after{
  content:'';
  width:0.9375rem;
  height:0.9375rem;
  background:#d92435;
  border-radius:50%
}
.hero-copy>p{
  font-size:0.6875rem;
  color:#858585;
  margin-top:0.4375rem
}
.hero-actions{
  display:flex;
  gap:0.8125rem;
  align-items:center;
  justify-content:center;
  margin-top:1rem
}
.hero-actions>.button{
  width:7.4375rem
}
.process-link{
  display:flex;
  align-items:center;
  gap:0.5rem;
  text-align:left;
  color:#a3a3a3;
  font-size:0.5625rem;
  line-height:1.2
}
.play{
  height:2.3125rem;
  width:2.3125rem;
  border:1px solid #d4d4d4;
  border-radius:50%;
  display:grid;
  place-items:center;
  color:var(--orange);
  font-size:0.75rem;
  padding-left:2px
}
.hero-cars{
  position:absolute;
  width:90%;
  height:20rem;
  left:5%;
  bottom:0;
  object-fit:contain;
  mix-blend-mode:multiply
}
.consultation{
  display:grid;
  grid-template-columns:17.25rem 1fr;
  gap:1.375rem;
  margin-top:2.5rem;
  height:16.75rem
}
.delivery-card{
  background:#f5f5f5;
  border-radius:0.9375rem;
  overflow:hidden;
  position:relative;
  text-align:center;
  padding-top:1.8125rem
}
.delivery-card p{
  position:relative;
  z-index:1;
  font-size:0.6875rem;
  line-height:1.45
}
.delivery-number{
  font:900 4.875rem/.95 var(--display);
  letter-spacing:-0.375rem;
  color:var(--orange);
  position:relative;
  z-index:1
}
.delivery-days{
  font:900 2.1875rem/1 var(--display);
  position:relative;
  z-index:2;
  text-align:right;
  margin-right:1.75rem
}
.delivery-card img{
  position:absolute;
  bottom:-0.5625rem;
  left:-3.375rem;
  width:22.3125rem;
  max-width:none;
  height:10rem;
  object-fit:cover;
  object-position:center 62%;
  mix-blend-mode:multiply;
  z-index:1
}
.delivery-line{
  position:absolute;
  bottom:0.875rem;
  left:0;
  height:0.25rem;
  background:var(--orange);
  width:8.75rem;
  z-index:2
}
.request-card{
  padding:2.3125rem 2.1875rem 1.625rem;
  border-radius:0.8125rem;
  box-shadow:0 0.75rem 1.625rem #00000009
}
.request-card h2{
  font-size:1.5rem;
  line-height:1.23;
  font-weight:700;
  letter-spacing:-.7px;
  white-space:nowrap
}
mark{
  background:linear-gradient(110deg,#d99836,#e5b669);
  color:white;
  border-radius:0.375rem;
  padding:0.1875rem 0.75rem;
  white-space:nowrap
}
.lead-form{
  margin-top:1.875rem
}
.form-row{
  display:flex;
  gap:0.5625rem
}
input,select{
  min-width:0;
  min-height:2.375rem;
  border:1px solid transparent;
  border-radius:0.375rem;
  background:#f4f4f4;
  padding:0 0.8125rem;
  color:#333;
  font-size:0.625rem;
  width:100%
}
input::placeholder{
  color:#a8a8a8
}
input:focus,select:focus{
  outline:0;
  border-color:var(--orange);
  box-shadow:0 0 0 0.1875rem #de8c001a
}
select:invalid{
  color:#999
}
.form-bottom{
  margin-top:0.5625rem
}
.form-bottom select{
  flex:1
}
.form-bottom button{
  width:5.4375rem;
  padding-inline:0.9375rem
}
.form-note{
  font-size:0.4375rem;
  color:#a7a7a7;
  text-align:center;
  margin-top:0.625rem;
  line-height:1.5
}
.text-button{
  padding:0;
  background:none;
  color:inherit;
  font-size:inherit;
  text-decoration:underline;
  text-underline-offset:2px
}
.form-status{
  margin-top:0.75rem;
  font-size:0.75rem;
  line-height:1.5;
  color:#8c5b00
}
.catalog{
  margin-top:6.25rem
}
.section-heading{
  text-align:center
}
.eyebrow{
  color:#cd840d;
  font-size:0.6875rem;
  font-weight:800;
  letter-spacing:.1px
}
.lined{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0.75rem
}
.lined:before,.lined:after{
  content:'';
  width:1.625rem;
  height:2px;
  background:#d99836
}
.section-heading h2{
  font:900 1.9375rem/1.25 var(--display);
  letter-spacing:-.9px;
  margin-top:0.375rem
}
.cars-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1.5rem;
  margin-top:2.125rem
}
.car-card>img{
  width:100%;
  height:12.5625rem;
  border-radius:0.875rem;
  object-fit:cover
}
.car-info{
  padding:0.9375rem 0.9375rem 0
}
.car-info h3{
  font-size:0.9375rem;
  line-height:1.25;
  font-weight:700;
  white-space:nowrap;
  letter-spacing:-.4px
}
.car-info p{
  font-size:0.6875rem;
  margin-top:0.625rem
}
.car-info .button{
  margin-top:1rem;
  min-width:7.4375rem
}
.about{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:2.125rem;
  margin-top:6.3125rem;
  align-items:start
}
.about h2{
  font:900 1.6875rem/1.08 var(--display);
  letter-spacing:-1px;
  margin-top:0.9375rem
}
.about-copy{
  font-size:0.6875rem;
  line-height:1.58;
  color:#858585;
  padding-top:0.3125rem
}
.short-line{
  display:block;
  background:#d49a45;
  width:5.375rem;
  height:1px;
  margin-top:1.25rem
}
.about-copy .short-line{
  width:1.5625rem;
  margin-top:0.8125rem
}
.steps{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1.375rem;
  margin-top:4.75rem;
  margin-bottom:4rem
}
.step{
  min-height:13rem;
  border:1px solid #dedede;
  border-radius:0.5rem;
  padding:1.5rem 1.3125rem 1.3125rem;
  box-shadow:0 0 0.4375rem #00000005;
  display:flex;
  flex-direction:column
}
.step-number{
  font:800 1.5625rem/1 var(--display);
  color:#cc850d
}
.step h3{
  font-size:0.6875rem;
  margin-top:1rem;
  font-weight:700
}
.step p{
  font-size:0.625rem;
  line-height:1.35;
  color:#7b7b7b;
  margin-top:0.4375rem
}
.step .short-line{
  margin-top:auto;
  padding-top:1px;
  position:relative;
  top:0
}
.step p+.short-line{
  margin-top:1.125rem
}
.step-featured{
  background:#dc8a00;
  border-color:#dc8a00;
  box-shadow:0 1.25rem 1.6875rem #0002;
  transform:translateY(-0.5rem)
}
.step-featured .step-number,.step-featured h3,.step-featured p{
  color:#fff
}
.step-featured .short-line{
  background:#fff
}
.footer{
  background:#20211f;
  color:#fff;
  padding:2.125rem 0 1.875rem;
  min-height:15.4375rem
}
.footer-main{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:1.5rem
}
.footer-contact{
  display:flex;
  align-items:center;
  gap:0.9375rem
}
.footer .button-outline{
  color:white;
  border-color:#b0b0b0;
  min-width:9.875rem
}
.footer .nav{
  color:#d5d5d5;
  gap:1.375rem
}
.footer-bottom{
  display:flex;
  gap:2.8125rem;
  justify-content:space-between;
  border-top:1px solid #535350;
  margin-top:1.4375rem;
  padding-top:1.4375rem;
  color:#777;
  font-size:0.4375rem;
  line-height:1.5
}
.footer-bottom>div{
  max-width:40.9375rem
}
.footer-bottom p+p{
  margin-top:0.9375rem
}
.footer-bottom>.text-button{
  font-size:0.5rem;
  align-self:flex-start;
  text-align:right;
  max-width:9.0625rem
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  top:0.625rem;
  left:0.625rem;
  z-index:10;
  padding:0.75rem;
  background:#fff;
  transform:translateY(-150%)
}
.skip-link:focus{
  transform:none
}
dialog{
  border:1px solid #ddd;
  border-radius:1rem;
  padding:2.375rem;
  width:min(27.5rem,calc(100% - 2rem));
  color:var(--ink);
  box-shadow:0 1.875rem 5.625rem #0003
}
dialog::backdrop{
  background:#10120fd0;
  backdrop-filter:blur(0.25rem)
}
dialog h2{
  font-size:1.6875rem;
  line-height:1.2;
  margin:0.875rem 0
}
dialog p{
  line-height:1.6;
  color:#777
}
dialog p+p{
  margin-top:1rem
}
.dialog-close{
  position:absolute;
  right:0.875rem;
  top:0.625rem;
  font-size:1.75rem;
  background:none;
  color:#777
}
.callback-form{
  display:grid;
  gap:0.625rem;
  margin-top:1.5rem
}
.callback-form label{
  font-size:0.75rem
}
.callback-form input{
  font-size:0.875rem;
  height:2.75rem
}
.callback-form .button{
  margin-top:0.5rem;
  font-size:0.75rem
}
.dialog-intro{
  font-size:0.8125rem
}
@media(max-width:1100px){
  .container{
    width:86%
  }
  .header{
    gap:1.5rem
  }
  .nav{
    gap:0.875rem
  }
  .header-contact{
    gap:0.625rem
  }
  .header .button-outline{
    padding-inline:0.875rem
  }
  .consultation{
    grid-template-columns:29% 1fr;
    gap:1rem
  }
  .request-card{
    padding-inline:1.5625rem
  }
  .request-card h2{
    font-size:1.375rem
  }
  .car-info{
    padding-inline:0.5rem
  }
  .car-info h3{
    font-size:0.8125rem
  }
  .about h2{
    font-size:1.5rem
  }
  .steps{
    gap:0.9375rem
  }
  .step{
    padding:1.4375rem 1rem
  }
  .footer .nav{
    gap:0.75rem
  }
}
@media(max-width:800px){
  .container{
    width:88%
  }
  .header{
    height:4.125rem;
    justify-content:space-between;
    gap:1rem
  }
  .header>.nav{
    display:none
  }
  .header-contact{
    margin-left:auto
  }
  .header .button-outline{
    display:none
  }
  .menu-toggle{
    display:flex;
    width:2rem;
    height:2rem;
    background:none;
    flex-direction:column;
    justify-content:center;
    gap:0.3125rem;
    padding:0.3125rem
  }
  .menu-toggle span{
    height:2px;
    width:1.375rem;
    background:#222
  }
  .mobile-nav{
    position:absolute;
    z-index:5;
    top:4.0625rem;
    left:0;
    right:0;
    background:#fff;
    border-bottom:1px solid #ddd;
    padding:1.125rem 6%;
    display:flex;
    justify-content:space-between;
    gap:0.9375rem
  }
  .hero{
    height:26.25rem;
    padding-top:1.875rem
  }
  .hero:before{
    inset:-4.125rem 0 auto;
    height:21.375rem
  }
  .hero h1{
    font-size:2rem
  }
  .hero h1>span{
    font-size:1.625rem
  }
  .hero-cars{
    width:100%;
    left:0;
    height:14.0625rem;
    bottom:0.5rem
  }
  .hero-copy>p{
    font-size:0.625rem;
    max-width:80%;
    margin:0.75rem auto 0
  }
  .consultation{
    margin-top:1.625rem;
    height:auto;
    grid-template-columns:1fr 2fr
  }
  .delivery-card{
    min-height:15.25rem
  }
  .delivery-number{
    font-size:3.625rem;
    letter-spacing:-0.25rem
  }
  .delivery-days{
    font-size:1.75rem;
    margin-right:0.875rem
  }
  .delivery-card p{
    font-size:0.5625rem
  }
  .request-card{
    padding:1.5rem 1.125rem
  }
  .request-card h2{
    font-size:1.125rem;
    white-space:normal;
    line-height:1.4;
    letter-spacing:-.4px
  }
  .request-card h2 br{
    display:none
  }
  mark{
    padding:2px 0.4375rem
  }
  .form-row{
    flex-wrap:wrap
  }
  .form-row input{
    flex:1 1 40%
  }
  .form-row input[type=email]{
    flex-basis:100%
  }
  .lead-form{
    margin-top:1.125rem
  }
  .catalog{
    margin-top:4.6875rem
  }
  .section-heading h2{
    font-size:1.625rem
  }
  .cars-grid{
    gap:0.9375rem;
    margin-top:1.75rem
  }
  .car-card>img{
    height:9.6875rem
  }
  .car-info h3{
    white-space:normal;
    font-size:0.75rem;
    min-height:1.875rem
  }
  .car-info p{
    font-size:0.625rem
  }
  .car-info .button{
    min-width:0;
    padding-inline:1rem
  }
  .about{
    margin-top:4.6875rem;
    gap:1.5625rem
  }
  .about h2{
    font-size:1.25rem
  }
  .about-copy{
    font-size:0.625rem
  }
  .steps{
    grid-template-columns:repeat(2,1fr);
    gap:1.25rem;
    margin-top:2.8125rem;
    margin-bottom:3rem
  }
  .step{
    min-height:12.5rem;
    padding:1.5rem
  }
  .step h3{
    font-size:0.8125rem
  }
  .step p{
    font-size:0.75rem
  }
  .step-featured{
    transform:none
  }
  .footer-main{
    align-items:flex-start;
    gap:1.5625rem
  }
  .footer .nav{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:0.75rem
  }
  .footer-contact{
    align-items:flex-start;
    flex-direction:column;
    gap:0.875rem
  }
}
@media(max-width:520px){
  .container{
    width:88%
  }
  .header-contact .phone{
    font-size:0.5625rem
  }
  .hero{
    height:23.125rem;
    padding-top:1.625rem
  }
  .hero h1{
    font-size:1.5625rem;
    letter-spacing:-1px
  }
  .hero h1>span{
    font-size:1.1875rem;
    letter-spacing:-.7px
  }
  .japan-flag{
    width:1.4375rem;
    height:1.1875rem;
    margin-left:2px;
    top:-1px
  }
  .japan-flag:after{
    width:0.625rem;
    height:0.625rem
  }
  .hero-copy>p{
    font-size:0.625rem;
    line-height:1.5;
    max-width:84%;
    margin-top:0.8125rem
  }
  .hero-actions{
    margin-top:1.0625rem
  }
  .hero-cars{
    height:10.5rem;
    bottom:0.1875rem;
    width:110%;
    left:-5%
  }
  .hero:before{
    height:19.875rem
  }
  .consultation{
    grid-template-columns:1fr;
    gap:1.1875rem;
    margin-top:0.875rem
  }
  .delivery-card{
    min-height:9.375rem;
    text-align:left;
    padding:1.375rem 1.125rem
  }
  .delivery-card p{
    font-size:0.625rem
  }
  .delivery-number{
    font-size:3.4375rem;
    margin-top:0.3125rem
  }
  .delivery-days{
    font-size:1.3125rem;
    text-align:left;
    position:absolute;
    left:9.0625rem;
    top:5.6875rem
  }
  .delivery-card img{
    left:auto;
    right:-5rem;
    bottom:-1.1875rem;
    width:15.9375rem;
    height:9.375rem;
    opacity:.6
  }
  .delivery-card p,.delivery-number,.delivery-days{
    z-index:2
  }
  .delivery-line{
    width:6.5625rem;
    bottom:0.6875rem
  }
  .request-card{
    padding:1.4375rem 1.125rem 1.375rem;
    box-shadow:0 0.375rem 1.5rem #0000000b
  }
  .request-card h2{
    font-size:1.3125rem;
    line-height:1.35
  }
  .form-row input{
    min-height:2.75rem;
    font-size:0.75rem
  }
  .form-bottom select{
    height:2.75rem;
    font-size:0.75rem
  }
  .form-note{
    font-size:0.5rem
  }
  .catalog{
    margin-top:3.875rem
  }
  .section-heading h2{
    font-size:1.4375rem;
    letter-spacing:-1px
  }
  .eyebrow{
    font-size:0.625rem
  }
  .cars-grid{
    grid-template-columns:1fr;
    gap:2.0625rem;
    margin-top:1.5625rem
  }
  .car-card>img{
    height:auto;
    aspect-ratio:1.38
  }
  .car-info{
    padding:0.875rem 0.5625rem 0
  }
  .car-info h3{
    font-size:1rem;
    min-height:0;
    letter-spacing:-.3px
  }
  .car-info p{
    font-size:0.75rem
  }
  .car-info .button{
    font-size:0.6875rem;
    min-width:8.125rem;
    margin-top:0.875rem
  }
  .about{
    grid-template-columns:1fr;
    margin-top:3.875rem;
    gap:1.5rem
  }
  .about h2{
    font-size:1.5625rem;
    line-height:1.12
  }
  .about-copy{
    font-size:0.75rem;
    line-height:1.6
  }
  .steps{
    gap:0.75rem;
    margin-top:2.375rem;
    margin-bottom:2.625rem
  }
  .step{
    padding:1.3125rem 1rem;
    min-height:15.3125rem
  }
  .step-number{
    font-size:1.5625rem
  }
  .step h3{
    font-size:0.75rem;
    line-height:1.3
  }
  .step p{
    font-size:0.6875rem;
    line-height:1.45
  }
  .step .short-line{
    width:4.0625rem
  }
  .footer{
    padding:1.75rem 0
  }
  .footer-main{
    gap:0.9375rem;
    margin-top:1.4375rem
  }
  .footer .button-outline{
    padding-inline:0.9375rem;
    min-width:8.4375rem
  }
  .footer .nav{
    font-size:0.5625rem;
    grid-template-columns:1fr;
    gap:0.6875rem
  }
  .footer-bottom{
    flex-direction:column;
    gap:0.8125rem;
    font-size:0.5rem;
    padding-top:1.125rem;
    margin-top:1.375rem
  }
  .footer-bottom>.text-button{
    text-align:left;
    max-width:none
  }
  .mobile-nav{
    flex-direction:column;
    padding-block:1.375rem;
    font-size:0.875rem
  }
  .mobile-nav a{
    padding:0.375rem 0
  }
  dialog{
    padding:1.875rem 1.5625rem
  }
}
/* Refinements after the first desktop and mobile browser review. */
.consultation{
  height:auto;
  min-height:16.75rem;
  align-items:start
}
.delivery-card{
  height:16.75rem
}
.request-card{
  min-height:16.75rem
}
.skip-link{
  top:-6.25rem;
  transform:none
}
.skip-link:focus{
  top:0.625rem
}
.step p+.short-line{
  margin-top:auto;
  top:0
}
.step p{
  margin-bottom:1.125rem
}
.about h2{
  font-size:1.5625rem;
  line-height:1.17
}
.section-heading h2{
  letter-spacing:.2px;
  transform:scaleX(1.12) scaleY(.9)
}
@media(max-width:800px){
  .consultation,.request-card{
    min-height:0
  }
  .delivery-card{
    height:100%;
    min-height:15.25rem
  }
  .about h2{
    font-size:1.25rem
  }
  .section-heading h2{
    transform:none
  }
}
@media(max-width:520px){
  .delivery-card{
    height:9.375rem;
    min-height:9.375rem
  }
  .hero-cars{
    width:100%;
    left:0
  }
  .hero h1>span{
    font-size:clamp(0.9375rem,4.87vw,1.1875rem)
  }
  .about h2{
    font-size:clamp(1.25rem,5.7vw,1.4375rem)
  }
  .section-heading h2{
    font-size:clamp(1.1875rem,5.8vw,1.4375rem)
  }
}
.skip-link:not(:focus){
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap
}
@media(max-width:360px){
  .hero h1{
    font-size:1.375rem
  }
  .step{
    padding:1.25rem 0.8125rem
  }
  .step p{
    font-size:0.625rem
  }
  .step h3{
    font-size:0.6875rem
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *{
    transition:none!important
  }
}

/* Scale the composition with the viewport; keep mobile sizes stable. */
html {
  font-size: clamp(16px, 1.25vw, 24px);
}