/* FM.COM websites section 2026-10-19 — responsive gallery of six real website previews */
.fmweb,.fmweb *{box-sizing:border-box}
.fmweb{padding:clamp(14px,2vw,28px) 0 clamp(85px,10vw,145px);font-family:'Poppins',sans-serif;color:#fff}
.fmweb__heading{border-top:1px solid rgba(255,255,255,.18);padding:44px 0 32px}
.fmweb__heading h2{font:700 clamp(34px,5vw,56px)/1.13 'Poppins',sans-serif!important;letter-spacing:-.044em;color:#fff!important;margin:0 0 16px!important;padding:0!important}
.fmweb__intro{font:400 14px/1.8 'Poppins',sans-serif!important;color:#dce3fc!important;max-width:710px;margin:0!important}
.fmweb__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:21px 16px;align-items:stretch}
.fmweb__card{grid-column:span 4;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid rgba(255,255,255,.28);border-radius:15px;background:rgba(7,25,82,.27);box-shadow:0 11px 31px rgba(5,17,60,.14);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.fmweb__card--lead{grid-column:span 12}
.fmweb__card--medium{grid-column:span 6}
.fmweb__card:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.57);box-shadow:0 18px 34px rgba(5,17,60,.28)}
.fmweb__link{display:flex;flex:1;flex-direction:column;text-decoration:none!important;color:inherit!important;min-width:0}
.fmweb__link:focus-visible{outline:3px solid #fff57c!important;outline-offset:-4px!important;border-radius:15px}
.fmweb__browser{flex:none;display:flex;align-items:center;gap:7px;padding:8px 11px;background:#eef1ff;border-bottom:1px solid rgba(7,25,70,.10)}
.fmweb__dot{display:block;width:8px;height:8px;flex:none;border-radius:100%}
.fmweb__dot--red{background:#f77070}
.fmweb__dot--yellow{background:#f0b840}
.fmweb__dot--green{background:#56bd7e}
.fmweb__address{flex:1;min-width:0;padding-right:9px;color:#5f6b92;font:500 10px/1.3 'Poppins',sans-serif;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fmweb__shot{position:relative;width:100%;overflow:hidden;background:#e7ecff;aspect-ratio:16/10}
.fmweb__card--lead .fmweb__shot{aspect-ratio:19/8;max-height:455px}
.fmweb__card--medium .fmweb__shot{aspect-ratio:16/9}
.fmweb__image{display:block;width:100%!important;height:100%!important;max-width:none!important;object-fit:cover!important;object-position:center top!important;transition:transform .34s ease;border:none!important;border-radius:0!important}
.fmweb__link:hover .fmweb__image{transform:scale(1.025)}
.fmweb__detail{display:flex;flex:1;align-items:center;justify-content:space-between;gap:13px;padding:15px 18px 17px}
.fmweb__card--lead .fmweb__detail{padding:19px 23px 21px}
.fmweb__title{font:600 clamp(13px,1.35vw,17px)/1.4 'Poppins',sans-serif!important;color:#fff!important;letter-spacing:-.018em;margin:0!important;padding:0!important}
.fmweb__card--lead .fmweb__title{font-size:clamp(18px,2vw,23px)!important}
.fmweb__domain{font:400 11px/1.5 'Poppins',sans-serif!important;color:#c8d4ff!important;margin:4px 0 0!important}
.fmweb__out{flex:none;color:#fff;display:inline-flex;justify-content:center;align-items:center;width:31px;height:31px;border:1px solid rgba(255,255,255,.24);border-radius:8px;background:rgba(255,255,255,.045)}
.fmweb__out svg{width:15px;height:15px}
@media(max-width:920px){
 .fmweb__card--medium{grid-column:span 6}
 .fmweb__card:not(.fmweb__card--lead):not(.fmweb__card--medium){grid-column:span 6}
 .fmweb__card--lead .fmweb__shot{aspect-ratio:16/9}
}
@media(max-width:660px){
 .fmweb{padding-bottom:88px}
 .fmweb__heading{padding:29px 0 26px}
 .fmweb__grid{display:flex;flex-direction:column;gap:16px}
 .fmweb__card{width:100%}
 .fmweb__card--lead .fmweb__shot,.fmweb__card--medium .fmweb__shot,.fmweb__shot{aspect-ratio:16/9;max-height:none}
 .fmweb__card--lead .fmweb__detail{padding:15px 17px}
 .fmweb__title,.fmweb__card--lead .fmweb__title{font-size:16px!important}
 .fmweb__detail{padding:14px 16px}
}
@media(prefers-reduced-motion:reduce){
 .fmweb__card,.fmweb__image{transition:none!important}
 .fmweb__card:hover,.fmweb__link:hover .fmweb__image{transform:none!important}
}

/* FM.COM compact two-column website mosaic — 2026-10-19
   Large left: 1 lead spanning two rows, 2 medium across the bottom.
   Narrow right: 3 projects in a vertical stack. Maintain document order. */
@media(min-width:921px){
 .fmweb__grid{
   display:grid;
   grid-template-columns:repeat(12,minmax(0,1fr));
   grid-template-rows:repeat(3,minmax(0,1fr));
   gap:16px;
   aspect-ratio:1.66;
   min-height:0;
   align-items:stretch;
 }
 .fmweb__grid .fmweb__card{grid-row:auto;min-height:0}
 .fmweb__grid .fmweb__card:nth-child(1){grid-column:1/9;grid-row:1/3}
 .fmweb__grid .fmweb__card:nth-child(2){grid-column:1/5;grid-row:3/4}
 .fmweb__grid .fmweb__card:nth-child(3){grid-column:5/9;grid-row:3/4}
 .fmweb__grid .fmweb__card:nth-child(4){grid-column:9/13;grid-row:1/2}
 .fmweb__grid .fmweb__card:nth-child(5){grid-column:9/13;grid-row:2/3}
 .fmweb__grid .fmweb__card:nth-child(6){grid-column:9/13;grid-row:3/4}
 .fmweb__grid .fmweb__link{min-height:0}
 .fmweb__grid .fmweb__shot,
 .fmweb__grid .fmweb__card--medium .fmweb__shot,
 .fmweb__grid .fmweb__card--lead .fmweb__shot{
   flex:1 1 auto;
   min-height:0;
   max-height:none;
   aspect-ratio:auto;
 }
 .fmweb__grid .fmweb__image{
   position:absolute;
   inset:0;
   object-position:center 40%!important;
 }
 .fmweb__grid .fmweb__detail,
 .fmweb__grid .fmweb__card--lead .fmweb__detail{
   flex:0 0 auto;
   padding:11px 14px 12px;
 }
 .fmweb__grid .fmweb__card--lead .fmweb__detail{padding:16px 19px}
 .fmweb__grid .fmweb__card:not(:first-child) .fmweb__title{font-size:clamp(12px,1.2vw,16px)!important}
 .fmweb__grid .fmweb__card:not(:first-child) .fmweb__domain{font-size:10px!important}
 .fmweb__grid .fmweb__browser{padding:7px 10px}
}
@media(min-width:661px) and (max-width:920px){
 .fmweb__grid{
   grid-template-columns:repeat(2,minmax(0,1fr));
   gap:16px;
   aspect-ratio:auto;
 }
 .fmweb__grid .fmweb__card,
 .fmweb__grid .fmweb__card--medium{grid-column:span 1;grid-row:auto}
 .fmweb__grid .fmweb__card--lead{grid-column:1/-1}
 .fmweb__grid .fmweb__card:last-child{grid-column:1/-1}
 .fmweb__grid .fmweb__shot,
 .fmweb__grid .fmweb__card--lead .fmweb__shot{aspect-ratio:16/9;max-height:none}
 .fmweb__grid .fmweb__card:last-child .fmweb__shot{aspect-ratio:2.8}
}