/* Ultratug · Sustainability — hoja de página para Webflow, v1 (13-oct-2026).
   Generada por QA/qa-2026-10-12/preparado/sustainability/construir.py desde el prototipo
   (assets/design-studio/prototype/assets/sustainability/sustainability.css + lo que usa de newsroom/styles.css).
   Ámbito: todo bajo .sus-root y con clases sus-*; ninguna regla toca body, html, h1, a, * ni nada del navbar,
   el menú, los botones flotantes, las noticias o el pie de Webflow.
   Estados en <html> que pone sus-motion-v1.js: .sus-static (prefers-reduced-motion o ?static) y .sus-notas (?notas). */

/* Tipografía: los mismos ficheros Helvetica Neue LT Std que ya sirve el sitio ("Helveticaneueltstd Lt/Md/Bd"),
   en una familia propia con los pesos del prototipo: 300 = Lt, 400–500 = Md, 600–900 = Bd. */
@font-face{font-family:'UT Sus';font-style:normal;font-weight:300;font-display:swap;src:url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/698e519e2298ab6ebf51ace7_HelveticaNeueLTStd-Lt.otf') format('opentype')}
@font-face{font-family:'UT Sus';font-style:normal;font-weight:400 500;font-display:swap;src:url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/698e517a1b643b9ab563341c_HelveticaNeueLTStd-Md.otf') format('opentype')}
@font-face{font-family:'UT Sus';font-style:normal;font-weight:600 900;font-display:swap;src:url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/698e51323fb3c08d813d330a_HelveticaNeueLTStd-Bd.otf') format('opentype')}

/* Tokens (los de newsroom/styles.css + los dos de sustainability.css), solo dentro de la página.
   flow-root: los márgenes de cada sección se quedan dentro de su embed (no asoma el fondo entre embeds).
   overflow-x:clip (no hidden): recorta igual sin crear un contenedor de scroll, y el sticky de Every Ton Counts sigue
   funcionando. isolation: los z-index de dentro no compiten con los botones flotantes ni con el menú. */
.sus-root{--navy:#000E1E;--ink:#05234b;--panel:#071c31;--panel-2:#102e48;--cyan:#00bcea;--text:#f6f9ff;--muted:#aec2d7;--soft:#d0dce8;--line:#29445d;--line-2:#355570;--radius:28px;--ease:cubic-bezier(.22,.68,0,1);display:flow-root;position:relative;isolation:isolate;overflow-x:clip;background:var(--navy);color:var(--text);font-family:'UT Sus','Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:400;line-height:1.45;letter-spacing:normal;text-align:left;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.sus-root *,.sus-root *::before,.sus-root *::after{box-sizing:border-box}

/* Armadura contra ultratug.webflow.shared.css, que pinta por selector de elemento (h1{38px; margin-top:20px},
   p{15px; letter-spacing:1px; font-family:Helveticaneueltstd Lt}, figure{margin}, ul/ol{padding-left:40px},
   img{inline-block}…). :where() deja la especificidad en la de .sus-root: cualquier regla de abajo manda. */
.sus-root :where(h1,h2,h3,h4,h5,h6,p,figure,blockquote,ol,ul,li){margin:0;padding:0;font-family:inherit;font-size:inherit;color:inherit;letter-spacing:normal;text-transform:none}
.sus-root :where(p,li){font-weight:inherit;line-height:inherit}
.sus-root :where(h1,h2,h3){font-weight:700;line-height:1.04;letter-spacing:-.04em}
.sus-root :where(h4,h5,h6){font-weight:700;line-height:inherit}
.sus-root :where(ol,ul){list-style:none}
.sus-root :where(b,strong){font-weight:700}
.sus-root :where(img,video){display:block;max-width:100%;border:0;vertical-align:initial}
.sus-root :where(button){font:inherit;color:inherit;background:none;border:0;border-radius:0;padding:0;margin:0;cursor:pointer;letter-spacing:inherit;text-transform:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.sus-root h2{font-size:clamp(32px,3.45vw,48px)}
.sus-root button:focus-visible{outline:3px solid var(--cyan);outline-offset:6px;border-radius:5px}

/* De newsroom/styles.css: contenedor, eyebrow, oculto accesible y el hero de texto del Newsroom */
.sus-root .sus-visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.sus-root .sus-container{width:calc(100% - 112px);max-width:1200px;margin-inline:auto}
.sus-root .sus-eyebrow{color:var(--cyan);font-size:12px;font-weight:700;line-height:1.4;letter-spacing:.16em;text-transform:uppercase}
.sus-root .sus-intro{text-align:center;margin-top:34px}
.sus-root .sus-breadcrumb{display:flex;gap:10px;justify-content:center;color:#9dcee9;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:25px}
.sus-root .sus-breadcrumb [aria-current]{color:var(--cyan)}
.sus-root .sus-intro h1{font-size:clamp(60px,7.1vw,100px);line-height:.94;letter-spacing:-.06em}
.sus-root .sus-intro h1 span{color:var(--cyan)}
.sus-root .sus-intro-description{margin:28px auto 0;max-width:780px;font-size:18px;line-height:1.5;font-weight:300;color:#bfd0e2}
@media (max-width:1100px){.sus-root .sus-container{width:calc(100% - 72px)}}
@media (max-width:760px){.sus-root .sus-container{width:calc(100% - 40px)}.sus-root .sus-intro{margin-top:18px}.sus-root .sus-intro h1{font-size:64px}.sus-root .sus-intro-description{font-size:17px;max-width:510px}}
@media (max-width:480px){.sus-root .sus-intro h1{font-size:54px}.sus-root .sus-intro-description{font-size:16px;max-width:330px}}
@media (prefers-reduced-motion:reduce){.sus-root *,.sus-root *::before,.sus-root *::after{animation:none!important;transition:none!important}}

/* Red de seguridad: si sus-motion-v1.js no llegara a cargar, las fotos del arco no se quedan invisibles. */
@keyframes sus-rise-fallback{to{opacity:1;transform:none}}
.sus-root .sus-arch:not(.sus-in) .sus-rise{animation:sus-rise-fallback 1.3s var(--ease) 3s forwards}

/* ===== Desde aquí, sustainability.css del prototipo (ronda de Paula del 6-oct, aplicada el 12-oct) ===== */
.sus-root{--ink-2: #bfd0e2; --deep: #001a39}
.sus-root .sus-lede{font-weight: 300; font-size: 18px; line-height: 1.55; color: var(--ink-2)}
.sus-root .sus-ph{display: none; position: absolute; z-index: 2; right: 26px; top: 26px; padding: 6px 12px; border-radius: 30px; background: #f5b335; color: #1d1300; font-size: 11px; font-weight: 700; letter-spacing: .08em}
html.sus-notas .sus-root .sus-ph{display: inline-flex}
.sus-root .sus-hero{padding-bottom: 0}
.sus-root .sus-hero .sus-intro-description{max-width: 640px}
.sus-root .sus-arch{position: relative; display: flex; justify-content: center; align-items: flex-start; gap: clamp(10px, 1.4vw, 20px); width: min(1440px, 100%); margin: 64px auto 0; padding: 0 16px}
.sus-root .sus-arch::before{content: ''; position: absolute; left: 50%; top: -90px; width: 92%; height: 720px; transform: translateX(-50%); background: radial-gradient(ellipse at 50% 42%, rgba(0, 188, 234, .17) 0%, rgba(0, 188, 234, .05) 40%, rgba(0, 188, 234, 0) 66%); pointer-events: none}
.sus-root .sus-arch figure{margin: 0; position: relative; flex: none; will-change: transform}
.sus-root .sus-arch .sus-rise{width: 100%; height: 100%; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 60px #0008, inset 0 0 0 1px #ffffff1f; opacity: 0; transform: translateY(140px); transition: opacity .9s ease, transform 1.3s var(--ease)}
.sus-root .sus-arch.sus-in .sus-rise{opacity: 1; transform: none}
.sus-root .sus-arch .sus-a2 .sus-rise,.sus-root .sus-arch .sus-a4 .sus-rise{transition-delay: .12s}
.sus-root .sus-arch .sus-a1 .sus-rise,.sus-root .sus-arch .sus-a5 .sus-rise{transition-delay: .24s}
.sus-root .sus-arch img{width: 100%; height: 100%; object-fit: cover}
.sus-root .sus-arch .sus-a1,.sus-root .sus-arch .sus-a5{width: 13.9%; aspect-ratio: 200 / 235}
.sus-root .sus-arch .sus-a2,.sus-root .sus-arch .sus-a4{width: 18.5%; aspect-ratio: 266 / 365; margin-top: 74px}
.sus-root .sus-arch .sus-a3{width: 27.6%; aspect-ratio: 398 / 420; margin-top: 95px}
.sus-root .sus-proof{padding: 150px 0 0}
.sus-root .sus-proof-head{text-align: center; max-width: 820px; margin: 0 auto}
.sus-root .sus-proof-head h2{margin-top: 18px; font-size: clamp(34px, 3.9vw, 56px)}
.sus-root .sus-proof-head h2 span{color: var(--cyan)}
.sus-root .sus-abs{position: relative; isolation: isolate; overflow: hidden; margin-top: 30px; padding: clamp(120px, 11vw, 160px) 20px clamp(130px, 12vw, 170px); text-align: center}
.sus-root .sus-abs-sea{position: absolute; inset: 0; z-index: -1; background: #0a2238 url('https://cdn.prod.website-files.com/6978e20568291edea0b5726e/6ace2c47632f7607cdcbf97b_abs-sea-poster.webp') center 62% / cover no-repeat}
.sus-root .sus-abs-sea video{width: 100%; height: 100%; object-fit: cover; object-position: center 62%}
.sus-root .sus-abs-sea::after{content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy) 0%, rgba(0, 14, 30, .42) 20%, rgba(0, 14, 30, .26) 52%, rgba(0, 14, 30, .5) 82%, var(--navy) 100%)}
.sus-root .sus-abs-body{display: flex; flex-direction: column; align-items: center}
.sus-root .sus-abs-body > *{will-change: transform, opacity}
.sus-root .sus-abs-logo{width: clamp(280px, 33vw, 480px); height: auto; filter: drop-shadow(0 10px 30px rgba(0, 14, 30, .55))}
.sus-root .sus-abs-claim{margin-top: clamp(16px, 1.8vw, 24px); font-size: clamp(18px, 1.75vw, 25px); font-weight: 500; line-height: 1.2; letter-spacing: -.015em; color: #fff; text-shadow: 0 2px 18px rgba(0, 14, 30, .6)}
.sus-root .sus-years{display: flex; justify-content: center; gap: clamp(12px, 1.6vw, 24px); margin: clamp(34px, 3.6vw, 52px) 0 0; padding: 0; list-style: none}
.sus-root .sus-year{width: clamp(98px, 11vw, 158px); aspect-ratio: 1; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #002855; background: radial-gradient(circle at 32% 26%, #fff 0%, #eef8fd 42%, #bcd9ea 100%); box-shadow: 0 18px 40px #0009, inset 0 0 0 6px rgba(255, 255, 255, .55), inset 0 0 0 7px rgba(0, 40, 85, .18)}
.sus-root .sus-year b{font-size: clamp(27px, 3vw, 42px); line-height: 1; letter-spacing: -.05em}
.sus-root .sus-year small{margin-top: 6px; font-size: clamp(8.5px, .72vw, 10.5px); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3d5b7a}
.sus-root .sus-abs-reach{margin-top: clamp(30px, 3.2vw, 46px); display: inline-flex; align-items: baseline; gap: 12px}
.sus-root .sus-abs-reach b{font-weight: 300; font-size: clamp(50px, 5vw, 74px); line-height: .9; letter-spacing: -.06em}
.sus-root .sus-abs-reach span{font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9dcee9}
.sus-root .sus-proof-copy{max-width: 640px; margin: 0 auto; text-align: center}
.sus-root .sus-pill-car{position: relative; width: min(760px, calc(100% - 40px)); height: clamp(150px, 14vw, 200px); margin: clamp(48px, 5vw, 70px) auto 0; border-radius: 999px; overflow: hidden; transform: translateZ(0); box-shadow: 0 26px 50px #0008, inset 0 0 0 1px #ffffff14}
.sus-root .sus-pill-track{display: flex; height: 100%; will-change: transform}
.sus-root .sus-pill-track.sus-anim{transition: transform 1.15s var(--ease)}
.sus-root .sus-pill-track figure{flex: 0 0 100%; height: 100%; margin: 0}
.sus-root .sus-pill-track img{width: 100%; height: 100%; object-fit: cover}
.sus-root .sus-bridge{text-align: center; margin: clamp(56px, 5.5vw, 80px) auto 0; max-width: 760px; padding-bottom: 20px}
.sus-root .sus-bridge h3{font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.03em}
.sus-root .sus-bridge p{margin-top: 16px}
.sus-root .sus-etc{padding-bottom: 40px; background: linear-gradient(180deg, transparent 0, #001427 14%, #001427 100%)}
.sus-root .sus-etc-driver{position: relative; height: 220vh}
.sus-root .sus-etc-stage{position: sticky; top: 0; height: 100vh; overflow: hidden}
.sus-root .sus-etc-words{position: absolute; left: 0; right: 0; top: 50%; margin: 0; text-align: center; transform-origin: 50% 0; font-weight: 700; font-size: min(13.5vw, 24vh); line-height: .84; letter-spacing: -.065em; text-transform: uppercase; will-change: transform}
.sus-root .sus-etc-words .sus-w{display: block; width: max-content; margin-inline: auto; will-change: translate, opacity}
.sus-root .sus-etc-words .sus-w-ton{color: var(--cyan)}
.sus-root .sus-knots{position: absolute; left: 0; right: 0; top: 50%; text-align: center; opacity: 0; will-change: transform, opacity}
.sus-root .sus-knots-rule{font-size: clamp(13px, 1vw, 15px); font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #9dcee9}
.sus-root .sus-knots-num{display: flex; align-items: baseline; justify-content: center; gap: .08em; margin-top: .16em; font-size: min(25vw, 40vh); line-height: .8}
.sus-root .sus-knots-num b{font-weight: 700; letter-spacing: -.07em; font-variant-numeric: tabular-nums}
.sus-root .sus-knots-num span{font-size: .17em; font-weight: 700; letter-spacing: -.01em; color: var(--cyan)}
.sus-root .sus-knots-cap{margin-top: 22px; font-weight: 300; font-size: clamp(16px, 1.3vw, 19px); color: var(--ink-2)}
.sus-root .sus-etc-head{position: relative; z-index: 1; text-align: center; max-width: 760px; margin: -14vh auto 0; padding-top: 40px}
.sus-root .sus-etc-head p{margin-top: 18px}
html.sus-static .sus-root .sus-etc-driver{height: auto}
html.sus-static .sus-root .sus-etc-stage{position: relative; height: auto; padding: 120px 0 40px; overflow: visible}
html.sus-static .sus-root .sus-etc-words{position: relative; top: auto; font-size: min(10.4vw, 150px)}
html.sus-static .sus-root .sus-knots{position: relative; top: auto; opacity: 1; margin-top: 70px}
html.sus-static .sus-root .sus-knots-num{font-size: min(22vw, 300px)}
html.sus-static .sus-root .sus-etc-head{margin-top: 0}
.sus-root .sus-inits{display: flex; gap: 12px; height: 480px; margin-top: 64px; transition: height .6s var(--ease)}
.sus-root .sus-init{position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; scroll-margin-top: 92px; border-radius: 24px; overflow: hidden; background: var(--panel); border: 1px solid #7397bc40; transition: flex-grow .75s var(--ease)}
.sus-root .sus-init:first-child{flex-grow: 1.55}
.sus-root .sus-init-bg{position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transition: height .75s var(--ease), filter .5s}
.sus-root .sus-init::after{content: ''; position: absolute; left: 0; right: 0; top: 0; height: 100%; background: linear-gradient(180deg, rgba(0, 26, 57, 0) 22%, rgba(0, 26, 57, .55) 46%, rgba(0, 22, 48, .93) 72%, #001530 100%); pointer-events: none; transition: height .75s var(--ease)}
.sus-root .sus-init-cap{z-index: 2; display: grid; grid-template-columns: 1fr auto; align-items: end; column-gap: 14px; padding: 0 24px 24px}
.sus-root .sus-init-h{grid-column: 1; margin: 0; font-size: inherit}
.sus-root .sus-init-face{display: block; text-align: left; color: #fff}
.sus-root .sus-init-face::before{content: ''; position: absolute; inset: 0; z-index: 3}
.sus-root .sus-init-face .sus-num{display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #9dcee9}
.sus-root .sus-init-name{display: block; margin-top: 10px; font-size: clamp(21px, 1.7vw, 24px); font-weight: 700; line-height: 1.05; letter-spacing: -.035em; text-wrap: balance}
.sus-root .sus-init:first-child .sus-init-name{font-size: clamp(26px, 2.4vw, 34px)}
.sus-root .sus-init-micro{grid-column: 1; margin-top: 10px; font-weight: 300; font-size: 15px; line-height: 1.4; color: var(--soft); text-wrap: pretty}
.sus-root .sus-init-more{grid-column: 1 / -1; margin-top: 18px; justify-self: start; display: inline-flex; align-items: center; gap: 12px; color: #fff; pointer-events: none}
.sus-root .sus-init-more em{font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap}
.sus-root .sus-init-more i{position: relative; flex: none; width: 44px; height: 44px; border-radius: 50%; background: #fff; box-shadow: 0 8px 20px #0006; transition: transform .35s var(--ease), background .25s}
.sus-root .sus-init-more i::before,.sus-root .sus-init-more i::after{content: ''; position: absolute; left: 50%; top: 50%; width: 16px; height: 2px; border-radius: 2px; background: var(--navy); transform: translate(-50%, -50%)}
.sus-root .sus-init-more i::after{transform: translate(-50%, -50%) rotate(90deg)}
.sus-root .sus-init:hover .sus-init-more i{transform: rotate(90deg); background: var(--cyan)}
.sus-root .sus-init:hover .sus-init-bg{filter: brightness(1.08)}
@media (max-width: 1199px) {
  .sus-root .sus-init-more em{display: none}
}
.sus-root .sus-inits.sus-has-open .sus-init{flex-grow: .25}
.sus-root .sus-inits.sus-has-open .sus-init.sus-open{flex-grow: 5}
.sus-root .sus-init.sus-open{justify-content: flex-start}
.sus-root .sus-init.sus-open .sus-init-bg{height: 150px; object-position: var(--pos-open, 50% 50%)}
.sus-root .sus-init.sus-open::after{height: 150px; background: linear-gradient(180deg, rgba(0, 26, 57, .1) 0%, rgba(0, 22, 48, .55) 50%, rgba(0, 21, 48, .96) 100%)}
.sus-root .sus-init.sus-open .sus-init-face::before{display: none}
.sus-root .sus-init.sus-open .sus-init-cap{flex: none; height: 150px; padding: 0 170px 18px 36px}
.sus-root .sus-init.sus-open .sus-init-micro,.sus-root .sus-init.sus-open .sus-init-more{display: none}
.sus-root .sus-init.sus-open .sus-init-face .sus-num{margin-bottom: 2px}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-cap{flex: 1; display: flex; flex-direction: column; align-items: center; padding: 24px 0}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-micro,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-more{display: none}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-h{height: 100%}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-face{display: flex; flex-direction: column; align-items: center; gap: 16px; height: 100%}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-name{margin: 0; font-size: 19px; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open)::after{background: linear-gradient(180deg, rgba(0, 21, 48, .6), rgba(0, 21, 48, .85))}
.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open):hover .sus-init-bg{filter: brightness(1.25)}
.sus-root .sus-init-detail{z-index: 2; flex: 1; padding: 26px 36px 30px}
.sus-root .sus-init-detail[hidden]{display: none}
.sus-root .sus-init-grid{display: grid; grid-template-columns: 1fr 1fr; gap: 26px 40px; width: calc((min(1200px, 100vw - 112px) - 36px) * 5 / 5.75 - 72px)}
.sus-root .sus-init-close{position: absolute; z-index: 4; right: 20px; top: 20px; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; border-radius: 30px; background: rgba(0, 14, 30, .55); border: 1px solid rgba(255, 255, 255, .35); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #fff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px)}
.sus-root .sus-init-close span{font-size: 20px; font-weight: 300; line-height: 1}
.sus-root .sus-init-close:hover{border-color: var(--cyan)}
.sus-root .sus-sub-h{font-size: 22px; font-weight: 700; letter-spacing: -.025em; margin-bottom: 6px}
.sus-root .sus-sub{font-size: 18px; font-weight: 500; color: var(--cyan); letter-spacing: -.01em}
.sus-root .sus-init-detail .sus-lede{margin-top: 14px; font-size: 15.5px; line-height: 1.5}
.sus-root .sus-init-detail .sus-lede + .sus-lede{margin-top: 10px}
.sus-root .sus-label{font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9dcee9}
.sus-root .sus-data{display: grid; gap: 14px; margin-top: 16px}
.sus-root .sus-data > div{display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 18px; border-top: 1px solid var(--line-2); padding-top: 14px}
.sus-root .sus-data b,.sus-root .sus-impl b{display: block; font-weight: 300; font-size: 56px; line-height: .9; letter-spacing: -.06em; color: #fff}
.sus-root .sus-data b small{font-size: .32em; font-weight: 700; letter-spacing: .02em; margin-left: 4px; color: #9dcee9}
.sus-root .sus-data strong{display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase}
.sus-root .sus-data p{margin-top: 4px; font-weight: 300; font-size: 14px; line-height: 1.4; color: var(--ink-2)}
.sus-root .sus-chapters{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px}
.sus-root .sus-chapters div{background: #0b2a47; border: 1px solid var(--line); border-radius: 18px; padding: 16px 18px 18px}
.sus-root .sus-chapters span{font-weight: 300; font-size: 34px; line-height: 1; letter-spacing: -.05em; color: var(--cyan)}
.sus-root .sus-chapters strong{display: block; margin-top: 10px; font-size: 16px; letter-spacing: -.02em}
.sus-root .sus-chapters p{margin-top: 4px; font-weight: 300; font-size: 13.5px; color: var(--ink-2)}
.sus-root .sus-impl{display: flex; align-items: baseline; gap: 16px; margin-top: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line)}
.sus-root .sus-impl p{font-size: 15px; color: var(--ink-2); font-weight: 300}
.sus-root .sus-impl strong{color: #fff; font-weight: 700}
.sus-root .sus-daynight{display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px}
.sus-root .sus-daynight div{border-radius: 18px; padding: 18px 18px 20px; min-height: 176px; display: flex; flex-direction: column}
.sus-root .sus-daynight .sus-day{background: linear-gradient(160deg, #3d7fae 0%, #12466f 100%)}
.sus-root .sus-daynight .sus-night{background: linear-gradient(160deg, #04182c 0%, #000a15 100%); border: 1px solid var(--line)}
.sus-root .sus-daynight svg{width: 34px; height: 34px; stroke: #fff; fill: none; stroke-width: 1.4}
.sus-root .sus-daynight strong{margin-top: auto; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase}
.sus-root .sus-daynight strong em{font-style: normal; color: var(--cyan)}
.sus-root .sus-daynight .sus-day strong em{color: #e6f5fc}
.sus-root .sus-daynight p{margin-top: 6px; font-weight: 300; font-size: 13.5px; line-height: 1.4; color: #dbe7f2}
.sus-root .sus-fuel{position: relative; display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; margin-top: 14px}
.sus-root .sus-fuel-c{display: flex; flex-direction: column; min-width: 0; border-radius: 20px; padding: 18px 20px 20px}
.sus-root .sus-fuel-c.sus-is-port{background: linear-gradient(160deg, #0f4677, #0a2a4d); border: 1px solid #2f6391}
.sus-root .sus-fuel-c.sus-is-main{background: #061a2e; border: 1px solid var(--line)}
.sus-root .sus-fuel-ico{width: 42px; height: 42px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round}
.sus-root .sus-is-port .sus-fuel-ico{color: var(--cyan)}
.sus-root .sus-is-main .sus-fuel-ico{color: #8fa6bd}
.sus-root .sus-fuel-k{margin-top: 12px; font-size: 11.5px; font-weight: 700; line-height: 1.3; letter-spacing: .12em; text-transform: uppercase}
.sus-root .sus-is-main .sus-fuel-k{color: #b4c4d4}
.sus-root .sus-fuel-n{margin-top: 10px; font-weight: 300; font-size: clamp(40px, 3.6vw, 54px); line-height: .9; letter-spacing: -.06em; white-space: nowrap; color: #fff}
.sus-root .sus-is-main .sus-fuel-n{color: #cfdae6}
.sus-root .sus-fuel-u{margin-top: 6px; font-size: 13px; font-weight: 700; color: #9dcee9}
.sus-root .sus-fuel-bar{display: block; height: 6px; margin-top: auto; border-radius: 3px; background: #ffffff14; transform: translateY(0)}
.sus-root .sus-fuel-c .sus-fuel-u{margin-bottom: 18px}
.sus-root .sus-fuel-bar i{display: block; height: 100%; width: calc(var(--b) * 100%); border-radius: 3px; background: linear-gradient(90deg, var(--cyan) 0 calc(var(--a) / var(--b) * 100%), rgba(0, 188, 234, .38) 0)}
.sus-root .sus-is-main .sus-fuel-bar i{background: linear-gradient(90deg, #8fa6bd 0 calc(var(--a) / var(--b) * 100%), rgba(143, 166, 189, 0))}
.sus-root .sus-fuel-vs{align-self: center; position: relative; z-index: 1; width: 54px; height: 54px; margin: 0 -14px; border-radius: 50%; display: grid; place-items: center; background: var(--navy); border: 1px solid #2f6391; box-shadow: 0 0 0 6px #071c31; font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #fff}
.sus-root .sus-shore{grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 8px 40px}
.sus-root .sus-dev{display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 30px; background: #12324f; color: #9fd8ef; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase}
.sus-root .sus-dev::before{content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f5b335}
.sus-root .sus-shore h4{margin: 12px 0 0; font-size: 20px; letter-spacing: -.025em}
.sus-root .sus-shore .sus-shore-sub{margin-top: 4px; font-size: 15px; font-weight: 500; color: #fff}
.sus-root .sus-shore > p{padding-top: 38px; font-weight: 300; font-size: 15px; line-height: 1.5; color: var(--ink-2)}
.sus-root .sus-shared{position: relative; margin-top: 140px; text-align: center}
.sus-root .sus-shared-head h2{margin-top: 16px; font-size: clamp(44px, 5.6vw, 84px); letter-spacing: -.055em}
.sus-root .sus-shared-head h2 span{color: var(--cyan)}
.sus-root .sus-shared-photo{position: relative; height: clamp(240px, 36vw, 500px); margin: clamp(40px, 4.5vw, 64px) 0 0; border-radius: 999px; overflow: hidden; clip-path: inset(0 var(--ins, 0%) round 999px); box-shadow: 0 30px 60px #0008}
.sus-root .sus-shared-photo img{width: 100%; height: 100%; object-fit: cover; object-position: center 42%; transform: scale(var(--zoom, 1)); will-change: transform}
.sus-root .sus-shared-copy{max-width: 620px; margin: 34px auto 0}
.sus-root .sus-beyond{padding: 140px 0 150px}
.sus-root .sus-beyond-head{max-width: 720px}
.sus-root .sus-beyond-head h2{margin-top: 16px; font-size: clamp(36px, 4.2vw, 60px)}
.sus-root .sus-beyond-head .sus-lede{margin-top: 18px}
.sus-root .sus-acts{display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 70px}
.sus-root .sus-act-photos{display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 470px}
.sus-root .sus-act-photos figure{position: relative; border-radius: 24px; overflow: hidden}
.sus-root .sus-act-photos figure:first-child{grid-row: 1 / -1}
.sus-root .sus-act-photos figure:first-child::after{content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0, 14, 30, .75) 0%, transparent 55%)}
.sus-root .sus-act-photos img{width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease)}
.sus-root .sus-act:hover .sus-act-photos img{transform: scale(1.03)}
.sus-root .sus-act-big{position: absolute; z-index: 1; left: 22px; bottom: 18px; font-weight: 700; font-size: clamp(44px, 4.6vw, 68px); line-height: .9; letter-spacing: -.06em; color: #fff; text-shadow: 0 6px 30px rgba(0, 14, 30, .6)}
.sus-root .sus-act-big small{display: block; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; margin-top: 8px; font-weight: 700}
.sus-root .sus-act-meta{margin-top: 26px}
.sus-root .sus-act-meta .sus-where{font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #9dcee9}
.sus-root .sus-act-meta h3{margin-top: 10px; font-size: 30px; letter-spacing: -.04em}
.sus-root .sus-act-meta .sus-head{margin-top: 8px; font-size: 18px; font-weight: 500; color: var(--cyan)}
.sus-root .sus-act-meta .sus-lede{margin-top: 12px; font-size: 16px}
.sus-root .sus-act-meta .sus-lede.sus-opt{color: #9fb3c8}
@media (max-width: 991px) {
  .sus-root .sus-inits{flex-direction: column; gap: 10px; height: auto !important; transition: none}
  .sus-root .sus-init,.sus-root .sus-init:first-child,.sus-root .sus-inits.sus-has-open .sus-init,.sus-root .sus-inits.sus-has-open .sus-init.sus-open{flex: none; height: 96px; transition: none}
  .sus-root .sus-init:first-child{height: 300px}
  .sus-root .sus-inits.sus-has-open .sus-init:first-child:not(.sus-open){height: 96px}
  .sus-root .sus-init.sus-open,.sus-root .sus-inits.sus-has-open .sus-init.sus-open{height: auto}
  .sus-root .sus-init-cap{padding: 0 18px 20px 22px}
  .sus-root .sus-init-more{grid-column: 2; grid-row: 1 / span 2; align-self: end; margin-top: 0}
  .sus-root .sus-init-more i{width: 40px; height: 40px}
  .sus-root .sus-init:first-child .sus-init-name{font-size: 28px}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-cap,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-cap{display: grid; flex: 1; height: 100%; padding: 0 16px 0 22px; align-content: center; align-items: center}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-micro,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-micro{display: none}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-more,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-more{display: inline-flex; grid-row: 1; align-self: center}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-h,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-h{height: auto}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-face,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-face{display: flex; flex-direction: row; align-items: baseline; gap: 12px; height: auto}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child) .sus-init-name,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open) .sus-init-name{margin: 0; font-size: 19px; writing-mode: horizontal-tb; transform: none; white-space: normal}
  .sus-root .sus-inits:not(.sus-has-open) .sus-init:not(:first-child)::after,.sus-root .sus-inits.sus-has-open .sus-init:not(.sus-open)::after{background: linear-gradient(90deg, rgba(0, 21, 48, .94) 0%, rgba(0, 21, 48, .8) 55%, rgba(0, 21, 48, .45) 100%)}
  .sus-root .sus-init.sus-open .sus-init-bg,.sus-root .sus-init.sus-open::after{height: 190px}
  .sus-root .sus-init.sus-open .sus-init-cap{height: 190px; padding: 0 22px 18px}
  .sus-root .sus-init.sus-open .sus-init-name{font-size: 26px}
  .sus-root .sus-init-detail{padding: 22px 22px 26px}
  .sus-root .sus-init-close{top: 16px; right: 16px; height: 38px; padding: 0 14px; font-size: 11px}
  .sus-root .sus-init-grid{grid-template-columns: 1fr; width: auto; gap: 24px}
  .sus-root .sus-shore{grid-template-columns: 1fr}
  .sus-root .sus-shore > p{padding-top: 0}
  .sus-root .sus-acts{grid-template-columns: 1fr}
}
@media (max-width: 767px) {
  .sus-root .sus-container{width: calc(100% - 40px)}
  .sus-root .sus-arch{gap: 10px; margin-top: 44px}
  .sus-root .sus-arch .sus-a1,.sus-root .sus-arch .sus-a5{display: none}
  .sus-root .sus-arch .sus-a2,.sus-root .sus-arch .sus-a4{width: 29%; margin-top: 40px}
  .sus-root .sus-arch .sus-a3{width: 40%; margin-top: 52px}
  .sus-root .sus-proof{padding-top: 110px}
  .sus-root .sus-abs{margin-top: 18px; padding: 96px 16px 104px}
  .sus-root .sus-abs-sea video,.sus-root .sus-abs-sea{object-position: 58% 62%; background-position: 58% 62%}
  .sus-root .sus-years{gap: 10px}
  .sus-root .sus-year{width: 96px}
  .sus-root .sus-year b{font-size: 26px}
  .sus-root .sus-year small{font-size: 8.5px; letter-spacing: .12em}
  .sus-root .sus-pill-car{height: 150px; margin-top: 44px}
  .sus-root .sus-bridge{margin-top: 52px}
  .sus-root .sus-etc-driver{height: 200vh}
  .sus-root .sus-etc-words{font-size: min(21vw, 22vh)}
  .sus-root .sus-knots-num{font-size: 44vw}
  .sus-root .sus-knots-rule{font-size: 11px}
  .sus-root .sus-etc-head{margin-top: -16vh}
  html.sus-static .sus-root .sus-etc-words{font-size: 19vw}
  .sus-root .sus-data > div{grid-template-columns: 100px 1fr}
  .sus-root .sus-data b,.sus-root .sus-impl b{font-size: 46px}
  .sus-root .sus-chapters,.sus-root .sus-daynight{grid-template-columns: 1fr}
  .sus-root .sus-fuel-c{padding: 14px 14px 16px; border-radius: 16px}
  .sus-root .sus-fuel-ico{width: 34px; height: 34px}
  .sus-root .sus-fuel-k{font-size: 10.5px; letter-spacing: .1em}
  .sus-root .sus-fuel-vs{width: 44px; height: 44px; margin: 0 -12px; font-size: 13px; box-shadow: 0 0 0 5px #071c31}
  .sus-root .sus-shared{margin-top: 100px}
  .sus-root .sus-shared-photo{height: 230px}
  .sus-root .sus-beyond{padding: 100px 0}
  .sus-root .sus-act-photos{height: 340px}
}
@media (prefers-reduced-motion: reduce) {
  .sus-root .sus-init,.sus-root .sus-init-bg,.sus-root .sus-init::after,.sus-root .sus-inits,.sus-root .sus-act-photos img,.sus-root .sus-arch .sus-rise,.sus-root .sus-pill-track.sus-anim,.sus-root .sus-init-more i,.sus-root .sus-init-more em{transition: none; animation: none}
  .sus-root .sus-arch .sus-rise{opacity: 1; transform: none}
}