/* Chehbi Design — site styles. Tokens come from docs/brand-charter.html.
   Structure: 1 tokens · 2 base · 3 type · 4 buttons · 5 header · 6 sections & components
              7 forms · 8 footer · 9 motion · then the architectural layer (locked, see below). */

/* ===== 1. Tokens ===== */
:root{
  /* Color (brand) */
  --teal:#1d4346; --sand:#edd2a4; --pale:#e8edf5; --white:#fff;
  --teal-80:#4a6a6c;            /* secondary text on pale (5.3:1) */
  --line:rgba(29,67,70,.16);
  --ph:#dbe3ee;                 /* placeholder tint derived from pale */
  --error:#9c3f27;              /* functional only: form errors. Not a brand color. 6.6:1 on white */

  /* Type: fluid, one ratio family. Sizes grow with the viewport but never past 2x their minimum */
  --font:"Avenir Next","Nunito Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --fs-label:.8125rem;                                  /* 13 */
  --fs-small:.9375rem;                                  /* 15 */
  --fs-body:clamp(1.0625rem,1.03rem + .15vw,1.125rem);  /* 17 to 18 */
  --fs-lead:clamp(1.1875rem,1.1rem + .45vw,1.4rem);     /* 19 to 22 */
  --fs-h3:clamp(1.25rem,1.18rem + .3vw,1.5rem);         /* 20 to 24 */
  --fs-h2:clamp(2rem,1.4rem + 2.2vw,3.25rem);           /* 32 to 52 */
  --fs-h1:clamp(2.5rem,1.4rem + 3.4vw,4rem);            /* 40 to 64 */

  /* Space: 8px base. Related things sit close, separate things sit far apart */
  --s1:.25rem; --s2:.5rem; --s3:.75rem; --s4:1rem; --s5:1.5rem;
  --s6:2rem; --s7:3rem; --s8:4rem; --s9:6rem;
  --space-section:clamp(4.5rem,9vw,8rem);               /* 72 to 128 */
  --wrap:1080px; --gutter:1.5rem;
  --radius:3px;

  /* Motion: slow, calm, decelerating (ease-out quint). Nothing bounces */
  --ease:cubic-bezier(.22,1,.36,1);
  --t-fast:.3s; --t-base:.5s; --t-slow:.9s;
}

/* ===== 2. Base ===== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scrollbar-width:thin;scrollbar-color:var(--teal-80) var(--pale)}
body{font-family:var(--font);font-weight:400;font-size:var(--fs-body);line-height:1.6;color:var(--teal);background:var(--pale);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-kerning:normal;text-rendering:optimizeLegibility;
  -webkit-tap-highlight-color:transparent}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
::selection{background:var(--sand);color:var(--teal)}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(var(--gutter),env(safe-area-inset-left));padding-right:max(var(--gutter),env(safe-area-inset-right))}
.skip{position:absolute;left:-999px;top:8px;background:var(--teal);color:var(--white);padding:10px 16px;z-index:100}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--teal);outline-offset:4px;border-radius:2px}
.cta-band :focus-visible,.site-footer :focus-visible{outline-color:var(--sand)}

/* ===== 3. Type =====
   Big type is tighter (leading 1.05 to 1.12, slight negative tracking); small caps labels are wider.
   Headlines balance their lines, paragraphs avoid lone last words. */
h1,h2,h3{font-weight:300;text-wrap:balance}
h1{font-size:var(--fs-h1);line-height:1.05;letter-spacing:-.012em}
h2{font-size:var(--fs-h2);line-height:1.1;letter-spacing:-.008em}
h3,.h3{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:.005em}
h1 b,h2 b{font-weight:700}
p{text-wrap:pretty}
p+p{margin-top:var(--s3)}
.eyebrow{font-size:var(--fs-label);font-weight:600;letter-spacing:.26em;text-transform:uppercase;color:var(--teal-80);margin-bottom:var(--s4)}
.lead{font-size:var(--fs-lead);line-height:1.5;max-width:52ch}
.note{font-size:var(--fs-small);color:var(--teal-80);margin-top:var(--s4)}
.todo{display:inline-block;background:var(--sand);color:var(--teal);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:2px 8px;border-radius:2px;vertical-align:middle;line-height:1.6;margin-left:6px}

/* ===== 4. Buttons: 56px tall targets. One filled button per view; the rest are outlines ===== */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:3.5rem;padding:0 2.25rem;font:600 var(--fs-label)/1 var(--font);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;border:1.5px solid var(--teal);border-radius:2px;cursor:pointer;text-align:center;
  transition:background-color var(--t-base) var(--ease),color var(--t-base) var(--ease),border-color var(--t-base) var(--ease),transform var(--t-fast) var(--ease)}
.btn:active{transform:scale(.985)}
.btn-primary{background:var(--teal);color:var(--white)}
.btn-primary:hover{background:#142f31;border-color:#142f31}
.btn-outline{background:transparent;color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:var(--white)}
.btn-sand{background:var(--sand);color:var(--teal);border-color:var(--sand)}
.btn-sand:hover{background:#f4e2bf;border-color:#f4e2bf}
.btn-outline-light{background:transparent;color:var(--white);border-color:rgba(255,255,255,.7)}
.btn-outline-light:hover{background:var(--white);color:var(--teal);border-color:var(--white)}
.btn-primary::after,.btn-sand::after{content:"→";margin-left:.9em;transition:transform var(--t-base) var(--ease)}
@media (hover:hover){.btn-primary:hover::after,.btn-sand:hover::after{transform:translateX(5px)}}
.btn.is-loading{opacity:.7;pointer-events:none}
.btn.is-loading::after{content:none}
.actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin-top:var(--s6)}
.actions.center{justify-content:center}
.link-arrow{display:inline-block;margin-top:var(--s5);font-weight:600;font-size:var(--fs-label);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:var(--s2) 0;border-bottom:1.5px solid var(--sand);transition:border-color var(--t-base) var(--ease)}
.link-arrow::after{content:"→";display:inline-block;margin-left:.6em;transition:transform var(--t-base) var(--ease)}
.link-arrow:hover{border-color:var(--teal)}
@media (hover:hover){.link-arrow:hover::after{transform:translateX(4px)}}

/* ===== 5. Header: compacts after the first scroll (set by main.js) ===== */
.site-header{position:sticky;top:0;z-index:50;background:rgba(232,237,245,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;justify-content:space-between;min-height:84px;padding-top:6px;padding-bottom:6px;transition:min-height var(--t-base) var(--ease)}
.brand-full{width:150px;transition:width var(--t-base) var(--ease)}
.brand-mark{display:none;width:52px}
.is-scrolled .bar{min-height:68px}
.is-scrolled .brand-full{width:124px}
.nav{display:flex;align-items:center;gap:var(--s6)}
.nav a:not(.btn){position:relative;text-decoration:none;font-size:var(--fs-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:var(--s3) 0}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:4px;height:1.5px;background:var(--sand);transform:scaleX(0);transform-origin:left;transition:transform var(--t-base) var(--ease)}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav .btn{min-height:2.75rem;padding:0 1.5rem;font-size:.75rem}
.nav .lang{font-weight:700;color:var(--teal-80)}
.menu-btn{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:12px;right:12px;height:2px;background:var(--teal);transition:transform var(--t-fast) var(--ease),top var(--t-fast) var(--ease)}
.menu-btn span:first-child{top:19px}.menu-btn span:last-child{top:27px}
.menu-open .menu-btn span:first-child{top:23px;transform:rotate(45deg)}
.menu-open .menu-btn span:last-child{top:23px;transform:rotate(-45deg)}

@media (max-width:900px){
  .bar,.is-scrolled .bar{min-height:64px}
  .brand-full{display:none}.brand-mark{display:block}
  .menu-btn{display:block}
  .nav{position:fixed;inset:64px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--pale);padding:var(--s2) var(--gutter) var(--s6);border-bottom:1px solid var(--line);transform:translateY(-130%);visibility:hidden;transition:transform var(--t-base) var(--ease),visibility var(--t-base)}
  .menu-open .nav{transform:none;visibility:visible}
  .nav a:not(.btn){padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:.875rem}
  .nav a:not(.btn)::after{display:none}
  .nav .btn{margin-top:var(--s5);min-height:3.5rem;font-size:var(--fs-label)}
}

/* ===== 6. Sections & components ===== */
/* Hero */
.hero{padding:clamp(3rem,8vw,6rem) 0 clamp(3rem,7vw,5.5rem)}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:var(--s8);align-items:center}
.hero h1{margin-bottom:var(--s5)}
.hero .lead{max-width:40ch}
.hero-art{position:relative;margin:0}
.hero-art img{width:100%;max-height:560px;object-fit:contain;object-position:right center}
.hero-art figcaption{font-size:.75rem;color:var(--teal-80);text-align:right;margin-top:var(--s2)}
@media (max-width:900px){
  .hero{padding:var(--s6) 0 var(--s7)}
  .hero-grid{grid-template-columns:1fr;gap:var(--s5)}
  .hero-art{order:-1;max-height:260px;overflow:hidden}
  .hero-art img{max-height:260px;object-position:center}
  .hero-art figcaption{text-align:left}
}

/* Sections: generous, even rhythm. Heading block to content is always 64px */
.section{padding:var(--space-section) 0;border-top:1px solid var(--line)}
.section-tight{padding-top:var(--s8)}
.section-head{margin-bottom:var(--s8)}
.section-head h2{max-width:26ch}
.section-head .lead{margin-top:var(--s4)}
.section-more{margin-top:var(--s7)}
.page-head{padding:clamp(3rem,7vw,5.5rem) 0 var(--s5)}
.page-head h1{margin-bottom:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
@media (max-width:900px){.grid-3{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.grid-3{grid-template-columns:1fr}}

.promise{background:var(--white);border-top:1px solid var(--line);padding:clamp(3.5rem,6vw,5rem) 0}
.promise-item h2{font-size:var(--fs-h3);font-weight:600;line-height:1.3;letter-spacing:.005em;margin:var(--s2) 0 var(--s2)}
.num{font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;color:var(--teal-80)}

/* Project cards + placeholders */
.card h3{margin-top:var(--s4)}
.meta{font-size:var(--fs-small);color:var(--teal-80);margin-top:var(--s1)}
.ph{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:var(--ph);border-radius:var(--radius);overflow:hidden;color:var(--teal-80);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600}
.card-media{aspect-ratio:3/2}
.card-media img:not(.ph-mark){position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--ease)}
@media (hover:hover){.card:hover .card-media img:not(.ph-mark){transform:scale(1.04)}}
.ph-mark{width:90px;opacity:.35}
.ph-portrait{aspect-ratio:4/5}
.ph-portrait img{width:110px;opacity:.35}

/* Services */
.services{display:grid;grid-template-columns:1.4fr 1fr;gap:var(--s6)}
.service{padding:var(--s7);border-radius:var(--radius);background:var(--white)}
.service-main{background:var(--teal);color:var(--white)}
.service h3,.service .h3{margin-bottom:var(--s3);font-size:var(--fs-h3)}
.service p{max-width:44ch}
.service-main .service-art{max-width:420px}
.tick-list{list-style:none;padding:0;margin-top:var(--s5)}
.tick-list li{padding:var(--s3) 0;border-top:1px solid var(--line)}
.service-main .tick-list li{border-color:rgba(255,255,255,.2)}
.tick-list li::before{content:"—  ";color:var(--teal-80)}
.service-main .tick-list li::before{color:var(--sand)}
@media (max-width:900px){.services{grid-template-columns:1fr}.service{padding:var(--s6) var(--s5)}}

/* Process */
.process{background:var(--white)}
.steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:0;counter-reset:s}
.steps li{padding:var(--s5) var(--s6) 0 0;border-top:2px solid var(--teal);margin-right:var(--s6)}
.steps li:last-child{margin-right:0}
.steps h3{margin:var(--s2) 0 var(--s2)}
@media (max-width:760px){.steps{grid-template-columns:1fr;gap:var(--s7)}.steps li{margin-right:0}}

/* Split (about teaser) */
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:var(--s8);align-items:center}
.split h2{margin-bottom:var(--s5)}
@media (max-width:760px){.split{grid-template-columns:1fr;gap:var(--s6)}.ph-portrait{aspect-ratio:3/2}}

/* CTA band: the "peak" of the page, so it is the biggest type and the calmest space */
.cta-band{background:var(--teal);color:var(--white);text-align:center;padding:calc(var(--space-section) * 1.15) 0}
.cta-band h2{margin:0 auto var(--s4);max-width:18ch}
.cta-band p{max-width:44ch;margin:0 auto;color:var(--pale);font-size:var(--fs-lead);line-height:1.5}
.cta-band .actions{margin-top:var(--s7)}

/* ===== 7. Forms: 56px fields, labels above, errors named in words and not only color ===== */
.contact-grid{display:grid;grid-template-columns:1.3fr .8fr;gap:var(--s8);align-items:start}
.form-card{background:var(--white);padding:var(--s7);border-radius:var(--radius);scroll-margin-top:100px}
.field{margin-bottom:var(--s5)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)}
label{display:block;font-size:var(--fs-label);font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:var(--s2)}
input,select,textarea{width:100%;font:inherit;color:var(--teal);background:var(--pale);border:1.5px solid transparent;border-radius:2px;padding:1rem 1.1rem;min-height:3.5rem;transition:border-color var(--t-fast) var(--ease),background-color var(--t-fast) var(--ease)}
input:hover,select:hover,textarea:hover{border-color:var(--line)}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--teal);background-color:var(--white)}
textarea{resize:vertical;min-height:9rem;line-height:1.5}
small{display:block;margin-top:var(--s2);font-size:var(--fs-small);color:var(--teal-80)}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--error)}
.field-error{margin-top:var(--s2);font-size:var(--fs-small);font-weight:600;color:var(--error)}
.field-error::before{content:"! ";font-weight:700}
.hp{position:absolute;left:-9999px;height:0;overflow:hidden}
.alert{padding:var(--s4) var(--s5);border-radius:2px;margin-bottom:var(--s5);font-weight:600}
.alert.ok{background:var(--teal);color:var(--white)}
.alert.bad{background:var(--sand);color:var(--teal)}
.form-card .btn{margin-top:var(--s2)}
.direct h2{margin-bottom:var(--s4)}
.direct dl{margin-top:var(--s6)}
.direct dt{font-size:var(--fs-label);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-80);margin-top:var(--s5)}
.direct dd{margin:var(--s1) 0 0}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;gap:var(--s7)}.form-card{padding:var(--s5)}.field-row{grid-template-columns:1fr;gap:0}}

/* ===== 8. Footer ===== */
.site-footer{background:var(--teal);color:var(--white);padding:var(--s9) 0 var(--s5)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1fr 1.2fr;gap:var(--s8)}
.foot-about{margin-top:var(--s5);color:var(--pale);font-size:var(--fs-small);max-width:28ch}
.foot-title{font-size:var(--fs-label);font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--sand);margin-bottom:var(--s4)}
.foot-list{list-style:none;padding:0}
.foot-list li{padding:var(--s2) 0;font-size:var(--fs-small)}
.foot-list a{text-decoration:none;transition:color var(--t-fast) var(--ease)}
.foot-list a:hover{text-decoration:underline;text-decoration-color:var(--sand);text-underline-offset:5px}
.foot-base{display:flex;justify-content:space-between;gap:var(--s4);margin-top:var(--s8);padding-top:var(--s5);border-top:1px solid rgba(255,255,255,.18);font-size:var(--fs-label);color:var(--pale)}
.foot-base a{text-decoration:none;color:var(--sand)}
@media (max-width:760px){.foot-grid{grid-template-columns:1fr;gap:var(--s7)}.site-footer{padding:var(--s8) 0 7rem}}

/* Mobile quote bar: the main action stays one tap away */
.quote-bar{display:none}
@media (max-width:760px){
  .quote-bar{display:flex;gap:var(--s2);position:fixed;left:0;right:0;bottom:0;z-index:40;padding:var(--s2) var(--gutter) calc(var(--s2) + env(safe-area-inset-bottom));background:rgba(232,237,245,.96);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--line)}
  .quote-bar .btn{flex:1;min-height:3.25rem;padding:0 var(--s2);font-size:.75rem}
  .quote-bar .btn::after{content:none}
}

/* ===== 9. Motion: reveals are slower and staggered so a row arrives as a sequence ===== */
.js-reveal .reveal{opacity:0;transform:translateY(24px);transition:opacity var(--t-slow) var(--ease),transform var(--t-slow) var(--ease);transition-delay:calc(var(--rd,0) * 110ms)}
.js-reveal .reveal.in{opacity:1;transform:none}
.grid-3>.reveal:nth-child(3n+2),.steps>.reveal:nth-child(2),.services>.reveal:nth-child(2){--rd:1}
.grid-3>.reveal:nth-child(3n+3),.steps>.reveal:nth-child(3){--rd:2}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .js-reveal .reveal{opacity:1;transform:none}
}

/* ===== Architectural layer =====
   Line drawings that draw themselves on scroll, a blueprint grid in the hero,
   dimension lines above section titles, and a measuring ruler on wide screens. */

/* Drawing engine: JS sets --p (0..1) per element. Without JS, or with reduced motion, --p stays 1 (fully drawn). */
.illus{color:var(--teal);--p:1}
.js .draw{--p:0}
.illus svg{display:block;width:100%;height:auto;overflow:visible}
.illus path{
  fill:none;stroke:currentColor;stroke-linecap:butt;stroke-linejoin:round;
  --q:clamp(0, calc(var(--p) * (1 + var(--n) * .03) - var(--i) * .03), 1);
  stroke-dasharray:1px 2px;stroke-dashoffset:calc((1 - var(--q)) * 1px);
}
.illus svg{--n:30}
.illus .m{stroke-width:2.4}
.illus .t{stroke-width:1.5}
.illus .d{stroke-width:1;opacity:.7}
.illus text{fill:currentColor;stroke:none;font:600 16px var(--font);letter-spacing:.1em;opacity:clamp(0, calc((var(--p) - .75) * 4), 1)}

.step-art{max-width:300px;margin-bottom:22px}
/* Labels are in viewBox units, so each drawing needs its own size to read the same (~10px) on screen */
.illus svg[viewBox="0 0 340 340"] text{font-size:11.5px}
.illus svg[viewBox="0 0 270 300"] text{font-size:9px}
.service-art{max-width:300px;margin-top:30px}
.service-main .service-art{color:var(--sand)}
.head-art{position:absolute;right:var(--gutter);bottom:0;height:200px}
.head-art svg{height:100%;width:auto}
.page-head.has-art .wrap{position:relative;min-height:200px}
.page-head.has-art{padding-bottom:56px}
.cta-band{position:relative;overflow:hidden}
.cta-band .wrap{position:relative;z-index:1}
.cta-art{position:absolute;right:-70px;bottom:-40px;width:min(440px,45vw);color:var(--sand);opacity:.14}
@media (max-width:900px){.head-art{display:none}.page-head.has-art{padding-bottom:28px}}

/* Dimension line above each section title: |————————| */
.section-head::before{
  content:"";display:block;height:11px;width:min(100%,420px);margin-bottom:24px;
  border-left:1.5px solid var(--teal);border-right:1.5px solid var(--teal);
  background:linear-gradient(var(--teal),var(--teal)) center/100% 1.5px no-repeat;
  transform-origin:left center;transform:scaleX(clamp(0, calc(var(--p, 1) * 1.4), 1));opacity:.45;
}

/* Hero: blueprint grid, corner brackets, pen-stroke wipe, slight parallax */
.hero{position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(29,67,70,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(29,67,70,.07) 1px,transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent);mask-image:linear-gradient(to bottom,#000 55%,transparent);
}
.hero::after{
  content:"";position:absolute;inset:22px;pointer-events:none;opacity:.35;
  background:
    linear-gradient(var(--teal),var(--teal)) 0 0/18px 1.5px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 0 0/1.5px 18px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/18px 1.5px no-repeat,
    linear-gradient(var(--teal),var(--teal)) 100% 100%/1.5px 18px no-repeat;
}
.hero .wrap{position:relative;z-index:1}
.hero-art{transform:translateY(calc(var(--hp, 0) * -26px))}
.hero-art img{animation:wipe 1.8s cubic-bezier(.65,0,.35,1) .15s both}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:900px){.hero::after{display:none}}

/* Measuring ruler: wide screens only, in the right margin */
.ruler{display:none}
@media (min-width:1280px){
  .ruler{display:block;position:fixed;right:20px;top:20vh;height:60vh;width:70px;z-index:30;pointer-events:none;color:var(--teal);--sp:0;transition:color .3s}
  .ruler.is-dark{color:var(--sand)}
  .ruler-track{position:absolute;right:0;top:0;bottom:0;width:14px;opacity:.5;
    background:
      repeating-linear-gradient(to bottom,currentColor 0 1px,transparent 1px 12px) right/8px 100% no-repeat,
      repeating-linear-gradient(to bottom,currentColor 0 1.5px,transparent 1.5px 60px) right/14px 100% no-repeat}
  .ruler-mark{position:absolute;right:0;top:calc(var(--sp) * 100%);width:22px;height:2px;background:currentColor;transform:translateY(-50%)}
  .ruler-val{position:absolute;right:30px;top:50%;transform:translateY(-50%);font:600 11px var(--font);letter-spacing:.1em;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){
  .js .draw{--p:1}
  .hero-art{transform:none}
  .hero-art img{animation:none}
}

/* ===== 10. Phones =====
   Native-feeling details: clean iOS fields, a full-screen menu, full-width buttons,
   and a bottom quote bar that only appears when it adds something (set by main.js). */
input,textarea,select{-webkit-appearance:none;appearance:none}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231d4346' stroke-width='1.6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 1.1rem center;background-size:12px 8px;padding-right:2.75rem}

@media (max-width:900px){
  .menu-open{overflow:hidden}
  .nav{inset:64px 0 0 0;height:calc(100dvh - 64px);overflow-y:auto;justify-content:flex-start;
    padding:var(--s4) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
    transform:none;opacity:0;transition:opacity var(--t-base) var(--ease),visibility var(--t-base)}
  .menu-open .nav{opacity:1}
  .nav a:not(.btn){font-size:1.75rem;font-weight:400;letter-spacing:-.005em;text-transform:none;padding:.9rem 0}
  .nav a[aria-current="page"]{font-weight:600}
  .nav a.lang:not(.btn){order:10;border-bottom:0;margin-top:var(--s5);padding:var(--s2) 0;font-size:var(--fs-label);font-weight:700;letter-spacing:.2em;text-transform:uppercase}
  .nav .btn{background:var(--teal);color:var(--white);margin-top:var(--s6)}
  .nav>*{opacity:0;transform:translateY(14px);transition:opacity var(--t-base) var(--ease),transform var(--t-base) var(--ease)}
  .menu-open .nav>*{opacity:1;transform:none}
  .menu-open .nav>:nth-child(2){transition-delay:40ms}.menu-open .nav>:nth-child(3){transition-delay:80ms}
  .menu-open .nav>:nth-child(4){transition-delay:120ms}.menu-open .nav>:nth-child(5){transition-delay:160ms}
  .menu-open .nav>:nth-child(6){transition-delay:200ms}.menu-open .nav>:nth-child(7){transition-delay:240ms}
}

@media (max-width:560px){
  .actions{flex-direction:column;gap:var(--s3)}
  .actions .btn,.form-card .btn,.direct .btn,.section-more .btn{width:100%}
  .cta-band .actions{margin-top:var(--s6)}
  .hero .lead{max-width:none}
  .foot-list li{padding:0}
  .foot-list a{display:block;padding:.65rem 0}
  .foot-base{flex-direction:column;gap:var(--s3)}
}

@media (max-width:760px){
  .quote-bar .btn{font-size:.75rem;letter-spacing:.1em;white-space:nowrap}
  .quote-bar .btn-primary{flex:1.6}
  /* With JS, the bar waits until the page's own buttons have scrolled away, and steps aside for the menu and the closing band */
  .js .quote-bar{transform:translateY(110%);transition:transform var(--t-base) var(--ease)}
  .js .bar-on .quote-bar{transform:none}
  .page-contact .quote-bar{display:none}
  .page-contact .site-footer{padding-bottom:var(--s6)}
}

/* ===== 11. Visual layer v3 =====
   Paper grain · logo intro · "du plan à la réalité" scene · services sticky split · cartouche footer */

/* Paper grain: a faint drafting-paper texture over everything (decorative, never intercepts clicks) */
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:150;opacity:.07;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .11 0 0 0 0 .26 0 0 0 0 .27 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* Logo intro: first visit of the session only (flag set in <head>). Outlines draw, fill arrives, screen lifts.
   A CSS safety timer hides it even if JavaScript fails. */
.intro-screen{display:none}
.intro .intro-screen{display:flex;position:fixed;inset:0;z-index:200;background:var(--pale);flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);
  animation:introSafety .01s 3.6s forwards}
.intro body{overflow:hidden}
.intro-out .intro-screen{opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s}
@keyframes introSafety{to{opacity:0;visibility:hidden}}
.intro-mark{width:min(220px,52vw);color:var(--teal)}
.intro-mark svg{display:block;width:100%;height:auto}
.logo-draw path{fill:currentColor;fill-opacity:0;stroke:currentColor;stroke-width:5;stroke-linejoin:round;stroke-dasharray:1px 2px;stroke-dashoffset:1px}
.intro .logo-draw path{animation:logoStroke 1.15s var(--ease) forwards,logoFill .5s ease forwards;animation-delay:calc(var(--i) * 45ms),1.15s}
@keyframes logoStroke{to{stroke-dashoffset:0}}
@keyframes logoFill{to{fill-opacity:1;stroke-width:0}}
.intro-tag{font-size:var(--fs-label);font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--teal-80);opacity:0}
.intro .intro-tag{animation:introTag .8s var(--ease) 1.25s forwards}
@keyframes introTag{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.intro-delay .hero-art img{animation-delay:2.1s}

/* "Du plan à la réalité": a sticky scene. JS sets --sp (0..1) across the scroll.
   0 → .35 the plan draws · .35 → .65 the photo develops underneath · .72 → .92 the lines lift away */
.scene{position:relative;border-top:1px solid var(--line)}
.js .scene{height:230vh}
.scene-sticky{padding:var(--space-section) 0}
.js .scene-sticky{position:sticky;top:0;height:100vh;padding:84px 0 0;display:flex;align-items:center}
.scene-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:var(--s8);align-items:center;width:100%}
.scene-text h2{margin-bottom:var(--s5)}
.scene-steps{list-style:none;padding:0;display:flex;gap:var(--s6);margin-top:var(--s7);font-size:var(--fs-label);font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.scene-steps li{position:relative;padding-top:var(--s4);color:var(--teal-80);opacity:.45;transition:opacity var(--t-base) var(--ease),color var(--t-base) var(--ease)}
.scene-steps li::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;background:currentColor;transform:scaleX(.25);transform-origin:left;transition:transform var(--t-slow) var(--ease)}
.scene:not(.is-real) .step-plan,.scene.is-real .step-real{opacity:1;color:var(--teal)}
.scene:not(.is-real) .step-plan::before,.scene.is-real .step-real::before{transform:scaleX(1)}
.scene-frame{--sp:1;--dev:clamp(0, calc((var(--sp) - .35) / .3), 1);--lift:clamp(0, calc((var(--sp) - .72) / .2), 1);
  position:relative;margin:0;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--white);box-shadow:0 0 0 1px var(--line)}
.scene-photo{position:absolute;inset:0;opacity:var(--dev);transform:scale(calc(1.06 - .06 * var(--dev)))}
.scene-photo.ph{background:linear-gradient(160deg,#f3f6fa 0%,var(--ph) 55%,#cdd8e4 100%)}
.scene-photo.ph{flex-direction:row;align-items:flex-start;justify-content:flex-end;padding:var(--s4);gap:var(--s2)}
.scene-photo.ph .ph-mark{width:40px}
.scene-photo img:not(.ph-mark){width:100%;height:100%;object-fit:cover}
.scene-lines{position:absolute;inset:10% 8%;display:flex;align-items:center;opacity:calc(1 - var(--lift) * .88);transform:translateY(calc(var(--lift) * -10px))}
.scene-scale{position:absolute;left:var(--s4);bottom:var(--s3);font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-80)}
@media (max-width:900px){
  .js .scene{height:190vh}
  .js .scene-sticky{padding-top:64px}
  .scene-grid{grid-template-columns:1fr;gap:var(--s5)}
  .scene-text .lead{font-size:var(--fs-body)}
  .scene-steps{margin-top:var(--s4)}
}
@media (max-width:900px) and (max-height:760px){.scene-text .lead{display:none}}

/* Services: sticky split. The drawing on the left swaps as each service scrolls past (set by main.js) */
.split-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--s8);align-items:start}
.split-art{align-self:stretch}
.split-panel{position:sticky;top:120px;aspect-ratio:1;background:var(--white);border-radius:var(--radius);box-shadow:0 0 0 1px var(--line)}
.split-layer{position:absolute;inset:10%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s5);opacity:0;transition:opacity .7s var(--ease)}
.split-layer.is-active{opacity:1}
.split-illus{width:100%}
.split-illus-tall{width:78%}
.split-scale{font-size:.6875rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--teal-80)}
.split-block{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:var(--s7) 0;border-top:1px solid var(--line)}
.split-block:first-child{border-top:0;padding-top:0}
.split-block h2{margin:var(--s3) 0 var(--s4)}
.split-inline{display:none}
@media (max-width:900px){
  .split-grid{grid-template-columns:1fr;gap:0}
  .split-art{display:none}
  .split-block{min-height:0;padding:var(--s7) 0}
  .split-inline{display:block;max-width:340px;margin-top:var(--s6)}
  .split-inline-tall{max-width:250px}
}

/* Footer title block, like the cartouche on an architect's drawing sheet */
.cartouche{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1.2fr;gap:1px;margin-top:var(--s8);background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.22)}
.c-cell{background:var(--teal);padding:var(--s3) var(--s4);display:flex;flex-direction:column;gap:var(--s1);min-width:0}
.c-k{font-size:.6875rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--sand)}
.c-v{font-size:var(--fs-small);color:var(--white)}
.c-v a{color:var(--white);text-decoration:none;border-bottom:1px solid var(--sand)}
.c-full{grid-column:1/-1;padding-top:var(--s3);padding-bottom:var(--s3)}
.c-copy{font-size:var(--fs-label);color:var(--pale)}
@media (max-width:760px){
  .cartouche{grid-template-columns:1fr 1fr}
  .c-main{grid-column:1/-1}
}

@media (prefers-reduced-motion:reduce){
  .js .scene{height:auto}
  .js .scene-sticky{position:static;height:auto;padding:var(--space-section) 0}
  .scene-frame{--sp:1}
}

/* ===== 12. Content pass (2026-11-13): portrait figures for design visuals ===== */
.portrait-media{position:relative;margin:0;aspect-ratio:4/5;border-radius:var(--radius);overflow:hidden;background:var(--ph)}
.portrait-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.portrait-media figcaption{position:absolute;left:var(--s3);bottom:var(--s3);padding:6px 10px;background:rgba(232,237,245,.92);color:var(--teal);font-size:.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-radius:2px}
@media (max-width:760px){.portrait-media{aspect-ratio:3/2}}
/* Scale label stays legible once a real image sits under it */
.scene-frame:has(.scene-photo:not(.ph)) .scene-scale{background:rgba(232,237,245,.92);color:var(--teal);padding:4px 8px;border-radius:2px}

/* ===== 13. Luxury header, desktop only (2026-11-13) =====
   Centered monogram: links split left and right, logo in the middle.
   At the top the bar is open and airy (full lockup, no border). After the first
   scroll it frosts, the lockup gives way to the mark, and a dimension line
   (hairline with end ticks) draws itself outward from the centre.
   Phones keep the approved bar and full-screen menu (sections 5 and 10). */
@media (min-width:901px){
  .site-header{background:transparent;border-bottom-color:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    transition:background-color var(--t-base) var(--ease),backdrop-filter var(--t-base) var(--ease)}
  .site-header.is-scrolled{background:rgba(232,237,245,.86);backdrop-filter:blur(14px) saturate(1.1);-webkit-backdrop-filter:blur(14px) saturate(1.1)}

  .site-header .bar{position:relative;max-width:1320px;min-height:112px;padding-top:0;padding-bottom:0}
  .site-header.is-scrolled .bar{min-height:72px}

  /* Monogram, dead centre. Lockup and mark share one cell and cross-fade */
  .brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;z-index:1}
  .brand img{grid-area:1/1;transition:opacity var(--t-base) var(--ease),transform var(--t-slow) var(--ease)}
  .brand-full{width:164px}
  .brand-mark{display:block;width:50px;opacity:0;transform:scale(.8)}
  .is-scrolled .brand-full{width:164px;opacity:0;transform:scale(.82)}
  .is-scrolled .brand-mark{opacity:1;transform:none}

  /* Links: smaller, wider tracked, quieter. Home is the logo, so its link hides here */
  .nav{width:100%;gap:var(--s6)}
  .nav .nav-home{display:none}
  .nav .nav-contact{margin-left:auto}
  .nav a:not(.btn){font-size:.75rem;letter-spacing:.22em;padding:var(--s3) 0}
  .nav a:not(.btn)::after{height:1px;bottom:5px;transform-origin:center}
  .nav .lang{font-weight:600;color:var(--teal-80)}
  .nav .lang::before{content:attr(data-current) "\2002/\2002";color:var(--teal);font-weight:600}
  .nav .lang::after{display:none}
  .nav .btn{min-height:2.75rem;padding:0 1.5rem;font-size:.6875rem;letter-spacing:.22em;border-width:1px}

  /* Dimension line along the bottom edge, drawn from the centre on scroll */
  .site-header .bar::after{content:"";position:absolute;bottom:-4px;left:max(var(--gutter),env(safe-area-inset-left));right:max(var(--gutter),env(safe-area-inset-right));height:9px;
    border-left:1px solid rgba(29,67,70,.45);border-right:1px solid rgba(29,67,70,.45);
    background:linear-gradient(rgba(29,67,70,.28),rgba(29,67,70,.28)) center/100% 1px no-repeat;
    transform:scaleX(0);opacity:0;transition:transform 1.1s var(--ease),opacity var(--t-base) var(--ease);pointer-events:none}
  .site-header.is-scrolled .bar::after{transform:none;opacity:1}
}
/* Mid widths: tighten so the two link groups never touch the monogram */
@media (min-width:901px) and (max-width:1180px){
  .nav{gap:var(--s5)}
  .nav a:not(.btn){letter-spacing:.18em}
  .nav .btn{padding:0 1.1rem}
  .brand-full,.is-scrolled .brand-full{width:140px}
  .nav .lang::before{content:none}
}
@media (min-width:901px) and (max-width:1000px){
  .nav{gap:var(--s4)}
  .brand-full,.is-scrolled .brand-full{width:124px}
  .nav .btn{padding:0 .9rem;letter-spacing:.16em}
}
@media (min-width:901px) and (prefers-reduced-motion:reduce){
  .site-header .bar::after,.brand img{transition:none}
}