/* Vega Security site. Light-1 direction, hero C "photo board". */
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url("fonts/noto-sans-400.woff2") format("woff2")}
@font-face{font-family:"Noto Sans";font-style:normal;font-weight:700;font-display:swap;src:url("fonts/noto-sans-700.woff2") format("woff2")}

:root{--red:#A7181A;--red-dark:#8E1416;--red-soft:#F7E6E6;--ink:#171717;--bg:#FFFFFF;--bg2:#F4F5F6;--line:#E2E4E6;--mute:#55595E;--grey:#CFD0D1;--radius:14px}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Noto Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.55;font-size:17px;-webkit-font-smoothing:antialiased;overflow-wrap:break-word}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
img{height:auto}
picture{display:block}
.wrap{width:min(1320px,calc(100% - 48px));margin:0 auto}
h1,h2,h3{line-height:1.1;letter-spacing:-.02em;font-weight:700}
h1{font-size:clamp(2.1rem,3.4vw,3.1rem)}
h2{font-size:clamp(1.7rem,3vw,2.5rem);margin-bottom:14px}
h3{font-size:1.2rem;letter-spacing:-.01em}
.sub{color:var(--mute);font-size:1.08rem;max-width:64ch}
section{padding:84px 0}
.prose p{margin-top:14px;max-width:68ch}
.prose a,.txt-link{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--red)}
.prose a:hover,.txt-link:hover{color:var(--red)}
.kicker{color:var(--red);font-weight:700;font-size:.95rem;margin-bottom:14px}
.lede{color:var(--mute);font-size:1.12rem;margin-top:18px;max-width:58ch}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:#fff;color:var(--ink);padding:10px 16px;border-radius:8px;font-weight:700;border:2px solid var(--red)}
.skip:focus{top:12px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* phone number: a picture of the digits (glyph outlines, see phone_symbols in build.py). One em tall, 0.2 em of it under the
   baseline, filled with the text colour, so it follows the size, weight, colour and hover state of the text around it.
   A picture takes no text underline: where the link around it is underlined, the picture carries the line itself. */
.tel{display:inline-block;width:auto;height:1em;vertical-align:-.2em;fill:currentColor;overflow:visible;flex:none}
a[data-tel]{white-space:nowrap}
a[data-tel][href]{cursor:pointer}
.btn[data-tel]{gap:.3em}
/* in a button the picture is a flex item centred on the line: these two rules put its digits back on the baseline of the label */
.btn .tel{position:relative;top:.088em}
.btn-link .tel,.dl dd a .tel,.prose a .tel,.foot a .tel{box-sizing:content-box;padding-bottom:var(--tu,2px);border-bottom:1px solid var(--grey);vertical-align:calc(-.2em - var(--tu,2px) - 1px)}
.dl dd a .tel,.prose a .tel{border-bottom-color:var(--red);--tu:1px}
.btn-link .tel{--tu:1px;margin-top:calc(var(--tu) + 1px)}
.btn-link:hover .tel{border-bottom-color:var(--red)}
.foot a .tel{border-bottom-color:transparent;--tu:0px}
.foot a:hover .tel{border-bottom-color:var(--red)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:14px 22px;border-radius:999px;font-weight:700;font-size:1rem;line-height:1.2;border:1.5px solid transparent;cursor:pointer;transition:transform .2s,background .2s,color .2s,border-color .2s;text-align:center;font-family:inherit}
.btn:hover{transform:translateY(-1px)}
.btn-primary{background:var(--red);color:#fff}.btn-primary:hover{background:var(--red-dark)}
.btn-ghost{border-color:var(--ink);color:var(--ink);background:transparent}.btn-ghost:hover{background:var(--ink);color:#fff}
.btn-link{padding-left:0;padding-right:0;color:var(--ink);border:0;text-decoration:underline;text-underline-offset:5px;text-decoration-color:var(--grey);border-radius:4px}
.btn-link:hover{text-decoration-color:var(--red)}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.top a:focus-visible,.top button:focus-visible,.ind a:focus-visible,.foot a:focus-visible{outline-color:#fff}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:28px}

/* header */
.top{background:var(--ink);color:#fff;position:sticky;top:0;z-index:50}
.top .wrap{display:flex;align-items:center;gap:24px;height:68px}
.logo{display:flex;align-items:center;flex:none}.logo img{height:36px;width:auto}
.nav{display:flex;gap:22px;margin-left:auto;font-size:.93rem}
.nav a{color:#E6E7E8;padding:6px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover,.nav a[aria-current]{border-color:var(--red);color:#fff}
.nav .m-only{display:none}
.top-right{display:flex;align-items:center;gap:16px;flex:none}
.lang{display:inline-flex;border:1px solid #4a4a4a;border-radius:999px;padding:2px;background:#222;font-size:.85rem;font-weight:700}
.lang>*{padding:4px 11px;border-radius:999px;color:#D0D1D2;line-height:1.4}
.lang [aria-current]{background:#fff;color:var(--ink)}
.lang a:hover{color:#fff}
.top-phone{color:#fff;font-weight:700;font-size:.93rem;white-space:nowrap}
.top .btn-primary{padding:10px 18px;font-size:.9rem;white-space:nowrap}
.burger{all:unset;box-sizing:border-box;display:none;cursor:pointer;width:44px;height:44px;margin-left:auto;position:relative;border-radius:8px}
.burger span{position:absolute;left:10px;right:10px;height:2px;background:#fff;top:14px;transition:.25s}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:28px}

/* ---------- hero C: photo board ---------- */
.hero{padding:40px 0 56px;background:#fff}

.hero-grid{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr);gap:44px;align-items:center}
.hero-left{display:flex;flex-direction:column;justify-content:center;min-width:0}
.hero .kicker{line-height:1;margin-bottom:18px}
.hero h1{font-size:clamp(2.1rem,3.4vw,3.15rem);line-height:1.08;text-wrap:balance}
.hero h1:lang(fr){font-size:clamp(1.85rem,2.65vw,2.4rem);line-height:1.12}
.hero .lede{font-size:1.08rem;line-height:1.55;margin-top:18px;max-width:none}
.hero .cta-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:26px}
.hero .cta-row .btn{padding-left:10px;padding-right:10px;white-space:nowrap}
.hero .cta-row .btn:lang(fr){font-size:.92rem}
/* one panel of four cells divided by hairlines; a cell that leads somewhere is a link */
.hero-cards{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;margin-top:30px}
.hc{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-content:start;padding:18px 16px 19px;min-width:0;color:var(--ink);transition:background .3s}
.hc:nth-child(odd){border-right:1px solid var(--line)}
.hc:nth-child(n+3){border-top:1px solid var(--line)}
a.hc:hover,a.hc:focus-visible{background:var(--red-soft)}
a.hc:focus-visible{outline-offset:-3px}
.hc-i{grid-row:1/span 2;width:22px;height:22px;margin-top:1px;fill:none;stroke:var(--red);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.hc b{grid-column:2;display:block;font-size:.97rem;line-height:1.25;text-wrap:balance}
.hc span{grid-column:2;display:block;color:var(--mute);font-size:.88rem;line-height:1.38;margin-top:4px;text-wrap:balance}
@media (min-width:1100px){
  /* the column spans the board: kicker on the top edge of the tiles, panel on their bottom edge;
     the spare height is shared equally above the buttons and above the panel */
  .hero-grid{align-items:stretch}
  .hero-left{justify-content:flex-start;padding-top:20px}
  .hero-copy{display:contents}
  .hero .cta-row{margin-top:auto;padding:26px 0 0}
  .hero-cards{margin-top:auto}
}
.board{position:relative;padding:20px 0 0 30px;min-width:0}
.board svg.wire{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wire .ln{stroke:var(--grey);stroke-width:2.5;fill:none;stroke-linejoin:round;stroke-linecap:round}
.wire .pl{stroke:var(--red);stroke-width:4;fill:none;stroke-linejoin:round;stroke-linecap:round}
.wire .sb{stroke:var(--grey);stroke-width:2.5;fill:none;stroke-linecap:round;transition:stroke .3s}
.wire .sb.on{stroke:var(--red)}
.tiles{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:14px;row-gap:30px;position:relative;z-index:2}
.tiles li{display:flex;min-width:0}
.tiles .hub{position:relative;background:var(--ink);border-radius:12px;overflow:hidden;box-shadow:0 10px 24px rgba(23,23,23,.18)}
.hub img{position:absolute;left:5%;top:5%;width:90%;height:90%;object-fit:contain}
.tiles a{display:flex;flex-direction:column;width:100%;border:1.5px solid var(--line);border-radius:12px;overflow:hidden;background:#fff;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.tiles .ph{display:block;aspect-ratio:3/2;background:var(--bg2);overflow:hidden}
.tiles .ph img{width:100%;height:100%;object-fit:cover}
.tiles a b{display:flex;align-items:center;justify-content:center;text-align:center;font-size:.84rem;line-height:1.16;min-height:40px;flex:1;padding:5px 6px;border-top:1px solid var(--line);color:var(--ink)}
.tiles li.on a,.tiles li a:hover,.tiles li a:focus-visible{border-color:var(--red);transform:scale(1.05);box-shadow:0 12px 26px rgba(167,24,26,.2)}
.tiles li.on,.tiles li:hover,.tiles li:focus-within{position:relative;z-index:3}

/* two paths */
.paths{background:var(--bg2)}
.paths-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:34px}
.path{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 32px;display:flex;flex-direction:column;gap:14px;position:relative;overflow:hidden}
.path::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--red)}
.path.b::before{background:var(--ink)}
.path h3{font-size:1.45rem}
.path p{color:var(--mute)}
.path ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.path li>*{display:block;font-size:.9rem;border:1px solid var(--line);border-radius:999px;padding:5px 12px;background:var(--bg2)}
.path li a:hover{border-color:var(--red)}
.path .btn{align-self:flex-start;margin-top:auto}

/* service cards */
/* Card grids: an incomplete last row is centred in the block (owner 2026-10-13), its cards keeping the width of the full rows.
   One technique for every grid of cards: a wrapping flex row, centred, whose items are exactly one column wide.
   Set --cols (columns at this width) and --g (gap) on the grid; --rg is the row gap when it differs from --g.
   Text lists, link pills (.rel, .chips) and the two-column tick lists are not card grids and stay left-aligned. */
.svc-grid,.steps,.items.why,.bgrid,.cam-svcs-i{display:flex;flex-wrap:wrap;justify-content:center;column-gap:var(--g);row-gap:var(--rg,var(--g))}
.svc-grid>*,.steps>*,.items.why>*,.bgrid>*,.cam-svcs-i>*{flex:0 0 calc((100% - (var(--cols) - 1)*var(--g))/var(--cols) - .1px);min-width:0}
.svc-grid{--cols:5;--g:14px;margin-top:34px;list-style:none}
.svc-grid.g3{--cols:3;--g:20px}
.svc-grid li{display:flex;min-width:0}
.svc{border:1px solid var(--line);border-radius:12px;background:#fff;display:flex;flex-direction:column;width:100%;overflow:hidden;transition:border-color .25s,transform .25s,box-shadow .25s}
.svc:hover{border-color:var(--red);transform:translateY(-3px);box-shadow:0 14px 30px rgba(23,23,23,.10)}
.svc .ph{display:block;aspect-ratio:1/1;background:var(--bg2);overflow:hidden;border-bottom:1px solid var(--line)}
.svc.scene .ph{aspect-ratio:3/2}
.svc .ph img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.svc:hover .ph img{transform:scale(1.06)}
.svc b{font-size:1rem;line-height:1.25;padding:14px 16px 0}
.svc small{color:var(--mute);font-size:.86rem;line-height:1.35;padding:6px 16px 16px}
.svc-note{margin-top:22px;color:var(--mute);font-size:.95rem}
.pillar{margin-top:56px}.pillar:first-of-type{margin-top:40px}
.pillar h2{font-size:1.6rem;margin-bottom:6px}
.pillar>p{color:var(--mute)}
.pillar .svc-grid{margin-top:22px}

/* steps */
.steps{--cols:4;--g:18px;margin-top:34px;counter-reset:s;list-style:none}
.step{padding:26px 24px;border-radius:12px;background:var(--bg2);position:relative}
.step::before{counter-increment:s;content:counter(s);display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;font-weight:700;font-size:.95rem;margin-bottom:16px}
.step b{display:block;font-size:1.1rem;margin-bottom:6px;line-height:1.25}.step p{color:var(--mute);font-size:.95rem}
.steps.long{--cols:2}
.steps.long .step p+p{margin-top:10px}

/* dark band */
.ind{background:var(--ink);color:#fff}
.ind h2{color:#fff}.ind .sub{color:#D0D1D2}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;list-style:none}
.chips li{border:1px solid #555;border-radius:999px;padding:9px 16px;font-size:.97rem}
.chips.light li{border-color:var(--line);background:#fff}
.ind .chips a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--red)}
.ind .chips a:hover{text-decoration-color:#fff}
.ind .svc-note .txt-link{color:#fff}

/* two-column text blocks */
.cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.cols p{color:var(--mute);margin-top:10px}
.cols h3{margin-top:4px}
.partners{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:14px;font-weight:700;font-size:1.15rem;list-style:none}
.lic{margin-top:18px;font-size:.95rem;color:var(--mute);border-top:1px solid var(--line);padding-top:14px}
.bg2{background:var(--bg2)}

/* final CTA */
.final{background:var(--bg2)}
.final .box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:48px;display:grid;grid-template-columns:1.3fr 1fr;gap:32px;align-items:center}
.final h2{margin:0}
/* headings of the content pages: lines of even length, so no heading ends on one stranded word */
.svc-hero h1,.prose h2,.fit h2,.fit h3,.faq h2,.final h2,.bg2>.wrap>h2{text-wrap:balance}
.final .actions{display:flex;flex-direction:column;gap:12px}

/* inner pages */
.crumbs{font-size:.88rem;color:var(--mute);padding:18px 0 0}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--grey)}
.crumbs a{text-decoration:underline;text-decoration-color:var(--grey);text-underline-offset:3px}
.crumbs a:hover{color:var(--red)}
.page-head{padding:36px 0 56px}
.page-head .lede{max-width:66ch}
.svc-hero{padding:28px 0 64px}
.svc-hero .wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:center}
.svc-hero h1{font-size:clamp(2rem,3vw,2.75rem)}
.shot{border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);background:var(--bg2)}
.shot img{width:100%}
.incl{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:56px;align-items:start}
.incl .prose p{color:var(--mute)}
.items{list-style:none;display:grid;gap:12px}
.items li{border:1px solid var(--line);border-radius:12px;padding:18px 20px;background:#fff;border-left:4px solid var(--red)}
.items b{display:block;font-size:1.05rem}
.items span{display:block;color:var(--mute);font-size:.97rem;margin-top:4px}
.items.why{--cols:2;--g:20px;--rg:14px;margin-top:34px}
.items.why b a{text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:2px;text-underline-offset:4px}
.items.why b a:hover{color:var(--red)}
.fit .wrap{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:56px;align-items:center}
.fit .shot{background:#fff}
.ticks{list-style:none;margin-top:18px;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px}
.ticks li{position:relative;padding-left:26px}
.ticks.one{grid-template-columns:1fr;margin-top:14px}
.ticks li::before{content:"";position:absolute;left:0;top:.48em;width:12px;height:7px;border-left:2.5px solid var(--red);border-bottom:2.5px solid var(--red);transform:rotate(-45deg)}
.fit h3{margin-top:30px}
.rel{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.rel a{display:block;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:#fff;font-size:.95rem;font-weight:700}
.rel a:hover{border-color:var(--red);color:var(--red)}
.faq{max-width:820px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:18px 34px 18px 0;font-weight:700;font-size:1.08rem;list-style:none;position:relative;border-radius:6px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:6px;top:50%;transform:translateY(-50%);font-size:1.5rem;font-weight:400;color:var(--red);line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 0 20px;color:var(--mute);max-width:70ch}
.info{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
.dl{display:grid;gap:18px;margin-top:8px}
.dl dt{font-size:.85rem;font-weight:700;color:var(--mute);text-transform:uppercase;letter-spacing:.06em}
.dl dd{font-size:1.12rem;margin-top:2px}
.dl dd a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--red)}
.vendors{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.vendors li{border:1px solid var(--line);border-radius:12px;padding:24px;background:#fff}
.vendors b{font-size:1.3rem;display:block}
.vendors span{display:block;color:var(--mute);margin-top:6px}
.note{font-size:.93rem;color:var(--mute);margin-top:22px;max-width:70ch}
.legal h2{font-size:1.35rem;margin-top:34px;margin-bottom:6px}
.legal ul{margin:10px 0 0 22px;max-width:66ch}
.legal li{margin-top:6px}

/* forms */
.form{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:30px;display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label,.form legend{display:block;font-weight:700;font-size:.95rem;margin-bottom:6px}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select,.form textarea{width:100%;font:inherit;color:var(--ink);background:#fff;border:1.5px solid #8A8F95;border-radius:10px;padding:12px 14px}
.form textarea{min-height:130px;resize:vertical}
.form fieldset{border:0}
.checks{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.checks label{display:flex;gap:10px;align-items:flex-start;font-weight:400;margin:0;font-size:.97rem}
.checks input{width:18px;height:18px;margin-top:3px;accent-color:var(--red);flex:none}
.form-note{font-size:.92rem;color:var(--mute);background:var(--bg2);border-radius:10px;padding:12px 14px}
.form-status{font-weight:700;color:var(--red)}
.form-status:empty{display:none}
.form-status.ok{color:#1B6B3A}
.hp{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.req{color:var(--red)}

/* footer */
.foot{background:var(--ink);color:#D0D1D2;padding:56px 0 28px;font-size:.93rem}

/* the last column is as wide as its text, so the contact list ends on the right edge like the bottom row */
.foot-grid{display:grid;grid-template-columns:1.2fr 2fr 1fr max-content;gap:40px}
.foot .fh{font-size:.85rem;font-weight:700;line-height:1.2;text-transform:uppercase;letter-spacing:.08em;color:#fff;margin-bottom:14px}
.foot ul{list-style:none;display:grid;gap:7px}
/* two flowing columns, not a grid: in a grid a name that wraps stretches its whole row and leaves a hole beside it */
.foot .two{display:block;columns:2;column-gap:24px;margin-bottom:-7px}
.foot .two li{break-inside:avoid;padding-bottom:7px}
.foot a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px}
.foot a:hover{color:#fff;text-decoration-color:var(--red)}
/* first row: the headings stand on the bottom edge of the logo, so the text under the logo and the lists start on one line */
.foot-logo{display:block;height:34px;margin-bottom:14px}
.foot-logo img{display:block;height:34px;width:auto}
@media (min-width:641px){.foot-grid>nav>.fh,.foot-grid>.foot-svc>nav:first-child>.fh{padding-top:calc(34px - 1.2em)}}
@media (min-width:1181px){.foot-grid>div>.fh,.foot-grid>div>nav:first-child>.fh{padding-top:calc(34px - 1.2em)}}
.foot-bottom{display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;border-top:1px solid #333;margin-top:40px;padding-top:20px;font-size:.88rem}
.foot-bottom ul{display:flex;flex-wrap:wrap;gap:8px 20px}
/* the language switch of the header, repeated: the same component; on phones each half is at least 44px high */
.foot-bottom .lang{flex:none}
@media (max-width:640px){.foot-bottom .lang>*{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:56px}}

/* reveal: only when JS is running */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .reveal{opacity:1;transform:none}
  .wire .pl{display:none}
  .btn:hover,.svc:hover,.tiles li.on a,.tiles li a:hover{transform:none}
}

/* French: the header with the phone number needs 1220px; below that the number is left to the burger menu and the contact page (as it already is below 1181px) */
@media (max-width:1219px){html:lang(fr) .top-phone{display:none}}
/* 1024-1100px: the header carries six items since "Industries" was added; the French labels are the longest, so tighten the header a little */
@media (min-width:1024px) and (max-width:1100px){
  .top .wrap{gap:16px}.nav{gap:12px;font-size:.86rem}.top .btn-primary{padding:10px 13px;font-size:.82rem}
}
@media (max-width:1180px){
  .nav{gap:16px}.top-phone{display:none}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-grid>.foot-svc{grid-row:span 2}    /* services + industries run down the right; brand, company and contact stack on the left */
}
@media (min-width:1100px) and (max-width:1150px){
  /* narrower desktops: the board is shorter, so the column is tightened to stay within it */
  .hero .kicker{margin-bottom:14px}
  .hero h1{font-size:clamp(2rem,3.1vw,2.6rem)}
  .hero h1:lang(fr){font-size:clamp(1.7rem,2.5vw,2.1rem)}
  .hero .lede{font-size:.98rem;line-height:1.5;margin-top:12px}
  .hero .cta-row{padding-top:14px}
  .hc{padding:13px 14px 14px}
}
@media (min-width:1100px) and (max-width:1240px){
  .hero .cta-row{gap:8px}
  .hero .cta-row .btn,.hero .cta-row .btn:lang(fr){white-space:normal;font-size:.86rem;padding:10px 8px}
  .hc{column-gap:10px;padding:11px 12px 12px}
  .hc b{font-size:.92rem}.hc span{font-size:.84rem}
}
@media (min-width:1100px) and (max-width:1300px){
  .tiles a b{font-size:.8rem}
}
@media (max-width:1099px){
  .hero-grid{display:flex;flex-direction:column;align-items:stretch;gap:0}
  .hero-left{display:contents}
  .hero-copy{order:1}.hero-cards{order:2;margin-top:28px}.board{order:3;margin-top:34px}
  .hero .lede{max-width:none}
}
@media (max-width:1023px){
  .svc-grid{--cols:3}
  .steps{--cols:2}
  .cols,.incl,.info{grid-template-columns:1fr;gap:36px}
  .items.why{--cols:1}
  .svc-hero .wrap,.fit .wrap{grid-template-columns:1fr;gap:32px}
  .fit .shot{max-width:420px}
}
/* header collapses to the burger menu when the full header no longer fits: up to 943px in English, up to 1023px in French (longer labels) */
@media (max-width:943px){
  .nav{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--ink);flex-direction:column;gap:0;padding:8px 24px 18px;border-top:1px solid #333;margin:0;font-size:1rem;max-height:calc(100vh - 68px);overflow:auto}
  .js .nav{display:none}.js .nav.open{display:flex}
  .nav a{padding:13px 0;border-bottom:1px solid #2a2a2a}
  .nav .m-only{display:block}
  .burger{display:block}.no-js .burger{display:none}
  .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}.burger.open span:nth-child(2){opacity:0}.burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .top .btn-primary{display:none}.top .wrap{gap:10px}.top-right{margin-left:0}
  .no-js .top-right{margin-left:auto}
  .no-js .top{position:static}.no-js .nav{position:static;width:100%}.no-js .top .wrap{height:auto;flex-wrap:wrap;padding:12px 0}
}
@media (min-width:944px) and (max-width:1023px){
  html:lang(fr) .nav{display:flex;position:absolute;top:68px;left:0;right:0;background:var(--ink);flex-direction:column;gap:0;padding:8px 24px 18px;border-top:1px solid #333;margin:0;font-size:1rem;max-height:calc(100vh - 68px);overflow:auto}
  html.js:lang(fr) .nav{display:none}
  html.js:lang(fr) .nav.open{display:flex}
  html:lang(fr) .nav a{padding:13px 0;border-bottom:1px solid #2a2a2a}
  html:lang(fr) .nav .m-only{display:block}
  html:lang(fr) .burger{display:block}
  html.no-js:lang(fr) .burger{display:none}
  html:lang(fr) .burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  html:lang(fr) .burger.open span:nth-child(2){opacity:0}
  html:lang(fr) .burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  html:lang(fr) .top .btn-primary{display:none}
  html:lang(fr) .top .wrap{gap:10px}
  html:lang(fr) .top-right{margin-left:0}
  html.no-js:lang(fr) .top-right{margin-left:auto}
  html.no-js:lang(fr) .top{position:static}
  html.no-js:lang(fr) .nav{position:static;width:100%}
  html.no-js:lang(fr) .top .wrap{height:auto;flex-wrap:wrap;padding:12px 0}
}
@media (max-width:860px){
  section{padding:60px 0}
  .paths-grid,.final .box{grid-template-columns:1fr}.final .box{padding:30px 24px}
  .path{padding:28px 24px}
  .svc-grid,.svc-grid.g3{--cols:2}
  .steps,.steps.long{--cols:1}
  .vendors{grid-template-columns:1fr}
  .page-head{padding:28px 0 44px}
  .svc-hero{padding:22px 0 48px}
}
@media (max-width:640px){
  .hero{padding:28px 0 44px}
  .hero .cta-row{grid-template-columns:1fr;gap:10px;margin-top:24px}
  .hero .cta-row .btn:lang(fr){font-size:1rem}
  .hc{grid-template-columns:minmax(0,1fr);padding:13px 12px 14px}
  .hc-i{grid-row:auto;margin:0 0 7px}
  .hc b,.hc span{grid-column:1}
  .hc b{font-size:.9rem}.hc span{font-size:.82rem}
  .lede{font-size:1.05rem}
  .board{padding:18px 0 0 22px}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:12px;row-gap:28px}
  .tiles a b{font-size:.86rem;min-height:44px}
  .tiles li.on a,.tiles li a:hover{transform:scale(1.03)}
  .ticks,.checks,.form .row{grid-template-columns:1fr}
  .form{padding:22px 18px}
  .foot-grid{grid-template-columns:1fr;gap:32px}.foot-grid>.foot-svc{grid-row:auto}
  .cta-row .btn-primary,.cta-row .btn-ghost{flex:1 1 100%}
}
@media (max-width:480px){
  .wrap,.hero .wrap,.top .wrap,.foot .wrap{width:calc(100% - 36px)}
  .svc-grid,.svc-grid.g3{--g:10px}
  .svc b{padding:12px 12px 0;font-size:.95rem}.svc small{padding:5px 12px 14px}
  .logo img{height:32px}
}

.brandgroups{display:grid;gap:28px 40px;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));margin-top:28px}
.brandgroup h3{font-size:1.08rem}
.brandgroup h3{margin-bottom:12px}
.brandgroup{container-type:inline-size}
/* as many 150px-minimum columns as fit the group's own width; the count is spelled out so the last row can be centred */
.bgrid{--cols:1;--g:10px;list-style:none}
@container (min-width:310px){.bgrid{--cols:2}}
@container (min-width:470px){.bgrid{--cols:3}}
@container (min-width:630px){.bgrid{--cols:4}}
@container (min-width:790px){.bgrid{--cols:5}}
@container (min-width:950px){.bgrid{--cols:6}}
@container (min-width:1110px){.bgrid{--cols:7}}
@container (min-width:1270px){.bgrid{--cols:8}}
.bcard{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:10px;border:1.5px solid var(--line);border-radius:12px;background:#fff;padding:14px 10px 12px;text-align:center;min-width:0;overflow:hidden}
.bcard.nologo{justify-content:center;min-height:100%}
.blogo{display:flex;align-items:center;justify-content:center;width:100%;height:56px}
.blogo img{display:block;width:100%;max-width:144px;height:56px;object-fit:contain}
.blogo.big img{transform:scale(1.8)}
.bname{font-size:.85rem;line-height:1.3;color:var(--mute);overflow-wrap:anywhere}
.bcard.nologo .bname{font-size:.95rem;color:var(--ink);font-weight:700}
.brandnote{margin-top:32px}
.page-head .lede.wide,.note.wide{max-width:none}
/* owner 2026-10-12: text in full-width blocks spans the block, not a narrow left column */
.page-head .lede,.wrap>.sub,.note,.faq details p,.legal p,.legal ul,.prose.legal p{max-width:none}
.page-head.notfound{padding:72px 0 104px}

/* project camera pages (content/cameras.py): one page per language (<slug>/ French, <slug>/en/ English).
   Players sit in a dark panel so that the letterboxing of the stream reads as part of the frame. */
/* Both players are the same size and as large as the screen allows: --fw is the width of a 16:9 frame that fits the window
   width (less a small gutter) AND the window height under the sticky header (68px), the page title row, the panel heading and
   the margins (192px in all), so a whole player is always visible without scrolling. The panels break out of .wrap. */
.cam-head,.cam-sec{--gut:20px;--pad:8px;--fh:calc(100vh - 192px);--fw:min(calc(100vw - 2*var(--gut) - 2*var(--pad)),max(320px,calc(var(--fh)*16/9)))}
@supports (height:100svh){.cam-head,.cam-sec{--fh:calc(100svh - 192px)}}
.cam-head{padding:12px 0 10px}
.cam-title{width:calc(var(--fw) + 2*var(--pad));margin:0 auto;display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;min-height:34px}
.cam-title h1{font-size:clamp(1.45rem,2.1vw,1.9rem)}
.cam-head .kicker{margin:0 0 0 auto;order:3;font-size:.9rem}
/* state of the camera, set by site.js: grey while unknown, green when the stream is available, red when it is not */
.cam-state{display:inline-flex;align-items:baseline;gap:8px;font-size:.88rem;font-weight:700;line-height:1.35}
.no-js .cam-state{display:none}
.cam-state i{width:10px;height:10px;border-radius:50%;background:#9A9DA1;flex:none;align-self:center}
.cam-state.on i{background:#1FA24A;box-shadow:0 0 0 3px rgba(31,162,74,.18),0 0 9px 1px rgba(31,162,74,.75);animation:cam-glow 2.4s ease-in-out infinite}
.cam-state.off i{background:var(--red)}
@keyframes cam-glow{50%{box-shadow:0 0 0 4px rgba(31,162,74,.10),0 0 14px 3px rgba(31,162,74,.9)}}
.cam-sec{padding:0 0 12px;scroll-margin-top:68px}
.cam-panel{width:calc(var(--fw) + 2*var(--pad));margin:0 auto;background:var(--ink);color:#fff;border-radius:12px;padding:var(--pad);box-shadow:0 14px 34px rgba(23,23,23,.14)}
.cam-panel h2{font-size:1.05rem;line-height:1.3;letter-spacing:-.01em;margin:0;padding:0 8px;height:36px;display:flex;gap:0 .4em;align-items:center;white-space:nowrap;overflow:hidden}
.cam-panel h2::before{content:"";width:20px;height:3px;border-radius:2px;background:var(--red);margin-right:.35em;flex:none}
.cam-frame{position:relative;width:100%;aspect-ratio:16/9;background:#0A0A0A;border-radius:7px;overflow:hidden}
.cam-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.cam-help{color:#fff;font-size:.86rem;padding:8px 8px 2px;max-width:none}
.cam-by{color:var(--mute);font-size:.9rem;text-align:center;padding:0 0 4px}
.cam-more{padding:36px 0 76px}
.cam-cards{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cam-card{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:26px 26px 28px;display:flex;flex-direction:column}
.cam-card h2{font-size:1.15rem;line-height:1.25;letter-spacing:-.01em;margin:0}
.cam-card>p{font-size:.95rem;margin-top:12px}
.cam-acts{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:auto;padding-top:20px}
.cam-acts .btn{padding:10px 18px;font-size:.92rem}
.cam-acts .btn-ghost{background:#fff}
.cam-acts .btn-ghost:hover{background:var(--ink)}
.cam-tel,.cam-links{flex:1 1 100%;font-size:.92rem;display:flex;flex-wrap:wrap;gap:2px 12px;align-items:center}
.cam-tel .btn-link{padding:4px 0;font-size:1rem}
.cam-links a,.cam-list a{text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--grey)}
.cam-links a:hover,.cam-list a:hover{color:var(--red);text-decoration-color:var(--red)}
.cam-links>a,.cam-list li>a{font-weight:700}
.cam-links{display:block}
.cam-list{list-style:none;display:grid;gap:7px;margin-top:14px;font-size:.95rem}
/* visitor counter: one low panel in the language of the cards, shown by site.js only when cam-stats.json is there and recent.
   Seven equal cells; a label is always two lines (French, English) and never wraps. Every size and line height is in whole
   pixels and the dividers are drawn beside the cells, not inside them, so that labels, numbers and "views" lines of a row
   share their baselines and their left edges exactly (measured in tools: see README). */
.cam-more{padding-bottom:20px}
.cam-stats{padding:0 0 60px}
.cam-stats[hidden]{display:none}
.cam-stats-box{border:1px solid var(--line);border-radius:var(--radius);background:var(--bg2);padding:16px 0}
.cam-stats-head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:0 24px;padding:0 20px}
.cam-stats h2{font-size:16px;line-height:22px;letter-spacing:-.01em;margin:0;white-space:nowrap}
.cam-now{font-size:14px;line-height:22px;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums}
.cam-now small{font-size:13px;color:var(--mute);margin-left:10px}
.cam-stats dl{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:14px}
.cam-stats dl>div{position:relative;padding:0 20px;min-width:0;--pt:0px}
.cam-stats dl>div::after{content:"";position:absolute;left:0;top:var(--pt);bottom:0;border-left:1px solid var(--line)}
.cam-stats dl>div:first-child::after{content:none}
.cam-stats dt span{display:block;white-space:nowrap;font-size:14px;line-height:18px}
.cam-stats dd{margin-top:8px;white-space:nowrap;font-size:13px;line-height:17px;color:var(--mute);font-variant-numeric:tabular-nums}
.cam-stats dd b{display:block;font-size:24px;line-height:30px;letter-spacing:-.01em;color:var(--ink);margin-bottom:2px}
.cam-stats [data-k="today"] dd b{color:var(--red)}
.cam-stats-foot{font-size:13px;line-height:17px;color:var(--mute);padding:0 20px;margin-top:14px}
@media (max-width:1340px){
  /* 4 + 3: the second row sits under columns 1-3; one line across the whole inner width between the rows */
  .cam-stats dl{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:14px}
  .cam-stats dl>div:nth-child(4n+1)::after{content:none}
  .cam-stats dl>div:nth-child(n+5){padding-top:14px;--pt:14px}
  .cam-stats dl>div:nth-child(n+5)::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--line)}
  .cam-stats dl>div:nth-child(5)::before{left:20px}
  .cam-stats dl>div:last-child{grid-column:span 2}
  .cam-stats dl>div:last-child::before{right:20px}
}
@media (max-width:1023px){
  .cam-cards{grid-template-columns:1fr}
}
@media (max-width:760px){
  .cam-stats dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cam-stats dl>div:nth-child(n)::after{content:""}
  .cam-stats dl>div:nth-child(odd)::after{content:none}
  .cam-stats dl>div:nth-child(n+3){padding-top:14px;--pt:14px}
  .cam-stats dl>div:nth-child(n+3)::before{content:"";position:absolute;left:0;right:0;top:0;border-top:1px solid var(--line)}
  .cam-stats dl>div:nth-child(odd)::before{left:20px}
  .cam-stats dl>div:nth-child(even)::before,.cam-stats dl>div:last-child::before{right:20px}
}
@media (max-width:640px){
  /* phones: the players run edge to edge */
  .cam-head,.cam-sec{--gut:0px;--pad:0px;--fw:100%}
  .cam-title{width:auto;padding:0 14px}
  .cam-state{flex:1 1 100%}
  .cam-head .kicker{order:-1;margin:0;flex:1 1 100%}
  .cam-panel{width:100%;border-radius:0;padding:2px 0 6px;box-shadow:none}
  .cam-panel h2{padding:0 14px}
  .cam-frame{border-radius:0}
  .cam-help{padding:8px 14px 2px}
  .cam-more{padding:26px 0 20px}
  .cam-stats{padding-bottom:44px}
  .cam-stats-box{padding:14px 0 12px}
  .cam-stats-head,.cam-stats-foot{padding:0 16px}
  .cam-stats-foot{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
  .cam-now small{display:block}
  .cam-now{margin-top:4px;white-space:normal}
  .cam-now small{margin-left:0}
  /* phones: a list, label at the left, numbers at the right */
  .cam-stats dl{grid-template-columns:1fr;row-gap:0;margin-top:10px}
  .cam-stats dl>div:nth-child(n){display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 16px;border-top:1px solid var(--line);grid-column:auto}
  .cam-stats dl>div:nth-child(n)::before,.cam-stats dl>div:nth-child(n)::after{content:none}
  .cam-stats dd{margin:0;text-align:right}
  .cam-stats dd b{font-size:19px;line-height:20px;margin:0}
}

/* camera pages, card 3 "also provides": variant C2 (owner 2026-10-13): every service as its studio photo only; the name is a tip
   shown on hover and on keyboard focus (:focus-within), and always where there is no hover (touch). Each photo stays a link. */
.cam-more{padding-top:26px}
.cam-card{padding:18px 20px}
.cam-card h2{font-size:1.08rem}
.cam-card>p{margin-top:8px;font-size:.92rem}
.cam-acts{padding-top:14px;gap:8px}
.cam-acts .btn{padding:8px 14px;font-size:.86rem}
.cam-tel,.cam-links{font-size:.88rem}
.cam-tel .btn-link{font-size:.95rem;padding:2px 0}
.cam-list{margin-top:auto;padding-top:10px;gap:6px 20px;font-size:.88rem;line-height:1.3}
.cam-svcs{list-style:none;margin-top:12px}
.cam-svcs .ph{display:block;background:#fff;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.cam-svcs picture,.cam-svcs img{width:100%;height:100%}
.cam-svcs img{object-fit:cover}
.cam-svcs a:hover .ph,.cam-svcs a:focus-visible .ph{border-color:var(--red)}
.cam-svcs-i{--cols:5;--g:8px}
.cam-svcs-i li{position:relative}
.cam-svcs-i .ic{display:block}
.cam-svcs-i .ph{aspect-ratio:5/4}
.cam-svcs-i .tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);z-index:5;width:max-content;max-width:250px;background:var(--ink);color:#fff;border-radius:8px;padding:6px 10px;font-size:.78rem;line-height:1.25;text-align:center;visibility:hidden;opacity:0;transition:opacity .15s}
.cam-svcs-i .tip::after{content:"";position:absolute;left:0;right:0;top:100%;height:8px}
.cam-svcs-i .tip a{font-weight:700;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--mute)}
.cam-svcs-i .tip a:focus-visible{outline-color:#fff}
.cam-svcs-i li:hover .tip,.cam-svcs-i li:focus-within .tip{visibility:visible;opacity:1}
.cam-svcs-i li:nth-child(5n+1) .tip{left:0;transform:none}
.cam-svcs-i li:nth-child(5n) .tip{left:auto;right:0;transform:none}
@media (min-width:1024px){
  .cam-cards{grid-template-columns:1fr 1fr;gap:16px}
  .cam-card:last-child{grid-column:1/-1}
  .cam-list{grid-template-columns:auto 1fr}
}
@media (min-width:1200px){
  .cam-cards{grid-template-columns:1fr 1.12fr 1.5fr}
  .cam-card:last-child{grid-column:auto}
  .cam-card:last-child .cam-list{font-size:.8rem}
}
@media (min-width:1024px) and (max-width:1199px){
  .cam-svcs-i{--cols:15}
  .cam-svcs-i .ph{aspect-ratio:1}
  .cam-svcs-i li:nth-child(n) .tip{left:50%;right:auto;transform:translateX(-50%)}
  .cam-svcs-i li:nth-child(-n+2) .tip{left:0;transform:none}
  .cam-svcs-i li:nth-child(n+14) .tip{left:auto;right:0;transform:none}
}
@media (min-width:641px) and (max-width:1023px){
  .cam-svcs-i{--cols:8}
  .cam-svcs-i li:nth-child(n) .tip{left:50%;right:auto;transform:translateX(-50%)}
  .cam-svcs-i li:nth-child(8n+1) .tip{left:0;transform:none}
  .cam-svcs-i li:nth-child(8n) .tip{left:auto;right:0;transform:none}
}
@media (max-width:640px){.cam-card{padding:16px 16px 18px}}
/* no hover (touch): the names are always visible, beside a small photo, in two columns (three from 641px) */
@media (hover:none){
  .cam-svcs-i{--cols:2;--g:10px;--rg:10px}
  .cam-svcs-i li{display:flex;align-items:center;gap:8px}
  .cam-svcs-i .ic{flex:none;width:34px}
  .cam-svcs-i .ph,.cam-svcs-i li:nth-child(n) .ph{aspect-ratio:1}
  .cam-svcs-i li:nth-child(n) .tip{position:static;transform:none;visibility:visible;opacity:1;transition:none;width:auto;max-width:none;min-width:0;flex:1;background:none;color:var(--ink);border-radius:0;padding:0;font-size:.8rem;line-height:1.2;text-align:left}
  .cam-svcs-i .tip::after{content:none}
  .cam-svcs-i .tip a{text-decoration-color:var(--grey)}
}
@media (hover:none) and (min-width:641px){.cam-svcs-i{--cols:3}}

/* touch widths: bigger hit areas for small links, without changing how anything looks. An invisible ::after makes each of these links
   44px high (centred on the text); the layout, spacing and styles are untouched. Links in running text are exempt (WCAG 2.5.8).
   In the footer lists the links sit 29px apart, so there each link's area is the line plus the gap below it (no overlap). */
@media (max-width:1023px),(pointer:coarse){
  .crumbs a,.chips a,.items.why a,.txt-link,.lang a,.logo,.foot-logo,.rel a,.cam-list a,.cam-links a,.dl dd a,.top-right>a,.foot-bottom li a,.foot-bottom .lang a{position:relative}
  .crumbs a::after,.chips a::after,.items.why a::after,.txt-link::after,.lang a::after,.logo::after,.foot-logo::after,.rel a::after,.cam-list a::after,.cam-links a::after,.dl dd a::after,.top-right>a::after,.foot-bottom li a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .chips a::after{left:-14px;right:-14px}
  main li>a:not([class]),main p>a:only-child:not([class]){position:relative}
  main li>a:not([class])::after,main p>a:only-child:not([class])::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
  .foot li>a{position:relative}
  .foot li>a::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-4px}
}