/* CE Gate — site styles. Flat, grid-based, graphite + white, amber as the single accent. */
:root{
  --ce-graphite:#2F3A45;
  --ce-amber:#D98A2B;
  --ce-amber-deep:#B5701B;
  --ce-slate:#6B7681;
  --ce-faint:#9AA3AB;
  --ce-light:#EEF1F4;
  --ce-white:#FFFFFF;
  --ce-hairline:#E2E8F0;
  --ce-sans:'IBM Plex Sans','Segoe UI',Arial,sans-serif;
  --ce-mono:'IBM Plex Mono','Consolas',monospace;
  --ce-radius:8px;
  --ce-border:1px solid var(--ce-hairline);
  --ce-maxw:1080px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;font-family:var(--ce-sans);color:var(--ce-graphite);
  background:var(--ce-white);line-height:1.6;font-size:17px;-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-weight:600;letter-spacing:.2px;line-height:1.25;margin:0 0 .5em;}
h1{font-size:2.3rem;}
h2{font-size:1.7rem;}
h3{font-size:1.2rem;}
p{margin:0 0 1rem;}
a{color:var(--ce-amber-deep);text-decoration:none;}
a:hover{color:var(--ce-amber);}
img{max-width:100%;}
.container{max-width:var(--ce-maxw);margin:0 auto;padding:0 24px;}
.muted{color:var(--ce-slate);}
.fine{color:var(--ce-faint);font-size:12px;}
.mono{font-family:var(--ce-mono);}
.label{font-weight:500;letter-spacing:2px;text-transform:uppercase;color:var(--ce-amber);font-size:.78rem;}
/* Subtitle sentences: each full sentence on its own line, never broken mid-sentence */
.ln{display:block;}

/* Header */
.site-header{border-bottom:var(--ce-border);background:var(--ce-white);position:sticky;top:0;z-index:50;}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand svg{display:block;height:34px;width:auto;}
.nav-links{display:flex;align-items:center;gap:28px;list-style:none;margin:0;padding:0;}
.nav-links a{color:var(--ce-graphite);font-weight:500;font-size:.97rem;}
.nav-links a:hover{color:var(--ce-amber-deep);}
.nav-links a.active{color:var(--ce-amber-deep);}
.nav-cta{background:var(--ce-amber);color:#fff !important;padding:9px 18px;border-radius:var(--ce-radius);font-weight:500;}
.nav-cta:hover{background:var(--ce-amber-deep);color:#fff !important;}
.nav-meet{border:1px solid var(--ce-amber);color:var(--ce-amber-deep) !important;padding:8px 16px;border-radius:var(--ce-radius);font-weight:500;}
.nav-meet:hover{background:var(--ce-amber);color:#fff !important;}
.nav-toggle{display:none;background:none;border:none;cursor:pointer;padding:6px;}
.nav-toggle span{display:block;width:24px;height:2px;background:var(--ce-graphite);margin:5px 0;}

/* Buttons */
.btn{display:inline-block;border-radius:var(--ce-radius);padding:13px 26px;font-weight:500;
  font-size:1rem;cursor:pointer;border:1px solid transparent;font-family:var(--ce-sans);}
.btn-primary{background:var(--ce-amber);color:#fff;}
.btn-primary:hover{background:var(--ce-amber-deep);color:#fff;}
.btn-ghost{background:transparent;color:var(--ce-graphite);border:1px solid var(--ce-hairline);}
.btn-ghost:hover{border-color:var(--ce-amber);color:var(--ce-amber-deep);}

/* Sections */
section{padding:72px 0;}
.surface{background:var(--ce-light);}
.section-head{max-width:820px;margin-bottom:40px;}
.section-head p{color:var(--ce-slate);}

/* Hero */
.hero{padding:84px 0 72px;}
.hero h1{max-width:760px;}
.hero .lead{font-size:1.22rem;color:var(--ce-slate);max-width:880px;margin-bottom:28px;}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;}

/* Grid + cards */
.grid{display:grid;gap:20px;}
.grid-2{grid-template-columns:repeat(2,1fr);}
.grid-3{grid-template-columns:repeat(3,1fr);}
.grid-4{grid-template-columns:repeat(4,1fr);}
.card{border:var(--ce-border);border-radius:var(--ce-radius);background:var(--ce-white);padding:26px;}
.card h3{margin-bottom:.4em;}
.card p{color:var(--ce-slate);font-size:.97rem;margin-bottom:0;}
.card .num{font-family:var(--ce-mono);color:var(--ce-amber);font-size:.85rem;font-weight:500;}

/* Check list */
.checklist{list-style:none;margin:0;padding:0;}
.checklist li{padding-left:30px;position:relative;margin-bottom:12px;color:var(--ce-graphite);}
.checklist li::before{content:"";position:absolute;left:0;top:7px;width:14px;height:8px;
  border-left:2px solid var(--ce-amber);border-bottom:2px solid var(--ce-amber);transform:rotate(-45deg);}

/* How-we-work ladder: diagram left, steps right */
.ladder-grid{display:grid;grid-template-columns:300px 1fr;gap:48px;align-items:center;}
.ladder-illus{position:sticky;top:90px;}
.ladder-illus img{display:block;width:100%;max-width:300px;}

/* Steps */
.steps{counter-reset:step;display:grid;gap:18px;}
.step{display:flex;gap:18px;align-items:flex-start;}
.step .n{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid var(--ce-amber);
  color:var(--ce-amber-deep);font-family:var(--ce-mono);font-weight:500;display:flex;align-items:center;justify-content:center;}
.step h3{margin-bottom:.2em;}
.step p{color:var(--ce-slate);margin-bottom:0;}

/* Pricing */
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch;}
.price{border:var(--ce-border);border-radius:var(--ce-radius);padding:30px;display:flex;flex-direction:column;}
.price.feature{border-color:var(--ce-amber);}
.price .tier{font-weight:500;letter-spacing:1px;text-transform:uppercase;font-size:.78rem;color:var(--ce-slate);}
.price .amount{font-size:1.9rem;font-weight:600;margin:10px 0 2px;}
.price .amount small{font-size:.95rem;font-weight:400;color:var(--ce-slate);}
.price ul{list-style:none;padding:0;margin:18px 0 24px;flex:1;}
.price ul li{padding-left:26px;position:relative;margin-bottom:10px;font-size:.95rem;}
.price ul li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--ce-amber);border-bottom:2px solid var(--ce-amber);transform:rotate(-45deg);}

/* Pricing rows — zig-zag cards, header rail alternating left/right */
.price-list{display:grid;gap:22px;}
.price-row{display:grid;grid-template-columns:310px 1fr;border:var(--ce-border);border-radius:var(--ce-radius);overflow:hidden;background:#fff;}
.price-row .pr-head{background:var(--ce-light);padding:30px;display:flex;flex-direction:column;border-right:var(--ce-border);}
.price-row.feature{border-color:var(--ce-amber);}
.price-row.feature .pr-head{background:#FBF3E8;}
.pr-step{font-family:var(--ce-mono);font-size:.72rem;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--ce-amber-deep);margin-bottom:8px;}
.pr-title{font-size:1.4rem;font-weight:700;line-height:1.2;margin:0 0 12px;color:var(--ce-graphite);
  border-left:3px solid var(--ce-amber);padding-left:13px;}
.pr-price{font-size:1.45rem;font-weight:700;color:var(--ce-amber-deep);margin-bottom:4px;}
.pr-price small{display:block;font-size:.82rem;font-weight:400;color:var(--ce-slate);margin-top:3px;}
.pr-head .btn{margin-top:auto;}
.pr-body{padding:30px;}
.pr-body ul{list-style:none;margin:0 0 16px;padding:0;}
.pr-body ul li{padding-left:26px;position:relative;margin-bottom:9px;font-size:.95rem;color:var(--ce-graphite);}
.pr-body ul li::before{content:"";position:absolute;left:0;top:7px;width:12px;height:7px;
  border-left:2px solid var(--ce-amber);border-bottom:2px solid var(--ce-amber);transform:rotate(-45deg);}
.pr-note{font-size:.88rem;color:var(--ce-slate);margin:0 0 12px;}
.pr-note strong{color:var(--ce-graphite);}
.pr-delivery{display:inline-block;font-size:.82rem;color:var(--ce-slate);background:var(--ce-light);
  border:var(--ce-border);border-radius:20px;padding:5px 14px;}
.pr-delivery strong{color:var(--ce-graphite);font-weight:600;}
/* alternate the coloured rail to the right on even rows */
.price-row:nth-child(even){grid-template-columns:1fr 310px;}
.price-row:nth-child(even) .pr-head{order:2;border-right:none;border-left:var(--ce-border);}
.price-row:nth-child(even) .pr-body{order:1;}

/* Spec table */
.spec{width:100%;border-collapse:collapse;font-size:.95rem;}
.spec th,.spec td{text-align:left;padding:12px 14px;border-bottom:var(--ce-border);vertical-align:top;}
.spec th{font-family:var(--ce-mono);font-weight:500;color:var(--ce-graphite);width:34%;}
.spec td{color:var(--ce-slate);}

/* Blog */
.post-list{display:grid;gap:8px;}
.post-item{border-bottom:var(--ce-border);padding:24px 0;}
.post-item:first-child{border-top:var(--ce-border);}
.post-item .date{font-family:var(--ce-mono);font-size:.82rem;color:var(--ce-faint);}
.post-item h3{margin:6px 0;}
.post-item p{color:var(--ce-slate);margin-bottom:0;}
.article{max-width:720px;margin:0 auto;}
.article .date{font-family:var(--ce-mono);font-size:.85rem;color:var(--ce-faint);}
.article h1{margin-top:8px;}
.article h2{margin-top:1.6em;}
.article p{font-size:1.05rem;}
.article blockquote{border-left:3px solid var(--ce-amber);margin:1.4em 0;padding:4px 0 4px 20px;color:var(--ce-slate);}

/* Form */
.form-grid{display:grid;gap:18px;max-width:640px;}
.form-row{display:grid;gap:18px;grid-template-columns:1fr 1fr;}
label{display:block;font-weight:500;font-size:.92rem;margin-bottom:6px;}
input,select,textarea{width:100%;font-family:var(--ce-sans);font-size:1rem;color:var(--ce-graphite);
  padding:11px 13px;border:1px solid var(--ce-hairline);border-radius:var(--ce-radius);background:#fff;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ce-amber);}
textarea{min-height:130px;resize:vertical;}
.req{color:var(--ce-amber-deep);}

/* Two-column intro */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;}

/* Footer */
.site-footer{background:var(--ce-graphite);color:#cfd6dd;padding:54px 0 30px;font-size:.93rem;}
.site-footer a{color:#fff;}
.site-footer a:hover{color:var(--ce-amber);}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;margin-bottom:34px;}
.footer-grid h4{color:#fff;font-size:.82rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;}
.footer-grid ul{list-style:none;padding:0;margin:0;}
.footer-grid li{margin-bottom:9px;}
.footer-bottom{border-top:1px solid #3d4954;padding-top:20px;color:#8a96a1;font-size:.82rem;
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;}

/* Hero with illustration */
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;}
.hero-illus{border:var(--ce-border);border-radius:var(--ce-radius);background:var(--ce-light);padding:20px;}
.hero-illus img{display:block;width:100%;}
.hero-mark img{display:block;width:100%;max-width:420px;margin:0 auto;}

/* Case study image placeholder */
.case-img{display:flex;align-items:center;justify-content:center;height:160px;margin:-26px -26px 18px;
  background:var(--ce-light);border-bottom:var(--ce-border);color:var(--ce-faint);font-size:.85rem;
  font-family:var(--ce-mono);border-radius:var(--ce-radius) var(--ce-radius) 0 0;}

/* Service icons in cards */
.svc-icon{width:46px;height:46px;display:block;margin-bottom:14px;}

/* Case study photos */
.case-photo{display:block;width:100%;border:var(--ce-border);border-radius:var(--ce-radius);margin-bottom:18px;}
.case-photos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px;}
.case-photos img{display:block;width:100%;height:100%;object-fit:cover;border:var(--ce-border);border-radius:var(--ce-radius);}
/* Illustration with a small real-photo inset */
.case-duo{position:relative;margin-bottom:18px;}
.case-duo .case-main{display:block;width:100%;border:var(--ce-border);border-radius:var(--ce-radius);}
.case-inset{position:absolute;right:12px;bottom:12px;width:36%;max-width:200px;margin:0;border:3px solid #fff;outline:1px solid var(--ce-hairline);border-radius:6px;overflow:hidden;background:#fff;}
.case-inset img{display:block;width:100%;}
.case-inset figcaption{font-size:.64rem;line-height:1.3;color:var(--ce-slate);padding:3px 6px;text-align:center;}
@media(max-width:560px){.case-photos{grid-template-columns:1fr;}.case-inset{width:46%;}}

/* Concept block: icon beside text */
.concept{display:flex;gap:16px;align-items:flex-start;}
.concept .ci{width:42px;height:42px;flex:0 0 auto;}

/* Accordion (services) */
.accordion{border-top:var(--ce-border);}
.acc{border-bottom:var(--ce-border);}
.acc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:16px;padding:22px 4px;}
.acc>summary::-webkit-details-marker{display:none;}
.acc>summary img{width:40px;height:40px;flex:0 0 auto;}
.acc .acc-title{flex:1;}
.acc .acc-title h3{margin:0;font-size:1.15rem;}
.acc .acc-title p{margin:2px 0 0;color:var(--ce-slate);font-size:.94rem;}
.acc .chev{color:var(--ce-amber-deep);font-family:var(--ce-mono);font-size:1.1rem;transition:transform .2s;flex:0 0 auto;}
.acc[open] .chev{transform:rotate(90deg);}
.acc .acc-body{padding:0 4px 26px 60px;}
.acc .acc-body p{color:var(--ce-slate);}

/* Map */
.map-wrap{border:var(--ce-border);border-radius:var(--ce-radius);background:var(--ce-white);padding:18px;}
.map-wrap img{display:block;width:100%;max-width:720px;margin:0 auto;}

/* Before / after */
.ba-set{display:grid;grid-template-columns:1fr auto 1fr;gap:18px;align-items:center;margin-bottom:22px;}
.ba-item{margin:0;border:var(--ce-border);border-radius:var(--ce-radius);background:var(--ce-white);padding:14px;}
.ba-item img{display:block;width:100%;}
.ba-item figcaption{margin-top:10px;font-size:.9rem;color:var(--ce-slate);}
.ba-tag{display:inline-block;font-size:.68rem;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:2px 9px;border-radius:20px;margin-right:8px;}
.ba-before{background:var(--ce-light);color:var(--ce-slate);}
.ba-after{background:#F5E7CF;color:var(--ce-amber-deep);}
.ba-arrow{font-size:1.5rem;color:var(--ce-amber);text-align:center;line-height:1;}

/* Visual process flowchart — boxes with coloured headers + arrows */
.flow-diagram{display:flex;align-items:stretch;gap:0;margin:24px 0 22px;overflow-x:auto;padding-bottom:6px;}
.flow-node{flex:1 1 0;min-width:140px;border:1.5px solid var(--ce-graphite);border-radius:var(--ce-radius);
  background:var(--ce-white);overflow:hidden;display:flex;flex-direction:column;}
.flow-node .fn-head{background:var(--ce-graphite);color:#fff;padding:9px 12px;display:flex;align-items:center;gap:9px;}
.flow-node .fn-head .fn{flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:var(--ce-amber);
  color:#fff;font-size:11px;font-weight:700;font-family:var(--ce-mono);display:flex;align-items:center;justify-content:center;}
.flow-node .fn-head strong{font-size:.82rem;font-weight:600;line-height:1.25;color:#fff;}
.flow-node ul{margin:0;padding:11px 12px 12px 26px;color:var(--ce-slate);font-size:.81rem;line-height:1.4;flex:1;}
.flow-node ul li{margin-bottom:4px;}
/* Deliverable node: amber theme */
.flow-node.fn-deliver{border-color:var(--ce-amber-deep);}
.flow-node.fn-deliver .fn-head{background:var(--ce-amber);}
.flow-node.fn-deliver .fn-head .fn{background:#fff;color:var(--ce-amber-deep);}
.flow-node.fn-deliver ul{background:#FBF3E8;}
/* Arrow connector between nodes */
.flow-conn{flex:0 0 auto;align-self:center;width:26px;height:14px;position:relative;margin:0 -1px;}
.flow-conn::before{content:"";position:absolute;left:0;top:50%;width:100%;height:2px;background:var(--ce-amber);transform:translateY(-50%);}
.flow-conn::after{content:"";position:absolute;right:0;top:50%;width:0;height:0;
  border-left:8px solid var(--ce-amber);border-top:5px solid transparent;border-bottom:5px solid transparent;transform:translateY(-50%);}
/* Service summary table */
.svc-table{width:100%;border-collapse:collapse;margin-top:22px;font-size:.88rem;border:var(--ce-border);border-radius:var(--ce-radius);overflow:hidden;}
.svc-table th{background:var(--ce-graphite);color:#fff;padding:10px 14px;text-align:left;font-size:.72rem;letter-spacing:1.5px;text-transform:uppercase;font-weight:500;}
.svc-table td{padding:12px 14px;border-top:var(--ce-border);border-right:var(--ce-border);vertical-align:top;color:var(--ce-slate);width:33.33%;}
.svc-table td:last-child{border-right:none;}
.svc-table td ul{margin:0;padding-left:16px;}
.svc-table td ul li{margin-bottom:4px;}
.svc-note{background:#F5E7CF;border-left:3px solid var(--ce-amber);border-radius:0 var(--ce-radius) var(--ce-radius) 0;padding:10px 16px;margin-top:14px;font-size:.88rem;color:var(--ce-graphite);}
.svc-note strong{color:var(--ce-amber-deep);}
/* Per-service call to action inside each accordion */
.svc-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:20px;padding-top:18px;border-top:var(--ce-border);}
.svc-cta .btn{padding:10px 20px;font-size:.95rem;}
.svc-cta .or{color:var(--ce-faint);font-size:.9rem;}
.svc-price{font-family:var(--ce-mono);font-weight:600;color:var(--ce-amber-deep);font-size:.98rem;margin-right:auto;}

/* Responsive */
@media(max-width:860px){
  h1{font-size:1.9rem;}
  .grid-3,.grid-4,.price-grid{grid-template-columns:1fr;}
  .grid-2,.split,.form-row,.hero-grid{grid-template-columns:1fr;}
  .hero-grid{gap:28px;}
  .acc .acc-body{padding-left:4px;}
  .nav-links{position:fixed;top:68px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;padding:8px 24px 16px;border-bottom:var(--ce-border);display:none;}
  .nav-links.open{display:flex;}
  .nav-links li{width:100%;padding:8px 0;border-bottom:1px solid var(--ce-light);}
  .nav-toggle{display:block;}
  section{padding:52px 0;}
  .ba-set{grid-template-columns:1fr;gap:12px;}
  .ba-arrow{transform:rotate(90deg);}
  .price-row,.price-row:nth-child(even){grid-template-columns:1fr;}
  .price-row .pr-head,.price-row:nth-child(even) .pr-head{border-right:none;border-left:none;border-bottom:var(--ce-border);order:0;}
  .price-row:nth-child(even) .pr-body{order:0;}
  .ladder-grid{grid-template-columns:1fr;gap:24px;}
  .ladder-illus{position:static;}
  .ladder-illus img{max-width:240px;margin:0 auto;}
  .flow-diagram{flex-direction:column;overflow-x:visible;align-items:stretch;}
  .flow-node{flex:0 0 auto;width:100%;}
  .flow-conn{align-self:center;transform:rotate(90deg);margin:6px auto;}
  .svc-table{display:block;overflow-x:auto;}
}