/* "How We Work" crew workflow: all 15 steps in a photo grid + final result tile. Extends site.css. */
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

.wf{background:#f3f7fc;position:relative;overflow:hidden;overflow:clip;border-top:1px solid #e3ecf6}
.wf:before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 6% 0%,#0066ff12,transparent 30%),radial-gradient(circle at 100% 55%,#00a0ff0f,transparent 30%)}
.wf .container{position:relative}
.wf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Banner */
.wf-banner{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:44px;padding-bottom:30px;border-bottom:1px solid #dbe6f2}
.wf-banner h2{margin:12px 0 12px}
.wf-banner p{margin:0;max-width:600px;color:var(--muted);font-size:16px}
.wf-values{list-style:none;margin:0;padding:0;display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.wf-values li{display:flex;align-items:center;gap:10px;padding:9px 16px 9px 9px;border-radius:999px;background:#fff;border:1px solid #dce7f3;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--navy);box-shadow:0 4px 16px #0b1f3b0a;white-space:nowrap}
.wf-value-icon{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--blue),var(--electric));color:#fff;display:flex;align-items:center;justify-content:center}
.wf-value-icon .icon{width:17px;height:17px;stroke-width:2}

/* Grid */
.wf-grid{--cols:6;--gap:20px;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:30px var(--gap)}
.wf-tile{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid #dfe8f2;border-radius:12px;box-shadow:0 6px 24px #0b1f3b0d;transition:transform .25s,box-shadow .25s,border-color .25s}
.wf-tile:hover{transform:translateY(-4px);box-shadow:0 20px 44px #0b1f3b1f;border-color:#bcd5f3}
.wf-tile-head{display:flex;align-items:center;gap:11px;min-height:64px;padding:11px 12px;background:linear-gradient(135deg,#0B1F3B,#0d2b52);border-radius:11px 11px 0 0}
.wf-badge{flex:0 0 auto;width:40px;height:40px;border-radius:9px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--blue),var(--electric));color:#fff;font-size:20px;font-weight:850;letter-spacing:-.03em;box-shadow:0 6px 16px #0066ff55,inset 0 1px 0 #ffffff40}
.wf-tile-head h3{margin:0;font-size:14px;line-height:1.25;letter-spacing:-.005em;font-weight:800;color:#fff}
.wf-photo{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0b1f3b}
.wf-photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.wf-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#06132600 45%,#061326b0 100%),linear-gradient(0deg,#0b1f3b1f,#0b1f3b1f);pointer-events:none}
.wf-tile:hover .wf-photo img{transform:scale(1.05)}
.wf-phase-chip{position:absolute;left:10px;bottom:9px;z-index:1;font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#cfe6ff}
.wf-tile-icon{position:absolute;right:10px;bottom:-17px;z-index:2;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--blue);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px #0b1f3b2e;border:1px solid #e1ebf6}
.wf-media{position:relative}
.wf-tile-icon .icon{width:19px;height:19px;stroke-width:1.8}
.wf-points{list-style:none;margin:0;padding:18px 14px 16px;display:grid;gap:7px}
.wf-points li{position:relative;padding-left:14px;font-size:12.5px;line-height:1.45;color:#4f6880}
.wf-points li:before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--electric)}
.wf-tile-hero{border-color:#9cc4f5;box-shadow:0 8px 30px #0066ff21}
.wf-tile-hero .wf-tile-head{background:linear-gradient(135deg,#0a3a7a,#0066ff)}
.wf-tile-hero .wf-badge{background:#fff;color:var(--blue)}

/* Arrow connectors in reading order */
.wf-tile:after{content:"";position:absolute;z-index:3;top:27px;right:calc(var(--gap) / -2 - 5px);width:9px;height:9px;border-top:2.5px solid var(--electric);border-right:2.5px solid var(--electric);transform:rotate(45deg)}
.wf-grid .wf-tile:nth-child(6n):after{display:none}
.wf-tile:nth-child(15):after{display:block}

/* Final result tile */
.wf-final{grid-column:span 3;position:relative;overflow:hidden;border-radius:12px;background:#061326;color:#fff;padding:30px 32px;display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;min-height:100%;box-shadow:0 14px 40px #0b1f3b33}
.wf-final-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.wf-final:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,#041226f0 0%,#061a36c7 45%,#0b1f3b5c 75%,#0b1f3b33 100%)}
.wf-final>*:not(img){position:relative;z-index:2}
.wf-final .eyebrow{color:var(--cyan)}
.wf-final h3{font-size:clamp(22px,1.9vw,30px);line-height:1.15;letter-spacing:-.03em;margin:10px 0 10px}
.wf-final p{color:#c3d3e6;font-size:14px;line-height:1.6;margin:0 0 20px}
.wf-final .button{min-height:44px;padding:12px 20px}
.wf-checklist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:8px}
.wf-checklist li{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;background:#ffffff12;border:1px solid #ffffff24;font-weight:700;font-size:13px;color:#eaf2fb;backdrop-filter:blur(4px)}
.wf-checklist .icon{width:22px;height:22px;padding:4px;border-radius:50%;background:#00e0ff26;color:var(--cyan);stroke-width:2.6}
.wf-checklist li:last-child{background:linear-gradient(90deg,#0066ffd9,#009dffc0);border-color:#4fb7ff}
.wf-checklist li:last-child .icon{background:#ffffff33;color:#fff}

/* Reveal (only when JS runs) */
.wf-js .wf-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.7,.2,1)}
.wf-js .wf-reveal.is-in{opacity:1;transform:none}

/* Seven nav links: keep header on one line */
@media(max-width:1120px) and (min-width:761px){.brand img{width:225px}.nav{gap:15px}}
@media(max-width:860px) and (min-width:761px){.brand img{width:190px}.nav{gap:12px}.nav a{font-size:11.5px}}

@media(max-width:1279px){.wf-tile-head h3{font-size:13.5px}}
@media(max-width:1199px){
 .wf-grid{--cols:3;--gap:22px}
 .wf-grid .wf-tile:nth-child(6n):after{display:block}
 .wf-grid .wf-tile:nth-child(3n):after{display:none}
 .wf-final{grid-column:1/-1;padding:40px 44px;gap:44px}
 .wf-checklist{grid-template-columns:1fr 1fr}
 .wf-tile-head h3{font-size:15px}
 .wf-points li{font-size:13.5px}
 .wf-banner{flex-direction:column;align-items:flex-start;gap:24px}
 .wf-values{justify-content:flex-start}
}
@media(max-width:760px){
 .wf-banner{margin-bottom:30px;padding-bottom:24px}
 .wf-banner p{font-size:15px}
 .wf-values{gap:8px}.wf-values li{font-size:10.5px;padding:7px 12px 7px 7px;gap:8px}.wf-value-icon{width:26px;height:26px}.wf-value-icon .icon{width:14px;height:14px}
 .wf-grid{--cols:2;--gap:14px;row-gap:22px}
 .wf-grid .wf-tile:nth-child(3n):after{display:block}
 .wf-grid .wf-tile:nth-child(2n):after{display:none}
 .wf-final{padding:30px 22px;grid-template-columns:1fr;gap:22px}
 .wf-final .button{width:100%}
}
@media(max-width:560px){
 .wf-grid{--cols:1;row-gap:26px}
 .wf-grid .wf-tile:after,.wf-grid .wf-tile:nth-child(3n):after{display:block;top:auto;bottom:-17px;right:auto;left:50%;margin-left:-5px;transform:rotate(135deg)}
 .wf-grid .wf-tile:nth-child(15):after{display:block}
 .wf-tile-head{min-height:58px}
 .wf-tile-head h3{font-size:16px}
 .wf-points{padding:18px 18px 18px}
 .wf-points li{font-size:14px}
 .wf-checklist{grid-template-columns:1fr 1fr}
 .wf-checklist li{font-size:12.5px;padding:9px 10px}
}
@media(max-width:380px){.wf-checklist{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){
 .wf-js .wf-reveal{opacity:1;transform:none;transition:none}
 .wf-tile,.wf-photo img{transition:none}.wf-tile:hover{transform:none}.wf-tile:hover .wf-photo img{transform:none}
}

/* Tighter hero on desktop so the workflow banner and first row peek into view */
@media(min-width:1121px){.hero,.hero-inner{min-height:520px}.hero-inner{padding-top:40px;padding-bottom:98px}.hero .eyebrow{margin-bottom:16px}.hero h1{font-size:clamp(42px,3.7vw,56px);line-height:1.04;margin-bottom:18px}.hero p{margin-bottom:24px}.wf.section{padding-top:34px}.wf-banner{margin-bottom:26px;padding-bottom:20px}}
/* Brighter hero photo: dark only behind the headline, racks + technician clearly visible */
.hero-photo{filter:brightness(1.18) contrast(1.06) saturate(1.08)}
.hero-scrim{background:linear-gradient(90deg,#031123f2 0%,#06182eeb 38%,#06182ec2 47%,#0618324d 58%,#06142900 68%)}
.hero h1,.hero p,.hero .eyebrow{text-shadow:0 1px 14px #020b18b3}
.hero-trust{background:linear-gradient(90deg,#041326e0,#0413268c)}
@media(max-width:760px){.hero-photo{opacity:1;object-position:60% center;filter:brightness(1.22) contrast(1.05) saturate(1.1)}.hero-scrim{background:linear-gradient(180deg,#031123cc 0%,#031123b8 30%,#0311238f 58%,#03112314 72%,#03112359 100%),linear-gradient(90deg,#03112366,#03112300 75%)}}