/* Fidelity corrections from the supplied original-versus-reproduction comparisons. */
.site-header{position:sticky!important;top:0!important;z-index:300!important}
.hero{background-image:linear-gradient(#0001,#0001),url('/assets/home-hero.webp')!important}

/* Replace the substitute glyphs with the three original-style service symbols. */
.cards i{display:block;width:56px;height:56px;font-size:0!important;background-position:center;background-repeat:no-repeat;background-size:contain}
.cards article:nth-child(1) i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%234b80ca' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 39h18M26 46h12M28 53h8'/%3E%3Cpath d='M20 31c0-7 5.3-13 12-13s12 6 12 13c0 4.7-2.6 8.2-6.3 10.2H26.3C22.6 39.2 20 35.7 20 31Z'/%3E%3Cpath d='M32 7v4M18 13l3 3M46 13l-3 3M12 27h4M48 27h4'/%3E%3C/svg%3E")}
.cards article:nth-child(2) i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%234b80ca' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 13v12c0 6-4 7-7 7s-7-1-7-7v-8c0-4 6-4 6 0v7c0 1.5.5 2 1 2s1-.5 1-2V13'/%3E%3Cpath d='M22 30c8 0 8 7 8 13 0 6 3 9 9 9h7'/%3E%3Cpath d='M43 52v-7M39.5 48.5h7'/%3E%3Ccircle cx='48' cy='18' r='7'/%3E%3C/svg%3E")}
.cards article:nth-child(3) i{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' fill='none' stroke='%234b80ca' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='32' cy='32' r='20'/%3E%3Ccircle cx='32' cy='32' r='4'/%3E%3Cpath d='m36 28 8-8-8 16-16 8 8-16 16-8Z'/%3E%3C/svg%3E")}
.social{display:inline-block;position:relative;width:82px;height:26px;font-size:0!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 102 30'%3E%3Cg fill='none' stroke='%23aaa' stroke-width='2.5'%3E%3Ccircle cx='15' cy='15' r='12'/%3E%3Ccircle cx='51' cy='15' r='12'/%3E%3Ccircle cx='87' cy='15' r='12'/%3E%3C/g%3E%3Cg fill='%23aaa' font-family='Arial,sans-serif' font-weight='bold' text-anchor='middle'%3E%3Ctext x='15' y='20' font-size='17'%3Ef%3C/text%3E%3Ctext x='51' y='19' font-size='11'%3Ein%3C/text%3E%3Ctext x='87' y='20' font-size='16'%3EG%3C/text%3E%3C/g%3E%3C/svg%3E")}
.social a{position:absolute;top:0;bottom:0;width:33.333%;cursor:pointer;text-decoration:none;z-index:1}
.social a:nth-child(1){left:0}
.social a:nth-child(2){left:33.333%}
.social a:nth-child(3){left:66.666%}
.social a:focus-visible{outline:2px solid #fff;outline-offset:2px;border-radius:50%}

@media (min-width:601px) and (max-width:1150px){
  .hero{height:870px!important;min-height:0!important;background-position:center!important}
  .atouts{padding:62px 5.7% 35px!important;min-height:0!important;gap:70px!important}
  .atouts h2{font-size:46px!important;line-height:1.55!important;margin:0 0 28px!important;font-weight:400!important}
  .atouts h3,.atouts-intro p,.atouts-intro li{font-size:16px!important;line-height:1.55!important}.atouts-intro p{margin:27px 0!important}.atouts-intro .pill{margin-top:35px!important;width:290px!important;height:62px!important;font-size:16px!important}
  .atouts-list summary{font-size:17px!important;line-height:1.45!important}.atouts-list p{font-size:16px!important;line-height:1.55!important}.atouts-list details{margin-bottom:32px!important}

  .equipment{height:auto!important;min-height:0!important}.equipment-copy{height:auto!important;align-self:start!important;object-fit:contain!important;background:#4a9fd9!important}
  .equipment-photos{min-height:260px!important}

  .services-cards{padding:112px 5.1% 30px!important;min-height:0!important}
  .services-cards>h2{font-size:34px!important;font-weight:400!important;margin:0 0 92px!important}
  .services-cards .cards{grid-template-columns:repeat(3,minmax(0,288px))!important;gap:30px!important}
  .services-cards .cards article{height:500px!important;padding:48px 28px 25px!important;border-bottom-width:7px!important}
  .services-cards .cards i{width:52px!important;height:52px!important}
  .services-cards .cards h3{font-size:22px!important;font-weight:400!important;margin:28px 0 5px!important}
  .services-cards .cards h4{font-size:19px!important;font-weight:400!important;margin:0 0 21px!important}
  .services-cards .cards p{font-size:14.5px!important;line-height:1.55!important;font-weight:300!important;color:#858585!important}
  .services-cards .cards a{font-size:14px!important;font-weight:400!important}

  footer{grid-template-columns:1.35fr 1fr 1fr!important;gap:22px!important;min-height:335px!important;padding:70px 7% 14px!important}
  footer section{min-width:0!important}footer h2{font-size:16px!important;white-space:nowrap!important;margin-bottom:20px!important}footer p{font-size:13px!important;line-height:2.25!important;white-space:nowrap!important;margin-bottom:18px!important}footer .pill{min-width:190px!important;width:100%!important;height:52px!important;font-size:14px!important}.social{width:70px!important;height:23px!important}
}

/* Hamburger drawer: the original gradient runs strictly from left to right. */
@media (max-width:600px){
  .site-header nav,
  .site-header.open nav{
    background:linear-gradient(90deg,#477bd1 0%,#42b7df 100%)!important;
  }
}

@media (max-width:600px){
  .contact-page .map{height:360px!important;min-height:360px!important}
}

@media (max-width:600px){
  .site-header{position:sticky!important;top:0!important;z-index:300!important}
  .hero{background-image:linear-gradient(#0001,#0001),url('/assets/home-hero.webp')!important}
  .equipment-copy{object-fit:contain!important;background:#4a9fd9!important}
  .cards p{font-weight:300!important}
}

/* The original keeps the navigation in view throughout the scroll. */
body{padding-top:134px!important}
.site-header{position:fixed!important;inset:0 0 auto 0!important;width:100%!important}

/* Continuous four-piece equipment mosaic: the blue card occupies only the upper-right tile. */
.equipment{display:block!important;height:auto!important;min-height:0!important}
.equipment-photos{display:grid!important;height:auto!important;min-height:0!important;aspect-ratio:2/1!important;grid-template-columns:40% 30% 30%!important;grid-template-rows:1fr 1fr!important;overflow:hidden!important;filter:none!important}
.equipment-photos img{display:block!important;width:100%!important;height:100%!important;object-fit:cover!important;filter:grayscale(1)!important;transition:filter .28s ease!important}
.equipment-photos .equipment-main{grid-column:1!important;grid-row:1/3!important}
.equipment-photos .equipment-main{object-position:left center!important}
.equipment-photos .equipment-keyboard{grid-column:2!important;grid-row:1!important}
.equipment-photos .equipment-copy{grid-column:3!important;grid-row:1!important;object-fit:cover!important;filter:none!important;transition:none!important;background:none!important}
.equipment-photos .equipment-bottom{grid-column:2/4!important;grid-row:2!important}
.equipment-photos img:not(.equipment-copy):hover{filter:grayscale(0)!important}

/* Header and footer details matched to the supplied desktop comparison. */
.header-phone b{display:inline-block!important;width:23px!important;height:23px!important;margin-right:12px!important;font-size:0!important;vertical-align:-5px!important;background:center/contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%234a82d0'%3E%3Cpath d='M6.6 10.8c1.5 3.1 3.5 5.1 6.6 6.6l2.1-2.1c.25-.25.62-.34.95-.24 1.04.34 2.15.52 3.3.52.5 0 .9.4.9.9V20c0 .5-.4.9-.9.9C11 20.9 3.1 13 3.1 3.4c0-.5.4-.9.9-.9h3.4c.5 0 .9.4.9.9 0 1.15.18 2.26.52 3.3.1.33.01.7-.24.95L6.6 10.8Z'/%3E%3C/svg%3E")}
footer .pill{color:#fff!important}

@media (max-width:600px){
  body{padding-top:145px!important}
  .header-phone b{display:none!important}
  /* The phone layout deliberately differs from the desktop mosaic: keyboard,
     then the original blue equipment panel, then the team section. */
  .services-cards{padding:28px 16px 34px!important}
  .services-cards .cards{gap:22px!important}
  .services-cards .cards article{min-height:342px!important;height:342px!important;padding:30px 23px 19px!important}
  .services-cards .cards i{width:45px!important;height:45px!important}
  .services-cards .cards h3{margin:19px 0 5px!important;font-size:19px!important}
  .services-cards .cards h4{margin:0 0 16px!important;font-size:16px!important}
  .services-cards .cards p{font-size:14px!important;line-height:1.55!important}
  .services-cards .cards a{padding-top:18px!important;font-size:13px!important}

  .equipment{display:block!important;width:100%!important}
  .equipment-photos{display:flex!important;flex-direction:column!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;overflow:visible!important}
  .equipment-photos .equipment-main,.equipment-photos .equipment-bottom{display:none!important}
  .equipment-photos .equipment-keyboard{display:block!important;width:100%!important;height:auto!important;aspect-ratio:1.5 / 1!important;object-fit:cover!important;filter:grayscale(1)!important;transition:filter .2s ease!important;touch-action:manipulation!important}
  .equipment-photos .equipment-keyboard:active,.equipment-photos .equipment-keyboard.is-touching{filter:grayscale(0)!important}
  .equipment-photos .equipment-copy{display:block!important;width:100%!important;height:auto!important;object-fit:contain!important;filter:none!important;background:none!important}

  .atouts{padding:38px 20px 30px!important}
  .atouts h2{font-size:34px!important;line-height:1.34!important;margin-bottom:20px!important}
  .atouts h3,.atouts-intro p,.atouts-intro li{font-size:14px!important;line-height:1.58!important}
  .atouts-intro p{margin:19px 0!important}.atouts ul{margin:9px 0 17px!important}
  .atouts-intro .pill{width:236px!important;max-width:100%!important;height:51px!important;margin:18px auto 39px!important;font-size:14px!important}
  .atouts-list details{margin-bottom:22px!important}.atouts-list summary{font-size:14px!important}.atouts-list p{font-size:13px!important;line-height:1.58!important}

  footer{padding:43px 20px 37px!important}footer section{margin-bottom:39px!important}footer h2{font-size:20px!important}footer p{font-size:14px!important;line-height:1.92!important;margin-bottom:19px!important}
  footer .social{width:102px!important;height:30px!important}
  footer .pill{color:#fff!important;background:transparent!important}footer .pill:active,footer .pill:focus-visible{background:linear-gradient(110deg,#477bd1,#42b7df)!important;color:#fff!important}
  .top{width:45px!important;height:45px!important;font-size:41px!important}
}

/* Phone About page: match the original compact, centered contact pill. */
@media (max-width:600px){
  .about-page .about-copy .pill{
    display:flex!important;
    float:none!important;
    width:236px!important;
    min-width:236px!important;
    max-width:236px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

@media (min-width:601px) and (max-width:1150px){
  footer .social{width:92px!important;height:30px!important}
}

/* Services page: original two-column photographic mosaic. */
.site-header nav .services-link{color:#080808;text-decoration:none;font-size:18px;white-space:nowrap}
.site-header nav .services-link.active{color:var(--blue);border-bottom:3px solid var(--blue);padding-bottom:13px}
.site-header nav .services-toggle{width:18px!important;margin-left:-34px!important;margin-right:-28px!important;padding:0!important;font-size:0!important;line-height:1!important}
.site-header nav .services-toggle span{font-size:18px!important;line-height:1!important}
.services-page{color:#4a82d0}
.services-hero{height:295px;background:linear-gradient(#0007,#0007),url('/assets/services-hero-original.webp') center 52%/cover;display:grid;place-items:center;color:#fff}
.services-hero h1{margin:0;font-size:44px;font-weight:300;letter-spacing:.02em}
.services-lead{min-height:285px;display:grid;place-items:center;padding:50px 8%;background:#f8f8f8;color:#555;text-align:center}
.services-lead p{max-width:950px;margin:0;font-size:16px;line-height:2.05;font-weight:300}
.services-mosaic{display:grid;grid-template-columns:1fr 1fr;grid-auto-flow:row;background:#fff}
.service-tile{min-height:0;aspect-ratio:3/2;position:relative;overflow:hidden;display:flex;align-items:center}
.service-tile.light{background:#fff;color:#4a82d0}
.service-tile.blue{background:linear-gradient(110deg,#477bd1,#42b7df);color:#fff}
.service-tile>div{width:100%;height:100%;padding:7.6% 9.8%;display:flex;flex-direction:column;justify-content:center}
.service-tile.blue>div{display:flex;flex-direction:column}
.service-tile.photo{background-position:center;background-size:cover;background-repeat:no-repeat}
.repair-photo-a{background-image:url('/assets/services-repair-a-original.webp');background-position:center!important}
.repair-photo-b{background-image:url('/assets/services-repair-b-original.webp');background-position:center!important}
.advice-photo-a{background-image:url('/assets/services-advice-a-original.webp');background-position:center!important}
.advice-photo-b{background-image:url('/assets/services-advice-b-original.webp');background-position:center!important}
.course-photo-a{background-image:url('/assets/services-course-original.webp');background-position:center!important}
.course-photo-b{background-image:url('/assets/services-creation-original.webp');background-position:center!important}
.course-photo-b>img{display:none}
.service-tile .rule{display:block;width:52px;height:2px;margin:0 auto 25px;background:currentColor}
.service-tile h2{margin:0 0 26px;text-align:center;font-size:clamp(26px,1.85vw,38px);line-height:1.35;font-weight:400}
.service-tile h2 small{font-size:.72em;font-weight:400}
.service-tile h3{margin:14px 0 3px;font-size:clamp(12px,.82vw,17px);line-height:1.4;font-weight:600}
.service-tile p{margin:0 0 12px;font-size:clamp(11.5px,.78vw,16px);line-height:1.5;font-weight:300}
.service-tile ul{margin:0 0 25px;padding-left:21px;font-size:clamp(11.5px,.78vw,16px);line-height:1.55;font-weight:300}
.service-tile .phone-pill{display:flex;width:clamp(150px,12vw,245px);height:clamp(36px,3vw,58px);margin:23px auto 0;border:2px solid #fff;border-radius:999px;align-items:center;justify-content:center;color:#fff;text-decoration:none;font-size:clamp(11px,.82vw,17px)}
.service-tile.blue .phone-pill{margin-top:auto}
.service-tile .blue-outline{border-color:#4a82d0;color:#4a82d0}
.creation-intro{grid-row:auto}
.half-break{display:none}
@media (min-width:601px) and (max-width:1150px){
  .services-hero{height:280px}.services-hero h1{font-size:44px}.services-lead{min-height:288px;padding:45px 4%}.services-lead p{max-width:950px;font-size:16px;line-height:2.05}
  .service-tile{aspect-ratio:auto;min-height:790px}.course-intro{min-height:840px}.creation-intro,.course-photo-b{min-height:820px}
  .service-tile>div{padding:7.5% 9.7%}.service-tile h2{font-size:38px;margin-bottom:27px}.service-tile h3{font-size:16px;line-height:1.4;margin-top:19px}.service-tile p{font-size:16px;line-height:1.48;margin-bottom:13px}.service-tile ul{font-size:16px;line-height:1.55;margin-bottom:38px}.service-tile .rule{width:105px;height:3px;margin-bottom:38px}.service-tile .phone-pill{width:245px;height:58px;font-size:16px;margin-top:25px}.half-break{display:inline}
}

/* Desktop half-screen: Contact page proportions and its live map. */
@media (min-width:601px) and (max-width:1150px){
  .contact-page .contact-hero{height:282px!important;padding:0 3.7%!important;background-image:linear-gradient(#0005,#0005),url('/assets/contact-hero-desktop.webp')!important;background-position:center 49%!important}
  .contact-page .contact-hero h1{visibility:visible!important;margin:0!important;font-size:43px!important;line-height:1.2!important;font-weight:300!important}
  .contact-page .contact-content{max-width:1000px!important;min-height:480px!important;padding:70px 4% 70px!important;grid-template-columns:38% 62%!important;gap:0!important;align-items:center!important}
  .contact-page .contact-info h2{margin:0 0 36px!important;font-size:34px!important;line-height:1.2!important;font-weight:300!important}
  .contact-page .contact-info p{margin:0!important;font-size:14px!important;line-height:2.25!important;font-weight:300!important}
  .contact-page .map{display:block!important;width:100%!important;height:340px!important;max-width:none!important;min-width:0!important;border:0!important;box-shadow:none!important}
  .contact-page .leaflet-container{font-family:Comfortaa,"Helvetica Neue",Arial,sans-serif!important;background:#eef2f0!important}
  .contact-page .leaflet-control-zoom a,.contact-page .leaflet-control-layers-toggle,.contact-page .nis-fullscreen{width:34px!important;height:34px!important;line-height:32px!important;color:#222!important}
  .contact-page .leaflet-control-layers-toggle{background-size:20px 20px!important}
  .contact-page .nis-fullscreen{display:block!important;border:0!important;background:#fff!important;font:25px/32px Arial!important;cursor:pointer!important}
  .contact-page .nis-marker-wrap{background:transparent!important;border:0!important}
  .contact-page .nis-marker{display:block!important;width:28px!important;height:28px!important;margin:2px 0 0 5px!important;border-radius:50% 50% 50% 0!important;transform:rotate(-45deg)!important;background:#3886cf!important;border:3px solid #fff!important;box-shadow:0 1px 5px #0007!important}
  .contact-page .nis-marker:after{content:""!important;display:block!important;width:8px!important;height:8px!important;margin:7px!important;border-radius:50%!important;background:#fff!important}
}

/* Desktop half-screen: compact banner and balanced profile layout from the reference. */
@media (min-width:601px) and (max-width:1150px){
  .about-page .about-hero{height:275px!important;padding:0 5.25%!important;align-items:center!important;background-image:linear-gradient(#0008,#0008),url('/assets/about-hero.webp')!important;background-position:center 88%!important}
  .about-page .about-hero h1{margin:0!important;font-size:43px!important;line-height:1.2!important;font-weight:300!important}
  .about-page .about-content{max-width:1000px!important;padding:134px 5.3% 92px!important;grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:58px!important;align-items:start!important}
  .about-page .about-photo img{width:100%!important;height:auto!important;aspect-ratio:793 / 966!important;object-fit:cover!important}
  .about-page .about-photo p{max-width:100%!important;margin:26px 0 0!important;color:#555!important;font-size:14px!important;line-height:1.58!important;font-weight:300!important}
  .about-page .about-copy h2{margin:-12px 0 38px!important;font-size:43px!important;line-height:1.72!important;font-weight:400!important;text-align:center!important}
  .about-page .about-copy p{margin:0 0 27px!important;color:#555!important;font-size:13px!important;line-height:1.62!important;font-weight:300!important}
  .about-page .about-copy .pill{float:none!important;display:flex!important;width:176px!important;min-width:0!important;height:49px!important;margin:30px auto 0!important;border-width:2px!important;font-size:13px!important}
  .top{display:none!important}
  footer .social{width:102px!important;height:30px!important}
  footer .pill{color:#fff!important;transition:background .18s ease!important}
  footer .pill:hover{background:linear-gradient(110deg,#477bd1,#42b7df)!important;color:#fff!important}
}

/* Responsive desktop header from the reference: full row, wrapped row, then
   the compact computer/tablet header before the true iPhone layout. */
@media (min-width:1151px){
  body{padding-top:102px!important}
  .site-header{height:102px!important;padding:0 4.4%!important;gap:34px!important}
  .site-header .logo{width:68px!important;height:72px!important}
  .site-header nav{margin-left:auto!important;margin-right:auto!important;gap:34px!important;flex-wrap:nowrap!important}
  .site-header nav a,.site-header nav .services-toggle{font-size:16px!important}
  .site-header nav .services-link{margin-right:-27px!important}
  .site-header nav .services-toggle{margin-right:5px!important}
  .header-phone{display:inline-flex!important;align-items:center!important;justify-content:flex-end!important;margin-left:0!important;font-size:17px!important;line-height:1!important}
  .header-phone b{display:block!important;flex:0 0 23px!important;margin:0 13px 0 0!important;vertical-align:0!important}
}

@media (min-width:601px) and (max-width:1150px){
  body.menu-open{overflow:hidden!important}
  body{padding-top:134px!important}
  .site-header{height:134px!important;padding:0 5%!important;display:grid!important;grid-template-columns:90px 1fr 190px!important;grid-template-rows:1fr!important;gap:0!important}
  .site-header .logo{display:block!important;grid-column:2!important;grid-row:1!important;width:84px!important;height:94px!important;justify-self:center!important;align-self:center!important}
  .menu-toggle{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center!important;grid-column:1!important;grid-row:1!important;align-self:center!important;justify-self:start!important;gap:6px!important;border:0!important;background:transparent!important;padding:0!important}
  .menu-toggle span{display:block!important;width:28px!important;height:3px!important;background:#4a82d0!important}
  .header-phone{display:inline-flex!important;grid-column:3!important;grid-row:1!important;align-items:center!important;justify-content:center!important;justify-self:end!important;width:158px!important;height:48px!important;margin:0!important;border:2px solid #4a82d0!important;border-radius:999px!important;color:#4a82d0!important;font-size:16px!important;font-weight:600!important;line-height:1!important}
  .header-phone b{display:none!important}
  .site-header nav{display:flex!important;position:fixed!important;z-index:310!important;inset:0 25% 0 0!important;height:100vh!important;transform:translateX(-105%)!important;transition:transform .25s ease!important;background:linear-gradient(90deg,#477bd1 0%,#42b7df 100%)!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;padding:55px 28px 34px!important;box-shadow:none!important;overflow:auto!important}
  .site-header.open nav{display:flex!important;position:fixed!important;inset:0 25% 0 0!important;height:100vh!important;transform:translateX(0)!important;background:linear-gradient(90deg,#477bd1 0%,#42b7df 100%)!important;flex-direction:column!important;align-items:flex-start!important;gap:0!important;padding:55px 28px 34px!important;box-shadow:none!important;overflow:auto!important}
  .site-header.open:after{content:""!important;position:fixed!important;z-index:305!important;inset:0!important;background:#0006!important}
  .menu-close{display:block!important;color:#fff!important;background:none!important;border:0!important;font:300 42px/1 Arial!important;margin:0 0 14px!important;padding:0!important}
  .site-header nav a,.site-header nav .services-toggle,.site-header nav .services-toggle.active{display:flex!important;width:auto!important;color:#fff!important;border:0!important;background:none!important;text-decoration:none!important;text-align:left!important;font:300 20px/1.35 Comfortaa,sans-serif!important;padding:13px 0 10px!important;margin:0!important}
  .site-header nav>a.active,.site-header nav .services-toggle.active{border-bottom:3px solid #fff!important}
  .site-header nav .services-toggle{gap:14px!important;align-items:center!important;border-bottom:3px solid #fff!important;padding-bottom:10px!important}
  .site-header nav .subnav.open{display:block!important;position:static!important;min-width:0!important;background:transparent!important;box-shadow:none!important;padding:6px 0 8px 16px!important}
  .site-header nav .subnav.open a{font-size:16px!important;padding:8px 0!important}
  .drawer-phone{display:flex!important;width:100%!important;height:58px!important;border:2px solid #fff!important;border-radius:999px!important;align-items:center!important;justify-content:center!important;margin-top:24px!important;padding:0!important;font-size:16px!important}
}

/* Stable header controls while the window crosses responsive breakpoints. */
.menu-toggle{flex-direction:column!important;align-items:flex-start!important;justify-content:center!important}
.site-header nav .services-nav-group{display:inline-flex!important;flex:0 0 auto!important;align-items:center!important;gap:8px!important;white-space:nowrap!important}
.site-header nav .services-nav-group .services-link,
.site-header nav .services-nav-group .services-toggle{margin-left:0!important;margin-right:0!important}

@media (min-width:601px) and (max-width:1150px){
  .site-header nav .services-nav-group{display:flex!important;align-items:center!important;gap:14px!important;width:auto!important}
}

/* Contact page: desktop half-screen proportions from the reference. */
@media (min-width:601px) and (max-width:1150px){
  .contact-page{min-height:0!important}
  .contact-page .contact-hero{height:282px!important;background-image:linear-gradient(#0006,#0006),url('/assets/contact-hero-source.webp')!important;background-position:left 24%!important;background-size:117.86% auto!important;background-repeat:no-repeat!important}
  .contact-page .contact-hero h1{visibility:visible!important;margin:0!important;font-size:43px!important;line-height:1.2!important;font-weight:300!important}
  .contact-page .contact-content{max-width:none!important;min-height:480px!important;padding:70px 3.7%!important;grid-template-columns:43% 57%!important;gap:0!important;align-items:center!important}
  .contact-page .contact-info h2{margin:0 0 36px!important;font-size:34px!important;line-height:1.2!important;font-weight:300!important}
  .contact-page .contact-info p{margin:0!important;font-size:14px!important;line-height:2.25!important;font-weight:300!important}
  .contact-page .map{width:100%!important;height:340px!important;min-height:340px!important}
  footer .pill{width:190px!important;min-width:190px!important;max-width:190px!important}
}

/* The reference uses Mapbox's very light, almost monochrome plan.  Keep the
   controls and the blue address pin crisp while softening only the base map. */
.contact-page .nis-plan-pane{filter:grayscale(1) saturate(0) contrast(.92) brightness(1.08)!important;opacity:.82!important}
.contact-page .leaflet-control-layers-toggle.nis-layers-preview{background-position:center!important;background-repeat:no-repeat!important;background-size:cover!important;border-radius:6px!important}
.contact-page .leaflet-marker-pane,.contact-page .leaflet-control-container{filter:none!important;opacity:1!important}
.contact-page .nis-marker-wrap{background:transparent!important;border:0!important}
.contact-page .nis-marker{display:block!important;width:28px!important;height:28px!important;margin:2px 0 0 5px!important;border-radius:50% 50% 50% 0!important;transform:rotate(-45deg)!important;background:#3886cf!important;border:3px solid #fff!important;box-shadow:0 1px 5px #0007!important}
.contact-page .nis-marker:after{content:""!important;display:block!important;width:8px!important;height:8px!important;margin:7px!important;border-radius:50%!important;background:#fff!important}
.contact-page .nis-pitch{margin-top:0!important}
.contact-page .nis-pitch button{display:block!important;width:30px!important;height:23px!important;padding:0!important;border:0!important;background:#fff!important;color:#555!important;font:13px/23px Arial,sans-serif!important;cursor:pointer!important}
.contact-page .nis-pitch button+button{color:#bbb!important}
.contact-page .mapbox-brand{color:#777!important;font:700 15px/1 Arial,sans-serif!important;text-shadow:0 1px #fff!important}
.contact-page .map-attribution{display:grid!important;width:21px!important;height:21px!important;place-items:center!important;border-radius:50%!important;background:#333!important;color:#fff!important;text-decoration:none!important;font:700 14px/1 Arial,sans-serif!important}

/* Desktop header fidelity: keep every label on one baseline and make the
   active underline purely decorative (it must not change the link's height). */
@media (min-width:1151px){
  .site-header nav>a,
  .site-header nav .services-link{
    position:relative!important;
    display:inline-flex!important;
    align-items:center!important;
    height:24px!important;
    padding:0!important;
    border-bottom:0!important;
    line-height:24px!important;
  }
  .site-header nav>a.active,
  .site-header nav .services-link.active{
    padding:0!important;
    border-bottom:0!important;
  }
  .site-header nav>a.active::after,
  .site-header nav .services-link.active::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-7px!important;
    height:2px!important;
    background:var(--blue)!important;
  }
  .site-header nav .services-nav-group{
    height:24px!important;
    align-items:center!important;
    gap:8px!important;
  }
  .site-header nav .services-toggle{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:14px!important;
    height:24px!important;
    padding:0!important;
    border:0!important;
    line-height:1!important;
  }
  .site-header nav .services-toggle span{
    display:block!important;
    line-height:1!important;
    transform:translateY(-2px)!important;
  }
}

/* The original header tightens progressively; it never introduces a sudden
   empty column between Accueil and NOS SERVICES. */
@media (min-width:1151px){
  .site-header nav{gap:24px!important}
}

/* Leaflet's container is an empty div, so `height:auto` collapses it on wide
   screens.  The reference map keeps a responsive 1.6:1 frame at every desktop
   width, with the controls and address marker visible. */
@media (min-width:601px){
  .contact-page .map{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:1.6 / 1!important;
  }
}

/* Contact banner: use the same original photograph and crop throughout the
   desktop range.  The former wide-screen fallback was a pre-cropped bitmap
   which cut the subject's forehead and changed abruptly at 1151px. */
@media (min-width:601px){
  .contact-page .contact-hero{
    background-image:linear-gradient(#0006,#0006),url('/assets/contact-hero-source.webp')!important;
    background-position:left 24%!important;
    background-size:117.86% auto!important;
    background-repeat:no-repeat!important;
  }
}

/* This phone link belongs exclusively to the slide-out mobile menu.  Keep it
   out of the horizontal computer navigation. */
@media (min-width:1151px){
  .site-header nav .drawer-phone{display:none!important}
}

/* Preserve street readability while retaining the reference's pale,
   monochrome Mapbox treatment. */
.contact-page .nis-plan-pane{
  filter:grayscale(1) saturate(0) contrast(1.12) brightness(1.02)!important;
  opacity:.96!important;
}

/* Services photography: the reference uses a different crop for every row.
   Wide desktop rows keep the original subjects at their natural scale, while
   the narrower split-screen layout uses deliberately chosen focal points. */
@media (min-width:1151px){
  .services-page .service-tile{aspect-ratio:auto!important}
  .services-page .repair-intro,
  .services-page .repair-photo-a{min-height:clamp(620px,35.6vw,730px)!important}
  .services-page .repair-photo-b,
  .services-page .repair-detail{min-height:clamp(700px,40vw,820px)!important}
  .services-page .advice-intro,
  .services-page .advice-photo-a{min-height:clamp(620px,36vw,740px)!important}
  .services-page .advice-photo-b,
  .services-page .advice-detail{min-height:clamp(620px,35vw,720px)!important}
  .services-page .course-intro,
  .services-page .course-photo-a{min-height:clamp(650px,36.5vw,750px)!important}
  .services-page .course-photo-b,
  .services-page .creation-intro{min-height:clamp(820px,48.5vw,995px)!important}

  .services-page .repair-photo-a,
  .services-page .repair-photo-b,
  .services-page .advice-photo-a,
  .services-page .advice-photo-b,
  .services-page .course-photo-a{background-position:center center!important}
}

@media (min-width:601px) and (max-width:1150px){
  /* The original half-window banner is framed lower so the keyboard remains
     visible at the bottom, unlike the full-width banner. */
  .services-page .services-hero{background-position:center 82%!important}

  /* Let every two-column row take the height required by its copy.  A shared
     spacing scale replaces the former per-panel heights and vertically centred
     content, which produced a different empty area in every block. */
  .services-page .service-tile{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }
  .services-page .service-tile>div{
    height:100%!important;
    box-sizing:border-box!important;
    padding-top:52px!important;
    padding-bottom:52px!important;
    justify-content:flex-start!important;
  }
  .services-page .repair-intro>div,
  .services-page .advice-intro>div,
  .services-page .course-intro>div,
  .services-page .creation-intro>div{
    padding-top:62px!important;
  }
  .services-page .repair-detail>div,
  .services-page .advice-detail>div,
  .services-page .course-intro>div,
  .services-page .creation-intro>div{
    padding-bottom:38px!important;
  }
  .services-page .service-tile>div>p:last-of-type{
    margin-bottom:0!important;
  }
  .services-page .service-tile .phone-pill,
  .services-page .service-tile.blue .phone-pill{
    flex-shrink:0!important;
    margin-top:38px!important;
  }

  .services-page .repair-photo-a{background-position:50% center!important}
  .services-page .repair-photo-b{background-position:30% center!important}
  .services-page .advice-photo-a{background-position:42% center!important}
  .services-page .advice-photo-b{background-position:34% center!important}
  .services-page .course-photo-a{background-position:50% center!important}

  /* Crop photographs when a row is taller than their natural 3:2 frame, but
     never stretch width and height independently. */
  .services-page .service-tile.photo{
    background-size:cover!important;
    background-repeat:no-repeat!important;
  }
  .services-page .repair-photo-b{background-position:39% center!important}
  .services-page .advice-photo-b{background-position:39% center!important}
}

/* The right-hand framing of the final iMac photograph is invariant from a
   full desktop window down to a split desktop window.  The photograph keeps
   its natural aspect ratio and is clipped only on the left as its tile gets
   narrower.  The translation fixes the same source-image point at the
   tile's right edge at every desktop width. */
@media (min-width:601px){
  .services-page .course-photo-b{
    background-image:none!important;
    position:relative!important;
    overflow:hidden!important;
  }
  .services-page .course-photo-b>img{
    display:block;
    position:absolute;
    top:0;
    right:0;
    width:auto;
    max-width:none;
    height:100%;
    transform:translateX(18.1640625%);
    pointer-events:none;
  }
}

/* Exact type specifications read from the original site with Font Finder.
   Families, weights and colours are shared across layouts. Desktop sizes are
   the measured CSS-pixel values from the MacBook half-window reference. */
body{
  font-family:Montserrat,"Montserrat Fallback"!important;
  font-kerning:auto!important;
  text-rendering:optimizeLegibility;
  letter-spacing:normal!important;
}

.site-header nav a,
.site-header nav .services-link,
.site-header nav .services-toggle{
  font-family:Comfortaa,"Comfortaa Fallback"!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}
.site-header nav .active,
.site-header nav .services-link.active,
.site-header nav .services-toggle.active{
  color:#427bca!important;
  font-weight:700!important;
}
.header-phone{
  font-family:Montserrat,"Montserrat Fallback"!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}

.hero h1,
.hero p,
.page-hero h1,
.services-hero h1,
.atouts h2,
.services-cards>h2,
.cards h3,
.cards h4,
.services-page .service-tile h2,
.about-copy h2,
.contact-info h2,
footer h2{
  font-family:Comfortaa,"Comfortaa Fallback"!important;
  letter-spacing:normal!important;
}

.services-lead p,
.service-tile h3,
.service-tile p,
.service-tile ul,
.service-tile .phone-pill,
.atouts h3,
.atouts-intro p,
.atouts-intro li,
.atouts-intro .pill,
.atouts-list summary,
.atouts-list p,
.cards p,
.cards a,
.about-copy p,
.about-copy .pill,
.about-photo p,
.contact-info p,
footer p,
footer .pill{
  font-family:Montserrat,"Montserrat Fallback"!important;
  letter-spacing:normal!important;
}

.services-page{color:#275492!important}
.services-page .services-lead{color:#000!important}
.services-page .service-tile.light{color:#275492!important}
.services-page .service-tile.light h2,
.services-page .service-tile.light h3,
.services-page .service-tile.light p,
.services-page .service-tile.light ul{color:#275492!important}
.services-page .service-tile.blue h2,
.services-page .service-tile.blue h3,
.services-page .service-tile.blue p,
.services-page .service-tile.blue ul{color:#fff!important}
.services-page .service-tile h2{font-weight:400!important}
.services-page .service-tile h2 small{font-size:1em!important;font-weight:700!important;letter-spacing:normal!important}
.services-page .service-tile h3{font-weight:700!important}
.services-page .service-tile p,
.services-page .service-tile ul{font-weight:300!important}
.services-page .service-tile .phone-pill{color:#fff!important;font-weight:300!important}
.services-page .service-tile .phone-pill.blue-outline{color:#427bca!important}
.services-page .service-tile .phone-pill span{
  font-family:Montserrat,"Montserrat Fallback"!important;
  font-weight:400!important;
  letter-spacing:normal!important;
}

footer h2{font-weight:700!important;color:#fff!important}
footer p,
footer .pill{font-weight:400!important;color:#fff!important}
footer .cesu{
  font-family:Montserrat,"Montserrat Fallback"!important;
  font-size:12px!important;
  font-weight:400!important;
  color:#fff!important;
}

@media (min-width:601px) and (max-width:1150px){
  .services-page .service-tile>div{
    width:62.15%!important;
    max-width:320px!important;
    margin:0 auto!important;
    padding-left:0!important;
    padding-right:0!important;
  }
}

@media (min-width:601px){
  .site-header nav a,
  .site-header nav .services-link,
  .site-header nav .services-toggle{font-size:14px!important}
  .header-phone{font-size:18px!important}

  .hero h1{font-size:60px!important;font-weight:700!important;color:#fff!important}
  .hero p{font-size:30px!important;font-weight:300!important;color:#fff!important}

  .page-hero h1,
  .about-page .about-hero h1,
  .contact-page .contact-hero h1,
  .services-page .services-hero h1{font-size:50px!important;font-weight:700!important;color:#fff!important}
  .services-lead p{font-size:16px!important;font-weight:300!important;color:#000!important}

  .services-page .service-tile h2{font-size:35px!important}
  .services-page .service-tile h3{font-size:16px!important}
  .services-page .service-tile p,
  .services-page .service-tile ul{font-size:16px!important}
  .services-page .service-tile .phone-pill span{font-size:18px!important}

  .atouts h2{font-size:50px!important;font-weight:700!important;color:#275492!important;text-align:left!important}
  .atouts h3,
  .atouts-intro p,
  .atouts-intro li{font-size:16px!important;font-weight:600!important;color:#427bca!important;text-align:left!important}
  .atouts-intro .pill{font-size:16px!important;font-weight:400!important;color:#427bca!important;text-align:center!important}
  .atouts-list summary{font-size:16px!important;font-weight:400!important;color:#000!important;text-align:left!important}
  .atouts-list p{font-size:15px!important;font-weight:300!important;color:#000!important;text-align:left!important}

  .services-cards>h2{font-size:30px!important;font-weight:700!important;color:#284053!important;text-align:center!important}
  .services-cards .cards h3,
  .services-cards .cards h4{font-size:25px!important;font-weight:700!important;color:#000!important;text-align:center!important}
  .services-cards .cards p{font-size:16px!important;font-weight:300!important;color:#434343!important;text-align:center!important}
  .services-cards .cards a{font-size:14px!important;font-weight:400!important;color:#49aedf!important;text-align:center!important}

  .about-page .about-copy h2{font-size:50px!important;font-weight:700!important;color:#000!important;text-align:center!important}
  .about-page .about-copy p{font-size:16px!important;font-weight:300!important;color:#000!important;text-align:left!important}
  .about-page .about-copy .pill{font-size:16px!important;font-weight:400!important;color:#427bca!important;text-align:center!important}
  .about-page .about-photo p{font-size:16px!important;font-weight:300!important;color:#000!important;text-align:left!important}

  .contact-page .contact-info h2{font-size:35px!important;font-weight:300!important;color:#000!important;text-align:center!important}
  .contact-page .contact-info p{font-size:16px!important;font-weight:300!important;color:#000!important;text-align:center!important}

  footer h2{font-family:Comfortaa,"Comfortaa Fallback"!important;font-size:16px!important;font-weight:700!important;color:#fff!important}
  footer p{font-family:Montserrat,"Montserrat Fallback"!important;font-size:14px!important;font-weight:400!important;color:#fff!important}
  footer .pill{font-family:Montserrat,"Montserrat Fallback"!important;font-size:16px!important;font-weight:400!important;color:#fff!important}
  footer .cesu{font-size:12px!important;font-weight:400!important;color:#fff!important}
}

/* Tablet/iPad header phone: exact Font Finder values from the original. */
@media (min-width:601px) and (max-width:1150px){
  .site-header .header-phone{
    font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:15px!important;
    font-weight:700!important;
    transition:background .18s ease!important;
  }
  .site-header .header-phone:hover,
  .site-header .header-phone:focus-visible{
    background:linear-gradient(110deg,#477bd1,#42b7df)!important;
  }
}

@media (max-width:600px){
  .site-header nav a,
  .site-header nav .services-link,
  .site-header nav .services-toggle{font-family:Comfortaa,"Comfortaa Fallback"!important}
  .hero h1{font-weight:700!important}
  .hero p{font-weight:300!important}
  .services-lead p,
  .service-tile p,
  .service-tile ul,
  .about-copy p,
  .contact-info p{font-weight:300!important}
  .service-tile h3{font-weight:700!important}
}

/* Desktop services menu: match the compact original dropdown exactly. */
@media (min-width:1151px){
  .site-header nav .subnav.open{
    top:31px!important;
    left:70px!important;
    min-width:270px!important;
    padding:0!important;
    background:#fff!important;
    box-shadow:none!important;
  }
  .site-header nav .subnav.open a{
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    min-height:50px!important;
    padding:0 20px!important;
    background:#fff!important;
    color:#080808!important;
    font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:13px!important;
    font-weight:400!important;
    line-height:1.25!important;
    cursor:pointer!important;
  }
  .site-header nav .subnav.open a:hover,
  .site-header nav .subnav.open a:focus-visible{
    background:#000!important;
    color:#fff!important;
    font-weight:700!important;
    outline:0!important;
  }
  .services-page .service-tile[id]{scroll-margin-top:102px!important}
}

/* The original desktop header previews every destination on hover. */
@media (min-width:1151px){
  .site-header nav>a:not(.drawer-phone):hover,
  .site-header nav>a:not(.drawer-phone):focus-visible,
  .site-header nav .services-nav-group:hover .services-link,
  .site-header nav .services-nav-group:focus-within .services-link,
  .site-header nav .services-nav-group:hover .services-toggle,
  .site-header nav .services-nav-group:focus-within .services-toggle{
    color:#427bca!important;
    font-weight:700!important;
  }
  .site-header nav>a:not(.drawer-phone):hover::after,
  .site-header nav>a:not(.drawer-phone):focus-visible::after,
  .site-header nav .services-nav-group:hover .services-link::after,
  .site-header nav .services-nav-group:focus-within .services-link::after{
    content:""!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    bottom:-7px!important;
    height:2px!important;
    background:#427bca!important;
  }
  .site-header nav .services-link.active~.services-toggle,
  .site-header nav .services-toggle.menu-open{
    color:#427bca!important;
  }
}

@media (min-width:601px) and (max-width:1150px){
  .services-page .service-tile[id]{scroll-margin-top:134px!important}
}

@media (max-width:600px){
  .services-page .service-tile[id]{scroll-margin-top:86px!important}
}

/* Tablet/iPad drawer measured from the original half-screen menu. */
.drawer-contact{display:none}
@media (min-width:601px) and (max-width:1150px){
  .site-header nav,
  .site-header.open nav{
    inset:0 auto 0 0!important;
    width:clamp(340px,35.25vw,365px)!important;
    max-width:100vw!important;flex-wrap:nowrap!important;
    padding:50px 48px 112px!important;
    overflow-x:hidden!important;
  }
  .site-header nav>*{flex-shrink:0!important}
  .site-header .menu-close{
    width:26px!important;height:26px!important;margin:0 0 46px -16px!important;padding:0!important;
    position:relative!important;color:transparent!important;font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:16px!important;font-weight:400!important;line-height:26px!important;
    text-align:center!important;cursor:pointer!important;
  }
  .site-header .menu-close::before,
  .site-header .menu-close::after{content:"";position:absolute;left:2px;top:12px;width:22px;height:1px;background:#fff;transform:rotate(45deg)}
  .site-header .menu-close::after{transform:rotate(-45deg)}
  .site-header nav>a:not(.drawer-phone),
  .site-header nav .services-link{
    position:relative!important;display:block!important;width:max-content!important;max-width:100%!important;
    margin:0 0 30px!important;padding:0 0 12px!important;border:0!important;
    color:rgba(255,255,255,.56)!important;font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:24px!important;font-weight:400!important;line-height:1.25!important;
    text-decoration:none!important;cursor:pointer!important;
  }
  .site-header nav>a:not(.drawer-phone)::after{
    content:""!important;position:absolute!important;right:0!important;bottom:0!important;left:0!important;
    height:2px!important;background:#fff!important;opacity:0!important;
  }
  .site-header nav>a.active:not(.drawer-phone),
  .site-header nav>a:not(.drawer-phone):hover,
  .site-header nav>a:not(.drawer-phone):focus-visible,
  .site-header nav .services-link.active,
  .site-header nav .services-link:hover,
  .site-header nav .services-link:focus-visible{
    color:#fff!important;font-weight:400!important;outline:0!important;
  }
  .site-header nav>a.active:not(.drawer-phone)::after,
  .site-header nav>a:not(.drawer-phone):hover::after,
  .site-header nav>a:not(.drawer-phone):focus-visible::after{opacity:1!important}
  .site-header nav .services-nav-group{
    position:relative!important;display:flex!important;width:max-content!important;max-width:100%!important;
    align-items:flex-start!important;gap:9px!important;margin:0 0 30px!important;padding:0!important;
  }
  .site-header nav .services-nav-group .services-link{margin:0!important}
  .site-header nav .services-link::after{display:none!important}
  .site-header nav .services-toggle,
  .site-header nav .services-toggle.active{
    display:grid!important;width:25px!important;height:38px!important;margin:0!important;padding:0!important;
    place-items:center!important;border:0!important;background:transparent!important;
    color:rgba(255,255,255,.56)!important;cursor:pointer!important;
  }
  .site-header nav .services-toggle span{
    font-family:Montserrat,"Montserrat Fallback"!important;font-size:20px!important;
    font-weight:400!important;line-height:1!important;
  }
  .site-header nav .services-nav-group::after{
    content:""!important;position:absolute!important;right:0!important;bottom:0!important;left:0!important;
    height:2px!important;background:#fff!important;opacity:0!important;
  }
  .site-header nav .services-nav-group:has(.services-link.active)::after,
  .site-header nav .services-nav-group:hover::after,
  .site-header nav .services-nav-group:focus-within::after{opacity:1!important}
  .site-header nav .services-nav-group:has(.services-link.active) .services-link,
  .site-header nav .services-nav-group:has(.services-link.active) .services-toggle,
  .site-header nav .services-nav-group:hover .services-link,
  .site-header nav .services-nav-group:hover .services-toggle,
  .site-header nav .services-nav-group:focus-within .services-link,
  .site-header nav .services-nav-group:focus-within .services-toggle{
    color:#fff!important;font-weight:400!important;
  }
  .site-header nav .subnav.open{
    display:block!important;position:static!important;min-width:0!important;
    margin:4px 0 4px!important;padding:0 0 0 12px!important;
    background:transparent!important;box-shadow:none!important;
  }
  .site-header nav .subnav.open a{
    display:block!important;width:max-content!important;max-width:245px!important;min-height:0!important;
    margin:0 0 13px!important;padding:0!important;background:transparent!important;
    color:rgba(255,255,255,.56)!important;font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:20px!important;font-weight:400!important;line-height:1.55!important;
    text-decoration:none!important;white-space:normal!important;cursor:pointer!important;
  }
  .site-header nav .subnav.open a:hover,
  .site-header nav .subnav.open a:focus-visible{
    background:transparent!important;color:#fff!important;font-weight:400!important;outline:0!important;
  }
  .site-header nav .drawer-phone{display:none!important}
  .site-header nav .drawer-contact{
    display:flex!important;width:100%!important;margin-top:auto!important;padding-top:24px!important;
    flex-direction:column!important;align-items:center!important;color:#fff!important;text-align:center!important;
  }
  .site-header nav .drawer-contact strong{
    margin:0 0 22px!important;font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:22px!important;font-weight:700!important;line-height:1.25!important;
  }
  .site-header nav .drawer-contact>a{
    display:block!important;width:auto!important;margin:0 0 6px!important;padding:0!important;border:0!important;
    color:#fff!important;font-family:Montserrat,"Montserrat Fallback"!important;
    font-weight:300!important;line-height:1.45!important;
    text-decoration:none!important;cursor:pointer!important;
  }
  .site-header nav .drawer-contact>a:first-of-type{font-size:20px!important}
  .site-header nav .drawer-contact>a:nth-of-type(2){font-size:18px!important}
  .site-header nav .drawer-contact>a:hover,
  .site-header nav .drawer-contact>a:focus-visible{color:#fff!important;outline:0!important}
  .site-header nav .drawer-social{display:flex!important;margin-top:26px!important;gap:20px!important}
  .site-header nav .drawer-social a{
    display:grid!important;width:30px!important;height:30px!important;padding:0!important;
    place-items:center!important;border-radius:50%!important;background:#fff!important;color:#427bca!important;
    font-family:Montserrat,"Montserrat Fallback"!important;font-size:14.6667px!important;font-weight:400!important;
    line-height:1!important;text-decoration:none!important;cursor:pointer!important;
  }
  .site-header nav .drawer-social .brand-icon{
    display:block!important;width:16px!important;height:16px!important;fill:currentColor!important;
  }
  .site-header nav .drawer-social a[aria-label="Facebook"] .brand-icon{
    width:10px!important;height:17px!important;
  }
  .site-header nav .drawer-social a[aria-label="Google"] .brand-icon{
    width:18px!important;height:18px!important;
  }
  .site-header nav .drawer-social a:hover,
  .site-header nav .drawer-social a:focus-visible{
    transform:translateY(-1px)!important;outline:2px solid #fff!important;outline-offset:2px!important;
  }
}

/* Three deliberate responsive modes:
   phone <= 600px, tablet 601-1150px, computer >= 1151px. */
@media (min-width:601px) and (max-width:1150px){
  .home{display:block!important}
  .home>.hero,.home>.services-cards,.home>.equipment,.home>.atouts{order:initial!important}
  .atouts{display:grid!important;grid-template-columns:44% 56%!important}
  .services-cards .cards{display:grid!important}
  footer{display:grid!important}
  footer section{margin-bottom:0!important}
  .about-page .about-content{display:grid!important}
  .contact-page .contact-content{display:grid!important}
}

@media (max-width:600px){
  /* The original phone page is a purpose-built single-column composition. */
  .home{display:flex!important;flex-direction:column!important}
  .home>.hero{order:0!important}
  .home>.services-cards{order:1!important}
  .home>.equipment{order:2!important}
  .home>.atouts{order:3!important}

  .services-cards{padding:36px 20px 10px!important;background:#fafafa!important}
  .services-cards .cards{display:flex!important;flex-direction:column!important;gap:10px!important}
  .services-cards .cards article{height:auto!important;padding:30px 23px 19px!important}
  .services-cards .cards article:nth-child(1){min-height:87vw!important}
  .services-cards .cards article:nth-child(2){min-height:104vw!important}
  .services-cards .cards article:nth-child(3){min-height:107vw!important}

  .equipment-photos .equipment-keyboard{
    height:auto!important;aspect-ratio:.92 / 1!important;object-fit:cover!important;
    object-position:center center!important
  }
  .equipment-photos .equipment-copy{
    height:auto!important;aspect-ratio:1.02 / 1!important;object-fit:cover!important
  }

  .atouts-intro .pill{
    display:flex!important;margin-left:auto!important;margin-right:auto!important
  }

  footer .pill{
    width:250px!important;min-width:250px!important;max-width:250px!important
  }

  .top{display:none!important}
}

/* The original phone Services page is a long, deliberate one-column story:
   each service uses a full-width photograph followed by its full-width copy. */
@media (max-width:600px){
  .services-page .services-hero{height:250px!important}
  .services-page .services-mosaic{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-auto-flow:row!important;width:100%!important
  }
  .services-page .service-tile{
    width:100%!important;max-width:none!important;height:auto!important;
    aspect-ratio:auto!important;overflow:hidden!important
  }
  .services-page .service-tile.photo{
    min-height:0!important;aspect-ratio:1.45 / 1!important
  }
  .services-page .service-tile>div{
    width:100%!important;max-width:none!important;height:auto!important;
    min-height:inherit!important;margin:0!important;padding:38px 28px!important;
    justify-content:center!important
  }
  .services-page .service-tile .phone-pill{
    width:245px!important;max-width:calc(100% - 16px)!important;height:50px!important
  }

  .services-page .repair-photo-a{order:1!important}
  .services-page .repair-intro{order:2!important;min-height:clamp(550px,150vw,640px)!important}
  .services-page .repair-photo-b{order:3!important}
  .services-page .repair-detail{order:4!important;min-height:clamp(800px,215vw,910px)!important}

  .services-page .advice-photo-a{order:5!important}
  .services-page .advice-intro{order:6!important;min-height:clamp(660px,180vw,760px)!important}
  .services-page .advice-photo-b{order:7!important}
  .services-page .advice-detail{order:8!important;min-height:clamp(630px,170vw,720px)!important}

  .services-page .course-photo-a{order:9!important}
  .services-page .course-intro{order:10!important;min-height:clamp(740px,200vw,840px)!important}
  .services-page .course-photo-b{order:11!important}
  .services-page .creation-intro{order:12!important;min-height:clamp(700px,185vw,790px)!important}
}

/* Keep the hamburger drawer above every interactive Leaflet map layer. */
@media (max-width:1150px){
  .site-header{z-index:2000!important}
  .site-header nav,
  .site-header.open nav{z-index:2010!important}
  .site-header.open::after{z-index:2005!important}
  .contact-page .map,
  .contact-page .leaflet-container{position:relative!important;z-index:1!important}
}

/* Phone About portrait: use the dedicated natural-ratio crop from the original photo. */
@media (max-width:600px){
  .about-page .about-photo picture{display:block!important}
  .about-page .about-photo img{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    object-fit:contain!important;
  }
}

/* Exact phone typography measured on the original home page. */
@media (max-width:600px){
  .home .services-cards .cards h3,
  .home .services-cards .cards h4{
    font-family:Comfortaa!important;
    font-size:18px!important;
    line-height:27px!important;
    font-weight:700!important;
  }
  .home .services-cards .cards p{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:300!important;
  }
  .home .services-cards .cards a{
    font-family:Montserrat!important;
    font-size:14px!important;
    line-height:normal!important;
    font-weight:400!important;
  }
  .home .atouts h2{
    font-family:Comfortaa!important;
    font-size:28px!important;
    line-height:42px!important;
    font-weight:700!important;
  }
  .home .atouts h3,
  .home .atouts-intro p,
  .home .atouts-intro li{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:600!important;
  }
  .home .atouts-intro .pill{
    font-family:Montserrat!important;
    font-size:16px!important;
    line-height:normal!important;
    font-weight:400!important;
  }
  .home .atouts-list summary{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:400!important;
  }
  .home .atouts-list p{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:300!important;
  }
}

/* Exact footer typography shared by computer, tablet and phone. */
footer h2{
  font-family:Comfortaa!important;
  font-size:16px!important;
  line-height:24px!important;
  font-weight:700!important;
}
footer p{
  font-family:Montserrat!important;
  font-size:13px!important;
  line-height:26px!important;
  font-weight:400!important;
}
footer .cesu{
  font-family:Montserrat!important;
  font-size:12px!important;
  line-height:normal!important;
  font-weight:400!important;
}
footer .pill{
  font-family:Montserrat!important;
  font-size:16px!important;
  line-height:normal!important;
  font-weight:400!important;
}

/* Phone footer spacing and control dimensions matched to the original.
   Typography is intentionally left to the exact rules immediately above. */
@media (max-width:600px){
  footer{
    padding:43px 20px 54px!important;
  }
  footer section:first-child{
    margin-bottom:28px!important;
  }
  footer section:nth-child(2){
    margin-bottom:24px!important;
  }
  footer section:last-child{
    margin-bottom:0!important;
  }
  footer h2{
    margin-bottom:12px!important;
  }
  footer section:first-child p:first-of-type{
    margin-bottom:26px!important;
  }
  footer section:nth-child(2) p:first-of-type{
    margin-bottom:12px!important;
  }
  footer section:nth-child(2) p:nth-of-type(2){
    margin-bottom:34px!important;
  }
  footer p.social{
    width:82px!important;
    height:26px!important;
    margin-bottom:0!important;
  }
  footer section:last-child p{
    margin-bottom:12px!important;
  }
  footer .pill{
    width:186px!important;
    min-width:186px!important;
    max-width:186px!important;
    height:44px!important;
  }
  .top{
    display:grid!important;
    width:30px!important;
    height:30px!important;
    right:8px!important;
    bottom:10px!important;
    border-width:1px!important;
    font-size:28px!important;
  }
}

/* Exact phone-header number typography measured on the original. */
@media (max-width:600px){
  .site-header .header-phone{
    font-family:Comfortaa!important;
    font-size:18px!important;
    line-height:normal!important;
    font-weight:300!important;
    color:#444444!important;
  }
}

/* Remaining phone-header proportions matched to the original capture. */
@media (max-width:600px){
  body{
    padding-top:132px!important;
  }
  .site-header{
    height:132px!important;
    padding:6px 18px 13px!important;
    grid-template-rows:78px 35px!important;
  }
  .site-header .logo{
    width:60px!important;
    height:65px!important;
  }
  .site-header .menu-toggle{
    gap:3.5px!important;
  }
  .site-header .menu-toggle span{
    width:23px!important;
    height:2px!important;
  }
}

/* Phone Contact page typography: exact Font Finder values from the original. */
@media (max-width:600px){
  .contact-page .contact-hero{
    background-image:linear-gradient(#0004,#0004),url('/assets/contact-hero-source.webp')!important;
    background-position:30% 16%!important;
    background-size:161% auto!important;
    background-repeat:no-repeat!important;
  }
  .contact-page .contact-hero h1{
    visibility:visible!important;
    margin:0!important;
    font-family:Comfortaa!important;
    font-size:28px!important;
    line-height:42px!important;
    font-weight:700!important;
    color:#fff!important;
    text-align:left!important;
  }
  .contact-page .contact-info h2{
    font-family:Comfortaa!important;
    font-size:25px!important;
    line-height:37.5px!important;
    font-weight:300!important;
    color:#000!important;
    text-align:center!important;
  }
  .contact-page .contact-info p,
  .contact-page .contact-info p a{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:30px!important;
    font-weight:300!important;
    color:#000!important;
    text-align:center!important;
  }
}

/* Phone drawer: the active destination is white and its rule follows only
   the label width, as on the original site. */
@media (max-width:600px){
  .site-header nav>a:not(.drawer-phone){
    display:block!important;
    width:max-content!important;
    max-width:100%!important;
    align-self:flex-start!important;
  }
  .site-header nav>a.active:not(.drawer-phone),
  .site-header nav>a:not(.drawer-phone):hover,
  .site-header nav>a:not(.drawer-phone):focus-visible{
    color:#fff!important;
    font-weight:300!important;
    border-bottom:2px solid #fff!important;
    outline:0!important;
  }
  .site-header nav .services-nav-group{
    position:relative!important;
    width:max-content!important;
    max-width:100%!important;
    align-self:flex-start!important;
  }
  .site-header nav .services-nav-group .services-link.active,
  .site-header nav .services-nav-group:has(.services-link.active) .services-toggle{
    color:#fff!important;
    font-weight:300!important;
    border-bottom:0!important;
  }
  .site-header nav .services-nav-group:has(.services-link.active)::after{
    content:""!important;
    position:absolute!important;
    right:0!important;
    bottom:0!important;
    left:0!important;
    height:2px!important;
    background:#fff!important;
  }
}

/* Exact phone typography measured on the original About page. */
@media (max-width:600px){
  .about-page .about-hero h1{
    font-family:Comfortaa!important;
    font-size:28px!important;
    line-height:42px!important;
    font-weight:700!important;
    color:#fff!important;
    text-align:left!important;
  }
  .about-page .about-copy h2{
    font-family:Comfortaa!important;
    font-size:28px!important;
    line-height:42px!important;
    font-weight:700!important;
    color:#000!important;
    text-align:center!important;
  }
  .about-page .about-copy p,
  .about-page .about-photo p{
    font-family:Montserrat!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:300!important;
    color:#000!important;
    text-align:left!important;
  }
}

/* Exact phone typography measured on the original Services page. */
@media (max-width:600px){
  .services-page .services-hero h1{
    font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:28px!important;
    line-height:42px!important;
    font-weight:700!important;
    color:#fff!important;
    text-align:center!important;
  }
  .services-page .services-lead p{
    font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:15px!important;
    line-height:30px!important;
    font-weight:300!important;
    color:#000!important;
    text-align:center!important;
  }
  .services-page .service-tile .rule{
    background:currentColor!important;
  }
  .services-page .service-tile.light .rule{
    color:#427bca!important;
  }
  .services-page .service-tile h2{
    font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:25px!important;
    line-height:37.5px!important;
    font-weight:400!important;
    text-align:center!important;
  }
  .services-page .service-tile h2 small{
    font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:25px!important;
    line-height:37.5px!important;
    font-weight:700!important;
  }
  .services-page .service-tile h3{
    font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:700!important;
    text-align:left!important;
  }
  .services-page .service-tile p,
  .services-page .service-tile ul,
  .services-page .service-tile li{
    font-family:Montserrat,"Montserrat Fallback"!important;
    font-size:15px!important;
    line-height:22.5px!important;
    font-weight:300!important;
    text-align:left!important;
  }
  .services-page .service-tile.light h2,
  .services-page .service-tile.light h2 small,
  .services-page .service-tile.light h3,
  .services-page .service-tile.light p,
  .services-page .service-tile.light ul,
  .services-page .service-tile.light li{
    color:#275492!important;
  }
  .services-page .service-tile.blue h2,
  .services-page .service-tile.blue h2 small,
  .services-page .service-tile.blue h3,
  .services-page .service-tile.blue p,
  .services-page .service-tile.blue ul,
  .services-page .service-tile.blue li{
    color:#fff!important;
  }
  .services-page .service-tile .phone-pill span{
    font-size:16px!important;
    line-height:normal!important;
  }
  .services-page .service-tile:not(.photo){
    min-height:0!important;
  }
  .services-page .service-tile>div{
    justify-content:flex-start!important;
  }
  .services-page .service-tile>div>p:last-of-type{
    margin-bottom:0!important;
  }
  .services-page .service-tile .phone-pill,
  .services-page .service-tile.blue .phone-pill{
    flex-shrink:0!important;
    margin-top:38px!important;
  }
}

/* Uniform phone spacing around the three home-page service links. */
@media (max-width:600px){
  .home .services-cards .cards article,
  .home .services-cards .cards article:nth-child(1),
  .home .services-cards .cards article:nth-child(2),
  .home .services-cards .cards article:nth-child(3){
    height:auto!important;
    min-height:0!important;
    padding-bottom:55px!important;
  }
  .home .services-cards .cards a{
    margin-top:38px!important;
    padding-top:0!important;
  }
}

/* Real, editable equipment panel from the original site. */
.equipment-photos .equipment-copy{
  grid-column:3!important;
  grid-row:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:100%!important;
  padding:24px 16px 20px!important;
  color:#fff!important;
  text-align:center!important;
  background:linear-gradient(90deg,#427bca 48%,#49aedf 100%)!important;
}
.equipment-copy h3{
  margin:0 0 18px!important;
  color:#fff!important;
  font-family:Comfortaa,"Comfortaa Fallback",sans-serif!important;
  font-size:18px!important;
  line-height:normal!important;
  font-weight:700!important;
}
.equipment-copy-text{
  color:#fff!important;
  font-family:Montserrat,"Montserrat Fallback",sans-serif!important;
  font-size:14px!important;
  line-height:21px!important;
  font-weight:300!important;
}
.equipment-copy-text p{margin:0!important}
.equipment-copy>a{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:172px!important;
  height:46px!important;
  margin-top:10px!important;
  padding:10px 20px!important;
  border:2px solid #fff!important;
  border-radius:50px!important;
  color:#d8e4f4!important;
  font-family:Montserrat,"Montserrat Fallback",sans-serif!important;
  font-size:16px!important;
  line-height:normal!important;
  font-weight:400!important;
  text-align:center!important;
  text-decoration:none!important;
  white-space:nowrap!important;
}

@media (max-width:600px){
  .equipment-photos .equipment-copy{
    height:auto!important;
    aspect-ratio:1 / 1!important;
    padding:39px 12px!important;
  }
  .equipment-copy h3{
    margin-bottom:24px!important;
    font-size:28px!important;
  }
  .equipment-copy-text{
    font-size:15px!important;
    line-height:22.5px!important;
  }
  .equipment-copy>a{
    width:200px!important;
    height:56px!important;
    margin-top:24px!important;
  }
}

/* iPad/tablet fidelity pass. Phone and computer layouts remain untouched. */
@media (min-width:601px) and (max-width:1150px){
  /* The original tablet hero is a little taller and its copy sits lower. */
  .home .hero{
    height:890px!important;
  }
  .home .hero>div{
    transform:translateY(38px)!important;
  }

  /* Restore the original compact rhythm in the two-column strengths block. */
  .home .atouts h2{
    margin-bottom:14px!important;
  }
  .home .atouts-intro p{
    margin-top:20px!important;
    margin-bottom:20px!important;
  }
  .home .atouts-intro .pill{
    display:flex!important;
    width:272px!important;
    min-width:0!important;
    height:62px!important;
    margin:22px auto 0!important;
  }
  .home .atouts-list{
    padding-top:22px!important;
    padding-right:6%!important;
  }
  .home .atouts-list details{
    margin-bottom:43px!important;
  }
  .home .atouts-list summary{
    gap:16px!important;
  }
  .home .atouts-list summary::before{
    width:36px!important;
    height:36px!important;
    flex-basis:36px!important;
    font-size:32px!important;
  }

  /* Keep the editable blue panel while preventing it from enlarging row one. */
  .home .equipment-photos{
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
  }
  .home .equipment-photos .equipment-copy{
    min-width:0!important;
    min-height:0!important;
    overflow:hidden!important;
    padding:clamp(6px,1vw,10px)!important;
  }
  .home .equipment-copy h3{
    margin-bottom:clamp(5px,1vw,10px)!important;
    font-size:clamp(15px,1.57vw,18px)!important;
  }
  .home .equipment-copy-text{
    font-size:clamp(9.5px,1.09vw,12.5px)!important;
    line-height:clamp(12px,1.39vw,16px)!important;
  }
  .home .equipment-copy>a{
    width:clamp(145px,14.96vw,172px)!important;
    height:clamp(38px,4vw,46px)!important;
    margin-top:clamp(5px,.7vw,8px)!important;
    padding:6px 12px!important;
    font-size:clamp(13px,1.39vw,16px)!important;
  }
  .home .equipment-photos .equipment-bottom{
    object-position:center center!important;
  }

  /* Tablet title values measured on the original site with Font Finder.
     Keep each title on its two deliberate lines at every tablet width. */
  .home .services-cards .cards h3,
  .home .services-cards .cards h4{
    font-family:Comfortaa,"Comfortaa Fallback"!important;
    font-size:25px!important;
    line-height:37.5px!important;
    font-weight:700!important;
    white-space:nowrap!important;
  }
  /* The original uses one two-line text block. Split its 16px 0 8px margin
     and 2px 0 padding across our two semantic headings. */
  .home .services-cards .cards h3{
    margin:16px 0 0!important;
    padding:2px 0 0!important;
  }
  .home .services-cards .cards h4{
    margin:0 0 8px!important;
    padding:0 0 2px!important;
  }

  /* On narrow iPads the longer copy must enlarge the shared grid row instead
     of shrinking the service icon or consuming the link's breathing room. */
  .home .services-cards .cards article{
    height:auto!important;
    min-height:500px!important;
  }
  .home .services-cards .cards i{
    flex:0 0 52px!important;
  }
  .home .services-cards .cards h3,
  .home .services-cards .cards h4,
  .home .services-cards .cards a{
    flex-shrink:0!important;
  }
  .home .services-cards .cards a{
    margin-top:auto!important;
    padding-top:24px!important;
  }

}

/* The iPad mini keeps three columns, but the third title needs one extra
   line. Give its title the full card width and grow every card equally. */
@media (min-width:601px) and (max-width:850px){
  .home .services-cards .cards article{
    min-height:575px!important;
  }
  .home .services-cards .cards article:nth-child(3) h3,
  .home .services-cards .cards article:nth-child(3) h4{
    width:calc(100% + 56px)!important;
    max-width:none!important;
  }
  .home .services-cards .cards article:nth-child(3) h3{
    white-space:nowrap!important;
  }
  .home .services-cards .cards article:nth-child(3) h4{
    white-space:normal!important;
  }
  .home .services-cards .cards .mini-tablet-title-break{
    display:block!important;
  }
}

/* Desktop: keep column CTAs centered and balance the space around the strengths block. */
@media (min-width:1151px){
  .home .atouts{
    min-height:0!important;
  }

  .home .atouts-intro .pill{
    display:flex!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:100%!important;
    padding-left:52px!important;
    padding-right:52px!important;
    white-space:nowrap!important;
    margin-top:32px!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }

  .about-page .about-copy .pill{
    float:none!important;
    display:flex!important;
    width:fit-content!important;
    min-width:0!important;
    max-width:100%!important;
    padding-left:52px!important;
    padding-right:52px!important;
    white-space:nowrap!important;
    margin:35px auto 0!important;
  }

  /* Desktop Services: one spacing rhythm for every text panel.  Row height is
     now driven by the copy rather than unrelated per-panel minimum heights. */
  .services-page .service-tile{
    height:auto!important;
    min-height:0!important;
    aspect-ratio:auto!important;
  }

  .services-page .service-tile>div{
    height:100%!important;
    box-sizing:border-box!important;
    padding-top:72px!important;
    padding-bottom:72px!important;
    justify-content:flex-start!important;
  }

  .services-page .service-tile>div>p:last-of-type{
    margin-bottom:0!important;
  }

  .services-page .service-tile .phone-pill,
  .services-page .service-tile.blue .phone-pill{
    flex-shrink:0!important;
    width:245px!important;
    height:58px!important;
    margin:42px auto 0!important;
  }
}