/* Barlow & Barlow Condensed — SIL Open Font License 1.1. Self-hosted, latin + latin-ext subsets. */

@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/Barlow-300-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:300;
  font-display:swap;
  src:url('../fonts/Barlow-300-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/Barlow-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/Barlow-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/Barlow-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/Barlow-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/BarlowCondensed-500-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('../fonts/BarlowCondensed-500-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/BarlowCondensed-600-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow Condensed';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('../fonts/BarlowCondensed-600-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:200;
  font-display:swap;
  src:url('../fonts/Barlow-200italic-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Barlow';
  font-style:italic;
  font-weight:200;
  font-display:swap;
  src:url('../fonts/Barlow-200italic-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* =========================================================
   CISME — homepage

   The corporate profile's system, translated for the screen.

   What the profile does, and what the page does with it:
   · three inks on white (#808285 text, #00A650 accent,
     #B1B3B6 numerals and hairlines) — held at every width;
   · hierarchy from case and weight, not from size jumps;
   · hairlines as the only structure — no boxes, no shadows;
   · asymmetric composition: a narrow measure of text, a
     photograph running off one edge, data in a third band;
   · soft depth only: the tapered #F2F2F3 shelf, the hexagon
     watermark, photographs dissolving into the page.

   Every size below is fluid, so those proportions survive
   from 320px to 2560px; each tier re-composes rather than
   stacking, and a bleeding photograph keeps bleeding.
   ========================================================= */

:root{
  /* ---- ink ---- */
  /* The profile's two inks. Text takes them one step darker so it clears
     WCAG AA; rules, bullets, seals and the focus ring keep the exact
     profile values, where the 3:1 non-text threshold already passes. */
  --green:#00a650;          /* rules, bullets, marks — never text          */
  --green-text:#008040;     /* 5.05:1 on white                             */
  --green-dark:#006e37;     /* hover                                       */
  --grey:#6b6d70;           /* all running text — 5.19:1                   */
  --grey-display:#808285;   /* the profile grey, kept for large type       */
  --grey-light:#b1b3b6;     /* decorative marks only                       */
  --band:#f2f2f3;
  --rule-green:linear-gradient(90deg,rgba(0,166,80,.68) 0,rgba(0,166,80,0) 100%);
  --rule:rgba(128,130,133,.55);
  --rule-soft:rgba(128,130,133,.3);

  /* ---- fluid type: one ratio, held across the range ---- */
  --t-micro:clamp(11.5px,.14vw + 11px,12.5px);   /* labels, wide tracking */
  --t-small:clamp(13.8px,.2vw + 13.1px,14.8px);  /* bullets, captions     */
  --t-body:clamp(15px,.24vw + 14.2px,16.5px);
  --t-sub:clamp(15px,.5vw + 13.4px,18.5px);     /* section subtitle      */
  --t-lead:clamp(17px,.9vw + 14px,23px);        /* green subheads, quote */
  --t-sub-lead:clamp(15px,.7vw + 12.6px,19.5px);/* the same role inside a block */
  --t-title:clamp(23px,2.1vw + 15.5px,40px);    /* section titles        */
  --t-cover:clamp(40px,6.2vw + 9px,98px);
  --t-num:clamp(21px,1.5vw + 15.5px,34px);

  /* ---- fluid space ---- */
  --pad:clamp(20px,5.4vw,64px);
  --gutter:clamp(14px,1.7vw,26px);
  --content:1160px;
  --col:calc((min(var(--content),100% - 2 * var(--pad)) - 11 * var(--gutter)) / 12);
  --sp-section:clamp(60px,7.6vw,124px);
  --sp-block:clamp(26px,3.6vw,54px);
  --header-h:clamp(62px,5vw,78px);

  --sans:"Barlow","Helvetica Neue",Arial,sans-serif;
  --cond:"Barlow Condensed","Arial Narrow",var(--sans);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:#fff;color:var(--grey);
  font:300 var(--t-body)/1.5 var(--sans);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
.ticks,.brief-list,.levels,.processes,.dev ul,.value-grid,.f-sections ul,.contact-list{list-style:none;margin:0;padding:0}
a{color:inherit}
b,strong{font-weight:500}

/* ---------------- grid ----------------
   12 fluid columns between two rails, so any element can be
   placed on the same lines the slides use, or run past them
   to the edge of the screen.                                */

.grid{
  display:grid;
  grid-template-columns:
    [full-start] minmax(var(--pad),1fr)
    [content-start] repeat(12,[c] minmax(0,var(--col)))
    [content-end] minmax(var(--pad),1fr) [full-end];
  column-gap:var(--gutter);
}
.grid>*{grid-column:content-start / content-end}

.accent{color:var(--green-text)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--green-text);color:#fff;padding:10px 18px;font-family:var(--cond);font-weight:500;
}
.skip-link:focus{left:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}

/* ---------------- shared type ---------------- */

.sec-title{
  font-family:var(--cond);font-weight:500;
  font-size:var(--t-title);line-height:1.05;
  text-transform:uppercase;letter-spacing:.005em;
  color:var(--grey-display);margin:0;text-wrap:balance;
}
.sec-sub{
  font-weight:300;font-size:var(--t-sub);line-height:1.35;text-wrap:pretty;
  margin:.5em 0 0;max-width:48ch;
}
.label{
  font-family:var(--sans);font-weight:600;font-size:var(--t-micro);
  text-transform:uppercase;letter-spacing:.04em;color:var(--grey);
  margin:0 0 1.35em;
}
.label.accent{color:var(--green-text)}
.label-rule{padding-bottom:.8em;border-bottom:1px solid var(--green);border-image:var(--rule-green) 1;margin-bottom:1.6em}
.cond-green,.rule-title{
  font-family:var(--cond);font-weight:600;font-size:var(--t-lead);line-height:1.08;
  text-transform:uppercase;letter-spacing:.03em;color:var(--green-text);margin:0;
}
.num{font-family:var(--cond);font-weight:500;line-height:1;color:var(--grey-display);font-size:var(--t-num)}
.rule-title{margin:0 0 .7em;padding-top:.6em;border-top:1px solid var(--green);border-image:var(--rule-green) 1}
.ticks li{position:relative;padding-left:16px;margin-bottom:.55em;font-size:var(--t-small);line-height:1.45}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:4px;height:4px;background:var(--green)}

/* the profile's soft shelf */
.band{position:relative;padding:clamp(20px,2.2vw,28px) clamp(14px,2vw,26px) clamp(24px,2.6vw,34px);text-align:center}
.band::before{
  content:"";position:absolute;inset:0 -3%;z-index:-1;
  background:linear-gradient(180deg,rgba(242,242,243,.45) 0,var(--band) 46%,rgba(242,242,243,.92) 100%);
  clip-path:polygon(0 0,100% 0,100% 80%,50% 100%,0 80%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 22%,#000 78%,transparent 100%);
}

/* hexagon watermark, from the profile artwork */
.needs::before,.chapter-proprietary::before,.people::before{
  content:"";position:absolute;z-index:2;pointer-events:none;
  aspect-ratio:262/233;background:var(--grey-light);opacity:.16;
  -webkit-mask:url(../img/hex-outline.svg) no-repeat center/contain;
  mask:url(../img/hex-outline.svg) no-repeat center/contain;
}
.needs::before{width:min(34vw,430px);top:-8%;right:-7%}
.chapter-proprietary::before{width:min(30vw,360px);top:3%;right:-10%}
.people::before{width:min(30vw,360px);bottom:4%;right:-9%}

/* entrance — the page settles rather than moves */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------------- header ---------------- */

.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(10px) saturate(1.3);
  backdrop-filter:blur(10px) saturate(1.3);
  border-bottom:1px solid transparent;
  transition:background .35s ease,border-color .35s ease,backdrop-filter .35s ease;
}
.site-header.is-stuck{
  -webkit-background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.5);
  background:rgba(255,255,255,.94);backdrop-filter:blur(14px) saturate(1.5);
  border-bottom-color:var(--rule-soft);
}
.header-inner{align-items:center;min-height:var(--header-h)}
.brand{grid-column:content-start / span 3;z-index:2;display:flex;align-items:center;min-height:44px;transition:opacity .2s}
.brand:hover{opacity:.72}
.brand img{width:clamp(110px,10vw,150px)}

.nav{grid-column:span 9 / content-end;display:flex;justify-content:flex-end;gap:clamp(14px,1.8vw,28px);counter-reset:navitem}
.nav a{
  position:relative;counter-increment:navitem;
  font-family:var(--cond);font-weight:500;font-size:clamp(13px,.9vw,15px);
  text-transform:uppercase;letter-spacing:.08em;color:var(--grey);
  text-decoration:none;padding:4px 0;white-space:nowrap;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.nav a:hover,.nav a.is-active{color:var(--green-text);border-bottom-color:var(--green)}

.nav-toggle[hidden]{display:none}
.nav-toggle{display:none;grid-column:span 2 / content-end;justify-self:end;width:44px;height:44px;background:none;border:0;padding:11px 8px;cursor:pointer;z-index:2}
.nav-toggle span{display:block;height:1.5px;background:var(--grey);margin:5px 0;transition:transform .3s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

a:active,button:active{opacity:.62}

/* ---------------- cover ---------------- */

.hero{position:relative;display:flex;align-items:center;min-height:min(94vh,960px);overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:72% 50%}
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(100deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.95) 47%,rgba(255,255,255,.28) 67%,rgba(255,255,255,0) 81%),
    linear-gradient(180deg,rgba(255,255,255,0) 88%,#fff 100%);
}
.hero-inner{position:relative;z-index:2;width:100%;padding:calc(var(--header-h) + clamp(40px,6vw,80px)) 0 clamp(64px,8vw,116px)}
.hero-copy{grid-column:content-start / c 8}
.hero-title{
  font-family:var(--cond);font-weight:600;
  font-size:var(--t-cover);line-height:.93;
  text-transform:uppercase;color:var(--grey-display);margin:0;
}
.hero-sub{
  font-family:var(--cond);font-weight:500;
  font-size:clamp(18px,1.9vw + 8px,30px);line-height:1.15;
  text-transform:uppercase;letter-spacing:.03em;color:var(--grey);margin:.85em 0 0;
}
.hero-meta{font-size:var(--t-small);margin:.5em 0 0}

/* ---------------- sections ---------------- */

.section{padding:var(--sp-section) 0;position:relative;overflow-x:clip;scroll-margin-top:var(--header-h)}
.section>.grid{position:relative;z-index:1;row-gap:var(--sp-block)}
.sec-head{grid-column:content-start / c 10}

/* --- understanding the needs --- */
.needs .brief{grid-column:content-start / content-end;text-align:center}
.brief-list{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0}
.brief-list li{font-size:var(--t-small);padding:0 clamp(10px,1.5vw,20px);border-right:1px solid var(--rule)}
.brief-list li:last-child{border-right:0}

.answer p{margin:0;font-size:var(--t-small)}
.levels,.value-grid{grid-column:content-start / content-end;display:grid}
.levels{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,36px) var(--gutter)}
.levels li{border-top:1px solid var(--green);border-image:var(--rule-green) 1;padding-top:.7em}
.levels .num{display:block}
.levels h3{margin:.25em 0 .4em}
.levels h3 a{display:inline-block;padding:.25em 0;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.levels h3 a:hover{color:var(--green-dark);border-bottom-color:var(--green)}
.levels p{margin:0;font-size:var(--t-small);text-wrap:pretty}
.direct{margin:0;display:flex;flex-direction:column;align-items:center;gap:12px;font-size:var(--t-small)}
.direct img{width:clamp(30px,3vw,38px)}

/* --- chapters --- */
.ch-num{font-family:var(--cond);font-weight:500;display:flex;align-items:baseline;gap:.4em;margin:0 0 .3em}
.ch-num .num{font-size:calc(var(--t-num) * 1.15)}
.ch-lede{margin:1em 0 0;font-size:var(--t-body);max-width:44ch;text-wrap:pretty}

/* 01 production — text | photograph | data, as on the slide */
.chapter-production .ch-main{grid-column:content-start / c 6}
.chapter-production .ch-figure{grid-column:c 6 / c 10;margin:0;align-self:stretch}
.chapter-production .ch-figure img{width:100%;height:100%;object-fit:cover}
.chapter-production .ch-aside{grid-column:c 10 / content-end}

.fourc{margin:var(--sp-block) 0 0}
.fourc>div{display:grid;grid-template-columns:minmax(96px,.42fr) 1fr;gap:.5em clamp(14px,2vw,24px);padding:clamp(12px,1.6vw,20px) 0;border-bottom:1px solid var(--green);border-image:var(--rule-green) 1}
.fourc>div:first-child{border-top:1px solid var(--green)}
.fourc dt{font-family:var(--cond);font-weight:600;font-size:var(--t-sub-lead);line-height:1.05;text-transform:uppercase;letter-spacing:.03em;color:var(--green-text)}
.fourc dd{margin:0}

.iso{display:flex;align-items:center;gap:14px;margin:var(--sp-block) 0 0;font-size:var(--t-micro);line-height:1.5}
.iso img{width:clamp(32px,3vw,40px);flex:none}

@media (min-width:1180.02px){
  .chapter-production .ch-aside{
    position:relative;padding:clamp(20px,2vw,30px) 0 var(--sp-section);
    margin-bottom:calc(var(--sp-section) * -1);
  }
  .chapter-production .ch-aside::before{
    content:"";position:absolute;z-index:-1;
    top:0;bottom:0;left:calc(var(--gutter) * -1);right:calc((100vw - 100%) * -1);
    background:linear-gradient(180deg,#f8f8f9 0,var(--band) 62%,var(--band) 100%);
  }
}
.ch-aside .cond-green{margin-bottom:1em}
.processes li{margin-bottom:.75em;padding-left:14px;position:relative;break-inside:avoid}
.processes li::before{content:"–";position:absolute;left:0;top:0;font-size:var(--t-micro);line-height:1.35;color:var(--grey-display)}
.processes span{display:block;font-size:var(--t-micro)}
.processes span:first-child{font-weight:500;text-transform:uppercase;letter-spacing:.05em}

/* 02 + portfolio — text, photograph off the right edge */
.chapter-bleed .ch-main{grid-column:content-start / c 8}
.chapter-bleed .ch-bleed{grid-column:c 8 / full-end;margin:0;position:relative;align-self:stretch}
.chapter-bleed .ch-bleed img{width:100%;height:100%;object-fit:cover}
/* the photograph dissolves into the text column — only meaningful while the
   two sit side by side; below that tier the photograph is a clean band. */
.chapter-bleed .ch-bleed::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.45) 12%,rgba(255,255,255,0) 34%);
}
.bring{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,2.6vw,34px);margin-top:var(--sp-block)}

.quote{margin:var(--sp-block) 0 0;padding-left:clamp(36px,4vw,58px);position:relative}
.quote::before{
  content:"\201C";position:absolute;left:0;top:-.16em;
  font-family:var(--sans);font-weight:500;font-size:clamp(58px,6vw,92px);line-height:1;
  color:var(--green);opacity:.25;
}
.quote p{margin:0;font-weight:200;font-style:italic;font-size:var(--t-lead);line-height:1.3;max-width:34ch}

/* 03 proprietary */
.chapter-proprietary .ch-main{grid-column:content-start / c 6}
.chapter-proprietary .developments{grid-column:c 6 / content-end}
.path{margin-top:var(--sp-block)}
.path-label{font-family:var(--cond);font-weight:500;font-size:var(--t-sub-lead);margin:0 0 .1em}
.path-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border-top:1px solid var(--green);border-image:var(--rule-green) 1;padding-top:.6em;
}
.path-head .rule-title{flex:1 1 auto;min-width:0;border-top:0;padding-top:0}
.path-icons{display:flex;align-items:center;gap:clamp(9px,1.1vw,14px);flex:0 0 auto;padding-bottom:.6em}
.path-icons img{height:clamp(20px,1.9vw,26px);width:auto}
.path-icons .ic-lg{height:clamp(28px,2.6vw,36px)}
.path-icons .path-arrow{height:clamp(12px,1.1vw,15px);margin-right:1px}

.dev-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,32px)}
.dev{border-top:1px solid var(--green);border-image:var(--rule-green) 1}
.dev img{
  width:100%;margin:0 0 1em;
  -webkit-mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.35) 94%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 78%,rgba(0,0,0,.35) 94%,transparent 100%);
}
.dev h4{margin:0 0 .5em;font-size:var(--t-sub-lead)}
.dev ul{font-size:var(--t-small);line-height:1.55}
.dev sup{font-size:.62em;vertical-align:super}

/* portfolio — the slide's staggered six phases */
.phases{--elbow-x:clamp(20px,2vw,32px);--elbow-w:50%;--elbow-y:clamp(30px,3.2vw,42px);list-style:none;margin:var(--sp-block) 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr}
.phases li{position:relative;display:flex;align-items:baseline;gap:.6em;padding-bottom:clamp(34px,3.6vw,48px)}
.phases li:nth-child(odd){grid-column:1}
.phases li:nth-child(even){grid-column:2}
.phases li:nth-child(1){grid-row:1}
.phases li:nth-child(2){grid-row:2}
.phases li:nth-child(3){grid-row:3}
.phases li:nth-child(4){grid-row:4}
.phases li:nth-child(5){grid-row:5}
.phases li:nth-child(6){grid-row:6}
.phases li:last-child{padding-bottom:0}
.phases .num{font-size:calc(var(--t-num) * .8)}
.phases li span:last-child{
  font-family:var(--cond);font-weight:600;font-size:var(--t-sub-lead);line-height:1.1;
  text-transform:uppercase;letter-spacing:.03em;color:var(--green-text);
}
.phases li:not(:last-child)::after{content:"";position:absolute;top:calc(100% - var(--elbow-y));height:var(--elbow-y);border:0 solid var(--grey-light)}
.phases li:nth-child(odd)::after{left:var(--elbow-x);width:var(--elbow-w);border-width:0 0 1px 1px;border-bottom-left-radius:20px}
.phases li:nth-child(even)::after{left:calc(var(--elbow-x) - var(--elbow-w));width:var(--elbow-w);border-width:0 1px 1px 0;border-bottom-right-radius:20px}
.seal{width:clamp(62px,5.2vw,80px);margin:var(--sp-block) auto 0}

/* --- people: the cut happens at the section edge, as on the slide --- */
.people{padding-bottom:0}
.people-quote{grid-column:content-start / c 6;margin-top:0;align-self:start}
.people-photo{grid-column:c 5 / full-end;margin:0}
.people-photo img{
  width:100%;
  -webkit-mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 88%,transparent 100%);
}

/* --- values: the team strip closes the content, the footer follows --- */
.values{padding-bottom:0}
.value-grid{grid-template-columns:repeat(4,1fr);gap:clamp(20px,2.6vw,34px)}
.value-grid p{margin:0 0 .6em;font-size:var(--t-small);text-wrap:pretty}
.value-grid p:last-child{margin-bottom:0}
.value-grid li{display:grid;grid-template-rows:auto 1fr;align-content:start}
/* 2.16em = due righe a line-height 1.08, .6em = il padding-top di .rule-title,
   1px = il suo bordo: se uno dei tre cambia, va ricalcolato anche qui */
.value-grid .rule-title{min-height:calc(2.16em + .6em + 1px)}
.values-photo{grid-column:full-start / full-end;margin:var(--sp-block) 0 0;overflow:hidden}
.values-photo img{width:100%}

/* --- footer ---------------------------------------------
   Where the page ends rather than stops: the mark and the
   claim, the sections in reach, the compliance marks, and a
   legal line under a hairline.                              */

.site-footer{
  --f-link:14px;      /* 12px is the floor, 14 the recommended size */
  --f-text:13.5px;
  --f-head:12px;
  background:var(--band);
  padding:clamp(24px,2.6vw,36px) 0 0;
  font-size:var(--f-text);line-height:1.55;
}
.f-head{
  font-family:var(--sans);font-weight:600;font-size:var(--f-head);
  text-transform:uppercase;letter-spacing:.06em;color:var(--grey);
  margin:0 0 .9em;padding-bottom:.7em;border-bottom:1px solid rgba(128,130,133,.32);
}
.footer-main{row-gap:clamp(18px,2.2vw,26px);padding-bottom:clamp(14px,1.6vw,20px)}
.f-brand{grid-column:content-start / c 3}
.f-contact{grid-column:c 3 / c 7}
.f-sections{grid-column:c 7 / c 10}
.f-compliance{grid-column:c 10 / content-end}

.f-logo{width:112px}
.f-since{margin:.45em 0 0;font-size:var(--f-text)}

.f-sections a{
  display:block;padding:.32em 0;text-decoration:none;
  font-size:var(--f-link);color:var(--grey);
  transition:color .2s;
}
.f-sections a:hover{color:var(--green-text)}

.f-contact address{font-style:normal;font-size:var(--f-text);line-height:1.6;margin:0}
.contact-list{line-height:1.55;margin-top:.2em}
.contact-list li{display:flex;gap:10px;align-items:baseline;padding:.14em 0;font-size:var(--f-link)}
.contact-list .key{flex:0 0 12px;font-weight:600;font-size:var(--f-head);color:var(--green-text)}
.contact-list a{display:inline-block;padding:.16em 0;text-decoration:none;border-bottom:1px solid var(--green-text);transition:color .2s,border-color .2s}
.contact-list a:hover{color:var(--green-text);border-bottom-color:var(--green-text)}

.f-compliance p{margin:0 0 1em;font-size:var(--f-head);line-height:1.6}
.f-compliance img{width:100%;max-width:260px}

.footer-bar{
  margin-top:clamp(12px,1.5vw,18px);padding:clamp(10px,1.1vw,13px) 0;
  align-items:center;position:relative;background:#efeff0;
}
.footer-bar::after{
  content:"";position:absolute;inset:0 calc((100vw - 100%) / -2);z-index:-1;background:#efeff0;
}
.footer-bar::before{
  content:"";position:absolute;inset:0 max(var(--pad),calc((100% - var(--content)) / 2)) auto;
  height:1px;background:rgba(128,130,133,.42);
}
.f-legal{grid-column:content-start / c 8;margin:0;font-size:var(--f-head)}
.f-top{
  grid-column:c 8 / content-end;justify-self:end;
  display:inline-flex;align-items:center;gap:.7em;padding:.7em 0;text-decoration:none;
  font-weight:500;font-size:var(--f-head);
  text-transform:uppercase;letter-spacing:.1em;color:var(--grey);
  transition:color .2s;
}
.f-top img{width:22px;height:auto;transition:transform .3s ease}
.f-top:hover{color:var(--green-text)}
.f-top:hover img{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){.f-top:hover img{transform:none}}

/* =========================================================
   TIER: laptop — the three-band chapter loses its third band,
   the data moves under the text rather than shrinking.
   ========================================================= */

@media (max-width:1180.01px){
  .chapter-production .ch-main{grid-column:content-start / c 7}
  .chapter-production .ch-figure{grid-column:c 7 / full-end;align-self:start}
  .chapter-production .ch-figure img{height:auto}
  .chapter-production .ch-aside{grid-column:content-start / c 7;margin-top:var(--sp-block)}
  .processes{columns:2;column-gap:clamp(18px,2.4vw,30px)}
  .sec-head{grid-column:content-start / content-end}
}

/* =========================================================
   TIER: tablet — one measure of text, but photographs still
   run off the right edge; diagrams keep their shape.
   ========================================================= */

@media (max-width:980px){
  .hero-copy{grid-column:content-start / c 11}
  .chapter-bleed .ch-main,
  .chapter-proprietary .ch-main,
  .chapter-production .ch-main{grid-column:content-start / c 10}
  .chapter-proprietary .developments{grid-column:content-start / content-end}
  .chapter-production .ch-aside{grid-column:content-start / c 10}
  .people-quote{grid-column:content-start / c 8}
  /* the brand block is one line tall and the contact block is not, so the
     contacts take both rows rather than leaving a hole under the logo */
  .f-brand{grid-column:content-start / c 7;grid-row:1}
  .f-sections{grid-column:content-start / c 7;grid-row:2}
  .f-contact{grid-column:c 7 / content-end;grid-row:1 / span 2}
  .f-compliance{
    grid-column:content-start / content-end;grid-row:3;
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:var(--gutter);align-items:center;
  }
  .f-compliance .f-head{grid-column:1 / -1}
  .f-compliance p{margin:0}
  .f-compliance img{grid-column:2;width:clamp(180px,32vw,290px);max-width:none}

  /* no longer beside the text: full-bleed bands, cleanly cut, no dissolve */
  .chapter-bleed .ch-bleed,
  .chapter-production .ch-figure,
  .people-photo{grid-column:full-start / full-end}
  .chapter-bleed .ch-bleed::after{display:none}
  /* a band, not a wall: hold the height and let the frame crop */
  .chapter-bleed .ch-bleed,
  .chapter-production .ch-figure{align-self:start;height:min(64vh,520px);overflow:hidden}
  .chapter-production .ch-figure img{height:100%;width:100%;object-fit:cover}
  .chapter-production .ch-figure img{object-position:50% 26%}
  .chapter-bleed .ch-bleed img{object-position:50% 35%}
  .value-grid{grid-template-columns:repeat(2,1fr);gap:clamp(22px,3.4vw,34px)}
  .levels{grid-template-columns:1fr 1fr}
  .levels li:last-child{grid-column:1 / -1;max-width:calc(50% - var(--gutter) / 2)}
}

/* =========================================================
   TIER: phone — a single measure. Photographs go edge to
   edge instead of becoming boxes; the six phases keep their
   zig-zag on one column; data sets stay in two columns.
   ========================================================= */

@media (max-width:720px){
  .hero-copy,.people-quote,:is(.chapter-bleed,.chapter-proprietary) .ch-main,
  .chapter-production :is(.ch-main,.ch-aside){grid-column:content-start / content-end}

  .chapter-bleed .ch-bleed,
  .chapter-production .ch-figure{height:min(56vh,420px)}

  .levels{grid-template-columns:1fr;row-gap:clamp(20px,4vw,28px)}
  .levels li:last-child{max-width:none}
  .bring{grid-template-columns:1fr;gap:clamp(22px,5vw,30px)}
  .dev-grid,.value-grid{grid-template-columns:1fr}
  .fourc>div{grid-template-columns:1fr;gap:.5em}
  .fourc dt br{display:none}
  .needs .brief{text-align:left}
  .brief-list{display:grid;grid-template-columns:1fr 1fr;gap:0;text-align:left}
  .brief-list li{padding:.55em 0;border-right:0;border-bottom:1px solid var(--rule-soft)}
  .brief-list li:nth-child(odd){padding-right:var(--gutter)}
  .brief-list li:nth-child(even){padding-left:var(--gutter);border-left:1px solid var(--rule-soft)}

  /* the six phases: one column, but still a zig-zag */
  .phases{grid-template-columns:1fr}
  .phases li,
  .phases li:nth-child(odd),
  .phases li:nth-child(even){grid-column:1;grid-row:auto;padding-bottom:30px}
  .phases{--elbow-w:22%;--elbow-y:26px}
  .phases li:nth-child(even){padding-left:var(--elbow-w)}
  .phases li:nth-child(even)::after{left:var(--elbow-x)}
  .values-photo{height:clamp(170px,27vh,230px)}
  .values-photo img{
    height:100%;object-fit:cover;object-position:50% 24%;
    -webkit-mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 72%,transparent 100%);
  }
  .path-head{display:block}
  .path-icons{padding:0 0 1em}
}

@media (max-width:419px){
  .brief-list{grid-template-columns:1fr}
  /* the pair of columns is worth keeping; the labels just need a notch less */
  .brief-list li,
  .brief-list li:nth-child(odd),
  .brief-list li:nth-child(even){padding:.5em 0;border-left:0}
  .processes{columns:1}
  .phases li:nth-child(even){padding-left:14%}
  .phases li:nth-child(even)::after{width:14%}
  .phases li:nth-child(odd)::after{width:14%}
}

/* =========================================================
   The menu: below the point where the bar would crowd, it
   becomes a full panel set in the profile's own type, with
   the numerals the profile uses to index things.
   ========================================================= */

@media (max-width:900px){
  .nav-toggle{display:block}
  .nav{
    position:fixed;inset:var(--header-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;box-shadow:0 26px 50px -34px rgba(128,130,133,.95);
    border-bottom:1px solid var(--rule-soft);
    padding:clamp(6px,2vw,14px) var(--pad) clamp(22px,5vw,34px);
    max-height:calc(100dvh - var(--header-h));
    overflow-y:auto;overscroll-behavior:contain;
    display:none;
  }
  .nav.is-open{display:flex}
  .nav a{
    display:flex;align-items:baseline;gap:1em;
    padding:clamp(13px,3.4vw,18px) 0;font-size:clamp(16px,4.4vw,21px);
    border-bottom:1px solid var(--rule-soft);white-space:normal;
  }
  .nav a:last-child{border-bottom:0}
  .nav a::before{
    content:counter(navitem,decimal-leading-zero);
    font-size:.7em;color:var(--grey-light);letter-spacing:.04em;
  }
  .nav a.is-active{border-bottom-color:var(--rule-soft)}
  .nav a.is-active::before{color:var(--green-text)}
  -webkit-.site-header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
  .site-header{background:rgba(255,255,255,.9);backdrop-filter:blur(14px)}
  .hero::after{background:linear-gradient(180deg,rgba(255,255,255,.985) 0%,rgba(255,255,255,.975) 64%,rgba(255,255,255,.5) 84%,rgba(255,255,255,.3) 100%)}
  .hero-bg{object-position:62% 44%}
  .hero{min-height:min(92vh,820px)}
}

/* ---------------------------------------------------------
   Print: the reveal is a screen behaviour, the fixed header
   is not a page element, and the cover should not eat a sheet.
   --------------------------------------------------------- */

@media print{
  .reveal{opacity:1 !important;transform:none !important}
  -webkit-.site-header{position:static;background:none;backdrop-filter:none;border-bottom:1px solid var(--rule)}
  .site-header{position:static;background:none;backdrop-filter:none;border-bottom:1px solid var(--rule)}
  .nav,.nav-toggle,.f-top,.skip-link{display:none}
  .needs::before,.chapter-proprietary::before,.people::before{display:none}
  .hero{min-height:auto;page-break-after:always}
  .hero-inner{padding:24px 0}
  .section{padding:16mm 0;overflow:visible}
  .value-grid li,.dev,.levels li,.fourc>div,.phases li{break-inside:avoid}
  .chapter-bleed .ch-bleed,.chapter-production .ch-figure{height:auto;max-height:120mm}
  .values-photo img,.people-photo img,.dev img{-webkit-mask-image:none;mask-image:none}
  a{text-decoration:none}
}

/* a phone held sideways: the cover has no room to be a cover */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto}
  .hero-inner{padding:calc(var(--header-h) + 26px) 0 34px}
  /* at this height the cover cannot be a cover: the photograph stays as a
     ghost behind the copy rather than competing with it */
  .hero::after{background:rgba(255,255,255,.975)}
  .hero-bg{object-position:80% 42%}
}

/* ---------------------------------------------------------
   The footer holds its two-column shape well below the point
   where the page itself goes to one measure: stacking earlier
   costs about 250px of height for no gain.
   --------------------------------------------------------- */

@media (max-width:419px){
  .footer-main{row-gap:clamp(14px,3.2vw,20px)}
  .f-brand,.f-contact,.f-sections,.f-compliance{grid-column:content-start / content-end;grid-row:auto}
  .f-logo{width:104px}
  .f-contact{padding-top:clamp(6px,2vw,12px)}
  .f-compliance{grid-template-columns:1fr}
  .f-compliance p{margin:0 0 .7em}
  .f-compliance img{grid-column:1;max-width:230px}
  .f-legal{grid-column:content-start / c 7}
  .f-top{grid-column:c 7 / content-end}
}

/* the section list pairs up as soon as its field is wide enough for the
   longest label; below that it would wrap, so it stays in one column */
@media (max-width:419px),(min-width:800px) and (max-width:980px){
  .f-sections ul{display:grid;grid-template:repeat(3,auto) / 1fr 1fr;grid-auto-flow:column;column-gap:var(--gutter)}
}

/* narrower than this the longest label cannot share a line with another column */
@media (max-width:359px){
  .f-sections ul{grid-template:none / 1fr;grid-auto-flow:row}
}

/* a touch pointer needs 44px targets; a mouse does not, and paying for
   them everywhere is what made the footer twice the height it needed */
@media (pointer:coarse){
  .f-sections a,.contact-list a{padding:.66em 0}
  .contact-list li{padding:.3em 0}
  .f-top{padding:.85em 0}
  .nav a{padding:.5em 0}
}

/* wide screens: hold the measure, let the bleeds run */
@media (min-width:1600px){
  :root{--content:1280px}
}