/* ============================================================================
   hariri.ch
   One direction: le fil d'exécution. Scattered code becomes a system, and the
   system becomes hariri.ch. Palette pulled from the logo (navy, brushed steel)
   and from the hero's only light source, the monitor.
   ========================================================================== */

/* ---- faces: one variable grotesque doing display and body through its width
        axis, plus a mono for everything technical. 117 KB for the whole system */
@font-face{font-family:'Archivo';font-style:normal;font-weight:400 800;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-var-latin.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/plexmono-latin-400.woff2') format('woff2')}
@font-face{font-family:'Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/plexmono-latin-500.woff2') format('woff2')}

:root{
  --canvas:#0A0E15;          /* tinted toward the footage grade, never pure black */
  --deep:#05080D;
  --panel:#111823;
  --panel-2:#161F2C;
  --line:#1E2836;
  --line-soft:#182131;
  --text:#E9EEF6;
  --text-2:#93A3B8;          /* the logo's brushed steel */
  --muted:#64748B;
  --accent:#5B8CFF;          /* the monitor's own signal blue */
  --accent-hi:#8FB0FF;
  --accent-mute:rgba(91,140,255,.16);
  --ember:#FF9A4D;           /* resolution only: a fragment docking, a stage passing */
  --ember-mute:rgba(255,154,77,.14);
  --ok:#6FD3B4;
  --bad:#FF7A7A;

  --tok-key:#9BA9FF;--tok-str:#6FD3B4;--tok-num:#FF9A4D;--tok-com:#4E5D73;
  --tok-tag:#6FA8FF;--tok-att:#B7C9E8;--tok-pun:#64748B;--tok-fn:#E9EEF6;

  --display:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Plex Mono',ui-monospace,'Cascadia Code',Consolas,monospace;

  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --gut:clamp(20px,5vw,80px);
  --maxw:1360px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--canvas);color:var(--text);
  font-family:var(--display);font-variation-settings:'wdth' 100;font-weight:400;
  font-size:clamp(15.5px,1.05vw,17px);line-height:1.62;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
/* one fixed environment layer so scrolling reads as moving through a place */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(64% 46% at 78% 4%,rgba(var(--accent-rgb),.085),transparent 68%),
    radial-gradient(56% 40% at 6% 96%,rgba(var(--tok-num-rgb),.035),transparent 70%);
}
main,.nav,.foot{position:relative;z-index:1}

img,svg,canvas{display:block;max-width:100%}
a{color:var(--accent-hi);text-decoration-color:var(--accent-mute);text-underline-offset:3px}
a:hover{text-decoration-color:var(--accent)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent-mute);color:var(--text)}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:200;background:var(--accent);color:var(--deep);
  padding:11px 18px;border-radius:0 0 10px 10px;font-family:var(--mono);font-size:13px;
  text-decoration:none;transition:top .2s var(--ease)}
.skip:focus{top:0}

/* ============================ shared type ============================ */
.kick{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent);margin:0 0 16px}
.h2{font-weight:700;font-variation-settings:'wdth' 112;font-size:clamp(30px,5vw,58px);
  line-height:1.02;letter-spacing:-.028em;margin:0 0 18px;text-wrap:balance}
.h2--wide{font-size:clamp(22px,3.3vw,40px);letter-spacing:-.012em;font-variation-settings:'wdth' 104}
.lede{color:var(--text-2);font-size:clamp(15.5px,1.25vw,18px);max-width:62ch;margin:0}
.lede--wide{max-width:78ch}
.req{color:var(--ember)}

.sec{position:relative;padding:clamp(80px,11vw,170px) var(--gut);max-width:var(--maxw);margin:0 auto}
.sec__head{max-width:var(--maxw);margin:0 0 clamp(40px,5vw,76px)}

/* ============================ buttons ============================ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--mono);font-size:13px;letter-spacing:.02em;line-height:1;
  padding:12px 20px;border-radius:9px;border:1px solid var(--line);
  background:var(--panel);color:var(--text);text-decoration:none;cursor:pointer;
  transition:background .28s var(--ease),border-color .28s var(--ease),color .28s var(--ease),transform .28s var(--ease);
}
.btn:hover{border-color:var(--accent);background:var(--accent-mute);color:var(--accent-hi)}
.btn:active{transform:translateY(1px)}
.btn--accent{background:var(--accent);border-color:var(--accent);color:var(--deep);font-weight:500}
.btn--accent:hover{background:var(--accent-hi);border-color:var(--accent-hi);color:var(--deep)}
.btn--ghost{background:transparent}
@media (pointer:coarse){
  .btn{min-height:44px;padding-top:0;padding-bottom:0}
}

/* ============================ navigation ============================ */
.nav{position:fixed;left:0;right:0;top:0;z-index:100;
  transition:background .4s var(--ease),border-color .4s var(--ease),backdrop-filter .4s var(--ease);
  border-bottom:1px solid transparent}
.nav.is-stuck{background:rgba(var(--c-nav-scrim-rgb),.82);backdrop-filter:blur(14px) saturate(1.2);border-bottom-color:var(--line-soft)}
.nav__in{max-width:var(--maxw);margin:0 auto;padding:14px var(--gut);
  display:flex;align-items:center;gap:clamp(14px,3vw,40px)}
.nav__mark{font-family:var(--mono);font-size:15px;color:var(--text);text-decoration:none;letter-spacing:-.01em;flex:none}
.nav__mark i{color:var(--ember);font-style:normal}
.nav__links{display:flex;gap:clamp(12px,1.6vw,24px);margin-left:auto}
.nav__links a{font-family:var(--mono);font-size:12.5px;color:var(--text-2);text-decoration:none;
  padding:6px 0;position:relative;transition:color .25s var(--ease);white-space:nowrap}
.nav__links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;
  background:var(--accent);transition:right .32s var(--ease)}
.nav__links a:hover,.nav__links a.is-on{color:var(--text)}
.nav__links a:hover::after,.nav__links a.is-on::after{right:0}
.nav__act{display:flex;align-items:center;gap:9px;flex:none}
.nav__burger{display:none;flex-direction:column;gap:4px;background:none;border:1px solid var(--line);
  border-radius:9px;padding:11px 10px;cursor:pointer}
.nav__burger i{display:block;width:17px;height:1.5px;background:var(--text);transition:transform .3s var(--ease),opacity .3s var(--ease)}
.nav__burger[aria-expanded="true"] i:nth-child(2){transform:translateX(-3px) scaleX(.6)}
.nav__progress{height:1.5px;background:transparent}
.nav__progress i{display:block;height:100%;width:100%;transform:scaleX(0);
  background:linear-gradient(90deg,var(--accent),var(--ember));transform-origin:0 50%}

@media (max-width:1080px){
  .nav__links{display:none}
  .nav__burger{display:flex}
  .nav__act{margin-left:auto}
}
/* on the narrowest screens the nav keeps one action plus the menu. The CV
   choice moves into the drawer rather than being squeezed out of the row. */
@media (max-width:560px){
  .nav__act > .cvmenu{display:none}
  .nav__in{gap:10px;padding-inline:clamp(14px,4vw,20px)}
  .nav__act .btn{padding-inline:14px;font-size:12px}
}
.drawer__cv{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.drawer__cv a{border:1px solid var(--line);border-radius:9px;padding:11px 14px;font-size:13px}
@media (min-width:561px){.drawer__cv{display:none}}
.drawer{position:fixed;inset:56px 0 auto;z-index:99;background:rgba(var(--c-drawer-rgb),.97);
  backdrop-filter:blur(16px);border-bottom:1px solid var(--line);padding:14px var(--gut) 26px}
.drawer nav{display:flex;flex-direction:column}
.drawer a{font-family:var(--mono);font-size:16px;color:var(--text);text-decoration:none;
  padding:14px 0;border-bottom:1px solid var(--line-soft)}
.drawer a:last-child{border-bottom:0}

/* CV menu */
.cvmenu{position:relative}
.cvmenu__pop{position:absolute;right:0;top:calc(100% + 8px);min-width:230px;z-index:20;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;padding:6px}
.cvmenu__pop a,.cvmenu__pop span{display:flex;align-items:baseline;gap:8px;padding:10px 12px;border-radius:8px;
  font-family:var(--mono);font-size:12.5px;text-decoration:none;color:var(--text)}
.cvmenu__pop a:hover{background:var(--accent-mute);color:var(--accent-hi)}
.cvmenu__pop span{color:var(--muted);cursor:default}
.cvmenu__pop em{font-style:normal;font-size:10.5px;color:var(--muted);margin-left:auto}


/* ============================ FOOTER ============================ */
.foot{border-top:1px solid var(--line-soft);margin-top:clamp(50px,7vw,110px)}
.foot__in{max-width:var(--maxw);margin:0 auto;padding:clamp(40px,5vw,70px) var(--gut) clamp(34px,4vw,54px);
  display:grid;gap:22px}
.foot__mark{font-family:var(--mono);font-size:19px;margin:0 0 6px;color:var(--text)}
.foot__mark i{color:var(--ember);font-style:normal}
.foot__line{margin:0;color:var(--text-2);font-size:14px}
.foot__nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.foot__nav a{font-family:var(--mono);font-size:12.5px;color:var(--text-2);text-decoration:none}
.foot__nav a:hover{color:var(--accent-hi)}
.foot__social{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.foot__social a{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;
  color:var(--text-2);text-decoration:none;border:1px solid var(--line);border-radius:9px;padding:9px 14px}
.foot__social a:hover{border-color:var(--accent);color:var(--accent-hi)}
.foot__copy{margin:0;font-family:var(--mono);font-size:11.5px;color:var(--muted)}

/* ============================ entrances ============================ */
[data-rise]{opacity:0;transform:translateY(22px);
  transition:opacity .65s var(--ease),transform .65s var(--ease)}
[data-rise].is-in{opacity:1;transform:none}


/* an uploaded brand image, capped to the wordmark's own height */
.nav__logo{display:block;height:clamp(20px,2.2vw,30px);width:auto}

/* ============================================================================
   TOUCH TARGETS

   Scoped to coarse pointers, so the desktop design keeps its density while a
   finger gets the 44px it needs. Padding grows the hit area rather than the
   ink: nothing here changes how any of these look on a mouse-driven screen.
   ========================================================================== */
@media (pointer:coarse){
  /* the burger is THE mobile control and was 39x37 */
  .nav__burger{width:44px;height:44px;justify-content:center;align-items:center}

  /* footer links were 20px tall; the row keeps its look, the target grows */
  .foot__nav{gap:0 22px}
  .foot__nav a{display:inline-flex;align-items:center;min-height:44px}
  .foot__social a{min-height:44px}

  .skip{min-height:44px;display:inline-flex;align-items:center}

  /* "Blog" is a short word and was only 30px wide */
  .foot__nav{gap:0 14px}
  .foot__nav a{padding-inline:8px}
}

/* ============================================================================
   OFFER BAND

   The "site en 48h" promotion, printed after the services rack on the home
   page. The whole band is the link, so the target is the size of the card
   rather than the size of the words; the button inside is therefore a span,
   because an anchor inside an anchor is not markup a browser will keep.

   It reuses .btn and .kick verbatim -- nothing here restyles a button. What is
   local to the band is its own layout, its light source, and the one movement
   it makes on hover.
   ========================================================================== */
.o48band{padding-block:0}

.o48band__in{
  position:relative;overflow:hidden;display:grid;gap:22px;
  padding:clamp(22px,3.2vw,34px);
  border:1px solid var(--line);border-radius:16px;background:var(--panel);
  text-decoration:none;color:var(--text);
  transition:border-color .3s var(--ease),background .3s var(--ease),transform .3s var(--ease);
}
/* one light source, same idiom as the page's fixed environment layer */
.o48band__in::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(70% 130% at 88% 0%,var(--accent-mute),transparent 70%);
  opacity:.65;transition:opacity .35s var(--ease);
}
.o48band__copy,.o48band__cta{position:relative}

.o48band__copy{display:grid;gap:8px}
.o48band__kick{display:block;margin:0}

/* Hello Elementor's reset carries `a:active,a:hover{color:#333366}`, which at
   (0,1,1) outranks a single class on the anchor and would drop this band's
   text to dark navy on a dark panel the moment a pointer touched it. Every
   line inside therefore states its own colour instead of inheriting the
   link's, and the anchor pins its own across states. */
.o48band__in,
.o48band__in:hover,
.o48band__in:focus,
.o48band__in:active,
.o48band__in:visited{color:var(--text)}
.o48band__t{
  color:var(--text);
  font-weight:700;font-variation-settings:'wdth' 110;
  font-size:clamp(21px,2.9vw,33px);line-height:1.08;letter-spacing:-.022em;
}
.o48band__t em{font-style:normal;color:var(--accent)}
.o48band__p{color:var(--text-2);font-size:14.5px;line-height:1.55;max-width:64ch}

.o48band__cta{justify-self:start;white-space:nowrap}
.o48band__arw{width:16px;height:16px;transition:transform .3s var(--ease)}

/* The band is the link, so the button has to answer a hover it never receives
   itself. Guarded to fine pointers: on a touch screen there is no hover state
   to honour and the band would otherwise sit permanently lit after a tap. */
@media (hover:hover){
  .o48band__in:hover{border-color:var(--accent);background:var(--panel-2);transform:translateY(-2px)}
  .o48band__in:hover::before{opacity:1}
  .o48band__in:hover .o48band__arw{transform:translateX(3px)}
  .o48band__in:hover .o48band__cta{background:var(--accent-hi);border-color:var(--accent-hi)}
}
.o48band__in:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

@media (min-width:860px){
  .o48band__in{grid-template-columns:1fr auto;align-items:center;gap:clamp(24px,3vw,40px)}
  .o48band__cta{justify-self:end}
}

@media (prefers-reduced-motion:reduce){
  .o48band__in,.o48band__arw{transition:none}
  .o48band__in:hover{transform:none}
}




/* 404 page */
.error404-page {
	min-height: calc(100vh - 120px);
	display: grid;
	place-items: center;
	padding: 140px 24px 80px;
	overflow: hidden;
	position: relative;
}

.error404-page__inner {
	width: min(760px, 100%);
	text-align: center;
	position: relative;
	z-index: 1;
}

.error404-page__code {
	font-size: clamp(8rem, 25vw, 18rem);
	font-weight: 800;
	line-height: 0.8;
	letter-spacing: -0.08em;
	opacity: 0.08;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -55%);
	pointer-events: none;
	white-space: nowrap;
}

.error404-page__eyebrow {
	font-family: "IBM Plex Mono", monospace;
	font-size: 0.78rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	margin: 0 0 20px;
	opacity: 0.7;
}

.error404-page h1 {
	font-size: clamp(2.4rem, 6vw, 5rem);
	line-height: 1;
	letter-spacing: -0.045em;
	margin: 0 auto 24px;
	max-width: 700px;
}

.error404-page__text {
	font-size: clamp(1rem, 2vw, 1.15rem);
	line-height: 1.7;
	max-width: 560px;
	margin: 0 auto 36px;
	opacity: 0.7;
}

.error404-page__actions {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	flex-wrap: wrap;
}

.error404-page__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	text-decoration: none;
	font-weight: 600;
}

.error404-page__link span {
	transition: transform 0.2s ease;
}

.error404-page__link:hover span {
	transform: translateX(4px);
}

@media (max-width: 600px) {
	.error404-page {
		padding: 120px 20px 60px;
	}

	.error404-page__actions {
		flex-direction: column;
		gap: 18px;
	}
}