/* ellul.solutions: Ellul Solutions Ltd's own site. One stylesheet for every page.
   A conventional company site: one sans-serif family (Source Sans 3, self-hosted, fonts/NOTICE.txt),
   a photograph in the hero (img/NOTICE.txt), a warm yellow on charcoal, with dark text on every yellow surface, cards with a light
   shadow, a working form. */

@font-face{font-family:"Source Sans 3";src:url(/fonts/source-sans-3.woff2) format("woff2");font-weight:200 900;font-style:normal;font-display:swap}

:root{
  --yellow:#f5b91d;
  --yellow-700:#e2a50a;
  --yellow-tint:#fdf3d4;
  --on-yellow:#16171a;
  --gold-ink:#7a5800;
  --dark:#18191c;
  --dark-900:#0f1012;
  --ink:#16171a;
  --text:#3c3f45;
  --muted:#666a72;
  --line:#e2e2de;
  --soft:#f6f5f1;
  --white:#fff;
  --radius:6px;
  --shadow:0 1px 2px rgba(20,20,22,.06),0 10px 30px rgba(20,20,22,.08);
  --ease:cubic-bezier(.2,.7,.2,1);
  --font:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px}
body{margin:0;background:var(--white);color:var(--text);font:18px/1.6 var(--font)}
img,svg{display:block;max-width:100%}
a{color:var(--ink);text-decoration-color:var(--yellow);text-decoration-thickness:2px;text-underline-offset:3px}
a:hover{color:#000;text-decoration-color:var(--yellow-700)}
:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.topbar :focus-visible,.hero :focus-visible,.contact :focus-visible,.site-footer :focus-visible{outline-color:var(--yellow)}
p{margin:0 0 1em}
h1,h2,h3{color:var(--ink);margin:0;line-height:1.2;font-weight:700}
h1{font-size:clamp(2.2rem,1.4rem + 3vw,3.4rem);line-height:1.1}
h2{font-size:clamp(1.75rem,1.3rem + 1.5vw,2.35rem)}
h3{font-size:1.3rem;font-weight:600}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.skip{position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--on-yellow);padding:10px 14px;z-index:100}
.skip:focus{left:12px;top:12px}

/* ── top bar and header ─────────────────────────────── */
.topbar{background:var(--dark-900);color:#c9c9c4;font-size:14.5px}
.topbar .wrap{display:flex;justify-content:space-between;gap:20px;padding-top:7px;padding-bottom:7px}
.topbar a{color:#fff;text-decoration:none}
.topbar a:hover{text-decoration:underline;color:#fff}
.site-header{position:sticky;top:0;z-index:50;background:var(--white);border-bottom:1px solid var(--line);transition:box-shadow .3s ease}
.site-header.scrolled{box-shadow:0 6px 24px rgba(20,20,22,.08)}
.site-header .wrap{display:flex;align-items:center;gap:32px;min-height:78px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.logo svg{width:38px;height:26px;flex:none}
.logo span{font-size:23px;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.logo span b{font-weight:400;color:var(--text)}
.nav{display:flex;align-items:center;gap:28px}
.nav a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16.5px;white-space:nowrap}
.nav a:not(.btn){padding:6px 0;background:linear-gradient(var(--yellow),var(--yellow)) 0 100%/0 3px no-repeat;transition:background-size .3s var(--ease),color .2s ease}
.nav a:hover,.nav a[aria-current="page"]{color:#000}
.nav a:not(.btn):hover,.nav a[aria-current="page"]{background-size:100% 3px}

/* ── buttons ────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:var(--radius);border:2px solid var(--yellow);
  background:var(--yellow);color:var(--on-yellow);font:600 16.5px/1.2 var(--font);text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s ease,border-color .2s ease,color .2s ease,box-shadow .2s ease,transform .15s ease}
.btn:active{transform:translateY(1px)}
.btn:hover{background:var(--yellow-700);border-color:var(--yellow-700);color:var(--on-yellow)}
.btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)}
.btn-outline:hover{background:var(--yellow);border-color:var(--yellow);color:var(--on-yellow)}
.btn-ghost{background:transparent;border-color:rgba(255,255,255,.7);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.12);border-color:#fff;color:#fff}
.nav .btn{padding:10px 18px;color:var(--on-yellow)}
.nav .btn:hover{color:var(--on-yellow)}
.more{font-weight:600;text-decoration:none;color:var(--ink)}
.more::after{content:"\203A";display:inline-block;margin-left:.3em;font-size:1.15em;color:var(--gold-ink);transition:transform .2s var(--ease)}
.more:hover::after{transform:translateX(4px)}
.more:hover{text-decoration:underline}

/* ── hero ───────────────────────────────────────────── */
.hero{position:relative;color:#fff;background:var(--dark);overflow:hidden}
.hero > img{position:absolute;inset:0;z-index:0;width:100%;height:100%;object-fit:cover;object-position:60% 40%}
.hero::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(15,16,18,.9) 0%,rgba(15,16,18,.8) 45%,rgba(15,16,18,.4) 100%)}
.hero .wrap{position:relative;z-index:2;padding-top:120px;padding-bottom:150px}
.hero-copy{max-width:640px}
.hero h1{color:#fff;margin:0 0 22px}
.hero p{font-size:1.2rem;color:#e6e6e1;margin:0 0 34px}
.hero .actions{display:flex;flex-wrap:wrap;gap:14px}
.hero.small .wrap{padding-top:72px;padding-bottom:72px}
.crumbs{font-size:15px;color:#c9c9c4;margin:0 0 12px}
.crumbs a{color:#fff}

/* trust bar, overlapping the hero */
.trust{position:relative;z-index:2;margin-top:-64px}
.trust ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);background:#fff;border-radius:var(--radius);box-shadow:var(--shadow)}
.trust li{display:flex;gap:16px;align-items:flex-start;padding:28px 30px}
.trust li + li{border-left:1px solid var(--line)}
.trust strong{display:block;color:var(--ink);font-size:18px;margin-bottom:2px}
.trust span{font-size:16px;color:var(--muted);line-height:1.5}
.icon{flex:none;width:46px;height:46px;border-radius:50%;background:var(--yellow-tint);color:var(--gold-ink);display:grid;place-items:center}
.icon svg{width:24px;height:24px}

/* ── sections ───────────────────────────────────────── */
.section{padding:92px 0}
.section.tint{background:var(--soft)}
.section-title{text-align:center;max-width:720px;margin:0 auto 52px}
.section-title h2{margin:0 0 14px}
.section-title p{color:var(--muted);font-size:1.1rem;margin:0}

.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px 30px 30px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(20,20,22,.04)}
.card .icon{margin-bottom:22px}
.card h3{margin:0 0 12px}
.card p{color:var(--text);flex:1}
.card .more{margin-top:6px}

.split{display:grid;grid-template-columns:1.1fr .9fr;gap:64px;align-items:start}
.split h2{margin:0 0 20px}
.split .lead{font-size:1.15rem;color:var(--ink)}
.boxes{display:grid;gap:22px}
.box{background:#fff;border:1px solid var(--line);border-left:4px solid var(--yellow);border-radius:var(--radius);padding:26px 28px}
.box h3{margin:0 0 12px;font-size:1.2rem}
.dots{list-style:none;margin:0;padding:0}
.dots li{position:relative;padding-left:22px;margin:0 0 8px;line-height:1.5}
.dots li::before{content:"";position:absolute;left:2px;top:.62em;width:8px;height:8px;border-radius:50%;background:#d99e00}
.dots.two{columns:2;column-gap:40px}
.dots.two li{break-inside:avoid}

/* how a deal works */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:24px;counter-reset:s;position:relative}
.steps::before{content:"";position:absolute;top:26px;left:10%;right:10%;height:2px;background:var(--line)}
.steps li{counter-increment:s;position:relative;text-align:center}
.steps li::before{content:counter(s);display:grid;place-items:center;width:54px;height:54px;margin:0 auto 18px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);font-weight:700;font-size:20px;box-shadow:0 0 0 8px var(--white)}
.section.tint .steps li::before{box-shadow:0 0 0 8px var(--soft)}
.steps h3{font-size:1.1rem;margin:0 0 8px}
.steps p{font-size:16px;color:var(--muted);margin:0}
.steps.four{grid-template-columns:repeat(4,1fr)}

/* why work with us */
.reasons{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 48px}
.reason{display:flex;gap:18px}
.reason h3{font-size:1.15rem;margin:4px 0 6px}
.reason p{margin:0;color:var(--text)}

/* platforms */
.platforms{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.platform{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px;display:flex;flex-direction:column;gap:6px}
.platform h3{font-size:1.6rem}
.platform .what{color:var(--gold-ink);font-weight:600;margin:0 0 8px}
.platform p{flex:1}
.platform .btn{align-self:flex-start}

/* questions */
.faq{max-width:860px;margin:0 auto;display:grid;gap:0}
.faq div{padding:24px 0;border-bottom:1px solid var(--line)}
.faq div:first-child{border-top:1px solid var(--line)}
.faq h3{font-size:1.15rem;margin:0 0 8px}
.faq p{margin:0}

/* ── contact ────────────────────────────────────────── */
.contact{background:var(--dark);color:#d6d6d0;padding:92px 0}
.contact .wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.contact h2{color:#fff;margin:0 0 18px}
.contact p{color:#d6d6d0}
.contact dl{margin:30px 0 0;display:grid;gap:18px}
.contact dt{color:#a3a39c;font-size:15px;margin:0 0 2px}
.contact dd{margin:0;color:#fff}
.contact dd a{color:#fff;text-decoration-color:var(--yellow)}
.form{background:#fff;border-radius:var(--radius);padding:36px;box-shadow:var(--shadow);color:var(--text)}
.form h3{margin:0 0 20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:flex;flex-direction:column;gap:6px;margin:0 0 18px}
.field label{font-weight:600;color:var(--ink);font-size:16px}
.field label .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{font:17px/1.4 var(--font);color:var(--ink);background:#fff;border:1px solid #c9c9c3;border-radius:4px;padding:12px 14px;width:100%}
.field textarea{min-height:140px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(245,185,29,.45)}
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form .btn{width:100%;padding:15px 24px;font-size:17px}
.form .note{font-size:14.5px;color:var(--muted);margin:14px 0 0}
.form-error{display:none;background:#fdf1ef;border:1px solid #f0c4bc;color:#8a2a1b;border-radius:4px;padding:12px 14px;margin:0 0 18px;font-size:16px}
.form-error.show{display:block}

/* ── inner pages ───────────────────────────────────── */
.prose{max-width:820px;margin:0 auto}
.prose h2{font-size:1.6rem;margin:44px 0 12px}
.prose h2:first-child{margin-top:0}
.prose ul{padding-left:22px;margin:0 0 1em}
.prose li{margin:0 0 .5em}
.prose table{width:100%;border-collapse:collapse;margin:6px 0 18px;font-size:16.5px}
.prose th,.prose td{text-align:left;vertical-align:top;padding:12px 14px;border:1px solid var(--line)}
.prose th{background:var(--soft);color:var(--ink)}
.small{font-size:15px;color:var(--muted)}
.intro{max-width:820px;margin:0 auto 0;font-size:1.15rem}

/* ── footer ─────────────────────────────────────────── */
.site-footer{background:#0f1012;color:#ababa5;font-size:16px;padding:64px 0 0}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px;padding-bottom:48px}
.site-footer h4{color:#fff;font-size:16px;margin:0 0 14px;font-weight:700}
.site-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.site-footer a{color:#dcdcd6;text-decoration:none}
.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .logo{color:#fff;margin:0 0 14px}
.site-footer .logo span b{color:#c9c9c4}
.site-footer .legal{border-top:1px solid #26272a;padding:20px 0 26px;font-size:14.5px;color:#8f8f89}

/* ── motion ─────────────────────────────────────────── */
/* Kept quiet on purpose: the hero settles in once on load, each block rises as it comes into view, the deal steps'
   line draws across, and cards answer the pointer. The rising is driven by site.js; the "js" class that hides a block
   until then is only set when that can happen (see site.js), and nothing moves under prefers-reduced-motion. */
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes settle{from{transform:scale(1.07)}to{transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
.hero > img{animation:settle 2.6s var(--ease) both}
.hero-copy > *{animation:rise .8s var(--ease) both}
.hero-copy > :nth-child(2){animation-delay:.12s}
.hero-copy > :nth-child(3){animation-delay:.24s}
.trust ul{animation:rise .8s .35s var(--ease) both}

/* cards and platforms lift a little under the pointer */
.card,.platform{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.card:hover,.platform:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:#d3d3cd}
.card .icon{transition:background-color .25s ease,color .25s ease}
.card:hover .icon{background:var(--yellow);color:var(--on-yellow)}
.box{transition:border-left-color .25s ease,box-shadow .25s ease}
.box:hover{box-shadow:var(--shadow)}

.js :where(.cards>.card,.steps>li,.reasons>.reason,.platforms>.platform,.boxes>.box,.faq>div,.section-title,.split>div:first-child,.contact .wrap>div:first-child,.form,.prose,.intro){transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.js :where(.cards>.card,.steps>li,.reasons>.reason,.platforms>.platform,.boxes>.box,.faq>div,.section-title,.split>div:first-child,.contact .wrap>div:first-child,.form,.prose,.intro):not(.in){opacity:0;transform:translateY(24px)}
.js .settled{transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;transition-delay:0s}

/* the steps: the line draws across, and each number arrives with its step */
.js .steps::before{transform-origin:left center;transition:transform 1.2s var(--ease) .2s}
.js .steps:not(.drawn)::before{transform:scaleX(0)}
.js .steps>li::before{transition:transform .6s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(var(--d,0s) + .12s)}
.js .steps>li:not(.in)::before{transform:scale(.5)}

/* the enquiry button while the form is sending */
.btn.sending{pointer-events:none;opacity:.9}
.btn.sending::before{content:"";width:16px;height:16px;border:2px solid rgba(22,23,26,.3);border-top-color:var(--on-yellow);border-radius:50%;animation:spin .8s linear infinite}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .card:hover,.platform:hover,.btn:active{transform:none}
}
@media print{
  .js :where(.cards>.card,.steps>li,.reasons>.reason,.platforms>.platform,.boxes>.box,.faq>div,.section-title,.split>div:first-child,.contact .wrap>div:first-child,.form,.prose,.intro){opacity:1!important;transform:none!important}
}

/* ── narrower screens ───────────────────────────────── */
@media (max-width:1080px){
  .nav a:not(.btn){display:none}
  .cards{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:repeat(3,1fr);row-gap:36px}
  .steps::before{display:none}
  .split,.contact .wrap{grid-template-columns:1fr;gap:44px}
  .site-footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  body{font-size:17px}
  .wrap{padding:0 16px}
  .topbar .reg{display:none}
  .site-header .wrap{min-height:66px;gap:12px}
  .logo span{font-size:20px}
  .logo svg{width:32px;height:22px}
  .hero .wrap{padding-top:64px;padding-bottom:110px}
  .hero.small .wrap{padding-top:48px;padding-bottom:48px}
  .trust ul{grid-template-columns:1fr}
  .trust li + li{border-left:0;border-top:1px solid var(--line)}
  .trust li{padding:22px 20px}
  .section,.contact{padding:64px 0}
  .cards,.reasons,.platforms,.row{grid-template-columns:1fr}
  .steps,.steps.four{grid-template-columns:1fr;text-align:left;gap:22px}
  .steps li{text-align:left;display:grid;grid-template-columns:54px 1fr;column-gap:16px}
  .steps li::before{margin:0;grid-row:span 2}
  .dots.two{columns:1}
  .form{padding:24px 20px}
  .site-footer .cols{grid-template-columns:1fr}
}
@media (max-width:420px){.nav .btn{padding:9px 12px;font-size:15px}}