/* ============================================================
   simodemo.eu — stylesheet
   Design tokens
   ============================================================ */
:root{
  --steel:#EEF1F4;        /* consultant background */
  --ink:#141A21;          /* dark text */
  --asphalt:#0F1319;      /* rider background */
  --paper:#F4EFE7;        /* photography background — warm print paper */
  --signal:#1F5EDB;       /* consultant accent — signal blue */
  --strobe:#E8402A;       /* rider accent — strobe red */
  --amber:#F5A623;        /* secondary rider accent */
  --sepia:#B45309;        /* photography accent — dark amber */
  --line:#C9D1DA;
  --line-dark:#2A323D;
  --line-warm:#DDD3C2;
  --display:'Anton', sans-serif;
  --body:'IBM Plex Sans', sans-serif;
  --mono:'IBM Plex Mono', monospace;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:var(--body);color:var(--ink);background:var(--steel);line-height:1.6;
  -webkit-text-size-adjust:100%;}
img{max-width:100%;height:auto;display:block;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;}
.dark :focus-visible{outline-color:var(--amber);}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0.9rem clamp(1rem,3vw,1.5rem);
  background:rgba(238,241,244,0.88);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{font-family:var(--display);font-size:1.15rem;letter-spacing:0.06em;text-decoration:none;}
.brand span{color:var(--strobe);}
nav ul{display:flex;gap:1.5rem;list-style:none;}
nav ul a{font-family:var(--mono);font-size:0.8rem;text-decoration:none;letter-spacing:0.05em;}
nav ul a:hover{color:var(--signal);}
.nav-toggle{
  display:none;background:none;border:2px solid var(--ink);color:var(--ink);
  font-family:var(--mono);font-size:0.75rem;letter-spacing:0.08em;
  padding:0.45rem 0.8rem;cursor:pointer;
}

/* ---------- HERO — TRIPTYCH ---------- */
.hero{display:flex;min-height:100svh;}
.half{
  flex:1;display:flex;flex-direction:column;justify-content:center;
  padding:7rem clamp(1.5rem,3vw,3rem) 4rem;position:relative;overflow:hidden;
  transition:flex .45s ease;min-width:0;
}
@media (hover:hover) and (min-width:901px){ .hero:hover .half:hover{flex:1.35;} }
.half.tech{
  background-color:var(--asphalt);color:#E9EDF2;
  background-image:linear-gradient(rgba(15,19,25,.82),rgba(15,19,25,.66)),url('../assets/img/devops.jpg');
  background-size:cover;background-position:center;
}
.half.rider{
  background-color:var(--asphalt);color:#E9EDF2;
  background-image:linear-gradient(90deg, rgba(15,19,25,.90) 0%, rgba(15,19,25,.72) 50%, rgba(15,19,25,.52) 100%),url('../assets/img/pbr.png');
  background-size:cover;background-position:right center;background-repeat:no-repeat;
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);margin-left:-4.5%;}
.half.photo{
  background-color:var(--asphalt);color:#E9EDF2;
  background-image:linear-gradient(90deg, rgba(15,19,25,.86) 0%, rgba(15,19,25,.66) 55%, rgba(15,19,25,.50) 100%),url('../assets/img/photo.jpg');
  background-size:cover;background-position:center;background-repeat:no-repeat;
  clip-path:polygon(9% 0,100% 0,100% 100%,0 100%);margin-left:-4.5%;
  padding-left:clamp(2.5rem,5vw,4.5rem);}
.eyebrow{font-family:var(--mono);font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;margin-bottom:1rem;}
.tech .eyebrow{color:#6f9bff;}
.rider .eyebrow{color:var(--strobe);}
.photo .eyebrow{color:#E0A05A;}
.tech h1{color:#fff;}
.tech p{color:#C7D0D9;}
.photo h1{color:#fff;}
.photo p{color:#C7D0D9;}
.half h1{
  font-family:var(--display);font-size:clamp(1.9rem,3.1vw,3.3rem);
  line-height:1.05;letter-spacing:0.01em;text-transform:uppercase;margin-bottom:1.2rem;
  overflow-wrap:break-word;
}
.tech h1 em{font-style:normal;color:#6f9bff;}
.rider h1 em{font-style:normal;color:var(--amber);}
.photo h1 em{font-style:normal;color:#E0A05A;}
.half p{max-width:34ch;margin-bottom:1.8rem;font-size:clamp(0.9rem,1.1vw,1rem);}
.rider p{color:#B9C2CC;}
.cta{
  display:inline-block;font-family:var(--mono);font-size:0.85rem;letter-spacing:0.06em;
  padding:0.75rem 1.4rem;text-decoration:none;border:2px solid currentColor;
  transition:background .2s,color .2s;width:max-content;max-width:100%;
}
.tech .cta:hover{background:var(--signal);border-color:var(--signal);color:#fff;}
.rider .cta{color:var(--amber);}
.rider .cta:hover{background:var(--strobe);border-color:var(--strobe);color:#fff;}
.photo .cta{color:#E0A05A;}
.photo .cta:hover{background:#E0A05A;border-color:#E0A05A;color:var(--ink);}

/* strobe bar animation on rider half */
.strobe-bar{position:absolute;top:0;left:0;right:0;height:5px;
  background:linear-gradient(90deg,var(--strobe) 0 50%,var(--signal) 50% 100%);
  animation:strobe 2.4s steps(2) infinite;}
@keyframes strobe{50%{background:linear-gradient(90deg,var(--signal) 0 50%,var(--strobe) 50% 100%);}}

/* ---------- SECTIONS ---------- */
section{padding:5.5rem clamp(1rem,3vw,1.5rem);}
.wrap{max-width:1100px;margin:0 auto;}
.sec-head{display:flex;align-items:baseline;gap:1rem;margin-bottom:2.5rem;flex-wrap:wrap;}
.sec-head h2{font-family:var(--display);font-size:clamp(1.8rem,3.4vw,2.8rem);text-transform:uppercase;letter-spacing:0.02em;}
.sec-head .tag{font-family:var(--mono);font-size:0.78rem;letter-spacing:0.12em;text-transform:uppercase;}

/* about */
#about{background:#fff;border-top:1px solid var(--line);}
#about .lede{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500;line-height:1.55;max-width:62ch;}
#about .lede strong.blue{color:var(--signal);}
#about .lede strong.red{color:var(--strobe);}
#about .lede strong.warm{color:var(--sepia);}

/* consulting */
#consulting{
  background-color:var(--steel);
  background-image:linear-gradient(rgba(238,241,244,.85),rgba(238,241,244,.90)),var(--bg-photo,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
}
#consulting .tag{color:var(--signal);}
.sec-lede{font-size:clamp(1.05rem,1.6vw,1.25rem);font-weight:500;line-height:1.55;max-width:60ch;}

/* rider section */
#riders{
  background-color:var(--asphalt);color:#E9EDF2;
  background-image:linear-gradient(rgba(15,19,25,.80),rgba(15,19,25,.88)),var(--bg-photo,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  clip-path:polygon(0 3.5rem,100% 0,100% 100%,0 100%);padding-top:8rem;}
#riders .tag{color:var(--strobe);}
#riders .sec-head h2{color:#E9EDF2;}
.rider-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:3rem;align-items:center;}
.rider-grid p{color:#B9C2CC;margin-bottom:1.2rem;}
.stats{display:flex;gap:2.5rem;margin:1.8rem 0;flex-wrap:wrap;}
.stat b{font-family:var(--display);font-size:2rem;display:block;color:var(--amber);letter-spacing:0.02em;}
.stat span{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:#8B95A1;}
.channels{display:flex;gap:1rem;flex-wrap:wrap;}
.video-frame{
  aspect-ratio:16/9;background:#161C24;border:1px solid var(--line-dark);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.8rem;color:#8B95A1;text-align:center;padding:1rem;
}
.video-frame iframe{width:100%;height:100%;border:0;}
.video-cta{display:flex;flex-direction:column;align-items:center;gap:1.1rem;}
.video-cta p{color:#B9C2CC;max-width:34ch;margin:0;}
#riders .cta:hover{background:var(--amber);border-color:var(--amber);color:var(--ink);}

/* photography section */
#photo{
  background-color:var(--paper);
  background-image:linear-gradient(rgba(244,239,231,.84),rgba(244,239,231,.90)),var(--bg-photo,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  clip-path:polygon(0 0,100% 3.5rem,100% 100%,0 100%);padding-top:8rem;}
#photo .tag{color:var(--sepia);}
.photo-lede{max-width:62ch;margin-bottom:2.5rem;}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;}
.ph{margin:0;}
.ph-frame{
  aspect-ratio:3/2;background:#E7DFD2;border:1px solid var(--line-warm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--mono);font-size:0.72rem;color:#9A8C74;text-align:center;padding:0.5rem;
}
.ph img{width:100%;height:100%;object-fit:cover;}
.ph figcaption{font-family:var(--mono);font-size:0.72rem;color:#7A6E5B;margin-top:0.5rem;letter-spacing:0.04em;}
.gallery-note{margin-top:2rem;font-family:var(--mono);font-size:0.8rem;}
.gallery-note a{color:var(--sepia);}

/* also strip */
#also{background:#fff;border-bottom:1px solid var(--line);}
.also-items{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2rem;}
.also-items h3{font-family:var(--mono);font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:0.4rem;}
.also-items p{font-size:0.92rem;color:#3C4652;}

/* contact / footer */
footer{
  background-color:var(--ink);color:#E9EDF2;
  background-image:linear-gradient(rgba(20,26,33,.86),rgba(20,26,33,.92)),var(--bg-photo,none);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  padding:4.5rem clamp(1rem,3vw,1.5rem) 2.5rem;}
footer .wrap{display:flex;justify-content:space-between;align-items:flex-start;gap:2.5rem;flex-wrap:wrap;}
footer h2{font-family:var(--display);font-size:clamp(1.8rem,3vw,2.6rem);text-transform:uppercase;margin-bottom:1rem;}
.contact-intro{flex:1 1 260px;max-width:40ch;}
.contact-intro p{color:#B9C2CC;}
.foot-note{font-family:var(--mono);font-size:0.72rem;color:#8B95A1;margin-top:3rem;text-align:center;width:100%;}

/* contact form */
.contact-form{flex:0 1 420px;display:flex;flex-direction:column;gap:0.9rem;width:100%;}
.field{display:flex;flex-direction:column;}
.contact-form label{font-family:var(--mono);font-size:0.72rem;letter-spacing:0.1em;text-transform:uppercase;color:#8B95A1;margin-bottom:0.35rem;}
.contact-form input,.contact-form textarea{
  font-family:var(--body);font-size:0.95rem;color:#E9EDF2;background:#1A212B;
  border:1px solid var(--line-dark);border-radius:2px;padding:0.7rem 0.85rem;width:100%;
  transition:border-color .2s;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--amber);}
.contact-form textarea{resize:vertical;min-height:120px;}
.contact-form button{
  align-self:flex-start;font-family:var(--mono);font-size:0.85rem;letter-spacing:0.06em;
  padding:0.75rem 1.4rem;border:2px solid var(--amber);color:var(--amber);background:none;
  cursor:pointer;transition:background .2s,color .2s;
}
.contact-form button:hover{background:var(--amber);color:var(--ink);}
.contact-form button:disabled{opacity:.5;cursor:progress;}
.form-status{font-family:var(--mono);font-size:0.8rem;line-height:1.4;margin:0;min-height:1.2em;}
.form-status.sending{color:#8B95A1;}
.form-status.ok{color:#5BCB8B;}
.form-status.err{color:var(--strobe);}
/* honeypot — kept out of view and out of the tab order */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- SCROLL REVEAL (js-driven) ---------- */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease;}
.reveal.visible{opacity:1;transform:none;}

/* ============================================================
   THEMATIC BACKGROUNDS — one motif per section
   Each section renders a subtle CSS pattern behind its content.
   To layer a real photo on top of the pattern, set --bg-photo on
   the section HERE in this stylesheet (NOT as an inline style="" —
   the Content-Security-Policy blocks inline styles), e.g.:
     #consulting{ --bg-photo:url('../assets/img/devops.jpg'); }
   The translucent overlay (set on each section's background above)
   keeps text readable over any photo.
   ============================================================ */
#consulting,#riders,#photo,footer{position:relative;overflow:hidden;}
/* keep every section's content above its pattern layer */
#consulting > .wrap,#riders > .wrap,#photo > .wrap,footer > .wrap{position:relative;z-index:1;}

/* DevOps — blueprint grid + circuit nodes */
#consulting::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(31,94,219,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,94,219,.06) 1px, transparent 1px),
    radial-gradient(rgba(31,94,219,.11) 1.5px, transparent 2px);
  background-size:46px 46px,46px 46px,46px 46px;
  background-position:0 0,0 0,23px 23px;
}

/* Riders — hazard motion stripes + strobe spotlight */
#riders::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(245,166,35,.07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(232,64,42,.05) 0 3px, transparent 3px 26px),
    repeating-linear-gradient(-45deg, rgba(31,94,219,.05) 0 3px, transparent 3px 26px);
}

/* Photography — film grain over warm paper */
#photo::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.38;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Contact — faint amber dot grid */
footer::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(rgba(245,166,35,.09) 1px, transparent 1.6px);
  background-size:26px 26px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* Tablet — hero panels get tight, stack the triptych */
@media (max-width:900px){
  .hero{flex-direction:column;min-height:auto;}
  .half{padding:6.5rem 1.5rem 3.5rem;}
  .half.rider,.half.photo{
    clip-path:polygon(0 5%,100% 0,100% 100%,0 100%);
    margin-left:0;margin-top:-5%;padding-top:5.5rem;
  }
  .half.photo{padding-left:1.5rem;}
  .half h1{font-size:clamp(2rem,7vw,2.8rem);}
  .rider-grid{grid-template-columns:1fr;}
  .gallery{grid-template-columns:repeat(2,1fr);}
  /* mobile nav */
  .nav-toggle{display:block;}
  nav ul{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:rgba(238,241,244,0.97);
    border-bottom:1px solid var(--line);
  }
  nav ul.open{display:flex;}
  nav ul.open a{display:block;padding:0.9rem 1.5rem;border-top:1px solid var(--line);}
}

/* Phone */
@media (max-width:560px){
  section{padding:4rem 1rem;}
  #riders,#photo{padding-top:6rem;}
  .half{padding:5.5rem 1.25rem 3rem;}
  .stats{gap:1.5rem;}
  .stat b{font-size:1.6rem;}
  .gallery{grid-template-columns:1fr;}
  .channels .cta{width:100%;text-align:center;}
  footer .wrap{flex-direction:column;}
}

/* Large screens — cap line lengths, keep triptych airy */
@media (min-width:1600px){
  .half{padding-top:9rem;}
  .wrap{max-width:1240px;}
}

/* Reduced motion */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .strobe-bar{animation:none;}
  .hero:hover .half:hover{flex:1;}
  .half{transition:none;}
  .reveal{opacity:1;transform:none;transition:none;}
}