/* Security page: layout on shared site components and palette tokens. */
#security-content { color:var(--color-text); }
#security-content .cs-product-hero .hero-bg::before { background-image:url('/assets/img/security-offshore-wind.webp'); background-position:center 56%; filter:grayscale(.25); opacity:.85; mask-image:linear-gradient(#000 65%,transparent 100%); }
#security-content .cs-product-hero .hero-bg::after { background:linear-gradient(0deg,var(--color-bg),transparent 32%),linear-gradient(90deg,color-mix(in srgb,var(--color-bg) 84%,transparent),color-mix(in srgb,var(--color-bg) 64%,transparent) 38%,color-mix(in srgb,var(--color-bg) 28%,transparent) 65%,color-mix(in srgb,var(--color-bg) 32%,transparent)); }
#security-content .hero-title { text-wrap:balance; }
#security-content .cs-product-hero .hero-title { font-size:clamp(42px,4.7vw,66px); }
#security-content .hero-title em { color:var(--color-brand-2); font-style:normal; }
#security-content .security-headline-window { display:block; width:100%; overflow:hidden; color:var(--color-text); }
#security-content .security-headline-track { display:flex; flex-direction:column; align-items:stretch; }
#security-content .security-headline-track > span { display:block; flex-shrink:0; box-sizing:border-box; padding-block:.05em; line-height:1.05; hyphens:none; overflow-wrap:break-word; text-wrap:wrap; }
@media (prefers-reduced-motion:reduce) { #security-content .security-headline-track { transition:none!important; } }
#security-content .se-note { margin-top:12px; color:var(--color-text-dim); font-size:12px; line-height:1.6; }
#security-content .cs-explore { margin-top:12px; }
#security-content .cs-hero-actions .cs-primary { padding-inline:24px; }
#security-content .se-panel { padding:32px; border:1px solid var(--color-border-strong); border-radius:var(--radius-card); background:linear-gradient(145deg,var(--color-surface),var(--color-bg-2)); }
#security-content .se-label { color:var(--color-text-dim); font-size:12px; line-height:1.6; }
#security-content .se-package { padding:0; border:0; background:none; }
#security-content .se-package-addon { position:relative; isolation:isolate; padding:30px; border-radius:var(--radius-card); }
#security-content .se-package-surface { position:absolute; inset:0; z-index:-1; pointer-events:none; border-radius:inherit; background:linear-gradient(135deg,color-mix(in srgb,var(--color-bg-2) 90%,var(--color-brand-2)),color-mix(in srgb,var(--color-surface) 96%,transparent)); box-shadow:0 20px 60px -30px var(--color-brand-glow); transform-origin:center; }
#security-content .se-package-frame { position:absolute; inset:0; width:100%; height:100%; overflow:visible; fill:none; pointer-events:none; }
#security-content .se-frame-line { stroke:var(--color-brand-2); stroke-width:1.4; }
#security-content .se-frame-trail,#security-content .se-frame-bloom { stroke-linecap:round; stroke-dasharray:.1 .9; stroke-dashoffset:1; opacity:0; }
#security-content .se-frame-trail { stroke:var(--color-text); stroke-width:2; filter:drop-shadow(0 0 3px var(--color-brand-2)); }
#security-content .se-frame-bloom { stroke:var(--color-brand-2); stroke-width:7; filter:blur(5px); }
#security-content .se-package-sheen { position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none; }
#security-content .se-package-sheen > span { position:absolute; inset:-20%; opacity:0; background:linear-gradient(112deg,transparent 35%,color-mix(in srgb,var(--color-brand-2) 7%,transparent) 44%,color-mix(in srgb,var(--color-text) 20%,transparent) 49%,transparent 59%); }
#security-content .se-package-label { display:flex; align-items:center; gap:12px; color:var(--color-text-dim); font-size:12px; line-height:1.5; }
#security-content .se-package-mark { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; border:1px solid var(--color-border-strong); border-radius:8px; color:var(--color-brand-2); background:var(--color-bg-2); }
#security-content .se-package-mark svg { width:20px; height:20px; stroke:currentColor; stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; }
#security-content .se-package h2 { margin-top:22px; font:650 clamp(28px,3vw,40px)/1.1 var(--font-tight); letter-spacing:-.025em; overflow-wrap:break-word; }
#security-content .se-package-detail { margin:18px 0 24px; font-size:14px; color:var(--color-text-dim); line-height:1.65; }
#security-content .se-package-base { padding:24px; border:1px solid var(--color-border-strong); border-radius:12px; background:var(--color-bg-2); }
#security-content .se-package-base h3 { margin-top:16px; font:600 24px/1.15 var(--font-tight); letter-spacing:-.02em; }
#security-content .se-package-base p { margin-top:12px; font-size:14px; line-height:1.65; color:var(--color-text-dim); }
#security-content .se-package-note { margin:18px 12px 0; color:var(--color-text-dim); font-size:12px; line-height:1.6; }
#security-content .se-package-link { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; margin-top:18px; color:var(--color-text); font-size:14px; line-height:1.5; text-decoration:underline; text-decoration-color:var(--color-border-strong); text-underline-offset:5px; border-radius:4px; }
#security-content .se-package-link svg { width:20px; height:20px; flex-shrink:0; stroke:var(--color-brand-2); stroke-width:1.5; fill:none; stroke-linecap:round; stroke-linejoin:round; transition:transform .25s var(--ease-out-quart); }
#security-content .se-package-link:hover { color:var(--color-brand-2); text-decoration-color:currentColor; }
#security-content .se-package-link:hover svg { transform:translateY(3px); }
#security-content #security-services { scroll-margin-top:24px; }
/* Move the surface and its single outline together around the stationary cloud. */
@keyframes se-layer-sheen {
 0% { opacity:0; transform:translateX(-85%); }
 15%,65% { opacity:1; }
 100% { opacity:0; transform:translateX(85%); }
}
@keyframes se-layer-expand {
 0% { opacity:0; transform:translateY(var(--se-layer-start-y,60px)) scale(var(--se-layer-start-x,.88),var(--se-layer-start-h,.38)); }
 20% { opacity:1; }
 100% { opacity:1; transform:none; }
}
@keyframes se-frame-light {
 0% { opacity:0; stroke-dashoffset:1; }
 12%,75% { opacity:1; }
 100% { opacity:0; stroke-dashoffset:-.12; }
}
@keyframes se-layer-copy { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:no-preference) {
 #security-content .se-package.is-pending .se-package-surface,#security-content .se-package.is-pending .se-package-intro,#security-content .se-package.is-pending .se-package-link { opacity:0; }
 #security-content .se-package.is-entering .se-package-surface { animation:se-layer-expand 1.4s var(--ease-out-quart) both; }
 #security-content .se-package.is-entering .se-frame-trail,#security-content .se-package.is-entering .se-frame-bloom { animation:se-frame-light 1.8s 1.4s cubic-bezier(.4,0,.2,1) both; }
 #security-content .se-package.is-entering .se-package-sheen > span { animation:se-layer-sheen 1.6s 1.2s cubic-bezier(.2,.6,.2,1) both; }
 #security-content .se-package.is-entering .se-package-intro { animation:se-layer-copy .65s .65s var(--ease-out-quart) both; }
 #security-content .se-package.is-entering .se-package-link { animation:se-layer-copy .6s .85s var(--ease-out-quart) both; }
 #security-content .se-package.is-pending .se-package-link { pointer-events:none; }
 #security-content .se-package.is-suspended *,#security-content .se-package.is-suspended *::before,#security-content .se-package.is-suspended *::after { animation-play-state:paused!important; }
 #security-content .se-package:focus-within .se-package-link { animation:none; }
}
@media(prefers-reduced-motion:reduce) {
 #security-content .se-package-link svg { transition:none; }
 #security-content .se-package-link:hover svg { transform:none; }
}
#security-content .se-deliverables { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; margin-top:42px; }
#security-content .se-deliverable { min-width:0; }
#security-content .se-deliverable h3 { margin-top:26px; font:600 25px/1.2 var(--font-tight); letter-spacing:-.025em; hyphens:auto; }
#security-content .se-deliverable > p { margin-top:14px; color:var(--color-text-dim); font-size:15px; line-height:1.65; max-width:38ch; }
#security-content .se-diagram { padding:20px 16px 18px; border:1px solid var(--color-border); border-radius:var(--radius-card); background:radial-gradient(ellipse at 75% 25%,var(--color-brand-soft),transparent 75%),var(--color-bg-2); }
#security-content .se-diagram svg { display:block; width:100%; height:auto; overflow:visible; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
#security-content .sv-line { stroke:var(--color-brand-2); opacity:.7; }
#security-content .sv-detail { stroke:var(--color-text-dim); }
#security-content .sv-node { stroke:var(--color-border-strong); fill:var(--color-bg-2); }
#security-content .sv-accent-fill { stroke:var(--color-brand-2); fill:var(--color-brand-soft); }
#security-content .sv-bright { stroke:var(--color-brand-2); }
#security-content .sv-paper { stroke:var(--color-brand-2); fill:var(--color-bg-2); }
#security-content .sv-paper-back { stroke:var(--color-border-strong); fill:var(--color-surface); }
#security-content .se-diagram-labels { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:10px; color:var(--color-text-dim); font-size:11px; line-height:1.4; text-align:center; }
#security-content .se-diagram-labels span:last-child { color:var(--color-brand-2); }
#security-content .se-start-steps { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:44px; }
#security-content .se-start-steps article { position:relative; min-width:0; }
#security-content .se-start-steps article:not(:last-child)::after { content:''; position:absolute; top:18px; height:1px; left:54px; right:-24px; background:var(--color-border-strong); }
#security-content .se-start-steps .se-step-no { display:grid; place-items:center; width:36px; height:36px; border:1px solid var(--color-border-strong); border-radius:50%; font-size:12px; background:var(--color-bg-2); }
#security-content .se-start-steps h3 { margin-top:22px; font:600 24px/1.2 var(--font-tight); letter-spacing:-.025em; }
#security-content .se-start-steps p { margin-top:12px; color:var(--color-text-dim); font-size:15px; line-height:1.65; }
@media(max-width:850px) {
 #security-content .se-deliverables { gap:22px; }
 #security-content .se-diagram { padding:14px 10px; }
 #security-content .se-diagram-labels { font-size:10px; gap:8px; }
 #security-content .se-package-addon,#security-content .se-package-base { padding:24px; }
}
@media(max-width:640px) {
 #security-content .se-deliverables,#security-content .se-start-steps { grid-template-columns:minmax(0,1fr); gap:36px; }
 #security-content .se-diagram { padding:16px 24px; }
 #security-content .se-diagram svg { max-height:150px; }
 #security-content .se-diagram-labels { font-size:12px; }
 #security-content .se-deliverable h3 { margin-top:20px; }
 #security-content .se-start-steps article { padding-left:56px; }
 #security-content .se-start-steps .se-step-no { position:absolute; left:0; top:0; }
 #security-content .se-start-steps h3 { margin-top:4px; }
 #security-content .se-start-steps article:not(:last-child)::after { top:48px; bottom:-22px; left:18px; right:auto; width:1px; height:auto; }
}
#security-content .se-panel h2 { margin-top:16px; font:600 36px/1.1 var(--font-tight); letter-spacing:-.035em; }
#security-content .se-panel ul { list-style:none; padding:0; margin:28px 0 0; }
#security-content .se-panel li { display:flex; gap:16px; align-items:center; padding:18px 0; border-top:1px solid var(--color-border); font-size:15px; }
#security-content .se-panel svg { width:24px; height:24px; color:var(--color-brand-2); flex-shrink:0; }
#security-content .se-panel-foot { padding-top:22px; border-top:1px solid var(--color-border); color:var(--color-text-dim); font-size:13px; }
#security-content .se-apps { padding:16px; text-align:center; border:1px solid var(--color-border-strong); border-radius:12px; background:var(--color-bg-2); font-size:14px; }
#security-content .se-connector { height:28px; width:1px; margin:auto; background:var(--color-brand-2); }
#security-content .se-core { padding:24px 18px; text-align:center; border:1px solid var(--color-brand); border-radius:12px; background:var(--color-brand-soft); }
#security-content .se-core h2 { margin-top:8px; }
#security-content .se-facts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; padding:28px 0; border-block:1px solid var(--color-border); color:var(--color-text-dim); font-size:14px; }
#security-content .se-facts span { display:flex; align-items:center; gap:12px; }
#security-content .se-facts span::before { content:''; width:5px; height:5px; border-radius:50%; background:var(--color-brand-2); flex-shrink:0; }
#security-content .se-section { padding-block:var(--sec-y); }
#security-content .se-eyebrow { margin-bottom:20px; color:var(--color-text-dim); font-size:15px; line-height:1.6; }
#security-content .se-heading { font:700 clamp(36px,4.5vw,60px)/1.06 var(--font-tight); letter-spacing:-.035em; text-wrap:balance; }
#security-content .se-services { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:30px; margin-top:44px; }
#security-content .se-service { border-top:1px solid var(--color-border-strong); padding-top:24px; }
#security-content .se-service svg { width:28px; height:28px; color:var(--color-brand-2); margin-bottom:24px; }
#security-content .se-service h3,#security-content .se-steps h3 { font:600 23px/1.25 var(--font-tight); letter-spacing:-.025em; }
#security-content .se-service p,#security-content .se-steps p { margin-top:12px; color:var(--color-text-dim); font-size:15px; line-height:1.65; }
#security-content .se-how { background:var(--color-bg-2); border-block:1px solid var(--color-border); }
#security-content .se-how-grid,#security-content .se-faq-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(40px,6vw,80px); }
#security-content .se-steps article { display:grid; grid-template-columns:32px minmax(0,1fr); column-gap:20px; padding:24px 0; border-top:1px solid var(--color-border); }
#security-content .se-steps article:first-child { padding-top:0; border-top:0; }
#security-content .se-steps article:last-child { padding-bottom:0; }
#security-content .se-step-no { color:var(--color-brand-2); font:500 18px/1.6 var(--font-tight); }
#security-content .se-steps p { grid-column:2; margin-top:8px; }
#security-content .se-faq details { border-bottom:1px solid var(--color-border); }
#security-content .se-faq details:first-child { border-top:1px solid var(--color-border); }
#security-content .se-faq summary { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:22px 0; list-style:none; cursor:pointer; font-size:16px; font-weight:500; }
#security-content .se-faq summary::-webkit-details-marker { display:none; }
#security-content .se-faq summary::after { content:'+'; color:var(--color-brand-2); font-size:24px; font-weight:400; }
#security-content .se-faq details[open] summary::after { content:'−'; }
#security-content .se-faq p { padding:0 24px 24px 0; color:var(--color-text-dim); font-size:15px; line-height:1.65; }
#security-content .se-contact { border-top:1px solid var(--color-border); background:radial-gradient(ellipse at 15% 100%,var(--color-brand-soft),transparent 65%); }
#security-content .se-contact-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); align-items:center; gap:clamp(40px,7vw,100px); }
#security-content .se-contact-copy { max-width:580px; }
#security-content .se-contact-welcome { display:flex; align-items:center; gap:20px; margin-bottom:24px; }
#security-content .se-team-portraits { display:flex; flex:none; padding-right:2px; }
#security-content .se-team-avatar { position:relative; display:block; width:72px; height:72px; overflow:hidden; border:3px solid var(--color-bg); border-radius:50%; background:var(--color-surface); box-shadow:0 0 0 1px var(--color-border-strong); }
#security-content .se-team-avatar + .se-team-avatar { margin-left:-12px; }
#security-content .se-team-avatar img { --portrait-scale:1; --portrait-y:0px; position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 28%; opacity:0; transform:translateY(calc(var(--portrait-y) + 6px)) scale(var(--portrait-scale)); transition:opacity .8s ease,transform .8s var(--ease-out-quart); }
#security-content .se-team-avatar img[data-portrait-slug="marc-jakobs"],#security-content .se-team-avatar img[data-portrait-slug="rodryk-olejnik"],#security-content .se-team-avatar img[data-portrait-slug="andre-harms"] { --portrait-scale:2.5; --portrait-y:22px; }
#security-content .se-team-avatar img.is-current { opacity:1; transform:translateY(var(--portrait-y)) scale(var(--portrait-scale)); }
#security-content .se-contact .se-contact-welcome .se-eyebrow { margin:0; }
#security-content .se-contact-welcome .se-eyebrow::before { display:none; }
#security-content .se-contact .se-eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:24px; font-size:13px; color:var(--color-brand-2); }
#security-content .se-contact .se-eyebrow::before { content:''; width:28px; height:1px; background:currentColor; }
#security-content .se-contact .se-heading { max-width:19ch; font-size:clamp(36px,3.8vw,52px); font-weight:600; line-height:1.1; text-wrap:balance; }
#security-content .se-contact-intro { margin-top:22px; max-width:46ch; color:var(--color-text-dim); font-size:16px; line-height:1.65; }
#security-content .se-booking-panel { min-width:0; padding-left:clamp(32px,4vw,56px); border-left:1px solid var(--color-border-strong); }
#security-content .se-booking-heading { display:flex; align-items:center; gap:16px; }
#security-content .se-booking-mark { display:grid; place-items:center; flex:none; width:48px; height:48px; border:1px solid var(--color-border-strong); border-radius:12px; background:var(--color-brand-soft); color:var(--color-brand-2); }
#security-content .se-booking-panel svg { flex:none; width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
#security-content .se-booking-mark svg { width:24px; height:24px; }
#security-content .se-booking-heading h3 { font:600 19px/1.3 var(--font-tight); letter-spacing:-.01em; text-wrap:balance; }
#security-content .se-booking-heading p { margin-top:5px; color:var(--color-text-dim); font-size:13px; line-height:1.5; }
#security-content .se-booking-meta { display:flex; flex-wrap:wrap; gap:12px 24px; margin-top:24px; padding:0; list-style:none; color:var(--color-text-dim); font-size:13px; line-height:1.5; }
#security-content .se-booking-meta li { display:flex; align-items:center; gap:8px; }
#security-content .se-booking-meta svg { color:var(--color-brand-2); }
#security-content .se-booking-panel .cs-primary { display:inline-flex; min-width:220px; max-width:100%; justify-content:space-between; gap:28px; margin-top:28px; padding-inline:24px; font:600 14px/1.5 var(--font-sans); }
#security-content .se-booking-assurance { margin-top:10px; color:var(--color-text-dim); font-size:12px; line-height:1.5; }
#security-content .se-email { display:flex; align-items:center; gap:9px; width:fit-content; min-height:44px; margin-top:16px; color:var(--color-text-dim); font-size:13px; text-underline-offset:4px; }
#security-content .se-email:hover { color:var(--color-brand-2); text-decoration:underline; }
#security-content a:focus-visible,#security-content button:focus-visible,#security-content summary:focus-visible { outline:2px solid var(--color-brand-2); outline-offset:5px; }
@media(max-width:1050px) {
 #security-content .se-services { grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px; }
 #security-content .se-panel { padding:24px; }
}
@media(max-width:740px) {
 #security-content .cs-product-hero .hero-bg::before { bottom:auto; height:760px; max-height:100%; background-size:auto 760px; background-position:49% top; }
 #security-content .cs-product-hero .hero-bg::after { background:linear-gradient(0deg,var(--color-bg),transparent 55%),linear-gradient(90deg,color-mix(in srgb,var(--color-bg) 82%,transparent),color-mix(in srgb,var(--color-bg) 42%,transparent)); }
 #security-content .cs-product-hero .hero-title { font-size:clamp(40px,10.5vw,68px); }
 html[lang="ja"] #security-content .cs-product-hero .hero-title { font-size:clamp(28px,8.7vw,42px); }
 #security-content .cs-product-copy { display:block; }
 #security-content .cs-product-invitation { margin-top:36px; }
 #security-content .se-facts { font-size:12px; gap:18px; }
 #security-content .se-facts span { align-items:flex-start; gap:8px; }
 #security-content .se-facts span::before { margin-top:6px; }
 #security-content .se-how-grid,#security-content .se-faq-grid,#security-content .se-contact-grid { grid-template-columns:minmax(0,1fr); gap:32px; }
 #security-content .se-booking-panel { padding:28px 0 0; border-left:0; border-top:1px solid var(--color-border-strong); }
 #security-content .se-contact .se-heading { font-size:clamp(36px,9vw,48px); }
 #security-content .se-contact .se-eyebrow { margin-bottom:18px; }
 #security-content .se-contact-intro { margin-top:18px; }
 #security-content .se-heading { font-size:clamp(34px,9.5vw,52px); }
 #security-content .se-heading br { display:none; }
 #security-content .se-services { margin-top:32px; }
 #security-content .se-faq summary { font-size:15px; }
 #security-content .se-panel h2 { font-size:30px; }
}
@media(max-width:420px) {
 #security-content .se-contact-welcome { gap:16px; }
 #security-content .se-team-avatar { width:60px; height:60px; }
 #security-content .se-team-avatar img[data-portrait-slug="marc-jakobs"],#security-content .se-team-avatar img[data-portrait-slug="rodryk-olejnik"],#security-content .se-team-avatar img[data-portrait-slug="andre-harms"] { --portrait-y:18px; }
 #security-content .cs-hero-actions .cs-primary { width:100%; min-width:0; padding-inline:16px; }
 #security-content .se-facts { grid-template-columns:minmax(0,1fr); gap:12px; }
 #security-content .se-services { grid-template-columns:minmax(0,1fr); gap:28px; }
 #security-content .se-service svg { margin-bottom:16px; }
 #security-content .se-panel { padding:22px; }
 #security-content .se-panel li { font-size:14px; }
}
@media(prefers-reduced-motion:reduce) { #security-content .se-team-avatar img { transition:none; } }