:root{
--ink:#0A0A0A;
--paper:#121212;
--paper-2:#18181B;
--forest:#0070F3;
--forest-2:#0058C7;
--signal:#0070F3;
--signal-2:#3B9EFF;
--signal-dim:rgba(0,112,243,0.25);
--amber:#E8A23D;
--steel:#A1A1AA;
--line:#27272A;
--white:#FAFAFA;
--radius:4px;
--radius-lg:4px;
--radius-sm:4px;
--max:1180px;
--maxNarrow:760px;
--grid-light:rgba(0,112,243,0.04);
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--paper);
color:var(--white);
font-family:'Inter',system-ui,sans-serif;
font-size:16px;
line-height:1.55;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
font-family:'Space Grotesk',sans-serif;
font-weight:600;
line-height:1.12;
letter-spacing:-0.01em;
color:var(--white);
}
.mono{font-family:'JetBrains Mono',monospace;letter-spacing:0.02em;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px;}
.wrap-narrow{max-width:var(--maxNarrow);margin:0 auto;padding:0 28px;}
section{position:relative;}
::selection{background:var(--signal);color:var(--white);}
section.pad{padding:88px 0;}
/* The shared entrance. Tightened in the polish pass: 600ms/18px read as a slow
drift on a page that is otherwise precise. 420ms/10px arrives rather than
fades, which is what makes the site feel immediate. */
.reveal{opacity:0;transform:translateY(10px);transition:opacity .42s cubic-bezier(.22,.8,.22,1),transform .42s cubic-bezier(.22,.8,.22,1);}
/* settled without travelling: main.js adds this to anything it reveals ahead of
an anchor jump, so arriving at a section never shows it still animating in */
.reveal.eg-settled{transition:none;}
.bento-services .bento-card:nth-child(1){transition-delay:0ms;}
.bento-services .bento-card:nth-child(2){transition-delay:60ms;}
.bento-services .bento-card:nth-child(3){transition-delay:120ms;}
.bento-services .bento-card:nth-child(4){transition-delay:180ms;}
.bento-services .bento-card:nth-child(5){transition-delay:240ms;}
.bento-services .bento-card:nth-child(6){transition-delay:300ms;}
.bento-why .bento-card:nth-child(1){transition-delay:0ms;}
.bento-why .bento-card:nth-child(2){transition-delay:80ms;}
.bento-why .bento-card:nth-child(3){transition-delay:160ms;}
.reveal.in{opacity:1;transform:translateY(0);}
@media (prefers-reduced-motion: reduce){.reveal{opacity:1;transform:none;transition:none;}html{scroll-behavior:auto;}}
.trace{width:100%;height:34px;overflow:visible;display:block;}
.trace path{fill:none;stroke:var(--line);stroke-width:1.5;}
.trace circle{fill:var(--forest);}
/* ---------- header ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(9,9,9,0.96);border-bottom:1px solid var(--line);}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px;}
.brand{display:flex;align-items:center;gap:10px;}
.brand-mark{width:34px;height:34px;flex:none;}
.logo-ring{transform-origin:29px 17px;animation:logopulse 2.6s ease-in-out infinite;}
@keyframes logopulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:0.55;transform:scale(1.18);}}
@media (prefers-reduced-motion: reduce){.logo-ring{animation:none;}}
.brand-text{color:var(--white);font-family:'Space Grotesk';font-weight:700;font-size:1.05rem;letter-spacing:0.01em;}
.brand-text span{color:var(--signal);}
.brand-sub{display:block;color:#9AA79C;font-family:'JetBrains Mono';font-size:0.62rem;letter-spacing:0.14em;text-transform:uppercase;margin-top:1px;}
nav.links{display:flex;gap:28px;align-items:center;}
nav.links a{color:#D7DDD2;font-size:0.86rem;font-weight:500;position:relative;padding:6px 0;}
nav.links a.active{color:var(--signal);text-shadow:0 0 12px var(--signal-dim);}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--signal);box-shadow:0 0 8px var(--signal);transition:width .25s ease;}
nav.links a:hover::after{width:100%;}
.call-btn{background:var(--signal);color:#FFFFFF;font-weight:600;font-size:0.84rem;padding:10px 18px;border-radius:var(--radius);white-space:nowrap;font-family:'JetBrains Mono';transition:background .15s ease;}
.call-btn:hover{background:#3B9EFF;}
.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.burger span{width:22px;height:2px;background:#fff;display:block;}
.mnav{display:none;flex-direction:column;gap:0;background:var(--ink);border-top:1px solid rgba(255,255,255,0.08);}
.mnav a{color:#D7DDD2;padding:16px 28px;border-bottom:1px solid rgba(255,255,255,0.06);font-size:0.95rem;}
/* Menu state is a class, never an inline style. An inline display value would
outrank the breakpoint below and strand the open menu on desktop, where the
burger that closes it is itself hidden. */
.mnav.is-open{display:flex;}
/* The breakpoint stays authoritative: above the burger's range the mobile menu
is hidden whatever state JS last left it in. Declared after .mnav.is-open so
it wins on order at equal specificity. */
@media (min-width:901px){.mnav.is-open{display:none;}}
/* ---------- page hero (interior pages) ---------- */
.page-hero{background:radial-gradient(ellipse 800px 480px at 80% 5%, rgba(59,130,246,0.20), transparent 62%), radial-gradient(ellipse 600px 360px at 90% 60%, rgba(94,224,216,0.09), transparent 60%), var(--ink);color:var(--white);padding:64px 0 56px;position:relative;overflow:hidden;}
.page-hero .wrap{position:relative;z-index:1;}
.breadcrumb{font-family:'JetBrains Mono';font-size:0.72rem;letter-spacing:0.06em;color:#9AA79C;margin-bottom:18px;}
.breadcrumb a{color:#9AA79C;}
.breadcrumb a:hover{color:var(--signal);}
.page-hero h1{font-size:2.6rem;color:var(--white);max-width:720px;}
.page-hero p.lead{margin-top:16px;font-size:1.04rem;color:#C7D0C6;max-width:600px;}
/* ---------- hero (home) ---------- */
.hero{background:radial-gradient(ellipse 900px 560px at 78% 10%, rgba(59,130,246,0.22), transparent 62%), radial-gradient(ellipse 700px 420px at 88% 62%, rgba(94,224,216,0.10), transparent 60%), var(--ink);color:var(--white);padding:88px 0 60px;overflow:hidden;position:relative;}
.hero h1::before{content:"";position:absolute;left:-40px;top:-60px;width:640px;height:340px;background:radial-gradient(ellipse, rgba(0,112,243,0.16), transparent 70%);z-index:-1;pointer-events:none;}
@keyframes fadeUpIn{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:translateY(0);}}
.hero-stagger{opacity:0;animation:fadeUpIn 0.65s cubic-bezier(.2,.8,.2,1) forwards;}
.hero-stagger:nth-child(1){animation-delay:.02s;}
.hero-stagger:nth-child(2){animation-delay:.10s;}
.hero-stagger:nth-child(3){animation-delay:.18s;}
.hero-stagger:nth-child(4){animation-delay:.26s;}
.hero-stagger:nth-child(5){animation-delay:.34s;}
.hero-stagger:nth-child(6){animation-delay:.42s;}
.hero-stagger:nth-child(7){animation-delay:.50s;}
@media (prefers-reduced-motion: reduce){.hero-stagger{opacity:1;animation:none;}}
.hero .hero-grid{position:relative;z-index:1;}
.hero-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:'JetBrains Mono';font-size:0.66rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--signal);margin-bottom:20px;}
.eyebrow::before{content:"";width:7px;height:7px;background:var(--signal);border-radius:50%;box-shadow:0 0 10px 2px var(--signal);}
.hero h1{font-size:clamp(2.2rem, 4.2vw, 3.9rem);color:var(--white);letter-spacing:-0.02em;line-height:1.05;position:relative;z-index:1;}
.hero h1 em{font-style:normal;color:var(--signal);text-shadow:0 0 22px var(--signal-dim);}
.hero p.lead{margin-top:20px;font-size:1.08rem;color:#C7D0C6;max-width:520px;}
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap;}
.btn-primary{background:var(--signal);color:#FFFFFF;font-weight:600;padding:13px 24px;border-radius:var(--radius);font-size:0.92rem;display:inline-block;border:1px solid var(--signal);transition:background .15s ease;}
.btn-primary:hover{background:#3B9EFF;border-color:#3B9EFF;}
.btn-ghost{border:1px solid var(--line);color:var(--white);font-weight:500;padding:13px 24px;border-radius:var(--radius);font-size:0.92rem;display:inline-block;transition:border-color .15s ease, color .15s ease;}
.btn-ghost:hover{border-color:var(--signal);color:var(--signal);}
.hero-stats{display:flex;gap:34px;margin-top:52px;flex-wrap:wrap;}
.hero-stats div{border-left:2px solid rgba(59,130,246,0.25);padding-left:14px;}
.hero-stats b{display:block;font-family:'Space Grotesk';font-size:1.6rem;color:var(--white);}
.hero-stats span{font-family:'JetBrains Mono';font-size:0.68rem;letter-spacing:0.08em;text-transform:uppercase;color:#98A497;}
.schematic{width:100%;height:auto;}
.schematic .trace-line{fill:none;stroke:rgba(255,255,255,0.18);stroke-width:1.4;}
.schematic .trace-line.hot{stroke:var(--signal);stroke-opacity:0.65;filter:drop-shadow(0 0 2px rgba(59,130,246,0.45));}
.schematic .node{fill:var(--ink);stroke:var(--signal);stroke-width:1.4;}
.schematic .node.filled{fill:var(--signal);stroke:none;filter:drop-shadow(0 0 3px rgba(59,130,246,0.6));}
.schematic .label{font-family:'JetBrains Mono';font-size:9px;fill:#8FA090;}
.pulse{fill:var(--signal-2);}
/* ---------- section heading pattern ---------- */
.sec-head{max-width:640px;margin-bottom:52px;}
.sec-tag{font-family:'JetBrains Mono';font-size:0.66rem;letter-spacing:0.22em;text-transform:uppercase;color:var(--forest);margin-bottom:14px;display:block;}
.sec-head h2{font-size:2.1rem;}
.sec-head p{margin-top:14px;color:var(--steel);font-size:1rem;max-width:520px;}
.sec-head.center{margin-left:auto;margin-right:auto;text-align:center;}
/* ---------- services ---------- */
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.svc-card{background:var(--paper);padding:32px 24px;transition:background .2s ease, border-color .2s ease;position:relative;border:1px solid var(--line);border-radius:var(--radius);}
.svc-card:hover{background:var(--paper-2);border-color:var(--signal);}
.svc-icon{width:40px;height:40px;margin-bottom:22px;color:var(--forest);transition:color .2s ease, filter .2s ease;}
.svc-card:hover .svc-icon{color:var(--signal);filter:drop-shadow(0 0 6px rgba(59,130,246,0.5));}
.svc-card h3{font-size:1.08rem;margin-bottom:10px;}
.svc-card p{color:var(--steel);font-size:0.92rem;}
.svc-num{font-family:'JetBrains Mono';font-size:0.7rem;color:#9AA692;display:block;margin-bottom:14px;}
.svc-card a.more{display:inline-block;margin-top:14px;font-size:0.82rem;color:var(--forest);font-weight:600;}
.svc-card a.more:hover{color:var(--signal);}
/* ---------- service detail blocks ---------- */
.svc-detail-img{background:var(--paper);border-radius:var(--radius);padding:30px;display:flex;align-items:center;justify-content:center;min-height:260px;}
.svc-detail-img svg{width:80%;height:auto;}
/* ---------- why ---------- */
.why-wrap{background:radial-gradient(ellipse 700px 420px at 15% 90%, rgba(59,130,246,0.14), transparent 60%), var(--ink);color:var(--white);position:relative;overflow:hidden;}
.why-wrap .wrap{position:relative;z-index:1;}
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start;}
.why-grid .sec-head h2{color:var(--white);}
.why-grid .sec-head p{color:#B9C2B6;}
.why-list{display:flex;flex-direction:column;}
.why-item{display:flex;gap:18px;padding:22px 0;border-top:1px solid rgba(255,255,255,0.12);transition:padding-left .2s ease;}
.why-item:last-child{border-bottom:1px solid rgba(255,255,255,0.12);}
.why-item:hover{padding-left:6px;}
.why-item .mark{font-family:'JetBrains Mono';color:var(--signal);font-size:0.8rem;flex:none;padding-top:2px;text-shadow:0 0 8px var(--signal-dim);}
.why-item h4{color:var(--white);font-size:1rem;margin-bottom:6px;}
.why-item p{color:#AEB8AC;font-size:0.9rem;}
/* ---------- process ---------- */
.process-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative;}
.proc-step{padding:0 22px 0 0;position:relative;}
.proc-step:not(:last-child)::after{content:"";position:absolute;top:19px;right:-2px;width:calc(100% - 40px);height:1px;background:repeating-linear-gradient(90deg,var(--line) 0 6px, transparent 6px 12px);}
.proc-num{width:38px;height:38px;border:1.5px solid var(--forest);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono';color:var(--forest);font-size:0.85rem;margin-bottom:22px;background:var(--paper);position:relative;z-index:1;}
.proc-step h4{font-size:1rem;margin-bottom:8px;}
.proc-step p{color:var(--steel);font-size:0.88rem;}
/* ---------- products ---------- */
.prod-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.prod-card{background:var(--paper);border:1px solid var(--line);padding:26px 16px;text-align:center;border-radius:var(--radius);}
.prod-card svg{width:30px;height:30px;margin:0 auto 14px;color:var(--forest);}
.prod-card span{font-size:0.82rem;font-weight:500;}
.prod-detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.prod-detail-card{background:var(--paper);padding:30px;border:1px solid var(--line);border-radius:var(--radius-lg);transition:background .15s ease, border-color .15s ease;}
.prod-detail-card:hover{background:var(--paper-2);border-color:var(--signal);}
.prod-detail-card svg{width:36px;height:36px;color:var(--forest);margin-bottom:18px;}
.prod-detail-card h3{font-size:1.05rem;margin-bottom:8px;}
.prod-detail-card p{color:var(--steel);font-size:0.88rem;margin-bottom:14px;}
.prod-detail-card ul{list-style:none;font-size:0.84rem;color:var(--steel);display:flex;flex-direction:column;gap:6px;}
.prod-detail-card ul li::before{content:"· ";color:var(--forest);font-weight:700;}
/* ---------- card grid: case studies / blog ---------- */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.post-card{background:var(--paper);border:1px solid var(--line);display:flex;flex-direction:column;transition:background .15s ease, border-color .15s ease;border-radius:var(--radius-lg);overflow:hidden;}
.post-card:hover{border-color:var(--signal);background:var(--paper-2);}
.post-card-img{background:var(--ink);height:150px;display:flex;align-items:center;justify-content:center;flex:none;position:relative;overflow:hidden;}
.post-card-img svg{width:56px;height:56px;color:var(--signal);opacity:0.85;}
.post-card-body{padding:24px;display:flex;flex-direction:column;flex:1;}
.tag{display:inline-block;font-family:'JetBrains Mono';font-size:0.66rem;letter-spacing:0.08em;text-transform:uppercase;color:var(--forest);background:var(--paper-2);padding:4px 10px;border-radius:var(--radius);margin-bottom:14px;width:fit-content;}
.post-card h3{font-size:1.05rem;margin-bottom:10px;line-height:1.3;}
.post-card p{color:var(--steel);font-size:0.88rem;flex:1;}
.post-meta{font-family:'JetBrains Mono';font-size:0.72rem;color:#8B9587;margin-top:16px;padding-top:16px;border-top:1px solid var(--line);}
.post-card a.card-link{position:absolute;inset:0;}
.post-card{position:relative;}
.post-card:hover h3{color:var(--forest);}
/* ---------- article / content page ---------- */
.article-wrap{max-width:var(--maxNarrow);margin:0 auto;padding:0 28px;}
.article-meta{display:flex;gap:18px;flex-wrap:wrap;font-family:'JetBrains Mono';font-size:0.76rem;color:var(--steel);margin-bottom:20px;}
.article-body h2{font-size:1.5rem;margin:40px 0 16px;}
.article-body h3{font-size:1.2rem;margin:28px 0 12px;}
.article-body p{margin-bottom:18px;color:var(--steel);font-size:1rem;}
.article-body ul,.article-body ol{margin:0 0 18px 22px;color:var(--steel);}
.article-body li{margin-bottom:8px;}
.article-body strong{color:var(--white);}
.pull-stat{background:var(--paper-2);border-left:3px solid var(--forest);padding:20px 24px;margin:28px 0;}
.pull-stat b{display:block;font-family:'Space Grotesk';font-size:1.3rem;color:var(--forest);margin-bottom:4px;}
.pull-stat span{font-size:0.88rem;color:var(--steel);}
.callout{background:var(--paper-2);color:var(--white);padding:28px 30px;border-radius:var(--radius);margin:32px 0;border:1px solid var(--line);}
.callout h4{color:var(--signal);font-size:0.95rem;margin-bottom:8px;font-family:'JetBrains Mono';text-transform:uppercase;letter-spacing:0.06em;}
.callout p{color:#C7D0C6;margin-bottom:16px;font-size:0.92rem;}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:32px 0;}
.stat-box{background:var(--paper);border:1px solid var(--line);padding:22px;text-align:center;}
.stat-box b{display:block;font-family:'Space Grotesk';font-size:1.6rem;color:var(--forest);}
.stat-box span{font-family:'JetBrains Mono';font-size:0.7rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.05em;}
/* ---------- contact ---------- */
.contact-wrap{background:var(--paper-2);}
.contact-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:60px;}
.contact-info h2{font-size:2rem;margin-bottom:16px;}
.contact-info p{color:var(--steel);margin-bottom:32px;max-width:420px;}
.info-row{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line);}
.info-row:last-of-type{border-bottom:1px solid var(--line);margin-bottom:28px;}
.info-row svg{width:20px;height:20px;color:var(--forest);flex:none;margin-top:2px;}
.info-row b{display:block;font-size:0.92rem;}
.info-row span{color:var(--steel);font-size:0.88rem;}
.whatsapp-btn{display:inline-flex;align-items:center;gap:10px;background:var(--forest);color:var(--white);padding:14px 24px;border-radius:var(--radius);font-weight:600;font-size:0.9rem;}
.whatsapp-btn:hover{background:var(--forest-2);}
form{background:var(--paper);border:1px solid var(--line);padding:36px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;}
.field label{font-family:'JetBrains Mono';font-size:0.7rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--steel);}
.field input,.field select,.field textarea{border:1px solid var(--line);background:var(--paper);padding:12px 14px;font-family:'Inter';font-size:0.92rem;border-radius:var(--radius-sm);color:var(--white);}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--forest);outline-offset:1px;}
.submit-btn{width:100%;background:var(--forest);color:var(--white);font-weight:600;padding:15px;border:none;border-radius:var(--radius);font-size:0.95rem;cursor:pointer;font-family:'Inter';}
.submit-btn:hover{background:var(--forest-2);}
.form-note{font-size:0.78rem;color:var(--steel);margin-top:12px;}
/* ---------- cta band ---------- */
.cta-band{background:var(--paper);border-top:1px solid var(--line);color:var(--white);padding:56px 0;position:relative;overflow:hidden;}
.cta-band .wrap{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:24px;position:relative;z-index:1;}
.cta-band h2{color:var(--white);font-size:1.7rem;}
.cta-band p{color:var(--steel);margin-top:8px;}
/* ---------- footer ---------- */
footer{background:radial-gradient(ellipse 600px 360px at 85% 0%, rgba(59,130,246,0.10), transparent 60%), var(--ink);color:#9AA0AC;padding:52px 0 28px;position:relative;overflow:hidden;}
footer .wrap{position:relative;z-index:1;}
.foot-grid{display:flex;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;gap:32px;padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,0.1);}
.foot-brand .brand-text{color:var(--white);}
.foot-links{display:flex;gap:48px;flex-wrap:wrap;}
.foot-col h5{font-family:'JetBrains Mono';font-size:0.7rem;letter-spacing:0.1em;text-transform:uppercase;color:#7C8A7A;margin-bottom:14px;}
.foot-col a{display:block;color:#C3CBC1;font-size:0.88rem;padding:5px 0;}
.foot-col a:hover{color:var(--signal);}
.foot-bottom{display:flex;justify-content:space-between;padding-top:22px;font-size:0.78rem;flex-wrap:wrap;gap:10px;}
/* ---------- before/after strip (subtle, low-key proof — not a gallery) ---------- */
.ba-strip{display:flex;flex-direction:column;gap:0;max-width:820px;}
.ba-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:20px 0;border-top:1px solid var(--line);}
.ba-row:last-child{border-bottom:1px solid var(--line);}
.ba-thumb{position:relative;flex:1 1 220px;max-width:260px;height:150px;overflow:hidden;border:1px solid var(--line);filter:grayscale(65%) brightness(0.96);transition:filter .35s ease;border-radius:var(--radius);}
.ba-row:hover .ba-thumb{filter:grayscale(0%) brightness(1);}
.ba-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.ba-arrow{font-family:'JetBrains Mono';color:var(--forest);font-size:1.1rem;font-weight:600;flex:0 0 auto;}
.ba-label{flex:1 1 100%;display:flex;justify-content:space-between;margin-top:6px;order:99;}
.ba-label b{font-size:0.84rem;font-family:'Space Grotesk';color:var(--white);}
.ba-label span{font-family:'JetBrains Mono';font-size:0.68rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.05em;}
@media (max-width:640px){
.ba-row{flex-wrap:nowrap;gap:8px;}
.ba-thumb{flex:1 1 45%;max-width:none;height:88px;}
.ba-arrow{font-size:0.85rem;}
.ba-label{font-size:0.78rem;}
}
/* ---------- gradient text (signature futuristic touch) ---------- */
.grad-text{background:linear-gradient(90deg, var(--signal) 0%, var(--signal-2) 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
/* ---------- works-with pill row ---------- */
.works-with{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px;}
.works-with span.label{font-family:'JetBrains Mono';font-size:0.7rem;color:#8B9587;text-transform:uppercase;letter-spacing:0.06em;}
.wpill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:999px;padding:6px 14px;font-size:0.78rem;color:#D7DDD2;font-family:'Inter';}
.wpill .dot{width:6px;height:6px;border-radius:50%;background:var(--signal);box-shadow:0 0 6px var(--signal);}
/* ---------- status readout box ---------- */
.status-box{display:inline-flex;align-items:center;gap:10px;background:rgba(0,0,0,0.35);border:1px solid rgba(59,130,246,0.25);border-radius:var(--radius);padding:12px 18px;font-family:'JetBrains Mono';font-size:0.82rem;color:#BFD9F7;margin-top:28px;}
.status-box .dot{width:7px;height:7px;border-radius:50%;background:var(--signal);box-shadow:0 0 8px var(--signal);flex:none;animation:statuspulse 2s ease-in-out infinite;}
@keyframes statuspulse{0%,100%{opacity:1;}50%{opacity:0.4;}}
/* ---------- stat card row (replaces plain hero-stats on home) ---------- */
.stat-cards{display:flex;flex-wrap:wrap;gap:12px;margin-top:48px;}
.stat-card{flex:1 1 140px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:var(--radius);padding:18px 10px;text-align:center;transition:border-color .2s ease, transform .2s ease;}
.stat-card:hover{border-color:var(--signal);}
.stat-card b{display:block;font-family:'Space Grotesk';font-size:1.5rem;color:var(--white);}
.stat-card span{font-family:'JetBrains Mono';font-size:0.64rem;color:#8B9587;text-transform:uppercase;letter-spacing:0.03em;display:block;margin-top:4px;}
@media (max-width:640px){.stat-card{flex:1 1 40%;}}
/* ---------- bento grid architecture ---------- */
.bento-dotgrid{position:absolute;background-image:radial-gradient(rgba(0,112,243,0.35) 1px, transparent 1px);background-size:14px 14px;-webkit-mask-image:radial-gradient(ellipse at bottom right, black 0%, transparent 72%);mask-image:radial-gradient(ellipse at bottom right, black 0%, transparent 72%);pointer-events:none;}
.bento-services{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px;grid-template-areas:"a a b b" "a a c d" "e e f f";}
.bento-card{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:26px 24px;overflow:hidden;transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;display:flex;flex-direction:column;}
.bento-card:hover{border-color:var(--signal);transform:translateY(-3px);box-shadow:inset 0 0 50px rgba(0,112,243,0.08), 0 0 20px rgba(0,112,243,0.06);}
.bento-a{grid-area:a;}
.bento-b{grid-area:b;}
.bento-c{grid-area:c;}
.bento-d{grid-area:d;}
.bento-e{grid-area:e;}
.bento-f{grid-area:f;}
.bento-card .svc-num{margin-bottom:auto;padding-bottom:12px;}
.bento-card h3{font-size:1.02rem;margin-bottom:8px;}
.bento-card p{color:var(--steel);font-size:0.88rem;}
.bento-card a.more{display:inline-block;margin-top:12px;font-size:0.8rem;color:var(--signal);font-weight:600;}
.bento-a .svc-icon{width:44px;height:44px;}
.bento-a h3{font-size:1.3rem;}
.bento-a p{max-width:320px;}
.bento-a .bento-dotgrid{right:0;bottom:0;width:70%;height:60%;}
.bento-why{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:180px;gap:16px;grid-template-areas:"p p q" "p p r";}
.bento-why .bento-card h4{color:var(--white);font-size:1.05rem;margin-bottom:8px;}
.bento-why .bento-card p{color:var(--steel);font-size:0.88rem;}
.bento-why .mark{font-family:'JetBrains Mono';color:var(--signal);font-size:0.72rem;margin-bottom:14px;display:block;}
.bento-p{grid-area:p;}
.bento-q{grid-area:q;}
.bento-r{grid-area:r;}
.bento-p .bento-dotgrid{right:0;bottom:0;width:60%;height:55%;}
.bento-p h4{font-size:1.3rem;max-width:320px;}
@media (max-width:900px){
.bento-services{grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-template-areas:"a a" "b b" "c d" "e e" "f f";}
.bento-why{grid-template-columns:1fr;grid-auto-rows:auto;grid-template-areas:"p" "q" "r";}
}
/* ---------- editorial "the work" photo spread ---------- */
.work-editorial-grid{position:relative;display:grid;grid-template-columns:1.3fr 0.9fr;gap:56px;align-items:start;padding-bottom:64px;}
.work-photo-main{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;height:480px;position:relative;}
.work-photo-main img{width:100%;height:100%;object-fit:cover;display:block;}
.work-photo-overlap{position:absolute;left:40%;bottom:0;width:260px;height:170px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--ink);z-index:2;}
.work-photo-overlap img{width:100%;height:100%;object-fit:cover;display:block;}
.photo-tag{position:absolute;left:10px;bottom:10px;background:rgba(10,10,10,0.88);border:1px solid var(--line);color:var(--white);font-family:'JetBrains Mono';font-size:0.6rem;letter-spacing:0.04em;text-transform:uppercase;padding:5px 9px;border-radius:var(--radius);z-index:3;}
.work-text-block{position:relative;padding-top:8px;}
.work-text-block h2{font-size:1.9rem;margin:16px 0;}
.work-text-block p{color:var(--steel);margin-bottom:0;max-width:420px;}
/* ---------- on-the-ground band ---------- */
.ground-band{background:var(--paper-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);}
.ground-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:64px;align-items:center;}
.ground-headline h2{font-size:2rem;margin:16px 0;}
.ground-headline p{color:var(--steel);max-width:440px;}
.ground-panel{display:flex;flex-direction:column;}
.ground-row{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-top:1px solid var(--line);}
.ground-row:last-child{border-bottom:1px solid var(--line);}
.ground-label{font-family:'JetBrains Mono';font-size:0.72rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.04em;flex:0 0 auto;}
.ground-value{font-family:'Space Grotesk';font-size:0.92rem;color:var(--white);text-align:right;}
/* ---------- case study feature blocks (bespoke, non-repeating) ---------- */
.case-feature{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;align-items:center;padding:56px 0;border-top:1px solid var(--line);}
.case-feature:last-of-type{border-bottom:1px solid var(--line);}
.case-feature-diagram{border:1px solid var(--line);border-radius:var(--radius);height:280px;background:var(--paper);display:flex;align-items:center;justify-content:center;padding:20px;}
.case-feature-diagram svg{width:100%;height:100%;}
.case-feature-text h3{font-size:1.5rem;margin:14px 0 12px;}
.case-feature-text p{color:var(--steel);margin-bottom:18px;max-width:480px;}
.case-feature-stats{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;}
.case-feature-stats span{font-family:'JetBrains Mono';font-size:0.72rem;color:var(--signal);border:1px solid var(--line);padding:5px 10px;border-radius:var(--radius);}
.case-feature-scale{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);}
.scale-num{padding:20px 24px;border-top:1px solid var(--line);}
.scale-num:first-child{border-top:none;}
.scale-num b{display:block;font-family:'Space Grotesk';font-size:2.6rem;color:var(--white);line-height:1;}
.scale-num span{font-family:'JetBrains Mono';font-size:0.68rem;color:var(--steel);text-transform:uppercase;letter-spacing:0.04em;}
@media (max-width:900px){
.work-editorial-grid{grid-template-columns:1fr;}
.work-photo-overlap{position:relative;left:0;bottom:0;width:70%;margin-top:-40px;margin-left:auto;margin-right:24px;}
.ground-grid{grid-template-columns:1fr;gap:32px;}
.ground-value{text-align:left;}
.case-feature{grid-template-columns:1fr;}
}
/* ---------- about ---------- */
.timeline{display:flex;flex-direction:column;gap:0;max-width:640px;}
.tl-item{display:grid;grid-template-columns:100px 1fr;gap:20px;padding:22px 0;border-top:1px solid var(--line);}
.tl-item:last-child{border-bottom:1px solid var(--line);}
.tl-item b{font-family:'JetBrains Mono';color:var(--forest);}
.tl-item p{color:var(--steel);font-size:0.92rem;}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
/* ---------- responsive ---------- */
@media (max-width:980px){
.hero-grid{grid-template-columns:1fr;}
.hero-grid .schematic{display:none;}
.services-grid{grid-template-columns:repeat(2,1fr);}
.why-grid{grid-template-columns:1fr;}
.process-row{grid-template-columns:1fr 1fr;row-gap:36px;}
.proc-step:nth-child(2)::after{display:none;}
.prod-grid{grid-template-columns:repeat(3,1fr);}
.prod-detail-grid{grid-template-columns:repeat(2,1fr);}
.contact-grid{grid-template-columns:1fr;}
.card-grid{grid-template-columns:repeat(2,1fr);}
.about-grid{grid-template-columns:1fr;}
.stat-row{grid-template-columns:1fr;}
}
@media (max-width:720px){
nav.links{display:none;}
.burger{display:flex;}
.call-btn{display:none;}
.hero h1{font-size:2.2rem;}
.page-hero h1{font-size:1.9rem;}
.hero-stats{gap:22px;}
.services-grid{grid-template-columns:1fr;}
.prod-grid{grid-template-columns:repeat(2,1fr);}
.prod-detail-grid{grid-template-columns:1fr;}
.form-row{grid-template-columns:1fr;}
section.pad{padding:56px 0;}
.card-grid{grid-template-columns:1fr;}
.cta-band .wrap{flex-direction:column;align-items:flex-start;}
}
/* =========================================================================
HOMEPAGE — PHASE 1: header/nav, hero, statistics
"Rack Elevation" — Composition B, "The Elevation".
See EXGADGET_VISUAL_SYSTEM.md. Everything below is scoped to `body.home`
(index.html only) so no other page is affected.
========================================================================= */
body.home,body.services,body.products,body.blog,body.about,body.contact,body.article{
--eg-paper:#EFECE4;
--eg-ink:#1B1D20;
/* darkened from #6C7178, which measured 4.17:1 on paper and failed AA for
body-size text — EXGADGET_VISUAL_SYSTEM.md §2 anticipated this check.
#63686F holds the same cool-grey hue at 4.76:1. */
--eg-steel:#63686F;
/* Running prose only. Measured: 74.6% of the 15-19px reading layer sat on
--eg-steel at 4.76:1, clearing AA by 0.26 and reading faint rather than
small. #4E525A holds the same cool-grey hue at 6.64:1. --eg-steel above is
deliberately unchanged so it stays the label/secondary tone and the
label-vs-prose hierarchy widens instead of flattening. */
--eg-body-ink:#4E525A;
--eg-rule:#CFCABD;
--eg-graphite:#23262A;
--eg-brass:#8A5E22;
/* tonal variant of the brass marking accent, for use on graphite only —
the base brass fails contrast against #23262A */
--eg-brass-dark:#C79A4B;
/* identity colour — the ExGadgeT wordmark ONLY. Never a rule, button, link
state, focus ring, border or icon fill: brass remains the functional accent. */
--eg-brand:#6B2737;
/* reverse variant for graphite: #6B2737 on #23262A is ~1.9:1 and unreadable */
--eg-brand-reverse:#C0798A;
--eg-on-graphite:#A8ADB4;
/* the reverse of --eg-body-ink: running prose on graphite. #A8ADB4 measures
6.73:1 on #23262A and stays the label tone there; #BCC1C7 is 8.39:1. */
--eg-body-on-graphite:#BCC1C7;
--eg-graphite-rule:rgba(239,236,228,0.15);
--eg-radius:2px;
/* one motion vocabulary for the whole site, so nothing has to invent its own.
--eg-in is an entrance, --eg-ui is a pointer/focus response. Both sit inside
the ranges the polish pass set: entrances 300-550ms, interactions 150-250ms. */
--eg-ease:cubic-bezier(.22,.8,.22,1);
--eg-in:.42s;
--eg-ui:.18s;
--eg-step:34ms;
/* 'Archivo Condensed' is not a real Google Fonts family (the API 400s on it):
the condensed cut comes from the Archivo variable font's wdth axis, applied
via font-stretch on the heading selectors below. */
--eg-font-head:'Archivo','Arial Narrow',sans-serif;
--eg-font-body:'IBM Plex Sans', sans-serif;
--eg-font-mono:'IBM Plex Mono', monospace;
/* left gutter: aligns hero content to the 1180px container while the
graphite column bleeds to the viewport edge */
--eg-gutter:max(28px, calc((100vw - 1180px) / 2 + 28px));
}
/* ---------- header / nav: solid paper, hairline rule, wordmark only ------ */
body.home header,body.services header,body.products header,body.blog header,body.about header,body.contact header,body.article header{background:var(--eg-paper);border-bottom:1px solid var(--eg-rule);}
/* the phone CTA is gone from the header: nav follows the wordmark and the
right side stays deliberately open rather than being filled or stretched */
body.home .nav,body.services .nav,body.products .nav,body.blog .nav,body.about .nav,body.contact .nav,body.article .nav{justify-content:flex-start;gap:0;height:84px;}
body.home .burger,body.services .burger,body.products .burger,body.blog .burger,body.about .burger,body.contact .burger,body.article .burger{margin-left:auto;}
body.home .brand,body.services .brand,body.products .brand,body.blog .brand,body.about .brand,body.contact .brand,body.article .brand{gap:0;padding-right:12px;}
body.home .brand-text,body.services .brand-text,body.products .brand-text,body.blog .brand-text,body.about .brand-text,body.contact .brand-text,body.article .brand-text{font-family:var(--eg-font-head);font-weight:700;font-size:1.27rem;letter-spacing:0.005em;color:var(--eg-ink);line-height:1.05;}
/* tri-colour lockup: Ex ink · Gadge oxblood · T ink. No brass inside the mark —
the wordmark is identity, brass is function, and they never share a surface. */
body.home .brand-text .brand-g,body.services .brand-text .brand-g,body.products .brand-text .brand-g,body.blog .brand-text .brand-g,body.about .brand-text .brand-g,body.contact .brand-text .brand-g,body.article .brand-text .brand-g{color:var(--eg-brand);}
body.home .brand-t,body.services .brand-t,body.products .brand-t,body.blog .brand-t,body.about .brand-t,body.contact .brand-t,body.article .brand-t{color:var(--eg-ink);}
body.home .brand-sub,body.services .brand-sub,body.products .brand-sub,body.blog .brand-sub,body.about .brand-sub,body.contact .brand-sub,body.article .brand-sub{display:block;font-family:var(--eg-font-body);font-weight:500;font-size:0.59rem;color:var(--eg-steel);letter-spacing:0.16em;text-transform:uppercase;margin-top:3px;white-space:nowrap;}
/* ---------- brand: approved ExGadgeT wordmark artwork -------------------
The wordmark is the approved SVG, not type. Its height comes from the
artwork's own cap ratio -- cap 686 of an 886-unit viewBox -- so the cap
lands on 14px and matches the frozen header exactly; the width follows the
intrinsic ratio, so the proportions can never drift. The margins put the
artwork's baseline exactly where the type's baseline sat (0.2rem above the
cap line, 0.406rem below), so the brand block keeps its 42.4px height and
the legal line does not move. Verified at 390/430/834/1141/1440. */
.brand-logo{display:block;height:1.13rem;width:auto;margin:0.2rem 0 0.406rem;}
body.home nav.links,body.services nav.links,body.products nav.links,body.blog nav.links,body.about nav.links,body.contact nav.links,body.article nav.links{gap:22px;flex-wrap:nowrap;margin-left:clamp(32px,4.5vw,64px);}
body.home nav.links a,body.services nav.links a,body.products nav.links a,body.blog nav.links a,body.about nav.links a,body.contact nav.links a,body.article nav.links a{font-family:var(--eg-font-head);font-weight:600;font-size:0.90rem;letter-spacing:0.01em;text-transform:uppercase;color:var(--eg-ink);white-space:nowrap;}
body.home nav.links a::after,body.services nav.links a::after,body.products nav.links a::after,body.blog nav.links a::after,body.about nav.links a::after,body.contact nav.links a::after,body.article nav.links a::after{background:var(--eg-brass);box-shadow:none;height:2px;}
body.home nav.links a.active,body.services nav.links a.active,body.products nav.links a.active,body.blog nav.links a.active,body.about nav.links a.active,body.contact nav.links a.active,body.article nav.links a.active{color:var(--eg-ink);}
body.home nav.links a.active::after,body.services nav.links a.active::after,body.products nav.links a.active::after,body.blog nav.links a.active::after,body.about nav.links a.active::after,body.contact nav.links a.active::after,body.article nav.links a.active::after{width:100%;}
body.home nav.links a:hover,body.services nav.links a:hover,body.products nav.links a:hover,body.blog nav.links a:hover,body.about nav.links a:hover,body.contact nav.links a:hover,body.article nav.links a:hover{color:var(--eg-brass);}
body.home .burger span,body.services .burger span,body.products .burger span,body.blog .burger span,body.about .burger span,body.contact .burger span,body.article .burger span{background:var(--eg-ink);}
body.home .mnav,body.services .mnav,body.products .mnav,body.blog .mnav,body.about .mnav,body.contact .mnav,body.article .mnav{background:var(--eg-paper);border-top:1px solid var(--eg-rule);}
body.home .mnav a,body.services .mnav a,body.products .mnav a,body.blog .mnav a,body.about .mnav a,body.contact .mnav a,body.article .mnav a{color:var(--eg-ink);font-family:var(--eg-font-body);font-size:1rem;border-bottom:1px solid var(--eg-rule);min-height:48px;display:flex;align-items:center;padding:14px 28px;}
body.home a:focus-visible,body.services a:focus-visible,body.home button:focus-visible,body.services button:focus-visible,body.products a:focus-visible,body.blog a:focus-visible,body.about a:focus-visible,body.contact a:focus-visible,body.products button:focus-visible,body.blog button:focus-visible,body.about button:focus-visible,body.contact button:focus-visible,body.article a:focus-visible,body.article button:focus-visible{outline:2px solid var(--eg-brass);outline-offset:2px;}
/* ---------- the capability sequence: DESIGN -> DEPLOY -> SUPPORT --------
A secondary brand/system statement occupying the space the phone CTA left.
Not a CTA, not navigation, not contact. The words stay steel; only the
lead-in tick and the arrows carry brass, the same 1px marking language as
the hero rail and the section eyebrows.
------------------------------------------------------------------------ */
body.home .eg-seq,body.services .eg-seq,body.products .eg-seq,body.blog .eg-seq,body.about .eg-seq,body.contact .eg-seq,body.article .eg-seq{margin-left:auto;display:flex;align-items:center;white-space:nowrap;
font-family:var(--eg-font-body);font-weight:500;font-size:0.85rem;letter-spacing:0.185em;
text-transform:uppercase;color:var(--eg-steel);}
body.home .eg-seq-tick,body.services .eg-seq-tick,body.products .eg-seq-tick,body.blog .eg-seq-tick,body.about .eg-seq-tick,body.contact .eg-seq-tick,body.article .eg-seq-tick{width:18px;height:1px;background:var(--eg-brass);margin-right:15px;
flex:none;transform-origin:left center;}
body.home .eg-seq-arrow,body.services .eg-seq-arrow,body.products .eg-seq-arrow,body.blog .eg-seq-arrow,body.about .eg-seq-arrow,body.contact .eg-seq-arrow,body.article .eg-seq-arrow{color:var(--eg-brass);margin:0 .6em;letter-spacing:0;font-size:1.02em;}
/* entrance: the tick draws, then the words lift in behind it. One pass,
~660ms end to end, `both`-filled so it settles and never repeats. */
@keyframes egSeqTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes egSeqRise{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
body.home .eg-seq-tick,body.services .eg-seq-tick,body.products .eg-seq-tick,body.blog .eg-seq-tick,body.about .eg-seq-tick,body.contact .eg-seq-tick,body.article .eg-seq-tick{animation:egSeqTick .28s cubic-bezier(.2,.8,.2,1) .04s both;}
/* every child is a span, so order is addressed by position, not type */
body.home .eg-seq > *:nth-child(n+2),body.services .eg-seq > *:nth-child(n+2),body.products .eg-seq > *:nth-child(n+2),body.blog .eg-seq > *:nth-child(n+2),body.about .eg-seq > *:nth-child(n+2),body.contact .eg-seq > *:nth-child(n+2),body.article .eg-seq > *:nth-child(n+2){animation:egSeqRise .24s cubic-bezier(.2,.8,.2,1) both;}
body.home .eg-seq > *:nth-child(2),body.services .eg-seq > *:nth-child(2),body.products .eg-seq > *:nth-child(2),body.blog .eg-seq > *:nth-child(2),body.about .eg-seq > *:nth-child(2),body.contact .eg-seq > *:nth-child(2),body.article .eg-seq > *:nth-child(2){animation-delay:.240s;}
body.home .eg-seq > *:nth-child(3),body.services .eg-seq > *:nth-child(3),body.products .eg-seq > *:nth-child(3),body.blog .eg-seq > *:nth-child(3),body.about .eg-seq > *:nth-child(3),body.contact .eg-seq > *:nth-child(3),body.article .eg-seq > *:nth-child(3){animation-delay:.285s;}
body.home .eg-seq > *:nth-child(4),body.services .eg-seq > *:nth-child(4),body.products .eg-seq > *:nth-child(4),body.blog .eg-seq > *:nth-child(4),body.about .eg-seq > *:nth-child(4),body.contact .eg-seq > *:nth-child(4),body.article .eg-seq > *:nth-child(4){animation-delay:.330s;}
body.home .eg-seq > *:nth-child(5),body.services .eg-seq > *:nth-child(5),body.products .eg-seq > *:nth-child(5),body.blog .eg-seq > *:nth-child(5),body.about .eg-seq > *:nth-child(5),body.contact .eg-seq > *:nth-child(5),body.article .eg-seq > *:nth-child(5){animation-delay:.375s;}
body.home .eg-seq > *:nth-child(6),body.services .eg-seq > *:nth-child(6),body.products .eg-seq > *:nth-child(6),body.blog .eg-seq > *:nth-child(6),body.about .eg-seq > *:nth-child(6),body.contact .eg-seq > *:nth-child(6),body.article .eg-seq > *:nth-child(6){animation-delay:.420s;}
/* ---------- the sequence drops to its own header row before it crowds ---
Measured: below ~1140px the wordmark + nav + sequence stop fitting one
row comfortably, so the sequence becomes a deliberate second header line.
The nav itself still collapses to the burger at 900px, unchanged. */
@media (max-width:1140px){
body.home .nav,body.services .nav,body.products .nav,body.blog .nav,body.about .nav,body.contact .nav,body.article .nav{flex-wrap:wrap;height:auto;padding-top:18px;padding-bottom:0;}
body.home .eg-seq,body.services .eg-seq,body.products .eg-seq,body.blog .eg-seq,body.about .eg-seq,body.contact .eg-seq,body.article .eg-seq{order:3;flex-basis:100%;margin-left:0;margin-top:18px;
padding:13px 0;position:relative;}
/* the divider runs edge to edge; the sequence keeps the container gutter */
body.home .eg-seq::before,body.services .eg-seq::before,body.products .eg-seq::before,body.blog .eg-seq::before,body.about .eg-seq::before,body.contact .eg-seq::before,body.article .eg-seq::before{content:"";position:absolute;top:0;left:-28px;right:-28px;
height:1px;background:var(--eg-rule);}
body.home .burger,body.services .burger,body.products .burger,body.blog .burger,body.about .burger,body.contact .burger,body.article .burger{order:2;}
}
/* ---------- hero: two-column elevation, no photography ------------------- */
body.home .eg-hero{background:var(--eg-paper);color:var(--eg-ink);}
body.home .eg-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(330px,31vw,500px);align-items:stretch;}
body.home .eg-hero-main{position:relative;padding:104px 60px 96px var(--eg-gutter);}
body.home .eg-hero-body{padding-left:34px;}
/* the rack rail — a measurement rail, not decoration: the hero aligns to it */
body.home .eg-rail{position:absolute;left:var(--eg-gutter);top:104px;bottom:96px;width:15px;border-left:1px solid var(--eg-rule);}
/* minor divisions: quiet. major divisions (every 4th): brass — the marking
accent earns an informational job rather than being decoration */
body.home .eg-rail::before{content:"";position:absolute;left:1px;top:0;bottom:0;width:7px;background-image:repeating-linear-gradient(to bottom,var(--eg-rule) 0 1px,transparent 1px 24px);}
body.home .eg-rail::after{content:"";position:absolute;left:1px;top:0;bottom:0;width:15px;background-image:repeating-linear-gradient(to bottom,var(--eg-brass) 0 1px,transparent 1px 96px);}
body.home .eg-eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--eg-font-body);font-weight:500;font-size:0.76rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:26px;}
body.home .eg-eyebrow::before{content:"";width:16px;height:1px;background:var(--eg-brass);flex:none;}
body.home .eg-hero h1{font-family:var(--eg-font-head);font-weight:700;font-size:clamp(2.9rem,5.2vw,4.4rem);line-height:1.02;letter-spacing:-0.015em;color:var(--eg-ink);}
body.home .eg-lead{font-family:var(--eg-font-body);font-weight:400;font-size:1.14rem;line-height:1.62;color:var(--eg-steel);margin-top:24px;max-width:460px;}
/* actions: a single filled primary. Phone and WhatsApp were removed from the
hero so the one thing the hero asks for is the quote; contact lives in the
footer and on the contact page. */
body.home .eg-actions{display:flex;align-items:center;gap:32px;flex-wrap:wrap;margin-top:44px;}
body.home .eg-btn-primary{background:var(--eg-ink);color:var(--eg-paper);font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;padding:15px 28px;border-radius:var(--eg-radius);border:1px solid var(--eg-ink);display:inline-block;transition:background .15s ease,border-color .15s ease;}
body.home .eg-btn-primary:hover{background:#000;border-color:#000;}
/* ---------- graphite statistics column ----------------------------------
One continuous architectural surface divided into six bays by fine rules.
Not cards. No icons, gauges, bars or live indicators — a quantity schedule.
------------------------------------------------------------------------ */
body.home .eg-schedule{background:var(--eg-graphite);color:var(--eg-paper);display:flex;align-items:center;}
body.home .eg-schedule-inner{width:100%;padding:56px 44px;}
body.home .eg-schedule-head{display:flex;align-items:center;gap:10px;font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:22px;}
body.home .eg-schedule-tick{width:14px;height:2px;background:var(--eg-brass-dark);flex:none;}
body.home .eg-bay{display:flex;align-items:baseline;gap:12px;padding:17px 0;border-top:1px solid var(--eg-graphite-rule);}
body.home .eg-bay:last-child{border-bottom:1px solid var(--eg-graphite-rule);}
body.home .eg-bay-label{font-family:var(--eg-font-body);font-weight:400;font-size:0.84rem;color:var(--eg-on-graphite);flex:0 0 auto;}
body.home .eg-bay-leader{flex:1 1 auto;min-width:14px;border-bottom:1px dotted rgba(239,236,228,0.3);transform:translateY(-4px);}
body.home .eg-bay-value{font-family:var(--eg-font-mono);font-weight:500;font-size:1.5rem;line-height:1;color:var(--eg-paper);font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right;min-width:4.7ch;}
/* closing beat for the AMC promise: it is not a counted quantity, so it gets
a rule-draw + fade instead of a count-up. Gated on .eg-anim-ready so the
value is always visible if JS never runs. */
body.home .eg-schedule.eg-anim-ready .eg-bay-final .eg-bay-leader{transform:translateY(-4px) scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
body.home .eg-schedule.eg-anim-ready .eg-bay-final .eg-bay-value{opacity:0;transition:opacity .3s ease .2s;}
body.home .eg-schedule.eg-anim-ready .eg-bay-final.is-in .eg-bay-leader{transform:translateY(-4px) scaleX(1);}
body.home .eg-schedule.eg-anim-ready .eg-bay-final.is-in .eg-bay-value{opacity:1;}
/* ---------- hero entrance: subtle, once, never looping ------------------- */
@keyframes egFadeUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
body.home .eg-stagger{opacity:0;animation:egFadeUp .6s cubic-bezier(.2,.8,.2,1) forwards;}
body.home .eg-stagger:nth-child(1){animation-delay:.02s;}
body.home .eg-stagger:nth-child(2){animation-delay:.10s;}
body.home .eg-stagger:nth-child(3){animation-delay:.18s;}
body.home .eg-stagger:nth-child(4){animation-delay:.26s;}
@media (prefers-reduced-motion: reduce){
body.home .eg-stagger{opacity:1;animation:none;}
body.home .eg-schedule.eg-anim-ready .eg-bay-final .eg-bay-leader,
body.home .eg-schedule.eg-anim-ready .eg-bay-final .eg-bay-value{transition:none;}
}
/* ---------- responsive --------------------------------------------------- */
/* the uppercase condensed nav is wider than the old nav, so the homepage
collapses to the burger earlier than the site default (720px) */
@media (max-width:900px){
body.home nav.links,body.services nav.links,body.products nav.links,body.blog nav.links,body.about nav.links,body.contact nav.links,body.article nav.links{display:none;}
body.home .burger,body.services .burger,body.products .burger,body.blog .burger,body.about .burger,body.contact .burger,body.article .burger{display:flex;}
}
@media (max-width:1023px){
body.home .eg-hero-grid{grid-template-columns:1fr;}
body.home .eg-hero-main{padding:76px 28px 64px var(--eg-gutter);}
body.home .eg-rail{top:76px;bottom:64px;}
body.home .eg-schedule-inner{padding:44px var(--eg-gutter);}
body.home .eg-lead{max-width:520px;}
}
@media (max-width:720px){
body.home .eg-hero-main{padding:56px 20px 52px 20px;}
body.home .eg-hero-body{padding-left:26px;}
body.home .eg-rail{left:20px;top:56px;bottom:52px;width:11px;}
body.home .eg-rail::before{width:6px;}
body.home .eg-rail::after{width:11px;}
body.home .eg-hero h1{font-size:2.35rem;}
body.home .eg-lead{font-size:1rem;margin-top:20px;}
body.home .eg-actions{margin-top:34px;}
body.home .eg-btn-primary{width:100%;text-align:center;}
body.home .eg-schedule-inner{padding:38px 20px;}
body.home .eg-bay{padding:15px 0;}
body.home .eg-bay-label{font-size:0.8rem;}
body.home .eg-bay-value{font-size:1.3rem;}
}
/* =========================================================================
HOMEPAGE — PHASE 2: services, selected work, why, coverage, CTA, footer.
Everything scoped to `body.home` (index.html only). No photography, no
icons, no cards: the page is carried by structure, type and real figures.
The label / dotted-leader / tabular-figure device introduced by the hero
statistics recurs in the project records and is the page's signature.
========================================================================= */
/* the site default body is still the dark theme; the homepage runs on paper */
body.home,body.services,body.products,body.blog,body.about,body.contact,body.article{background:var(--eg-paper);color:var(--eg-ink);}
/* the condensed width axis — every selector that uses --eg-font-head */
body.home .brand-text,body.services .brand-text,body.home nav.links a,body.services nav.links a,body.home .eg-hero h1,body.home .eg-sec-head h2,body.home .eg-svc-name,body.home .eg-rec-name,body.home .eg-rec-q,body.home .eg-why-item h3,body.home .eg-cta h2,body.services .eg-cta h2,body.products .brand-text,body.blog .brand-text,body.about .brand-text,body.contact .brand-text,body.products nav.links a,body.blog nav.links a,body.about nav.links a,body.contact nav.links a,body.products .eg-cta h2,body.blog .eg-cta h2,body.about .eg-cta h2,body.contact .eg-cta h2,body.article .brand-text,body.article nav.links a,body.article .eg-cta h2{font-stretch:78%;}
/* the measurement rail draws downward once on load — the page's one flourish,
and it reveals a structural device rather than decorating empty space */
@keyframes egRailDraw{from{clip-path:inset(0 0 100% 0);}to{clip-path:inset(0 0 0 0);}}
body.home .eg-rail{animation:egRailDraw .4s cubic-bezier(.2,.8,.2,1) .06s both;}
/* ---------- shared band + section head ---------------------------------- */
body.home .eg-band{background:var(--eg-paper);color:var(--eg-ink);padding:104px 0;}
body.home .eg-band-dark{background:var(--eg-graphite);color:var(--eg-paper);}
body.home .eg-band-dark .eg-eyebrow{color:var(--eg-on-graphite);}
body.home .eg-band-dark .eg-eyebrow::before{background:var(--eg-brass-dark);}
/* paper-to-paper section boundaries get a hairline; surface changes don't need
one. Same rule language as the header and the schedules. */
body.home .eg-band-ruled{border-top:1px solid var(--eg-rule);}
/* an intro band that only carries a heading hands straight to what follows,
rather than stacking its bottom padding against the next section's top */
/* an intro band hands to the next section without stacking full padding, but
keeps enough room that the graphite edge below reads as deliberate */
body.home .eg-band-intro{padding-bottom:104px;}
body.home .eg-band-intro .eg-sec-head{margin-bottom:0;}
/* the terms list carries its own top rule and 33px item padding, so the full
52px head margin doubled up into dead space here. The rule now sits close
under the intro paragraph and the first entry carries a shorter top pad —
head-to-"01" measures ~39px rather than ~58px, without closing the list up. */
body.home #why .eg-sec-head{margin-bottom:14px;}
body.home #why .eg-why-item:first-child{padding-top:24px;}
body.home .eg-rec-light{padding-bottom:0;}
body.home .eg-sec-head{max-width:660px;margin-bottom:52px;}
body.home .eg-sec-head h2{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.95rem,3.1vw,2.5rem);line-height:1.12;letter-spacing:-0.01em;color:inherit;}
body.home .eg-sec-head p{font-family:var(--eg-font-body);font-weight:400;font-size:1.05rem;line-height:1.62;color:var(--eg-steel);margin-top:16px;max-width:560px;}
/* ---------- services: a numbered capability schedule, not a card grid ---- */
body.home .eg-svc{list-style:none;border-top:1px solid var(--eg-rule);}
body.home .eg-svc-row{display:grid;grid-template-columns:3.4rem minmax(0,1fr) auto;align-items:baseline;gap:0 28px;padding:27px 0;border-bottom:1px solid var(--eg-rule);transition:border-bottom-color .18s ease;}
body.home .eg-svc-row:hover{border-bottom-color:var(--eg-ink);}
body.home .eg-svc-num{font-family:var(--eg-font-mono);font-weight:500;font-size:0.8rem;color:var(--eg-steel);font-variant-numeric:tabular-nums;}
body.home .eg-svc-name{font-family:var(--eg-font-head);font-weight:600;font-size:1.42rem;line-height:1.2;color:var(--eg-ink);}
body.home .eg-svc-desc{font-family:var(--eg-font-body);font-weight:400;font-size:0.97rem;line-height:1.6;color:var(--eg-steel);margin-top:7px;max-width:58ch;}
body.home .eg-svc-link{font-family:var(--eg-font-body);font-weight:500;font-size:0.86rem;color:var(--eg-ink);white-space:nowrap;border-bottom:1px solid transparent;padding-bottom:2px;transition:color .18s ease,border-bottom-color .18s ease;}
body.home .eg-svc-row:hover .eg-svc-link,
body.home .eg-svc-link:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.home .eg-svc-row.reveal:nth-child(1){transition-delay:0ms;}
body.home .eg-svc-row.reveal:nth-child(2){transition-delay:45ms;}
body.home .eg-svc-row.reveal:nth-child(3){transition-delay:90ms;}
body.home .eg-svc-row.reveal:nth-child(4){transition-delay:135ms;}
body.home .eg-svc-row.reveal:nth-child(5){transition-delay:180ms;}
body.home .eg-svc-row.reveal:nth-child(6){transition-delay:225ms;}
/* brands: a specification note closing the services schedule — not a wall */
body.home .eg-brands{margin-top:42px;padding-top:24px;border-top:1px solid var(--eg-brass);}
body.home .eg-brands-label{display:block;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:11px;}
/* a measured specification column, not a paragraph running the full width:
the shorter measure plus balanced wrapping makes the 2nd/3rd lines read as
deliberate rather than as accidental overflow */
body.home .eg-brands-list{font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;line-height:1.85;color:var(--eg-ink);max-width:32em;text-wrap:balance;}
/* each brand carries its trailing separator as one unbreakable unit: a name
never splits across lines (TP-Link, CP Plus, D-Link) and a line never opens
on an orphaned middot. The break opportunity is the real space after it —
the existing whitespace fix, kept intact. */
body.home .eg-b{white-space:nowrap;}
body.home .eg-sep{color:var(--eg-rule);margin:0 2px;}
body.home .eg-brands-more{color:var(--eg-steel);font-weight:400;}
/* ---------- selected work: project records ------------------------------
No photography. The visual anchor is the delivered-scope schedule, and the
*length* of that schedule is the editorial argument: Basilica's runs nine
rows (breadth), Crescent Bay's runs three (depth).
------------------------------------------------------------------------ */
body.home .eg-rec{padding:84px 0;}
body.home .eg-rec-dark{background:var(--eg-graphite);color:var(--eg-paper);}
body.home .eg-rec-light{background:var(--eg-paper);color:var(--eg-ink);}
body.home .eg-rec-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(290px,31%,380px);gap:0 64px;align-items:start;}
body.home .eg-rec-ref{font-family:var(--eg-font-mono);font-weight:500;font-size:0.72rem;letter-spacing:0.07em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:16px;}
body.home .eg-rec-dark .eg-rec-ref{color:var(--eg-on-graphite);}
body.home .eg-rec-name{font-family:var(--eg-font-head);font-weight:700;font-size:clamp(1.8rem,3.2vw,2.55rem);line-height:1.06;letter-spacing:-0.012em;color:inherit;}
body.home .eg-rec-q{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.12rem,1.7vw,1.35rem);line-height:1.32;color:inherit;margin-top:15px;max-width:34ch;}
body.home .eg-rec-body{font-family:var(--eg-font-body);font-weight:400;font-size:1.01rem;line-height:1.68;color:var(--eg-steel);margin-top:19px;max-width:60ch;}
body.home .eg-rec-dark .eg-rec-body{color:var(--eg-on-graphite);}
body.home .eg-rec-partner{font-family:var(--eg-font-body);font-weight:400;font-size:0.85rem;line-height:1.5;color:var(--eg-steel);margin-top:20px;padding-left:13px;border-left:2px solid var(--eg-brass);}
body.home .eg-rec-dark .eg-rec-partner{color:var(--eg-on-graphite);border-left-color:var(--eg-brass-dark);}
body.home .eg-rec-tags{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:25px;}
body.home .eg-rec-tag{display:inline-flex;align-items:center;gap:8px;font-family:var(--eg-font-body);font-weight:500;font-size:0.73rem;letter-spacing:0.09em;text-transform:uppercase;color:var(--eg-steel);transition:color .18s ease;}
body.home .eg-rec-tag::before{content:"";width:6px;height:6px;background:var(--eg-brass);flex:none;}
body.home .eg-rec-tag:hover{color:var(--eg-ink);}
body.home .eg-rec-dark .eg-rec-tag{color:var(--eg-on-graphite);}
body.home .eg-rec-dark .eg-rec-tag::before{background:var(--eg-brass-dark);}
body.home .eg-rec-dark .eg-rec-tag:hover{color:var(--eg-paper);}
body.home .eg-rec-link{display:inline-block;margin-top:28px;font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.home .eg-rec-link:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.home .eg-rec-dark .eg-rec-link{color:var(--eg-paper);border-bottom-color:var(--eg-graphite-rule);}
body.home .eg-rec-dark .eg-rec-link:hover{color:var(--eg-brass-dark);border-bottom-color:var(--eg-brass-dark);}
body.home .eg-rec-sched{margin-top:6px;}
body.home .eg-rec-sched-head{display:flex;align-items:center;gap:10px;font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:16px;}
body.home .eg-rec-dark .eg-rec-sched-head{color:var(--eg-on-graphite);}
body.home .eg-rec-tick{width:14px;height:2px;background:var(--eg-brass);flex:none;}
body.home .eg-rec-dark .eg-rec-tick{background:var(--eg-brass-dark);}
body.home .eg-rec-row{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-top:1px solid var(--eg-rule);}
body.home .eg-rec-row:last-child{border-bottom:1px solid var(--eg-rule);}
body.home .eg-rec-dark .eg-rec-row{border-top-color:var(--eg-graphite-rule);}
body.home .eg-rec-dark .eg-rec-row:last-child{border-bottom-color:var(--eg-graphite-rule);}
body.home .eg-rec-label{font-family:var(--eg-font-body);font-weight:400;font-size:0.82rem;color:var(--eg-steel);flex:0 0 auto;}
body.home .eg-rec-dark .eg-rec-label{color:var(--eg-on-graphite);}
body.home .eg-rec-leader{flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--eg-rule);transform:translateY(-4px);transform-origin:left center;}
body.home .eg-rec-dark .eg-rec-leader{border-bottom-color:rgba(239,236,228,0.28);}
body.home .eg-rec-val{font-family:var(--eg-font-mono);font-weight:500;font-size:0.94rem;line-height:1.3;color:var(--eg-ink);font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right;}
body.home .eg-rec-dark .eg-rec-val{color:var(--eg-paper);}
/* schedule rows settle in as the record enters view; the leader draws with
them. Gated on .in (added by main.js) so nothing is hidden if JS never runs. */
@keyframes egRowIn{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
@keyframes egLeaderDraw{from{transform:translateY(-4px) scaleX(0);}to{transform:translateY(-4px) scaleX(1);}}
body.home .eg-rec.in .eg-rec-row{animation:egRowIn .34s cubic-bezier(.2,.8,.2,1) both;}
body.home .eg-rec.in .eg-rec-leader{animation:egLeaderDraw .26s cubic-bezier(.2,.8,.2,1) both;}
body.home .eg-rec.in .eg-rec-row:nth-child(2),body.home .eg-rec.in .eg-rec-row:nth-child(2) .eg-rec-leader{animation-delay:40ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(3),body.home .eg-rec.in .eg-rec-row:nth-child(3) .eg-rec-leader{animation-delay:80ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(4),body.home .eg-rec.in .eg-rec-row:nth-child(4) .eg-rec-leader{animation-delay:120ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(5),body.home .eg-rec.in .eg-rec-row:nth-child(5) .eg-rec-leader{animation-delay:160ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(6),body.home .eg-rec.in .eg-rec-row:nth-child(6) .eg-rec-leader{animation-delay:200ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(7),body.home .eg-rec.in .eg-rec-row:nth-child(7) .eg-rec-leader{animation-delay:240ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(8),body.home .eg-rec.in .eg-rec-row:nth-child(8) .eg-rec-leader{animation-delay:280ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(9),body.home .eg-rec.in .eg-rec-row:nth-child(9) .eg-rec-leader{animation-delay:320ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(10),body.home .eg-rec.in .eg-rec-row:nth-child(10) .eg-rec-leader{animation-delay:360ms;}
body.home .eg-allwork{margin-top:52px;}
body.home .eg-allwork a{font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.home .eg-allwork a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
/* ---------- why: editorial numbered terms, not cards -------------------- */
body.home .eg-why{list-style:none;border-top:1px solid var(--eg-rule);}
body.home .eg-why-item{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:0 28px;padding:33px 0;border-bottom:1px solid var(--eg-rule);}
body.home .eg-why-num{font-family:var(--eg-font-mono);font-weight:500;font-size:0.8rem;color:var(--eg-steel);font-variant-numeric:tabular-nums;padding-top:6px;}
body.home .eg-why-item h3{font-family:var(--eg-font-head);font-weight:600;font-size:1.48rem;line-height:1.18;color:var(--eg-ink);}
body.home .eg-why-item p{font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.66;color:var(--eg-steel);margin-top:10px;max-width:64ch;}
body.home .eg-why-item.reveal:nth-child(2){transition-delay:70ms;}
body.home .eg-why-item.reveal:nth-child(3){transition-delay:140ms;}
/* ---------- on the ground: the quietest section on the page ------------- */
body.home .eg-ground-grid{display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,38%,470px);gap:0 72px;align-items:start;}
body.home .eg-ground-copy .eg-sec-head{margin-bottom:0;}
body.home .eg-cov{border-top:1px solid var(--eg-rule);margin-top:6px;}
body.home .eg-cov-row{display:grid;grid-template-columns:minmax(104px,32%) minmax(0,1fr);gap:0 18px;padding:17px 0;border-bottom:1px solid var(--eg-rule);}
body.home .eg-cov-label{font-family:var(--eg-font-body);font-weight:500;font-size:0.69rem;letter-spacing:0.13em;text-transform:uppercase;color:var(--eg-steel);padding-top:4px;}
body.home .eg-cov-val{font-family:var(--eg-font-body);font-weight:400;font-size:0.98rem;line-height:1.5;color:var(--eg-ink);}
/* ---------- cta: graphite, continuous with the footer ------------------- */
body.home .eg-cta,body.services .eg-cta,body.products .eg-cta,body.blog .eg-cta,body.about .eg-cta,body.contact .eg-cta,body.article .eg-cta{background:var(--eg-graphite);color:var(--eg-paper);padding:86px 0;}
body.home .eg-cta-grid,body.services .eg-cta-grid,body.products .eg-cta-grid,body.blog .eg-cta-grid,body.about .eg-cta-grid,body.contact .eg-cta-grid,body.article .eg-cta-grid{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;flex-wrap:wrap;}
body.home .eg-cta h2,body.services .eg-cta h2,body.products .eg-cta h2,body.blog .eg-cta h2,body.about .eg-cta h2,body.contact .eg-cta h2,body.article .eg-cta h2{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.9rem,3.2vw,2.5rem);line-height:1.1;letter-spacing:-0.01em;color:var(--eg-paper);}
body.home .eg-cta p,body.services .eg-cta p,body.products .eg-cta p,body.blog .eg-cta p,body.about .eg-cta p,body.contact .eg-cta p,body.article .eg-cta p{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.6;color:var(--eg-on-graphite);margin-top:14px;max-width:48ch;}
body.home .eg-cta-actions,body.services .eg-cta-actions,body.products .eg-cta-actions,body.blog .eg-cta-actions,body.about .eg-cta-actions,body.contact .eg-cta-actions,body.article .eg-cta-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;}
body.home .eg-btn-invert,body.services .eg-btn-invert,body.products .eg-btn-invert,body.blog .eg-btn-invert,body.about .eg-btn-invert,body.contact .eg-btn-invert,body.article .eg-btn-invert{background:var(--eg-paper);color:var(--eg-graphite);border:1px solid var(--eg-paper);border-radius:var(--eg-radius);font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;padding:15px 28px;display:inline-block;transition:background .15s ease,border-color .15s ease;}
body.home .eg-btn-invert:hover,body.services .eg-btn-invert:hover,body.products .eg-btn-invert:hover,body.blog .eg-btn-invert:hover,body.about .eg-btn-invert:hover,body.contact .eg-btn-invert:hover,body.article .eg-btn-invert:hover{background:#FFFFFF;border-color:#FFFFFF;}
/* ---------- footer: graphite, reverse wordmark, no icon ----------------- */
body.home footer,body.services footer,body.products footer,body.blog footer,body.about footer,body.contact footer,body.article footer{background:var(--eg-graphite);color:var(--eg-on-graphite);padding:62px 0 30px;}
body.home .foot-grid,body.services .foot-grid,body.products .foot-grid,body.blog .foot-grid,body.about .foot-grid,body.contact .foot-grid,body.article .foot-grid{border-bottom:1px solid var(--eg-graphite-rule);padding-bottom:34px;}
body.home .foot-brand .brand-text,body.services .foot-brand .brand-text,body.products .foot-brand .brand-text,body.blog .foot-brand .brand-text,body.about .foot-brand .brand-text,body.contact .foot-brand .brand-text,body.article .foot-brand .brand-text{color:var(--eg-paper);}
body.home footer .brand-text .brand-g,body.services footer .brand-text .brand-g,body.products footer .brand-text .brand-g,body.blog footer .brand-text .brand-g,body.about footer .brand-text .brand-g,body.contact footer .brand-text .brand-g,body.article footer .brand-text .brand-g{color:var(--eg-brand-reverse);}
body.home footer .brand-t,body.services footer .brand-t,body.products footer .brand-t,body.blog footer .brand-t,body.about footer .brand-t,body.contact footer .brand-t,body.article footer .brand-t{color:var(--eg-paper);}
body.home footer .brand-sub,body.services footer .brand-sub,body.products footer .brand-sub,body.blog footer .brand-sub,body.about footer .brand-sub,body.contact footer .brand-sub,body.article footer .brand-sub{color:var(--eg-on-graphite);}
body.home .foot-brand p,body.services .foot-brand p,body.products .foot-brand p,body.blog .foot-brand p,body.about .foot-brand p,body.contact .foot-brand p,body.article .foot-brand p{font-family:var(--eg-font-body);color:var(--eg-on-graphite);line-height:1.6;}
body.home .foot-col h5,body.services .foot-col h5,body.products .foot-col h5,body.blog .foot-col h5,body.about .foot-col h5,body.contact .foot-col h5,body.article .foot-col h5{font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.14em;color:var(--eg-on-graphite);}
body.home .foot-col a,body.services .foot-col a,body.products .foot-col a,body.blog .foot-col a,body.about .foot-col a,body.contact .foot-col a,body.article .foot-col a{font-family:var(--eg-font-body);font-size:0.9rem;color:#C9CDD3;transition:color .15s ease;}
body.home .foot-col a:hover,body.services .foot-col a:hover,body.products .foot-col a:hover,body.blog .foot-col a:hover,body.about .foot-col a:hover,body.contact .foot-col a:hover,body.article .foot-col a:hover{color:var(--eg-paper);}
/* the site-wide conversion point. It is a link in the contact column, not a
banner: no page carries its own quote CTA any more, so this is the one
universal route to the enquiry form. Set a step above the phone and
WhatsApp routes it sits with, and closed off from them by a hairline. */
body.home .foot-col a.foot-quote,body.services .foot-col a.foot-quote,body.products .foot-col a.foot-quote,body.blog .foot-col a.foot-quote,body.about .foot-col a.foot-quote,body.contact .foot-col a.foot-quote,body.article .foot-col a.foot-quote{color:var(--eg-paper);font-weight:500;font-size:0.95rem;padding:0 0 12px;margin-bottom:11px;border-bottom:1px solid var(--eg-graphite-rule);}
body.home .foot-col a.foot-quote .foot-quote-arrow,body.services .foot-col a.foot-quote .foot-quote-arrow,body.products .foot-col a.foot-quote .foot-quote-arrow,body.blog .foot-col a.foot-quote .foot-quote-arrow,body.about .foot-col a.foot-quote .foot-quote-arrow,body.contact .foot-col a.foot-quote .foot-quote-arrow,body.article .foot-col a.foot-quote .foot-quote-arrow{color:var(--eg-brass-dark);margin-left:8px;display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
body.home .foot-col a.foot-quote:hover,body.services .foot-col a.foot-quote:hover,body.products .foot-col a.foot-quote:hover,body.blog .foot-col a.foot-quote:hover,body.about .foot-col a.foot-quote:hover,body.contact .foot-col a.foot-quote:hover,body.article .foot-col a.foot-quote:hover{color:#FFFFFF;}
body.home .foot-col a.foot-quote:hover .foot-quote-arrow,body.services .foot-col a.foot-quote:hover .foot-quote-arrow,body.products .foot-col a.foot-quote:hover .foot-quote-arrow,body.blog .foot-col a.foot-quote:hover .foot-quote-arrow,body.about .foot-col a.foot-quote:hover .foot-quote-arrow,body.contact .foot-col a.foot-quote:hover .foot-quote-arrow,body.article .foot-col a.foot-quote:hover .foot-quote-arrow{transform:translateX(3px);}
body.home .foot-bottom,body.services .foot-bottom,body.products .foot-bottom,body.blog .foot-bottom,body.about .foot-bottom,body.contact .foot-bottom,body.article .foot-bottom{font-family:var(--eg-font-body);color:var(--eg-on-graphite);}
body.home .foot-bottom a:hover,body.services .foot-bottom a:hover,body.products .foot-bottom a:hover,body.blog .foot-bottom a:hover,body.about .foot-bottom a:hover,body.contact .foot-bottom a:hover,body.article .foot-bottom a:hover{color:var(--eg-paper);}
/* ---------- phase 2 responsive ------------------------------------------ */
@media (max-width:1023px){
body.home .eg-band{padding:78px 0;}
body.home .eg-band-intro{padding-bottom:96px;}
body.home .eg-rec{padding:66px 0;}
body.home .eg-rec-grid{grid-template-columns:1fr;gap:42px 0;}
body.home .eg-ground-grid{grid-template-columns:1fr;gap:40px 0;}
body.home .eg-cta,body.services .eg-cta,body.products .eg-cta,body.blog .eg-cta,body.about .eg-cta,body.contact .eg-cta,body.article .eg-cta{padding:70px 0;}
}
@media (max-width:720px){
/* the hero drops to a 20px gutter at this breakpoint; bring every other
band onto the same left axis so the page keeps one alignment on mobile */
body.home .wrap,body.services .wrap,body.products .wrap,body.blog .wrap,body.about .wrap,body.contact .wrap,body.article .wrap{padding-left:20px;padding-right:20px;}
body.home .eg-seq,body.services .eg-seq,body.products .eg-seq,body.blog .eg-seq,body.about .eg-seq,body.contact .eg-seq,body.article .eg-seq{font-size:0.78rem;letter-spacing:0.16em;margin-top:16px;padding:12px 0;}
body.home .eg-seq::before,body.services .eg-seq::before,body.products .eg-seq::before,body.blog .eg-seq::before,body.about .eg-seq::before,body.contact .eg-seq::before,body.article .eg-seq::before{left:-20px;right:-20px;}
body.home .eg-seq-tick,body.services .eg-seq-tick,body.products .eg-seq-tick,body.blog .eg-seq-tick,body.about .eg-seq-tick,body.contact .eg-seq-tick,body.article .eg-seq-tick{width:16px;margin-right:13px;}
body.home .eg-band{padding:58px 0;}
body.home .eg-rec{padding:52px 0;}
body.home .eg-cta,body.services .eg-cta,body.products .eg-cta,body.blog .eg-cta,body.about .eg-cta,body.contact .eg-cta,body.article .eg-cta{padding:56px 0;}
body.home .eg-sec-head{margin-bottom:38px;}
body.home .eg-svc-row{grid-template-columns:2.4rem minmax(0,1fr);gap:0 14px;padding:22px 0;}
body.home .eg-svc-link{grid-column:2;justify-self:start;margin-top:13px;}
body.home .eg-svc-name{font-size:1.24rem;}
body.home .eg-band-intro{padding-bottom:92px;}
body.home .eg-why-item{grid-template-columns:2.4rem minmax(0,1fr);gap:0 14px;padding:26px 0;}
body.home #why .eg-why-item:first-child{padding-top:19px;}
body.home .eg-why-item h3{font-size:1.26rem;}
body.home .eg-cov-row{grid-template-columns:1fr;gap:5px 0;padding:15px 0;}
body.home .eg-cov-label{padding-top:0;}
body.home .eg-rec-tags{gap:8px 18px;}
body.home .eg-cta-grid,body.services .eg-cta-grid,body.products .eg-cta-grid,body.blog .eg-cta-grid,body.about .eg-cta-grid,body.contact .eg-cta-grid,body.article .eg-cta-grid{align-items:flex-start;gap:32px;}
body.home .eg-btn-invert,body.services .eg-btn-invert,body.products .eg-btn-invert,body.blog .eg-btn-invert,body.about .eg-btn-invert,body.contact .eg-btn-invert,body.article .eg-btn-invert{width:100%;text-align:center;}
body.home .eg-cta-actions,body.services .eg-cta-actions,body.products .eg-cta-actions,body.blog .eg-cta-actions,body.about .eg-cta-actions,body.contact .eg-cta-actions,body.article .eg-cta-actions{gap:24px;}
body.home .eg-brands-list{font-size:0.9rem;line-height:1.9;}
}
/* ---------- reduced motion: every phase 2 animation goes inert ---------- */
@media (prefers-reduced-motion: reduce){
/* Services arrival: nothing is acknowledged and nothing moves. main.js
never adds .eg-mark or .is-target in this mode; the rules below are the
belt-and-braces guarantee that a stray class could still not animate. */
body.services .eg-spec.eg-mark .eg-spec-num::after{animation:none;}
body.services .eg-toc a,
body.services .eg-toc a .eg-toc-n,
body.services .eg-toc a .eg-toc-name{transition:none;}
body.services .eg-toc a:hover .eg-toc-name{transform:none;}
body.services .eg-spec-link:hover::after{transform:none;}
body.home .eg-rail{animation:none;clip-path:none;}
body.home .eg-seq-tick,body.services .eg-seq-tick,body.home .eg-seq > *,body.services .eg-seq > *,body.products .eg-seq-tick,body.blog .eg-seq-tick,body.about .eg-seq-tick,body.contact .eg-seq-tick,body.products .eg-seq > *,body.blog .eg-seq > *,body.about .eg-seq > *,body.contact .eg-seq > *,body.article .eg-seq-tick,body.article .eg-seq > *{animation:none;opacity:1;transform:none;}
body.home .eg-rec.in .eg-rec-row,
body.home .eg-rec.in .eg-rec-leader{animation:none;}
body.home .eg-rec-leader{transform:translateY(-4px) scaleX(1);}
body.home .eg-svc-row.reveal,
body.home .eg-why-item.reveal{transition-delay:0ms;}
}
/* =========================================================================
SERVICES PAGE
The expanded specification behind the homepage's six-row capability
schedule. Shared chrome — tokens, header/nav, DESIGN → DEPLOY → SUPPORT,
graphite CTA and footer — comes from the homepage block above, whose
selectors now also name `body.services`, so the frozen header has exactly
one source of truth. Everything below is Services-only.
========================================================================= */
/* the page's base face. The global `body` rule still names Inter, which this
page deliberately no longer loads — without this, unstyled wrappers fall
back to system-ui and their line-box struts drift out of step. */
body.home,body.services,body.products,body.blog,body.about,body.contact,body.article{font-family:var(--eg-font-body);}
/* the Archivo condensed width axis, same 78% as the homepage headings */
body.services .eg-page-title,body.products .eg-page-title,body.blog .eg-page-title,body.about .eg-page-title,body.contact .eg-page-title,body.services .eg-spec-name,body.article .eg-page-title{font-stretch:78%;}
/* the global ::selection is still the old signal blue; keep it off this page */
body.services ::selection,body.products ::selection,body.blog ::selection,body.about ::selection,body.contact ::selection,body.article ::selection{background:var(--eg-ink);color:var(--eg-paper);}
/* ---------- introduction: paper, typographic, no illustration ----------- */
body.services .eg-intro,body.products .eg-intro,body.blog .eg-intro,body.about .eg-intro,body.contact .eg-intro,body.article .eg-intro{background:var(--eg-paper);color:var(--eg-ink);padding:64px 0 0;}
body.services .eg-crumb,body.products .eg-crumb,body.blog .eg-crumb,body.about .eg-crumb,body.contact .eg-crumb,body.article .eg-crumb{font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:30px;}
body.services .eg-crumb a,body.products .eg-crumb a,body.blog .eg-crumb a,body.about .eg-crumb a,body.contact .eg-crumb a,body.article .eg-crumb a{border-bottom:1px solid transparent;transition:color .15s ease,border-color .15s ease;}
body.services .eg-crumb a:hover,body.products .eg-crumb a:hover,body.blog .eg-crumb a:hover,body.about .eg-crumb a:hover,body.contact .eg-crumb a:hover,body.article .eg-crumb a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.services .eg-crumb-sep,body.products .eg-crumb-sep,body.blog .eg-crumb-sep,body.about .eg-crumb-sep,body.contact .eg-crumb-sep,body.article .eg-crumb-sep{color:var(--eg-rule);margin:0 7px;}
/* the brass tick is the page's only decoration — the same marking language
as the hero rail and the header sequence */
body.services .eg-page-label,body.products .eg-page-label,body.blog .eg-page-label,body.about .eg-page-label,body.contact .eg-page-label,body.article .eg-page-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.76rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:22px;}
body.services .eg-page-label::before,body.products .eg-page-label::before,body.blog .eg-page-label::before,body.about .eg-page-label::before,body.contact .eg-page-label::before,body.article .eg-page-label::before{content:"";width:18px;height:1px;background:var(--eg-brass);flex:none;}
body.services .eg-page-title,body.products .eg-page-title,body.blog .eg-page-title,body.about .eg-page-title,body.contact .eg-page-title,body.article .eg-page-title{font-family:var(--eg-font-head);font-weight:700;font-size:clamp(2.2rem,4.2vw,3.3rem);line-height:1.06;letter-spacing:-0.015em;color:var(--eg-ink);max-width:19ch;}
body.services .eg-page-lead,body.products .eg-page-lead,body.blog .eg-page-lead,body.about .eg-page-lead,body.contact .eg-page-lead,body.article .eg-page-lead{font-family:var(--eg-font-body);font-weight:400;font-size:1.12rem;line-height:1.62;color:var(--eg-steel);margin-top:22px;max-width:62ch;}
/* ---------- contents: a table of contents, not a card grid --------------
Six numbered links into the specifications below. No borders, no fills,
no icons — just numbers, names and hairlines. */
body.services .eg-toc{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 44px;margin-top:52px;border-top:1px solid var(--eg-brass);}
body.services .eg-toc a{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 14px;align-items:baseline;padding:17px 0;border-bottom:1px solid var(--eg-rule);transition:border-bottom-color .18s ease;}
body.services .eg-toc-n{font-family:var(--eg-font-mono);font-weight:500;font-size:0.74rem;color:var(--eg-steel);font-variant-numeric:tabular-nums;transition:color .18s ease;}
body.services .eg-toc-name{font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;line-height:1.35;color:var(--eg-ink);transition:color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);}
/* hover: the rule and the number pick up brass, the name steps 2px right.
No glow, no scale, no fill — the row simply acknowledges the pointer. */
body.services .eg-toc a:hover{border-bottom-color:var(--eg-brass);}
body.services .eg-toc a:hover .eg-toc-n{color:var(--eg-brass);}
body.services .eg-toc a:hover .eg-toc-name{color:var(--eg-brass);transform:translateX(2px);}
body.services .eg-toc a:focus-visible{outline-offset:3px;}
/* the destination indicator, held only for the length of the arrival */
body.services .eg-toc a.is-target{border-bottom-color:var(--eg-brass);}
body.services .eg-toc a.is-target .eg-toc-n{color:var(--eg-brass);}
/* ---------- the six specifications -------------------------------------
One continuous document: each section is a ruled band on the same paper,
numbered in brass, with its scope as a ruled line-item list. The body
column aligns under the service name, leaving the number column open.
------------------------------------------------------------------------ */
body.services .eg-spec{background:var(--eg-paper);color:var(--eg-ink);padding:84px 0;border-top:1px solid var(--eg-rule);}
/* the header is sticky, so anchor jumps must clear it. Below 1140px the
DESIGN -> DEPLOY -> SUPPORT line moves to a second row and the header grows,
so the offset grows with it. */
body.services .eg-spec,
body.services .eg-intro{scroll-margin-top:100px;}
@media (max-width:1140px){
body.services .eg-spec,
body.services .eg-intro{scroll-margin-top:146px;}
}
body.services .eg-spec:first-of-type{border-top:none;}
body.services .eg-spec-head{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:0 26px;align-items:baseline;}
body.services .eg-spec-num{position:relative;font-family:var(--eg-font-mono);font-weight:500;font-size:0.82rem;color:var(--eg-brass);font-variant-numeric:tabular-nums;}
/* the destination acknowledgement, drawn once on anchor arrival by .eg-mark;
idle state is invisible, and ordinary scrolling never shows it */
body.services .eg-spec-num::after{content:"";position:absolute;left:0;bottom:-7px;width:100%;height:1px;background:var(--eg-brass);transform:scaleX(0);transform-origin:left center;}
body.services .eg-spec-name{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.65rem,2.8vw,2.25rem);line-height:1.12;letter-spacing:-0.01em;color:var(--eg-ink);}
body.services .eg-spec-body{display:grid;grid-template-columns:4.6rem minmax(0,1fr);gap:0 26px;}
body.services .eg-spec-body > *{grid-column:2;}
body.services .eg-spec-intro{font-family:var(--eg-font-body);font-weight:400;font-size:1.05rem;line-height:1.65;color:var(--eg-steel);margin-top:14px;max-width:62ch;}
/* scope list: line items in a schedule. The numbers are a CSS counter, so
the markup carries only the factual capability text. */
/* the list's top rule, as a pseudo-element so it needs no extra markup */
body.services .eg-scope{list-style:none;counter-reset:scope;position:relative;margin-top:30px;max-width:66ch;}
body.services .eg-scope::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--eg-rule);transform-origin:left center;}
body.services .eg-scope li{display:grid;grid-template-columns:2.9rem minmax(0,1fr);gap:0 18px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--eg-rule);font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.55;color:var(--eg-ink);}
body.services .eg-scope li::before{counter-increment:scope;content:counter(scope,decimal-leading-zero);font-family:var(--eg-font-mono);font-weight:500;font-size:0.76rem;color:var(--eg-steel);font-variant-numeric:tabular-nums;}
body.services .eg-spec-link{display:inline-block;justify-self:start;margin-top:32px;font-family:var(--eg-font-body);font-weight:500;font-size:0.92rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.services .eg-spec-link::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
body.services .eg-spec-link:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.services .eg-spec-link:hover::after{transform:translateX(3px);}
/* ---------- destination acknowledgement --------------------------------
Anchor arrival does NOT re-reveal the section. Its content is already on
the page — heading, intro, scope rows and quote link stay exactly where
they are, at full opacity, untouched. The only response is a 1px brass
rule that draws under the service number and releases: 400ms, one pass,
nothing else on the page moves. main.js adds .eg-mark once the smooth
scroll has actually settled, and removes it again afterwards.
Deliberately absent: any rule that animates .eg-spec-name, .eg-spec-intro,
.eg-scope, .eg-spec-link, or the section's own opacity/transform. The
.reveal fade is the one and only content reveal, and it happens once.
------------------------------------------------------------------------ */
/* draw left to right, hold, release — a mark placed, not a section replayed */
@keyframes egMarkDraw{
0%{transform:scaleX(0);opacity:1;}
42%{transform:scaleX(1);opacity:1;}
64%{transform:scaleX(1);opacity:1;}
100%{transform:scaleX(1);opacity:0;}
}
body.services .eg-spec.eg-mark .eg-spec-num::after{animation:egMarkDraw .40s cubic-bezier(.2,.8,.2,1);}
/* ---------- responsive -------------------------------------------------- */
@media (max-width:1023px){
body.services .eg-intro,body.products .eg-intro,body.blog .eg-intro,body.about .eg-intro,body.contact .eg-intro,body.article .eg-intro{padding-top:52px;}
body.services .eg-spec{padding:64px 0;}
body.services .eg-toc{grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;margin-top:44px;}
}
@media (max-width:720px){
body.services .eg-intro,body.products .eg-intro,body.blog .eg-intro,body.about .eg-intro,body.contact .eg-intro,body.article .eg-intro{padding-top:40px;}
body.services .eg-crumb,body.products .eg-crumb,body.blog .eg-crumb,body.about .eg-crumb,body.contact .eg-crumb,body.article .eg-crumb{margin-bottom:24px;}
body.services .eg-page-title,body.products .eg-page-title,body.blog .eg-page-title,body.about .eg-page-title,body.contact .eg-page-title,body.article .eg-page-title{font-size:2.05rem;max-width:none;}
body.services .eg-page-lead,body.products .eg-page-lead,body.blog .eg-page-lead,body.about .eg-page-lead,body.contact .eg-page-lead,body.article .eg-page-lead{font-size:1rem;margin-top:18px;}
body.services .eg-toc{grid-template-columns:1fr;gap:0;margin-top:36px;}
body.services .eg-spec{padding:50px 0;}
body.services .eg-spec-head{grid-template-columns:2.6rem minmax(0,1fr);gap:0 14px;}
body.services .eg-spec-body{grid-template-columns:1fr;gap:0;}
body.services .eg-spec-body > *{grid-column:1;}
body.services .eg-spec-name{font-size:1.42rem;}
body.services .eg-scope li{grid-template-columns:2.4rem minmax(0,1fr);gap:0 12px;padding:14px 0;}
/* long-form body text never drops below 16px */
body.services .eg-spec-intro,
body.services .eg-scope li{font-size:1rem;}
}
/* =========================================================================
PRODUCTS · BLOG · ABOUT · CONTACT
Phase 3. Shared chrome — tokens, header/nav, DESIGN → DEPLOY → SUPPORT,
the page-intro pattern, the graphite CTA and the footer — comes from the
blocks above, whose selector lists now also name these four pages, so the
frozen header/footer still has exactly one source of truth.
Everything below is what makes each page its own thing. The shared devices
are the vocabulary, not the layout: a hanging mono number, a hairline rule,
brass used only where it carries information, and figures set in the mono
face. Each page arranges them differently because each page has a
different job.
========================================================================= */
/* the Archivo condensed width axis, same 78% as the homepage and Services */
body.products .eg-group-name,body.products .eg-disc-name,body.products .eg-source-head,body.products .eg-flow-title,body.products .eg-flow-name,body.products .eg-closing-line,body.products .eg-note-title,body.blog .eg-post-title,body.about .eg-story-head,body.about .eg-stand-head,body.about .eg-term-name{font-stretch:78%;}
/* the page intro is shared, but only Services hands straight to a ruled band;
these four need the closing space that pattern leaves out */
body.products .eg-intro,body.blog .eg-intro,body.about .eg-intro,body.contact .eg-intro,body.article .eg-intro{padding-bottom:60px;}
/* Products opens straight onto the first chapter rule, so it needs less
closing room than the pages whose next band brings its own top padding */
body.products .eg-intro{padding-bottom:52px;scroll-margin-top:118px;}
/* ---------- PRODUCTS ----------------------------------------------------
Not a storefront, and no longer an index: one continuous hardware
specification read top to bottom. The six families are grouped the way the
business already groups them — machines, then infrastructure — and each
family is a full ruled section carrying its scope, the service it belongs
to, and the article that explains it. The rules do the containing that
cards would otherwise do; nothing is boxed, filled, priced or marked
in stock.
------------------------------------------------------------------------ */
body.products .eg-supply{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:56px;scroll-margin-top:118px;}
/* the chapter opens on a 2px brass rule — the page's major division, the same
weight the notice and the closing statement use, against the 1px --eg-rule
that separates one family from the next. Under it, the range the chapter
actually covers, set in the mono face: 01-03 and 04-06 are facts already in
the schedule, so the marker states them rather than announcing anything. */
body.products .eg-group{border-top:2px solid var(--eg-brass);padding-top:22px;margin-bottom:34px;scroll-margin-top:118px;}
body.products .eg-disc + .eg-group{margin-top:72px;}
body.products .eg-group-range{font-family:var(--eg-font-mono);font-weight:500;font-size:0.78rem;letter-spacing:0.06em;color:var(--eg-brass);font-variant-numeric:tabular-nums;margin-bottom:13px;}
/* the chapter name now sits above the family names it governs (2.35rem against
1.82rem): the old 1.95/2.05 split read the hierarchy backwards */
body.products .eg-group-name{font-family:var(--eg-font-head);font-weight:700;font-size:clamp(1.78rem,3vw,2.35rem);line-height:1.1;letter-spacing:-0.016em;color:var(--eg-ink);}
body.products .eg-group-desc{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.66;color:var(--eg-steel);margin-top:13px;max-width:60ch;}
/* one family: a hanging brass number, the name at section weight, then a
two-column body — what it is on the left, what the range actually covers
on the right. The header is sticky, so the ids still land clear of it. */
body.products .eg-disc{border-top:1px solid var(--eg-rule);padding:38px 0 42px;scroll-margin-top:118px;}
body.products .eg-disc:last-of-type{border-bottom:1px solid var(--eg-rule);}
/* rhythm, not a second layout: the family that opens a chapter sits closer to
the chapter it belongs to, and the one that closes a chapter is given the
room the break after it needs. Same system, read in threes rather than six
identical beats. */
body.products .eg-group + .eg-disc{padding-top:30px;}
body.products .eg-disc:nth-of-type(3),
body.products .eg-disc:last-of-type{padding-bottom:52px;}
body.products .eg-disc-head{display:grid;grid-template-columns:3.4rem minmax(0,1fr);gap:0 20px;align-items:baseline;}
body.products .eg-disc-n{position:relative;font-family:var(--eg-font-mono);font-weight:500;font-size:0.82rem;color:var(--eg-brass);font-variant-numeric:tabular-nums;}
/* the arrival mark: one brass rule drawn under the number as the family
settles into view, one pass, filled both ways, then inert for good */
body.products .eg-disc-n::after{content:"";position:absolute;left:0;bottom:-8px;width:26px;height:1px;background:var(--eg-brass);transform-origin:left center;}
body.products .eg-disc-name{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.42rem,2.3vw,1.82rem);line-height:1.14;letter-spacing:-0.01em;color:var(--eg-ink);}
/* the body hangs under the name, leaving the number column open — the same
measure the Services specifications use */
body.products .eg-disc-body{display:grid;grid-template-columns:minmax(0,0.86fr) minmax(0,1.14fr);gap:0 72px;margin-top:22px;padding-left:calc(3.4rem + 20px);}
body.products .eg-disc-desc{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.66;color:var(--eg-steel);max-width:44ch;}
/* where the family sits in the work, and the article that explains it. A
genuine definition list, so each label stays attached to its destination. */
body.products .eg-disc-meta{margin-top:24px;}
body.products .eg-disc-meta dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);}
body.products .eg-disc-meta dd{margin-top:7px;}
body.products .eg-disc-meta dd + dt{margin-top:18px;}
body.products .eg-disc-meta a{font-family:var(--eg-font-body);font-weight:500;font-size:0.93rem;line-height:1.5;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:2px;transition:color .18s ease,border-bottom-color .18s ease;}
/* "Further reading" is the second entry in every list that has one, and it is
genuinely secondary — set in steel with no resting rule, so the service
relationship above it stays the louder of the two */
body.products .eg-disc-meta dd:nth-of-type(2) a{font-weight:400;color:var(--eg-steel);border-bottom-color:transparent;}
body.products .eg-disc-meta dd:nth-of-type(2) a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.products .eg-disc-meta a::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
body.products .eg-disc-meta a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.products .eg-disc-meta a:hover::after{transform:translateX(3px);}
/* the scope, as a ruled schedule rather than a bulleted list. A short steel
tick, not a brass one: eighteen brass marks on one page would turn the
functional accent into decoration. */
body.products .eg-disc-sub{font-family:var(--eg-font-body);font-weight:500;font-size:0.66rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);padding-bottom:13px;border-bottom:1px solid var(--eg-rule);}
body.products .eg-disc-lines{list-style:none;}
/* a block row with an absolutely positioned tick, never a grid row: a grid
row wraps any loose text following an inline element into its own anonymous
item and drops it into the 11px marker track */
body.products .eg-disc-lines li{position:relative;padding:13px 0 13px 26px;border-bottom:1px solid var(--eg-rule);font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.55;color:var(--eg-ink);}
body.products .eg-disc-lines li::before{content:"";position:absolute;left:0;top:calc(13px + 0.74em);width:11px;height:1px;background:var(--eg-steel);}
/* arrival: the number's rule draws, the scope rows settle on a short stagger.
.in is added once by the observer and never removed, so nothing below can
replay on a second pass through the section, and nothing loops. */
@keyframes egDiscTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes egDiscLine{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
body.products .eg-disc:not(.in) .eg-disc-n::after{transform:scaleX(1);}
body.products .eg-disc.in .eg-disc-n::after{animation:egDiscTick .36s cubic-bezier(.2,.8,.2,1) .10s both;}
body.products .eg-disc.in .eg-disc-lines li{animation:egDiscLine .38s cubic-bezier(.2,.8,.2,1) both;}
body.products .eg-disc.in .eg-disc-lines li:nth-child(2){animation-delay:.07s;}
body.products .eg-disc.in .eg-disc-lines li:nth-child(3){animation-delay:.14s;}
/* ---------- PRODUCTS: sourcing ------------------------------------------
Typography only. No logos, no pills, no grid of marks — a supplier list is
a run of names, so it is set as one. Each name carries its separator inside
a nowrap span with real whitespace between spans, so no name splits and no
line can open on an orphaned middot.
------------------------------------------------------------------------ */
/* no border-top: the last family's own bottom rule already closes the
schedule, and a second hairline 74px below it read as a stray line across
dead paper. The marginal label and its brass tick open the section. */
body.products .eg-source{background:var(--eg-paper);color:var(--eg-ink);padding:64px 0 84px;scroll-margin-top:118px;}
body.products .eg-source-grid{display:grid;grid-template-columns:clamp(160px,20%,240px) minmax(0,1fr);gap:0 64px;align-items:start;}
body.products .eg-source-label{font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);padding-top:11px;position:relative;}
body.products .eg-source-label::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;background:var(--eg-brass);}
body.products .eg-source-head{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-ink);max-width:20ch;}
body.products .eg-source-body{font-family:var(--eg-font-body);font-weight:400;font-size:1.04rem;line-height:1.7;color:var(--eg-steel);margin-top:18px;max-width:62ch;}
body.products .eg-brand-list{margin-top:36px;padding-top:26px;border-top:1px solid var(--eg-rule);font-family:var(--eg-font-body);font-weight:500;font-size:1.14rem;line-height:1.9;color:var(--eg-ink);max-width:30em;}
body.products .eg-bn{white-space:nowrap;}
body.products .eg-bsep{color:var(--eg-rule);margin:0 2px;}
body.products .eg-brand-more{color:var(--eg-steel);font-weight:400;}
/* ---------- PRODUCTS: how hardware becomes part of the system -----------
The one graphite band on the page, and the only place the header's brand
sequence is restated in full. Four steps sitting on a hairline — not four
cards: no boxes, no fills, no icons, no borders around them.
------------------------------------------------------------------------ */
body.products .eg-flow{background:var(--eg-graphite);color:var(--eg-paper);padding:78px 0 84px;scroll-margin-top:118px;}
body.products .eg-flow-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:22px;}
body.products .eg-flow-label::before{content:"";width:18px;height:1px;background:var(--eg-brass-dark);flex:none;}
body.products .eg-flow-title{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-paper);max-width:22ch;}
body.products .eg-flow-lead{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.66;color:var(--eg-on-graphite);margin-top:16px;max-width:60ch;}
/* the heading block is held to the measure of its own title so the statement
and the four-step answer below it read as two levels rather than one wall of
graphite. No rule of its own: the schedule's rule is 46px below, and two
hairlines that close together read as a stray line. */
body.products .eg-flow-head{max-width:760px;padding-bottom:12px;}
/* one rule runs the full width and the four brass marks sit on it: the steps
read as a single sequence rather than as four items that happen to line up.
The per-step border is gone — its 40px gaps were breaking the line. */
body.products .eg-flow-list{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 40px;margin-top:46px;border-top:1px solid var(--eg-graphite-rule);}
/* the list is what the observer watches; the movement belongs to the steps,
so the container itself neither fades nor travels */
body.products .eg-flow-list.reveal{opacity:1;transform:none;transition:none;}
body.products .eg-flow-step{position:relative;padding-top:24px;}
/* the pointer response is the mark growing along the rule it already sits on:
one property, 240ms, no fill, no lift, no shadow, and nothing that runs on
its own */
body.products .eg-flow-step::before{content:"";position:absolute;left:0;top:-1px;width:32px;height:1px;background:var(--eg-brass-dark);transition:width .24s cubic-bezier(.2,.8,.2,1);}
body.products .eg-flow-step:hover::before{width:72px;}
body.products .eg-flow-n{display:block;font-family:var(--eg-font-mono);font-weight:500;font-size:0.78rem;color:var(--eg-brass-dark);font-variant-numeric:tabular-nums;}
body.products .eg-flow-name{font-family:var(--eg-font-head);font-weight:600;font-size:1.02rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--eg-paper);margin-top:12px;}
body.products .eg-flow-step p{font-family:var(--eg-font-body);font-weight:400;font-size:0.96rem;line-height:1.66;color:var(--eg-on-graphite);margin-top:12px;}
@keyframes egFlowIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
body.products .eg-flow-list.in .eg-flow-step{animation:egFlowIn .42s cubic-bezier(.2,.8,.2,1) both;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(2){animation-delay:.08s;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(3){animation-delay:.16s;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(4){animation-delay:.24s;}
/* ---------- PRODUCTS: the closing statement -----------------------------
One line on paper, between the graphite method band and the graphite
footer. Nothing under it: no button, no phone, no WhatsApp, no pricing
prompt — the page has said what it has to say, and the footer already
carries the contact routes.
------------------------------------------------------------------------ */
body.products .eg-closing{background:var(--eg-paper);color:var(--eg-ink);padding:64px 0 72px;scroll-margin-top:118px;}
body.products .eg-closing-inner{border-top:2px solid var(--eg-brass);padding-top:28px;}
body.products .eg-closing-line{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.9rem,3.8vw,2.9rem);line-height:1.1;letter-spacing:-0.014em;color:var(--eg-ink);max-width:17ch;}
/* the price advisory: a genuine, dated, time-sensitive notice, so it earns a
brass rule and a notice label. It stays on paper — the Method band below it
is already graphite, and two dark bands in a row read as one slab. */
body.products .eg-note{background:var(--eg-paper);color:var(--eg-ink);padding:0 0 68px;scroll-margin-top:118px;}
/* the same two-column spread as Sourcing above it: the label sits in the
margin, the notice hangs in the content column on its brass rule. The two
sections now read as one page of sourcing information rather than a section
and an unrelated box. */
body.products .eg-note-grid{display:grid;grid-template-columns:clamp(160px,20%,240px) minmax(0,1fr);gap:0 64px;align-items:start;}
body.products .eg-note-inner{border-top:2px solid var(--eg-brass);padding-top:24px;max-width:60ch;}
/* brass, not steel like the Sourcing label: this is the one genuinely
time-sensitive statement on the page. It carries no tick — the 2px rule
beside it is already the mark. */
body.products .eg-note-label{padding-top:24px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-brass);margin-bottom:0;}
body.products .eg-note-title{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.5rem,2.4vw,1.95rem);line-height:1.14;letter-spacing:-0.01em;color:var(--eg-ink);}
body.products .eg-note-body{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.65;color:var(--eg-steel);margin-top:14px;}
body.products .eg-note-body a{color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:1px;transition:color .18s ease,border-bottom-color .18s ease;}
body.products .eg-note-body a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
/* ---------- BLOG --------------------------------------------------------
An index, not a card grid. One lead entry carries the timely piece; the
rest are ruled rows — subject, headline, dek, length. No thumbnails (none
exist), no bylines, no dates (the articles carry none), no engagement
counts. Whole-row clickability comes from a stretched link on the headline,
so the accessible name stays the headline itself.
------------------------------------------------------------------------ */
body.blog .eg-index{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:96px;}
body.blog .eg-post-tag{font-family:var(--eg-font-body);font-weight:500;font-size:0.69rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);}
body.blog .eg-post-title{font-family:var(--eg-font-head);font-weight:600;letter-spacing:-0.012em;color:var(--eg-ink);}
body.blog .eg-post-title a{color:inherit;transition:color .18s ease;}
body.blog .eg-post-dek{font-family:var(--eg-font-body);font-weight:400;line-height:1.62;color:var(--eg-steel);}
body.blog .eg-post-meta{font-family:var(--eg-font-mono);font-weight:500;font-size:0.72rem;letter-spacing:0.04em;color:var(--eg-steel);font-variant-numeric:tabular-nums;white-space:nowrap;}
/* the lead entry */
body.blog .eg-lead-post{position:relative;border-top:2px solid var(--eg-brass);padding:30px 0 40px;}
body.blog .eg-lead-post .eg-post-title{font-size:clamp(1.9rem,3.4vw,2.7rem);line-height:1.08;margin-top:15px;max-width:20ch;}
body.blog .eg-lead-post .eg-post-dek{font-size:1.08rem;margin-top:17px;max-width:58ch;}
body.blog .eg-lead-post .eg-post-meta{margin-top:22px;}
body.blog .eg-lead-post .eg-post-title a::after{content:"";position:absolute;inset:0;}
body.blog .eg-lead-post:hover .eg-post-title a{color:var(--eg-brass);}
/* the remaining entries */
body.blog .eg-posts{list-style:none;border-top:1px solid var(--eg-rule);}
body.blog .eg-post{position:relative;display:grid;grid-template-columns:minmax(120px,15%) minmax(0,1fr) auto;gap:0 34px;align-items:baseline;padding:29px 0;border-bottom:1px solid var(--eg-rule);transition:border-bottom-color .18s ease;}
body.blog .eg-post .eg-post-title{font-size:1.4rem;line-height:1.2;}
body.blog .eg-post .eg-post-dek{font-size:0.97rem;margin-top:9px;max-width:62ch;}
body.blog .eg-post .eg-post-title a::after{content:"";position:absolute;inset:0;}
body.blog .eg-post:hover{border-bottom-color:var(--eg-ink);}
body.blog .eg-post:hover .eg-post-title a{color:var(--eg-brass);}
body.blog .eg-post:focus-within{border-bottom-color:var(--eg-brass);}
/* ---------- ABOUT -------------------------------------------------------
The quietest page on the site: no photography (the real jobsite pictures
are documentary evidence and belong with their case studies), no figures,
no schedule. A margin-noted reading column for the story, then the three
commitments as a genuine definition list — the term on the left, the thing
the company actually promises on the right.
------------------------------------------------------------------------ */
body.about .eg-story{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:88px;}
body.about .eg-stand{background:var(--eg-paper);color:var(--eg-ink);border-top:1px solid var(--eg-rule);padding:88px 0 96px;}
/* the marginal label sits in its own column, the way a note sits in the
margin of a specification — it never becomes a heading */
body.about .eg-story-grid{display:grid;grid-template-columns:clamp(150px,18%,220px) minmax(0,1fr);gap:0 64px;align-items:start;}
body.about .eg-story-label{font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);padding-top:11px;position:relative;}
body.about .eg-story-label::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;background:var(--eg-brass);}
body.about .eg-story-head{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-ink);max-width:22ch;}
body.about .eg-story-body p{font-family:var(--eg-font-body);font-weight:400;font-size:1.06rem;line-height:1.72;color:var(--eg-steel);margin-top:22px;max-width:62ch;}
body.about .eg-story-body em{font-style:italic;color:var(--eg-ink);}
body.about .eg-stand-lead{max-width:640px;margin-bottom:16px;}
body.about .eg-stand-head{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-ink);margin-top:16px;}
body.about .eg-terms{border-top:1px solid var(--eg-brass);margin-top:34px;}
body.about .eg-term{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr);gap:0 56px;align-items:baseline;padding:32px 0;border-bottom:1px solid var(--eg-rule);}
body.about .eg-term dt{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:0 14px;align-items:baseline;}
body.about .eg-term-n{font-family:var(--eg-font-mono);font-weight:500;font-size:0.74rem;color:var(--eg-steel);font-variant-numeric:tabular-nums;}
body.about .eg-term-name{font-family:var(--eg-font-head);font-weight:600;font-size:1.34rem;line-height:1.2;letter-spacing:-0.008em;color:var(--eg-ink);}
body.about .eg-term dd{font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.66;color:var(--eg-steel);margin:0;max-width:58ch;}
/* ---------- CONTACT -----------------------------------------------------
The highest-intent page, so it is the plainest: reach details first in the
source order (a phone number on a phone should not sit below a form), the
enquiry form beside them. All paper — graphite is available here, but a
dark slab above a dark footer would only add weight to a page whose whole
job is to be legible and calm. The Netlify wiring is untouched.
------------------------------------------------------------------------ */
body.contact .eg-contact{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:104px;}
body.contact .eg-contact-grid{display:grid;grid-template-columns:clamp(270px,29%,350px) minmax(0,1fr);gap:0 76px;align-items:start;}
body.contact .eg-col-label{display:block;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);padding-top:11px;position:relative;margin-bottom:13px;}
body.contact .eg-col-label::before{content:"";position:absolute;top:0;left:0;width:26px;height:1px;background:var(--eg-brass);}
body.contact .eg-reach-list{border-top:1px solid var(--eg-rule);margin-top:22px;}
body.contact .eg-reach-row{padding:16px 0;border-bottom:1px solid var(--eg-rule);}
body.contact .eg-reach-row dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:7px;}
body.contact .eg-reach-row dd{font-family:var(--eg-font-body);font-weight:400;font-size:0.98rem;line-height:1.55;color:var(--eg-ink);margin:0;}
body.contact .eg-reach-row a{border-bottom:1px solid var(--eg-rule);padding-bottom:1px;transition:color .18s ease,border-bottom-color .18s ease;}
body.contact .eg-reach-row a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
/* WhatsApp keeps its platform glyph: it is a destination mark, not one of the
decorative service icons the redesign removed */
body.contact .eg-wa{display:inline-flex;align-items:center;gap:11px;margin-top:34px;min-height:48px;padding:0 22px;border:1px solid var(--eg-ink);border-radius:var(--eg-radius);font-family:var(--eg-font-body);font-weight:500;font-size:0.92rem;color:var(--eg-ink);transition:background .15s ease,color .15s ease;}
body.contact .eg-wa-mark{flex:none;display:block;}
body.contact .eg-wa:hover{background:var(--eg-ink);color:var(--eg-paper);}
/* the legacy dark theme still carries a bare `form{}` element rule (a dark
fill, a dark border and 36px of padding). It is left in place for anything
still running that theme and simply reset here. */
body.contact .eg-form-grid{background:none;border:0;padding:0;border-top:1px solid var(--eg-rule);margin-top:22px;padding-top:28px;}
body.contact .eg-form-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 26px;}
body.contact .eg-field{margin-bottom:22px;}
body.contact .eg-field label{display:block;font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:9px;}
body.contact .eg-field label .eg-opt{margin-left:10px;font-weight:400;font-size:0.72rem;letter-spacing:0.02em;text-transform:none;color:var(--eg-steel);}
body.contact .eg-field input,
body.contact .eg-field select,
body.contact .eg-field textarea{width:100%;background:#F6F4EE;color:var(--eg-ink);border:1px solid var(--eg-rule);border-radius:var(--eg-radius);padding:13px 14px;font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.45;transition:border-color .15s ease,background .15s ease;}
body.contact .eg-field textarea{resize:vertical;min-height:118px;}
body.contact .eg-field input::placeholder,
body.contact .eg-field textarea::placeholder{color:#8A8F96;}
body.contact .eg-field input:hover,
body.contact .eg-field select:hover,
body.contact .eg-field textarea:hover{border-color:#B6B0A2;}
body.contact .eg-field input:focus-visible,
body.contact .eg-field select:focus-visible,
body.contact .eg-field textarea:focus-visible{outline:2px solid var(--eg-brass);outline-offset:1px;border-color:var(--eg-brass);background:var(--eg-paper);}
/* a real select element, drawn to match the inputs rather than left to the OS.
The caret is a rotated border chevron on the wrapper — no image, no request,
and no gradient. */
body.contact .eg-select{position:relative;}
body.contact .eg-select::after{content:"";position:absolute;right:17px;top:50%;width:7px;height:7px;border:solid var(--eg-steel);border-width:0 1px 1px 0;transform:translateY(-70%) rotate(45deg);pointer-events:none;}
body.contact .eg-field select{appearance:none;-webkit-appearance:none;padding-right:40px;}
body.contact .eg-submit{background:var(--eg-ink);color:var(--eg-paper);border:1px solid var(--eg-ink);border-radius:var(--eg-radius);font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;padding:15px 30px;margin-top:6px;cursor:pointer;transition:background .15s ease,border-color .15s ease;}
body.contact .eg-submit:hover{background:#000;border-color:#000;}
body.contact .eg-form-note{font-family:var(--eg-font-body);font-weight:400;font-size:0.86rem;line-height:1.6;color:var(--eg-steel);margin-top:16px;max-width:52ch;}
/* ---------- responsive --------------------------------------------------
Same philosophy as the homepage and Services: grids collapse in the order
the content should be read, the gutter drops to 20px at 720px, and
long-form body copy never goes below 16px.
------------------------------------------------------------------------ */
/* below 1140px the DESIGN -> DEPLOY -> SUPPORT line takes its own header row
and the sticky header grows, so every offset grows with it */
@media (max-width:1140px){
body.products .eg-intro,
body.products .eg-supply,
body.products .eg-group,
body.products .eg-disc,
body.products .eg-source,
body.products .eg-note,
body.products .eg-flow,
body.products .eg-closing{scroll-margin-top:164px;}
}
@media (max-width:1023px){
body.products .eg-disc-body{grid-template-columns:1fr;gap:30px 0;}
body.products .eg-source-grid,
body.products .eg-note-grid{grid-template-columns:1fr;gap:20px 0;}
body.products .eg-note-label{padding-top:0;}
body.products .eg-note-inner{max-width:none;}
/* stacked or two-up, the single rule can no longer run behind all four
steps, so each step carries its own again */
body.products .eg-flow-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px 44px;border-top:none;}
body.products .eg-flow-step{border-top:1px solid var(--eg-graphite-rule);}
body.about .eg-story-grid{grid-template-columns:1fr;gap:22px 0;}
body.about .eg-term{grid-template-columns:1fr;gap:14px 0;}
body.about .eg-term dd{padding-left:calc(2.6rem + 14px);max-width:none;}
body.contact .eg-contact-grid{grid-template-columns:1fr;gap:56px 0;}
body.contact .eg-reach{max-width:540px;}
}
@media (max-width:900px){
/* the subject and length columns stop earning their width — they fold onto
one line above the headline, which keeps the reading order intact */
body.blog .eg-post{grid-template-columns:minmax(0,1fr) auto;gap:0 20px;padding:26px 0;}
body.blog .eg-post .eg-post-tag{grid-row:1;grid-column:1;}
body.blog .eg-post .eg-post-meta{grid-row:1;grid-column:2;justify-self:end;}
body.blog .eg-post .eg-post-main{grid-row:2;grid-column:1 / -1;margin-top:11px;}
}
@media (max-width:720px){
body.products .eg-intro,body.blog .eg-intro,body.about .eg-intro,body.contact .eg-intro,body.article .eg-intro{padding-bottom:44px;}
body.products .eg-intro{padding-bottom:36px;}
body.products .eg-supply{padding-bottom:36px;}
body.products .eg-source{padding:46px 0 44px;}
body.products .eg-note{padding:0 0 48px;}
body.products .eg-flow{padding:56px 0 60px;}
body.products .eg-closing{padding:44px 0 54px;}
body.products .eg-group{padding-top:20px;margin-bottom:28px;}
body.products .eg-disc + .eg-group{margin-top:50px;}
body.products .eg-group-range{font-size:0.74rem;margin-bottom:10px;}
body.products .eg-group-name{font-size:1.62rem;}
body.products .eg-group-desc{font-size:1rem;max-width:none;}
body.products .eg-disc{padding:28px 0 32px;}
body.products .eg-group + .eg-disc{padding-top:24px;}
body.products .eg-disc:nth-of-type(3),
body.products .eg-disc:last-of-type{padding-bottom:40px;}
body.products .eg-disc-head{grid-template-columns:2.4rem minmax(0,1fr);gap:0 14px;}
body.products .eg-disc-name{font-size:1.3rem;}
body.products .eg-disc-body{padding-left:0;margin-top:18px;gap:26px 0;}
body.products .eg-disc-desc{font-size:1rem;max-width:none;}
body.products .eg-source-head{font-size:1.55rem;max-width:none;}
body.products .eg-source-body{font-size:1rem;}
body.products .eg-brand-list{font-size:1rem;line-height:1.95;margin-top:30px;}
body.products .eg-note-title{font-size:1.36rem;}
body.products .eg-note-inner{padding-top:20px;}
body.products .eg-flow-title{font-size:1.55rem;max-width:none;}
body.products .eg-flow-lead{font-size:1rem;}
body.products .eg-flow-list{grid-template-columns:1fr;gap:26px 0;margin-top:32px;}
body.products .eg-flow-step p{font-size:1rem;}
body.products .eg-closing-inner{padding-top:22px;}
body.products .eg-closing-line{font-size:1.72rem;max-width:none;}
body.blog .eg-index{padding-bottom:64px;}
body.blog .eg-lead-post{padding:24px 0 32px;}
body.blog .eg-lead-post .eg-post-title{font-size:1.72rem;max-width:none;}
body.blog .eg-lead-post .eg-post-dek{font-size:1rem;}
body.blog .eg-post .eg-post-title{font-size:1.24rem;}
body.blog .eg-post .eg-post-dek{font-size:1rem;}
body.about .eg-story{padding-bottom:64px;}
body.about .eg-stand{padding:64px 0;}
body.about .eg-story-head,body.about .eg-stand-head{font-size:1.55rem;max-width:none;}
body.about .eg-story-body p{font-size:1rem;}
body.about .eg-term{padding:26px 0;}
body.about .eg-term dt{grid-template-columns:2.2rem minmax(0,1fr);gap:0 12px;}
body.about .eg-term-name{font-size:1.2rem;}
body.about .eg-term dd{padding-left:0;font-size:1rem;}
body.contact .eg-contact{padding-bottom:64px;}
body.contact .eg-form-row{grid-template-columns:1fr;gap:0;}
body.contact .eg-submit{width:100%;}
body.contact .eg-wa{width:100%;justify-content:center;margin-top:28px;}
}
/* ---------- reduced motion ----------------------------------------------
Nothing on these four pages animates on its own; the only motion is the
shared .reveal fade (already inert under reduced motion) and hover/focus
colour transitions, which go instant here.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.products .eg-flow-step::before,body.home .foot-col a.foot-quote .foot-quote-arrow,body.services .foot-col a.foot-quote .foot-quote-arrow,body.products .foot-col a.foot-quote .foot-quote-arrow,body.blog .foot-col a.foot-quote .foot-quote-arrow,body.about .foot-col a.foot-quote .foot-quote-arrow,body.contact .foot-col a.foot-quote .foot-quote-arrow,body.article .foot-col a.foot-quote .foot-quote-arrow,
body.blog .eg-post,body.blog .eg-post-title a,body.products .eg-note-body a,body.products .eg-disc-meta a,body.products .eg-disc-meta a::after,body.contact .eg-reach-row a,body.contact .eg-wa,body.contact .eg-submit,body.contact .eg-field input,body.contact .eg-field select,body.contact .eg-field textarea{transition:none;}
/* the two pointer responses added in this pass settle to their resting state
and never travel: the Method mark stays 32px, the footer arrow stays put */
body.products .eg-flow-step:hover::before{width:32px;}
body.home .foot-col a.foot-quote:hover .foot-quote-arrow,body.services .foot-col a.foot-quote:hover .foot-quote-arrow,body.products .foot-col a.foot-quote:hover .foot-quote-arrow,body.blog .foot-col a.foot-quote:hover .foot-quote-arrow,body.about .foot-col a.foot-quote:hover .foot-quote-arrow,body.contact .foot-col a.foot-quote:hover .foot-quote-arrow,body.article .foot-col a.foot-quote:hover .foot-quote-arrow{transform:none;}
/* every entrance the Products page introduces is off; the marks and rows
simply sit in their settled state */
body.products .eg-disc.in .eg-disc-n::after,
body.products .eg-disc.in .eg-disc-lines li,
body.products .eg-flow-list.in .eg-flow-step{animation:none;opacity:1;transform:none;}
}
/* =========================================================================
PHASE 4 — CORE-PAGES POLISH
About gets a story; the five articles join the system; Products, Blog and
Contact get the small things that were missing. No new colour, no new
typeface, no new motion vocabulary — the same hanging mono number, hairline
rule, brass-where-it-informs and condensed heading, arranged harder.
========================================================================= */
/* the Archivo condensed width axis */
body.about .eg-chron-head,
body.about .eg-quote p,
body.about h2.eg-quote,
body.article .eg-page-title,
body.article .eg-doc-body h2,
body.article .eg-doc-body h3,
body.article .eg-pull b,
body.article .eg-next-title{font-stretch:78%;}
/* ---------- ABOUT: the opening claim ------------------------------------
Two sentences, two weights. "Built in 2021." is what the company is;
"Backed by experience since 1991." is a qualifier and is set as one, in
steel, so the page can never be read as claiming ExGadgeT is 35 years old.
------------------------------------------------------------------------ */
body.about .eg-page-title{max-width:26ch;}
body.about .eg-title-q{color:var(--eg-steel);}
/* ---------- ABOUT: chronology -------------------------------------------
The one graphite moment on the page. Three entries, not a decorated
timeline: a year in the mono face, a brass tick, and a single line of what
changed. Same label / rule / figure language as the homepage statistics
bay, arranged as a chronology rather than a quantity schedule.
------------------------------------------------------------------------ */
body.about .eg-chron{background:var(--eg-graphite);color:var(--eg-paper);padding:88px 0;}
body.about .eg-chron-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:34px;}
body.about .eg-chron-label::before{content:"";width:18px;height:1px;background:var(--eg-brass-dark);flex:none;}
body.about .eg-chron-list{list-style:none;border-top:1px solid var(--eg-graphite-rule);}
/* the list is what the observer watches; the movement is the rows’, so the
container itself neither fades nor travels */
body.about .eg-chron-list.reveal{opacity:1;transform:none;transition:none;}
body.about .eg-chron-row{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:0 44px;align-items:start;padding:30px 0;border-bottom:1px solid var(--eg-graphite-rule);}
body.about .eg-chron-year{font-family:var(--eg-font-mono);font-weight:500;font-size:1.65rem;line-height:1.1;color:var(--eg-paper);font-variant-numeric:tabular-nums;position:relative;padding-top:2px;}
/* the brass tick sits under the year, drawn once as the row settles */
body.about .eg-chron-year::after{content:"";position:absolute;left:0;bottom:-11px;width:34px;height:1px;background:var(--eg-brass-dark);transform-origin:left center;}
body.about .eg-chron-head{font-family:var(--eg-font-head);font-weight:600;font-size:1.34rem;line-height:1.2;letter-spacing:-0.008em;color:var(--eg-paper);}
body.about .eg-chron-body p{font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.66;color:var(--eg-on-graphite);margin-top:10px;max-width:56ch;}
/* the closing entry restates the brand sequence in the header's own language:
steel words, brass arrows, never a whole brass phrase */
body.about .eg-chron-seq{display:inline-flex;align-items:baseline;flex-wrap:wrap;font-family:var(--eg-font-head);font-weight:600;font-size:1.34rem;letter-spacing:0.02em;color:var(--eg-paper);}
body.about .eg-chron-seq .eg-chron-arrow{color:var(--eg-brass-dark);margin:0 .5em;font-size:0.92em;}
/* the rows settle once as the band comes into view — one pass, no loop */
@keyframes egChronIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes egChronTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
body.about .eg-chron-list.in .eg-chron-row{animation:egChronIn .42s cubic-bezier(.2,.8,.2,1) both;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(2){animation-delay:.09s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(3){animation-delay:.18s;}
body.about .eg-chron-list.in .eg-chron-year::after{animation:egChronTick .34s cubic-bezier(.2,.8,.2,1) .16s both;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(2) .eg-chron-year::after{animation-delay:.25s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(3) .eg-chron-year::after{animation-delay:.34s;}
/* if JS never runs, nothing is hidden: the tick simply sits drawn */
body.about .eg-chron-list:not(.in) .eg-chron-year::after{transform:scaleX(1);}
/* ---------- ABOUT: the origin question ----------------------------------
The page's second memorable moment. The customer's actual question, set at
display size — the only place on the site where a quotation carries the
heading weight, because it is the reason the company exists.
------------------------------------------------------------------------ */
body.about .eg-origin{background:var(--eg-paper);color:var(--eg-ink);padding:88px 0;}
body.about .eg-quote{margin:26px 0 0;padding-left:26px;border-left:2px solid var(--eg-brass);max-width:min(100%,586px);}
body.about .eg-quote p,
body.about h2.eg-quote{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.9rem,3.6vw,2.85rem);line-height:1.1;letter-spacing:-0.014em;color:var(--eg-ink);}
body.about .eg-origin-body{margin-top:38px;}
body.about .eg-origin-body p{font-family:var(--eg-font-body);font-weight:400;font-size:1.06rem;line-height:1.72;color:var(--eg-steel);max-width:62ch;}
body.about .eg-origin-body p + p{margin-top:20px;}
/* the positioning line lands as a statement, not as body copy */
body.about .eg-origin-body .eg-origin-close{color:var(--eg-ink);font-weight:500;}
body.about .eg-work{background:var(--eg-paper);color:var(--eg-ink);border-top:1px solid var(--eg-rule);padding:88px 0;}
/* ---------- BLOG listing: index polish ----------------------------------- */
body.blog .eg-sec-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:16px;}
body.blog .eg-sec-label::before{content:"";width:18px;height:1px;background:var(--eg-brass);flex:none;}
body.blog .eg-posts-head{margin-top:44px;}
body.blog .eg-post-meta span{color:var(--eg-rule);margin:0 .55em;}
/* the row acknowledges the pointer with a brass rule drawn along its base —
the same marking language the Services destination cue uses */
body.blog .eg-post::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--eg-brass);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
body.blog .eg-post:hover::after,
body.blog .eg-post:focus-within::after{transform:scaleX(1);}
body.blog .eg-post:hover{border-bottom-color:var(--eg-rule);}
body.blog .eg-lead-post{padding-bottom:34px;}
body.blog .eg-lead-post .eg-post-meta{display:flex;align-items:baseline;flex-wrap:wrap;}
/* ---------- CONTACT: state the relationship before the fields ----------- */
body.contact .eg-form-lead{font-family:var(--eg-font-body);font-weight:400;font-size:0.95rem;line-height:1.6;color:var(--eg-steel);margin-top:14px;max-width:52ch;}
body.contact .eg-field:focus-within label{color:var(--eg-brass);}
body.contact .eg-field label{transition:color .15s ease;}
/* =========================================================================
ARTICLE PAGES
A technical editorial document: specification facts in the margin, one
reading column, and the article's own devices — pulled statement, figure
row, callout — rebuilt in paper, ink, rule and brass. Shared chrome comes
from the blocks above, whose selector lists now also name `body.article`.
========================================================================= */
body.article .eg-page-title{max-width:24ch;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;}
body.article .eg-intro{padding-bottom:52px;}
body.article .eg-doc{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:92px;}
body.article .eg-doc-grid{display:grid;grid-template-columns:clamp(180px,21%,240px) minmax(0,1fr);gap:0 72px;align-items:start;border-top:1px solid var(--eg-brass);padding-top:34px;}
/* the margin facts stay with the reader on a long page */
body.article .eg-doc-meta{position:sticky;top:112px;}
body.article .eg-doc-facts{margin:0;}
body.article .eg-doc-facts > div{padding:11px 0;border-bottom:1px solid var(--eg-rule);}
body.article .eg-doc-facts > div:first-child{border-top:1px solid var(--eg-rule);}
body.article .eg-doc-facts dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.65rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:5px;}
body.article .eg-doc-facts dd{font-family:var(--eg-font-mono);font-weight:500;font-size:0.86rem;color:var(--eg-ink);margin:0;font-variant-numeric:tabular-nums;}
/* the reading column */
body.article .eg-doc-body{max-width:68ch;}
body.article .eg-doc-body p{font-family:var(--eg-font-body);font-weight:400;font-size:1.06rem;line-height:1.76;color:var(--eg-ink);}
body.article .eg-doc-body > p + p{margin-top:19px;}
/* section heads carry a short brass tick rather than a full rule: five of
these on one page, and a full rule each would read as a table of parts */
body.article .eg-doc-body h2{position:relative;font-family:var(--eg-font-head);font-weight:600;font-size:1.58rem;line-height:1.18;letter-spacing:-0.01em;color:var(--eg-ink);margin:52px 0 18px;padding-top:19px;}
body.article .eg-doc-body h2::before{content:"";position:absolute;top:0;left:0;width:24px;height:1px;background:var(--eg-brass);}
body.article .eg-doc-body h3{font-family:var(--eg-font-head);font-weight:600;font-size:1.17rem;line-height:1.24;color:var(--eg-ink);margin:34px 0 12px;}
body.article .eg-doc-body ul,
body.article .eg-doc-body ol{list-style:none;margin:22px 0;}
/* the dash hangs in its own 10px column with the same 14px gap as before, but
the row is NOT a grid container. An article `li` mixes an element with the
loose text that follows it (`Question? answer...`); in a
grid, that trailing text becomes its own anonymous grid item and is
auto-placed into the 10px marker track, wrapping at one word per line. A
block box with an absolutely positioned marker keeps every run of inline
content in a single flow, whatever the markup inside the item. */
body.article .eg-doc-body li{position:relative;padding:8px 0 8px 24px;font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.66;color:var(--eg-ink);}
body.article .eg-doc-body li::before{content:"";position:absolute;left:0;top:calc(8px + 0.79em);width:10px;height:1px;background:var(--eg-steel);}
body.article .eg-doc-body strong{font-weight:500;color:var(--eg-ink);}
body.article .eg-doc-body em{font-style:italic;}
body.article .eg-doc-body a{color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:1px;transition:color .18s ease,border-bottom-color .18s ease;}
body.article .eg-doc-body a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
/* pulled statement — the article's own emphasis, kept to a brass margin rule */
body.article .eg-pull{margin:34px 0;padding-left:22px;border-left:2px solid var(--eg-brass);}
body.article .eg-pull b{display:block;font-family:var(--eg-font-head);font-weight:600;font-size:1.32rem;line-height:1.22;letter-spacing:-0.008em;color:var(--eg-ink);}
body.article .eg-pull span{display:block;font-family:var(--eg-font-body);font-weight:400;font-size:0.95rem;line-height:1.6;color:var(--eg-steel);margin-top:9px;}
/* figure row — real numbers from the article, set as a schedule, not as cards */
body.article .eg-figs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:38px 0;border-top:1px solid var(--eg-brass);border-bottom:1px solid var(--eg-rule);}
body.article .eg-fig{padding:22px 22px 22px 0;}
body.article .eg-fig + .eg-fig{border-left:1px solid var(--eg-rule);padding-left:22px;}
body.article .eg-fig b{display:block;font-family:var(--eg-font-mono);font-weight:500;font-size:1.32rem;line-height:1.15;color:var(--eg-ink);font-variant-numeric:tabular-nums;}
body.article .eg-fig span{display:block;font-family:var(--eg-font-body);font-weight:400;font-size:0.85rem;line-height:1.5;color:var(--eg-steel);margin-top:9px;}
/* callout — an offer of help at the end of a section, ruled, never a filled box */
body.article .eg-callout{margin:44px 0;padding-top:24px;border-top:2px solid var(--eg-brass);}
body.article .eg-callout h4{font-family:var(--eg-font-head);font-weight:600;font-size:1.24rem;line-height:1.2;letter-spacing:-0.008em;color:var(--eg-ink);font-stretch:78%;}
body.article .eg-callout p{font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.66;color:var(--eg-steel);margin-top:11px;}
body.article .eg-callout-link{display:inline-block;margin-top:18px;font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.article .eg-callout-link::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
body.article .eg-callout-link:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.article .eg-callout-link:hover::after{transform:translateX(3px);}
/* next in the index — the listing and the article read as one publication */
body.article .eg-next{background:var(--eg-paper);color:var(--eg-ink);border-top:1px solid var(--eg-rule);padding:64px 0 72px;}
body.article .eg-next-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:22px;}
body.article .eg-next-label::before{content:"";width:18px;height:1px;background:var(--eg-brass);flex:none;}
body.article .eg-next-link{position:relative;display:grid;grid-template-columns:minmax(120px,15%) minmax(0,1fr) auto;gap:0 34px;align-items:baseline;padding:26px 0;border-top:1px solid var(--eg-rule);border-bottom:1px solid var(--eg-rule);}
body.article .eg-next-tag{font-family:var(--eg-font-body);font-weight:500;font-size:0.69rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);}
body.article .eg-next-title{font-family:var(--eg-font-head);font-weight:600;font-size:1.4rem;line-height:1.2;letter-spacing:-0.012em;color:var(--eg-ink);transition:color .18s ease;}
body.article .eg-next-meta{font-family:var(--eg-font-mono);font-weight:500;font-size:0.72rem;letter-spacing:0.04em;color:var(--eg-steel);white-space:nowrap;}
body.article .eg-next-link::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--eg-brass);transform:scaleX(0);transform-origin:left center;transition:transform .3s cubic-bezier(.2,.8,.2,1);}
body.article .eg-next-link:hover::after,
body.article .eg-next-link:focus-visible::after{transform:scaleX(1);}
body.article .eg-next-link:hover .eg-next-title{color:var(--eg-brass);}
body.article .eg-all{margin-top:26px;}
body.article .eg-all a{font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.article .eg-all a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
/* ---------- responsive -------------------------------------------------- */
@media (max-width:1023px){
body.about .eg-chron-row{grid-template-columns:6.5rem minmax(0,1fr);gap:0 30px;}
body.article .eg-doc-grid{grid-template-columns:1fr;gap:30px 0;}
body.article .eg-doc-meta{position:static;}
body.article .eg-doc-facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;}
body.article .eg-doc-facts > div:nth-child(2){border-top:1px solid var(--eg-rule);}
body.article .eg-doc-body{max-width:none;}
}
@media (max-width:900px){
body.article .eg-next-link{grid-template-columns:minmax(0,1fr) auto;gap:0 20px;}
body.article .eg-next-tag{grid-row:1;grid-column:1;}
body.article .eg-next-meta{grid-row:1;grid-column:2;justify-self:end;}
body.article .eg-next-title{grid-row:2;grid-column:1 / -1;margin-top:11px;}
}
@media (max-width:720px){
body.about .eg-chron{padding:60px 0;}
body.about .eg-chron-label{margin-bottom:26px;}
/* the year stops being a column and becomes the row's own marker, so the
chronology stays a chronology instead of collapsing into a text wall */
body.about .eg-chron-row{grid-template-columns:1fr;gap:0;padding:24px 0;}
body.about .eg-chron-year{font-size:1.35rem;padding-bottom:14px;}
body.about .eg-chron-year::after{bottom:6px;width:28px;}
body.about .eg-chron-head,body.about .eg-chron-seq{font-size:1.18rem;}
body.about .eg-chron-body p{font-size:1rem;}
body.about .eg-origin,body.about .eg-work{padding:60px 0;}
body.about .eg-quote{max-width:none;padding-left:18px;}
body.about .eg-quote p,
body.about h2.eg-quote{font-size:1.62rem;}
body.about .eg-origin-body{margin-top:30px;}
body.about .eg-origin-body p{font-size:1rem;}
body.blog .eg-posts-head{margin-top:36px;}
body.blog .eg-lead-post{padding-bottom:28px;}
body.article .eg-intro{padding-bottom:36px;}
body.article .eg-doc{padding-bottom:60px;}
body.article .eg-doc-grid{padding-top:26px;gap:24px 0;}
body.article .eg-doc-facts{grid-template-columns:1fr;}
body.article .eg-doc-facts > div:nth-child(2){border-top:0;}
body.article .eg-doc-body p,body.article .eg-doc-body li{font-size:1rem;}
body.article .eg-doc-body h2{font-size:1.34rem;margin:40px 0 14px;}
body.article .eg-doc-body h3{font-size:1.1rem;}
body.article .eg-pull b{font-size:1.18rem;}
/* three figures side by side stop being legible below this width */
body.article .eg-figs{grid-template-columns:1fr;}
body.article .eg-fig{padding:18px 0;}
body.article .eg-fig + .eg-fig{border-left:0;border-top:1px solid var(--eg-rule);padding-left:0;}
body.article .eg-callout h4{font-size:1.12rem;}
body.article .eg-next{padding:48px 0 56px;}
body.article .eg-next-title{font-size:1.24rem;}
}
/* ---------- reduced motion ----------------------------------------------
Everything added in this pass settles to its finished state with no
movement: the chronology is simply drawn, and hover/focus colour changes
are instant.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.about .eg-chron-list.in .eg-chron-row,
body.about .eg-chron-list.in .eg-chron-year::after{animation:none;opacity:1;transform:none;}
body.about .eg-chron-year::after{transform:scaleX(1);}
body.blog .eg-post::after,
body.article .eg-next-link::after{transition:none;}
body.contact .eg-field label,
body.article .eg-doc-body a,
body.article .eg-next-title,
body.article .eg-callout-link{transition:none;}
body.article .eg-callout-link:hover::after{transform:none;}
}
/* =========================================================================
PHASE 5 — BLOG + ARTICLES
The publication. Blog and the five articles were the last pages still
running the pre-redesign article template: a sidebar of facts, a generic
quote band, and no graphite anywhere above the footer. They now read as one
publication inside the same system — paper for reading, exactly one
graphite interruption per page, brass only where it marks structure.
Graphite budget, deliberately small:
blog.html — one editorial bridge between the lead piece and the index
article — one publication information strip under the title
Everything else on both is paper. The generic "Ready to wire it up right?"
band is gone from all six: the footer's Get a Site Quote is the site's one
universal conversion route, and each article already ends on its own
contextual offer.
========================================================================= */
/* the condensed width axis for the new display heading */
body.blog .eg-notes-head{font-stretch:78%;}
/* ---------- BLOG: the opening -------------------------------------------
The page label, title and lead are the shared interior-page pattern; only
the hand-off into Latest is Blog's own. The lead entry carries its own 2px
brass rule, so the intro closes tighter here than on pages that open onto
a band of their own.
------------------------------------------------------------------------ */
body.blog .eg-intro{padding-bottom:46px;scroll-margin-top:118px;}
body.blog .eg-page-title{max-width:17ch;}
body.blog .eg-page-lead{max-width:56ch;}
/* ---------- BLOG: Latest + the index ------------------------------------ */
body.blog .eg-index{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:0;scroll-margin-top:118px;}
body.blog .eg-index .eg-sec-label{margin-bottom:14px;}
/* the lead entry is the timely piece and gets the display measure; the four
below it are the standing reference set */
body.blog .eg-lead-post{padding:28px 0 58px;}
body.blog .eg-lead-post .eg-post-title{max-width:19ch;}
/* the lower half opens under the graphite bridge */
body.blog .eg-index-lower{padding:62px 0 74px;scroll-margin-top:118px;}
body.blog .eg-index-lower .eg-sec-label{margin-bottom:18px;}
body.blog .eg-posts{border-top:1px solid var(--eg-brass);}
/* the row reserves the arrow's width up front rather than reflowing the meta
column on hover */
body.blog .eg-post{padding:27px 26px 27px 0;}
/* the row's pointer response: the brass rule draws along the base (already
present), the title steps 2px right, and a brass arrow appears beside the
reading time. One transition each, nothing that loops. */
body.blog .eg-post .eg-post-title a{display:inline-block;transition:color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);}
body.blog .eg-post:hover .eg-post-title a,
body.blog .eg-post:focus-within .eg-post-title a{transform:translateX(2px);}
body.blog .eg-post .eg-post-meta{position:relative;}
body.blog .eg-post .eg-post-meta::after{content:"\2192";position:absolute;left:calc(100% + 11px);top:0;color:var(--eg-brass);opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);}
body.blog .eg-post:hover .eg-post-meta::after,
body.blog .eg-post:focus-within .eg-post-meta::after{opacity:1;transform:none;}
/* ---------- BLOG: the graphite editorial bridge -------------------------
The page's one graphite moment, and it earns its place structurally: above
it is the single timely article, below it the four standing subjects. The
subjects are the four category tags already on the page, set as a run of
names in the same language as the homepage brand list — no tags, no pills,
no links competing with the index directly beneath it.
------------------------------------------------------------------------ */
body.blog .eg-notes{background:var(--eg-graphite);color:var(--eg-paper);padding:70px 0 74px;scroll-margin-top:118px;}
body.blog .eg-notes-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:22px;}
body.blog .eg-notes-label::before{content:"";width:18px;height:1px;background:var(--eg-brass-dark);flex:none;}
body.blog .eg-notes-head{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-paper);max-width:20ch;}
body.blog .eg-notes-subjects{margin-top:30px;padding-top:22px;border-top:1px solid var(--eg-graphite-rule);font-family:var(--eg-font-body);font-weight:500;font-size:1.02rem;line-height:1.8;color:var(--eg-paper);max-width:34em;}
/* each subject carries its separator inside a nowrap span with real
whitespace between spans — the same wrapping fix the brand lists use */
body.blog .eg-nb{white-space:nowrap;}
body.blog .eg-nsep{color:var(--eg-on-graphite);margin:0 2px;}
/* ---------- ARTICLE: the opening ----------------------------------------
Category, title, lead on paper; then the publication information strip in
graphite. That strip is the article's one graphite moment and replaces the
sticky sidebar of facts, which read as a conventional blog rail and pushed
the reading column into the right half of the page.
------------------------------------------------------------------------ */
body.article .eg-intro{padding-bottom:56px;scroll-margin-top:118px;}
body.article .eg-page-title{max-width:21ch;font-size:clamp(1.95rem,3.7vw,3rem);line-height:1.06;}
body.article .eg-page-lead{font-size:1.16rem;max-width:54ch;}
/* ---------- ARTICLE: publication information strip ----------------------
A flat strip, not a card: graphite ground, paper values in the mono face, a
brass tick over each field. No radius, no shadow, no fill behind the items,
and it packs left so a two-field article reads as deliberate as a
three-field one.
------------------------------------------------------------------------ */
body.article .eg-pub{background:var(--eg-graphite);color:var(--eg-paper);padding:34px 0 38px;scroll-margin-top:118px;}
/* the fields are distributed across a fixed measure rather than packed hard
left, so a two-field article and a three-field one both read as a masthead
strip instead of leaving the band three-quarters empty */
body.article .eg-pub-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:26px 0;max-width:840px;margin:0;}
body.article .eg-pub-item{position:relative;padding:15px 32px 0 0;}
body.article .eg-pub-item::before{content:"";position:absolute;top:0;left:0;width:24px;height:1px;background:var(--eg-brass-dark);transform-origin:left center;}
body.article .eg-pub-item dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.65rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:8px;}
body.article .eg-pub-item dd{margin:0;font-family:var(--eg-font-mono);font-weight:500;font-size:0.95rem;line-height:1.3;color:var(--eg-paper);font-variant-numeric:tabular-nums;}
/* arrival: the ticks draw and the fields rise, once, on a short stagger. The
row itself neither fades nor travels, so the strip is never blank. */
@keyframes egPubTick{from{transform:scaleX(0);}to{transform:scaleX(1);}}
@keyframes egPubRise{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
body.article .eg-pub-row.reveal{opacity:1;transform:none;transition:none;}
body.article .eg-pub-row.in .eg-pub-item{animation:egPubRise .40s cubic-bezier(.2,.8,.2,1) both;}
body.article .eg-pub-row.in .eg-pub-item:nth-child(2){animation-delay:.07s;}
body.article .eg-pub-row.in .eg-pub-item:nth-child(3){animation-delay:.14s;}
body.article .eg-pub-row.in .eg-pub-item::before{animation:egPubTick .34s cubic-bezier(.2,.8,.2,1) .10s both;}
/* if JS never runs, nothing is hidden — the ticks simply sit drawn */
body.article .eg-pub-row:not(.in) .eg-pub-item::before{transform:scaleX(1);}
/* ---------- ARTICLE: the reading column ---------------------------------
One column, indented to a marginal axis so the page keeps the same left
rhythm as Products and About rather than stranding 500px of paper to the
right of a 68ch measure. The margin is not decoration: the section marks
hang into it.
------------------------------------------------------------------------ */
body.article .eg-doc{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:64px;scroll-margin-top:118px;}
body.article .eg-doc-grid{display:grid;grid-template-columns:clamp(96px,16%,200px) minmax(0,1fr);gap:0 56px;align-items:start;border-top:none;padding-top:56px;}
body.article .eg-doc-body{grid-column:2;max-width:68ch;}
/* the opening paragraph is the standfirst: one step up in size, and it is the
only paragraph that gets it */
body.article .eg-doc-body > p:first-child{font-size:1.19rem;line-height:1.62;color:var(--eg-ink);}
/* the section mark hangs in the margin column on desktop — a placed mark, the
same brass language as the schedules, rather than a rule stacked above the
heading */
body.article .eg-doc-body h2{margin:56px 0 18px;padding-top:0;}
body.article .eg-doc-body h2::before{top:0.52em;left:-56px;width:36px;}
body.article .eg-doc-body h2:first-child{margin-top:0;}
/* ---------- ARTICLE: the ending -----------------------------------------
The contextual offer the article already carried, then one onward link.
No quote band: the footer holds the site's conversion route.
------------------------------------------------------------------------ */
body.article .eg-callout{margin:52px 0 0;padding-top:26px;}
body.article .eg-next{border-top:none;padding:56px 0 66px;scroll-margin-top:118px;}
body.article .eg-next-link{padding:28px 0;border-top:1px solid var(--eg-brass);}
body.article .eg-next-title{display:inline-block;transition:color .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);}
body.article .eg-next-link:hover .eg-next-title,
body.article .eg-next-link:focus-visible .eg-next-title{transform:translateX(2px);}
body.article .eg-next-meta{position:relative;}
body.article .eg-next-meta::after{content:"\2192";position:absolute;left:calc(100% + 11px);top:0;color:var(--eg-brass);opacity:0;transform:translateX(-4px);transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1);}
body.article .eg-next-link:hover .eg-next-meta::after,
body.article .eg-next-link:focus-visible .eg-next-meta::after{opacity:1;transform:none;}
body.article .eg-next .wrap{padding-right:calc(28px + 26px);}
body.article .eg-all{margin-top:28px;}
/* ---------- PHASE 5 responsive ------------------------------------------ */
@media (max-width:1140px){
body.blog .eg-intro,body.blog .eg-index,body.blog .eg-index-lower,body.blog .eg-notes,
body.article .eg-intro,body.article .eg-pub,body.article .eg-doc,body.article .eg-next{scroll-margin-top:164px;}
}
@media (max-width:1023px){
/* the margin column stops earning its width; the section marks come back
above their headings and the column runs the full measure */
body.article .eg-doc-grid{grid-template-columns:minmax(0,1fr);gap:0;padding-top:44px;}
body.article .eg-doc-body{grid-column:1;max-width:70ch;}
body.article .eg-doc-body h2{padding-top:19px;margin:46px 0 16px;}
body.article .eg-doc-body h2::before{top:0;left:0;width:24px;}
body.article .eg-pub-row{max-width:none;}
body.blog .eg-notes{padding:60px 0 64px;}
}
@media (max-width:720px){
body.blog .eg-intro{padding-bottom:34px;}
body.blog .eg-lead-post{padding:24px 0 32px;}
body.blog .eg-index-lower{padding:44px 0 52px;}
body.blog .eg-notes{padding:46px 0 50px;}
body.blog .eg-notes-head{font-size:1.55rem;max-width:none;}
body.blog .eg-notes-subjects{margin-top:24px;padding-top:18px;font-size:1rem;max-width:none;}
/* the arrow has nowhere to sit once the row folds to two columns */
body.blog .eg-post{padding:26px 0;}
body.blog .eg-post .eg-post-meta::after{content:none;}
body.article .eg-intro{padding-bottom:30px;}
body.article .eg-pub{padding:26px 0 30px;}
body.article .eg-pub-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:20px 0;}
body.article .eg-pub-item{padding:13px 20px 0 0;}
body.article .eg-pub-item dd{font-size:0.9rem;}
body.article .eg-doc{padding-bottom:56px;}
body.article .eg-doc-grid{padding-top:34px;}
body.article .eg-doc-body > p:first-child{font-size:1.08rem;line-height:1.6;}
body.article .eg-doc-body h2{margin:38px 0 14px;}
body.article .eg-callout{margin-top:40px;}
body.article .eg-next{padding:42px 0 50px;}
body.article .eg-next .wrap{padding-right:20px;}
body.article .eg-next-link{padding:22px 0;}
body.article .eg-next-meta::after{content:none;}
}
/* ---------- PHASE 5 reduced motion --------------------------------------
Nothing enters and nothing travels. The information strip sits drawn, and
the row indicators reduce to a colour change with no horizontal movement.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.article .eg-pub-row.in .eg-pub-item,
body.article .eg-pub-row.in .eg-pub-item::before{animation:none;opacity:1;transform:none;}
body.article .eg-pub-item::before{transform:scaleX(1);}
body.blog .eg-post .eg-post-title a,
body.blog .eg-post .eg-post-meta::after,
body.article .eg-next-title,
body.article .eg-next-meta::after{transition:none;}
body.blog .eg-post:hover .eg-post-title a,
body.blog .eg-post:focus-within .eg-post-title a,
body.article .eg-next-link:hover .eg-next-title,
body.article .eg-next-link:focus-visible .eg-next-title{transform:none;}
body.blog .eg-post:hover .eg-post-meta::after,
body.blog .eg-post:focus-within .eg-post-meta::after,
body.article .eg-next-link:hover .eg-next-meta::after,
body.article .eg-next-link:focus-visible .eg-next-meta::after{transform:none;}
}
/* =========================================================================
PHASE 6 — CASE STUDIES
The landing index and the three project records. Both carry the shared
interior-page chrome, so their keeps the `article` class the header,
footer, page-intro and publication-strip selectors already name — `article`
is this system's hook for "interior page on paper", not a claim about the
markup — and adds `work` (the index) or `case` (one project) for what is
genuinely its own.
Reused rather than rebuilt: the graphite publication strip (.eg-pub) for
project facts, and the onward row (.eg-next) for the next case study. New
here: the index entry, the numbered chapter, the photographic plate, and one
ruled label/leader/figure schedule shared by both pages — the same device
the homepage statistics bay and project records use, on paper.
Photography is used only where a real, verified project photograph exists.
Crescent Bay has none, and says so on the page rather than borrowing one.
========================================================================= */
/* the Archivo condensed width axis, same 78% as every other display face */
body.work .eg-entry-name,body.work .eg-entry-thesis,body.work .eg-plates-head,body.work .eg-ba-name,
body.case .eg-case-thesis,body.case .eg-chap-name,
body.work .eg-closing-line,body.case .eg-closing-line{font-stretch:78%;}
/* ---------- shared: section label, partner credit, closing line ---------- */
body.work .eg-sec-label,body.case .eg-sec-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:20px;}
body.work .eg-sec-label::before,body.case .eg-sec-label::before{content:"";width:18px;height:1px;background:var(--eg-brass);flex:none;}
/* the collaborator credit. A brass margin rule, the same note treatment the
homepage record uses — prominent enough to be read, never a logo or a badge */
body.work .eg-partner,body.case .eg-partner{font-family:var(--eg-font-body);font-weight:400;font-size:0.9rem;line-height:1.58;color:var(--eg-steel);padding-left:14px;border-left:2px solid var(--eg-brass);}
body.work .eg-closing,body.case .eg-closing{background:var(--eg-paper);color:var(--eg-ink);}
body.work .eg-closing{padding:64px 0 76px;}
body.case .eg-closing{padding:10px 0 72px;}
body.work .eg-closing-inner,body.case .eg-closing-inner{border-top:2px solid var(--eg-brass);padding-top:28px;}
body.work .eg-closing-line,body.case .eg-closing-line{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,3.2vw,2.45rem);line-height:1.12;letter-spacing:-0.014em;color:var(--eg-ink);max-width:23ch;}
/* ---------- shared: the ruled schedule ----------------------------------
Label, dotted leader, figure in the mono face — the page's one quantitative
device, on paper. Not a stat card row: nothing is boxed, filled or centred.
------------------------------------------------------------------------ */
body.work .eg-s-head,body.case .eg-s-head{display:flex;align-items:center;gap:10px;font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:16px;}
body.work .eg-s-tick,body.case .eg-s-tick{width:14px;height:2px;background:var(--eg-brass);flex:none;}
body.work .eg-s-row,body.case .eg-s-row{display:flex;align-items:baseline;gap:10px;padding:12px 0;border-top:1px solid var(--eg-rule);}
body.work .eg-s-row:last-child,body.case .eg-s-row:last-child{border-bottom:1px solid var(--eg-rule);}
body.work .eg-s-label,body.case .eg-s-label{font-family:var(--eg-font-body);font-weight:400;font-size:0.85rem;line-height:1.4;color:var(--eg-steel);flex:0 1 auto;}
body.work .eg-s-leader,body.case .eg-s-leader{flex:1 1 auto;min-width:12px;border-bottom:1px dotted var(--eg-rule);transform:translateY(-4px);}
body.work .eg-s-val,body.case .eg-s-val{font-family:var(--eg-font-mono);font-weight:500;font-size:0.94rem;line-height:1.3;color:var(--eg-ink);font-variant-numeric:tabular-nums;flex:0 0 auto;text-align:right;}
/* =========================================================================
CASE STUDIES — the index
Three substantial editorial rows, not a card grid: a hanging brass number,
the project, its thesis at heading weight, the brief, and the delivered
schedule in the right column. The schedule is what stops each row reading as
a portfolio blurb — the figures are the argument.
========================================================================= */
body.work .eg-intro{padding-bottom:52px;}
body.work .eg-page-title{max-width:20ch;}
body.work .eg-index{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:88px;}
body.work .eg-entries{list-style:none;border-top:2px solid var(--eg-brass);}
body.work .eg-entry{display:grid;grid-template-columns:3.6rem minmax(0,1fr) clamp(230px,27%,320px);gap:0 52px;padding:46px 0 52px;border-bottom:1px solid var(--eg-rule);}
body.work .eg-entry-n{align-self:start;position:relative;font-family:var(--eg-font-mono);font-weight:500;font-size:0.82rem;color:var(--eg-brass);font-variant-numeric:tabular-nums;padding-top:0.34em;}
body.work .eg-entry-n::after{content:"";position:absolute;left:0;top:calc(100% + 9px);width:28px;height:1px;background:var(--eg-brass);}
body.work .eg-entry-meta{font-family:var(--eg-font-body);font-weight:500;font-size:0.69rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-steel);}
body.work .eg-entry-name{font-family:var(--eg-font-head);font-weight:700;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.06;letter-spacing:-0.014em;color:var(--eg-ink);margin-top:13px;}
body.work .eg-entry-thesis{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.32;color:var(--eg-ink);margin-top:15px;max-width:36ch;}
body.work .eg-entry-brief{font-family:var(--eg-font-body);font-weight:400;font-size:1.01rem;line-height:1.68;color:var(--eg-steel);margin-top:19px;max-width:60ch;}
body.work .eg-entry .eg-partner{margin-top:20px;max-width:46ch;}
body.work .eg-entry-link{display:inline-block;margin-top:27px;font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color .18s ease,border-bottom-color .18s ease;}
body.work .eg-entry-link::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform .18s cubic-bezier(.2,.8,.2,1);}
body.work .eg-entry:hover .eg-entry-link,
body.work .eg-entry-link:hover,
body.work .eg-entry-link:focus-visible{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.work .eg-entry-link:hover::after{transform:translateX(3px);}
body.work .eg-entry-sched{padding-top:4px;}
/* ---------- the graphite plate band -------------------------------------
The page's one graphite moment, and the only place real photography appears
on the index. Three jobs that were never written up, each shown as the two
photographs that actually exist — no third state invented, no stock frame,
no slider. The frames are a fixed 4:3 so a portrait rack and a landscape
cabinet sit as plates of one size; the crop is honest, the aspect is not
distorted.
------------------------------------------------------------------------ */
body.work .eg-plates{background:var(--eg-graphite);color:var(--eg-paper);padding:78px 0 84px;}
body.work .eg-plates-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.7rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-on-graphite);margin-bottom:22px;}
body.work .eg-plates-label::before{content:"";width:18px;height:1px;background:var(--eg-brass-dark);flex:none;}
body.work .eg-plates-head{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.7rem,2.9vw,2.25rem);line-height:1.12;letter-spacing:-0.012em;color:var(--eg-paper);max-width:20ch;}
body.work .eg-plates-lead{font-family:var(--eg-font-body);font-weight:400;font-size:1.02rem;line-height:1.66;color:var(--eg-on-graphite);margin-top:16px;max-width:62ch;}
body.work .eg-ba-set{list-style:none;margin-top:46px;border-top:1px solid var(--eg-graphite-rule);}
body.work .eg-ba{display:grid;grid-template-columns:minmax(0,1fr) clamp(180px,23%,270px) clamp(180px,23%,270px);gap:0 28px;padding:34px 0 38px;border-bottom:1px solid var(--eg-graphite-rule);align-items:start;}
body.work .eg-ba-name{font-family:var(--eg-font-head);font-weight:600;font-size:1.26rem;line-height:1.2;color:var(--eg-paper);}
body.work .eg-ba-scope{font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.14em;text-transform:uppercase;color:var(--eg-brass-dark);margin-top:10px;}
body.work .eg-ba-cap{font-family:var(--eg-font-body);font-weight:400;font-size:0.95rem;line-height:1.64;color:var(--eg-on-graphite);margin-top:15px;max-width:46ch;}
body.work .eg-ba-fig{margin:0;}
body.work .eg-ba-frame{aspect-ratio:4/3;overflow:hidden;border:1px solid var(--eg-graphite-rule);background:#15171A;}
body.work .eg-ba-frame img{width:100%;height:100%;object-fit:cover;display:block;}
body.work .eg-ba-state{font-family:var(--eg-font-mono);font-weight:500;font-size:0.68rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--eg-on-graphite);margin-top:11px;}
/* =========================================================================
CASE STUDIES — one project
Numbered chapters on a single margin axis. The number hangs where the
article's section mark hangs, so a case study and an article read as pages
of the same document. Each project is given the chapters its own story
needs; only the devices are fixed.
========================================================================= */
body.case .eg-page-title{max-width:16ch;}
body.case .eg-case-thesis{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.24rem,2.1vw,1.62rem);line-height:1.26;letter-spacing:-0.008em;color:var(--eg-ink);margin-top:20px;max-width:34ch;}
body.case .eg-page-lead{margin-top:20px;font-size:1.06rem;max-width:62ch;}
body.case .eg-intro .eg-partner{margin-top:26px;max-width:48ch;}
body.case .eg-case{background:var(--eg-paper);color:var(--eg-ink);padding-bottom:6px;}
body.case .eg-chap{display:grid;grid-template-columns:clamp(96px,16%,200px) minmax(0,1fr);gap:0 56px;padding:54px 0 58px;border-top:1px solid var(--eg-rule);}
body.case .eg-chap:first-of-type{border-top:none;padding-top:60px;}
body.case .eg-chap-n{align-self:start;position:relative;font-family:var(--eg-font-mono);font-weight:500;font-size:0.82rem;color:var(--eg-brass);font-variant-numeric:tabular-nums;padding-top:0.42em;}
body.case .eg-chap-n::after{content:"";position:absolute;left:0;top:calc(100% + 9px);width:30px;height:1px;background:var(--eg-brass);}
body.case .eg-chap-body{max-width:66ch;}
/* the chapter that carries a plate or a schedule runs the full measure */
body.case .eg-chap-wide .eg-chap-body{max-width:none;}
body.case .eg-chap-name{font-family:var(--eg-font-head);font-weight:600;font-size:clamp(1.46rem,2.5vw,1.95rem);line-height:1.14;letter-spacing:-0.01em;color:var(--eg-ink);}
body.case .eg-chap-body p{font-family:var(--eg-font-body);font-weight:400;font-size:1.05rem;line-height:1.74;color:var(--eg-ink);margin-top:20px;}
body.case .eg-chap-wide .eg-chap-body p{max-width:66ch;}
/* an outcome list: ruled line items with a hanging steel tick. A block row
with an absolutely positioned marker, never a grid row — a grid drops the
loose text after into the marker track (see the article note). */
body.case .eg-points{list-style:none;margin-top:28px;border-top:1px solid var(--eg-rule);max-width:66ch;}
body.case .eg-points li{position:relative;padding:14px 0 14px 26px;border-bottom:1px solid var(--eg-rule);font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.6;color:var(--eg-ink);}
body.case .eg-points li::before{content:"";position:absolute;left:0;top:calc(14px + 0.78em);width:11px;height:1px;background:var(--eg-steel);}
body.case .eg-points strong{font-weight:500;color:var(--eg-ink);}
body.case .eg-chap-body .eg-s{margin-top:32px;max-width:540px;}
/* ---------- the photographic plate --------------------------------------
A real project photograph, mounted: hairline frame, the reference and the
caption beside it. The frame takes the image at its own aspect ratio — a
rack is a tall subject and is allowed to be one — so nothing is cropped or
stretched to fit a layout.
------------------------------------------------------------------------ */
body.case .eg-plate{margin:32px 0 0;display:grid;grid-template-columns:minmax(0,clamp(220px,40%,360px)) minmax(0,1fr);gap:0 44px;align-items:start;}
body.case .eg-plate-frame{border:1px solid var(--eg-rule);background:var(--eg-graphite);}
body.case .eg-plate-frame img{width:100%;height:auto;display:block;}
body.case .eg-plate-cap{margin:0;}
body.case .eg-plate-ref{display:block;font-family:var(--eg-font-mono);font-weight:500;font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--eg-brass);padding-bottom:13px;border-bottom:1px solid var(--eg-rule);}
body.case .eg-plate-cap p{font-family:var(--eg-font-body);font-weight:400;font-size:0.98rem;line-height:1.68;color:var(--eg-steel);margin-top:17px;max-width:44ch;}
/* the absence of photography, stated rather than hidden */
body.case .eg-nophoto{margin-top:32px;padding-top:22px;border-top:1px solid var(--eg-rule);max-width:66ch;}
body.case .eg-nophoto dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:11px;}
body.case .eg-nophoto dd{margin:0;font-family:var(--eg-font-body);font-weight:400;font-size:0.98rem;line-height:1.68;color:var(--eg-steel);max-width:54ch;}
/* ---------- responsive --------------------------------------------------- */
@media (max-width:1023px){
body.work .eg-entry{grid-template-columns:3.6rem minmax(0,1fr);gap:0 32px;padding:40px 0 44px;}
body.work .eg-entry-sched{grid-column:2;margin-top:34px;padding-top:0;max-width:520px;}
body.work .eg-ba{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:22px 24px;}
body.work .eg-ba-main{grid-column:1 / -1;}
body.work .eg-ba-cap{max-width:none;}
body.case .eg-chap{grid-template-columns:minmax(0,1fr);gap:0;padding:44px 0 48px;}
body.case .eg-chap:first-of-type{padding-top:46px;}
body.case .eg-chap-n{padding-top:0;margin-bottom:28px;}
body.case .eg-chap-body,body.case .eg-points,body.case .eg-nophoto,body.case .eg-chap-wide .eg-chap-body p{max-width:70ch;}
body.case .eg-plate{grid-template-columns:1fr;gap:24px 0;}
body.case .eg-plate-frame{max-width:380px;}
body.case .eg-plate-cap p{max-width:64ch;}
}
@media (max-width:720px){
body.work .eg-index{padding-bottom:56px;}
body.work .eg-entry{grid-template-columns:2.4rem minmax(0,1fr);gap:0 14px;padding:32px 0 36px;}
body.work .eg-entry-name{font-size:1.5rem;}
body.work .eg-entry-thesis{font-size:1.08rem;max-width:none;}
body.work .eg-entry-brief{font-size:1rem;max-width:none;}
body.work .eg-entry-sched{margin-top:28px;}
body.work .eg-plates{padding:52px 0 58px;}
body.work .eg-plates-head{font-size:1.55rem;max-width:none;}
body.work .eg-plates-lead{font-size:1rem;max-width:none;}
body.work .eg-ba-set{margin-top:34px;}
body.work .eg-ba{padding:26px 0 30px;gap:18px 12px;}
body.work .eg-ba-name{font-size:1.14rem;}
/* the plate caption is a real sentence, not a label — it holds 16px */
body.work .eg-ba-cap{font-size:1rem;}
body.work .eg-closing{padding:46px 0 54px;}
body.work .eg-closing-line,body.case .eg-closing-line{font-size:1.58rem;max-width:none;}
body.work .eg-closing-inner,body.case .eg-closing-inner{padding-top:22px;}
body.case .eg-page-lead{font-size:1rem;}
body.case .eg-case-thesis{font-size:1.18rem;max-width:none;}
body.case .eg-chap{padding:36px 0 40px;}
body.case .eg-chap:first-of-type{padding-top:38px;}
body.case .eg-chap-n{margin-bottom:24px;}
body.case .eg-chap-name{font-size:1.34rem;}
/* long-form body copy never drops below 16px */
body.case .eg-chap-body p,body.case .eg-chap-wide .eg-chap-body p{font-size:1rem;margin-top:17px;}
body.case .eg-points li{font-size:1rem;}
body.case .eg-plate-frame{max-width:none;}
body.case .eg-plate-cap p,body.case .eg-nophoto dd{max-width:none;font-size:1rem;}
body.case .eg-closing{padding:8px 0 52px;}
}
/* ---------- reduced motion ----------------------------------------------
Nothing on either page enters on its own: the only motion is the shared
.reveal fade (already inert under reduced motion), the publication strip
inherited from the article pages (already covered above), and hover colour
transitions, which go instant here. The brass marks are simply drawn.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.work .eg-entry-link,
body.work .eg-entry-link::after{transition:none;}
body.work .eg-entry-link:hover::after{transform:none;}
}
/* =========================================================================
PHASE 7 — GLOBAL POLISH
Not a redesign: the same paper / graphite / brass / steel system, tuned.
Three things are being fixed here.
1. SPEED. Entrances were 600ms over 18px and staggers ran to 360ms, so a
section took most of a second to finish arriving. Everything now lands
inside ~550ms, and the pointer responds in 180ms. The vocabulary is the
tokens --eg-in / --eg-ui / --eg-step / --eg-ease, so nothing invents
its own timing.
2. GROUPING. Services fired four separate observers per specification.
Related content now arrives together on a short internal stagger — a
section arriving, not four animations happening.
3. STATE. Every meaningful interactive element now has a deliberate
response: a rule that draws, a mark that grows, a 2-3px step, a tonal
shift. Nothing scales, glows or bounces.
Everything degrades to its resting state under prefers-reduced-motion at
the end of this block.
========================================================================= */
/* the one entrance keyframe the polish pass adds; everything else reuses the
existing .reveal transition rather than stacking a second system on top */
@keyframes egRise{from{opacity:0;transform:translateY(9px);}to{opacity:1;transform:none;}}
@keyframes egDraw{from{transform:scaleX(0);}to{transform:scaleX(1);}}
/* ---------- entrance stagger: tightened across every page ---------------
Same choreography, roughly half the elapsed time. Steps of ~30ms instead
of 40-90ms, so a ten-row schedule finishes in ~250ms rather than ~700ms. */
body.home .eg-svc-row.reveal:nth-child(1){transition-delay:0ms;}
body.home .eg-svc-row.reveal:nth-child(2){transition-delay:30ms;}
body.home .eg-svc-row.reveal:nth-child(3){transition-delay:60ms;}
body.home .eg-svc-row.reveal:nth-child(4){transition-delay:90ms;}
body.home .eg-svc-row.reveal:nth-child(5){transition-delay:120ms;}
body.home .eg-svc-row.reveal:nth-child(6){transition-delay:150ms;}
body.home .eg-why-item.reveal:nth-child(2){transition-delay:55ms;}
body.home .eg-why-item.reveal:nth-child(3){transition-delay:110ms;}
body.home .eg-rec.in .eg-rec-row{animation-duration:.3s;}
body.home .eg-rec.in .eg-rec-leader{animation-duration:.24s;}
body.home .eg-rec.in .eg-rec-row:nth-child(2),body.home .eg-rec.in .eg-rec-row:nth-child(2) .eg-rec-leader{animation-delay:26ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(3),body.home .eg-rec.in .eg-rec-row:nth-child(3) .eg-rec-leader{animation-delay:52ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(4),body.home .eg-rec.in .eg-rec-row:nth-child(4) .eg-rec-leader{animation-delay:78ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(5),body.home .eg-rec.in .eg-rec-row:nth-child(5) .eg-rec-leader{animation-delay:104ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(6),body.home .eg-rec.in .eg-rec-row:nth-child(6) .eg-rec-leader{animation-delay:130ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(7),body.home .eg-rec.in .eg-rec-row:nth-child(7) .eg-rec-leader{animation-delay:156ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(8),body.home .eg-rec.in .eg-rec-row:nth-child(8) .eg-rec-leader{animation-delay:182ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(9),body.home .eg-rec.in .eg-rec-row:nth-child(9) .eg-rec-leader{animation-delay:208ms;}
body.home .eg-rec.in .eg-rec-row:nth-child(10),body.home .eg-rec.in .eg-rec-row:nth-child(10) .eg-rec-leader{animation-delay:234ms;}
body.products .eg-disc.in .eg-disc-lines li{animation-duration:.34s;}
body.products .eg-disc.in .eg-disc-lines li:nth-child(2){animation-delay:.05s;}
body.products .eg-disc.in .eg-disc-lines li:nth-child(3){animation-delay:.10s;}
body.products .eg-disc.in .eg-disc-n::after{animation-duration:.3s;animation-delay:.06s;}
body.products .eg-flow-list.in .eg-flow-step{animation-duration:.36s;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(2){animation-delay:.06s;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(3){animation-delay:.12s;}
body.products .eg-flow-list.in .eg-flow-step:nth-child(4){animation-delay:.18s;}
body.about .eg-chron-list.in .eg-chron-row{animation-duration:.36s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(2){animation-delay:.07s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(3){animation-delay:.14s;}
body.about .eg-chron-list.in .eg-chron-year::after{animation-duration:.3s;animation-delay:.12s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(2) .eg-chron-year::after{animation-delay:.19s;}
body.about .eg-chron-list.in .eg-chron-row:nth-child(3) .eg-chron-year::after{animation-delay:.26s;}
body.article .eg-pub-row.in .eg-pub-item{animation-duration:.34s;}
body.article .eg-pub-row.in .eg-pub-item:nth-child(2){animation-delay:.05s;}
body.article .eg-pub-row.in .eg-pub-item:nth-child(3){animation-delay:.10s;}
body.article .eg-pub-row.in .eg-pub-item:nth-child(4){animation-delay:.15s;}
body.article .eg-pub-row.in .eg-pub-item::before{animation-duration:.3s;animation-delay:.08s;}
/* ---------- SERVICES: one section arriving, not four animations ---------
The four .reveal targets per specification became one on the section. The
section carries the fade; the parts inside carry a 8px rise on a short
stagger. Because .in is added once and never removed, and because the parts
are hidden by the section's own opacity rather than by rules of their own,
there is no state in which content is on screen and then re-enters — which
is the replay bug this page had. main.js additionally settles a section
before an anchor jump, so arriving never catches one mid-entrance.
------------------------------------------------------------------------ */
body.services .eg-spec.reveal{transition-duration:.32s;}
body.services .eg-spec .eg-spec-head,
body.services .eg-spec .eg-spec-intro,
body.services .eg-spec .eg-scope,
body.services .eg-spec .eg-spec-link{transform:translateY(8px);transition:transform .36s var(--eg-ease);}
body.services .eg-spec.in .eg-spec-head,
body.services .eg-spec.in .eg-spec-intro,
body.services .eg-spec.in .eg-scope,
body.services .eg-spec.in .eg-spec-link{transform:none;}
body.services .eg-spec.in .eg-spec-intro{transition-delay:45ms;}
body.services .eg-spec.in .eg-scope{transition-delay:85ms;}
body.services .eg-spec.in .eg-spec-link{transition-delay:120ms;}
/* settled ahead of an anchor jump: no travel at all */
body.services .eg-spec.eg-settled .eg-spec-head,
body.services .eg-spec.eg-settled .eg-spec-intro,
body.services .eg-spec.eg-settled .eg-scope,
body.services .eg-spec.eg-settled .eg-spec-link{transition:none;transform:none;}
/* the contents list: rows acknowledge the pointer as a group of two moves —
the rule picks up brass and the name steps right. Already present; only the
number now moves with it, so the row reads as one object. */
body.services .eg-toc a:hover .eg-toc-n,
body.services .eg-toc a:focus-visible .eg-toc-n{transform:translateX(2px);}
body.services .eg-toc-n{transition:color var(--eg-ui) ease,transform var(--eg-ui) var(--eg-ease);}
body.services .eg-toc a:focus-visible{border-bottom-color:var(--eg-brass);}
body.services .eg-toc a:focus-visible .eg-toc-name{color:var(--eg-brass);transform:translateX(2px);}
/* the quote link closing each specification: the rule under it draws in from
the left rather than simply changing colour */
body.services .eg-spec-link{position:relative;}
body.services .eg-spec-link::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--eg-brass);transform:scaleX(0);transform-origin:left center;transition:transform .26s var(--eg-ease);}
body.services .eg-spec-link:hover::before,
body.services .eg-spec-link:focus-visible::before{transform:scaleX(1);}
/* ---------- HOMEPAGE: micro-interaction only, geometry untouched --------
The frozen composition is not altered. What changes is how it responds:
the service schedule row acknowledges the pointer along its own rule, and
a project record's schedule leaders and link move together so the record
reads as one object rather than a heading beside a table.
------------------------------------------------------------------------ */
body.home .eg-svc-row{position:relative;}
body.home .eg-svc-row::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--eg-brass);transform:scaleX(0);transform-origin:left center;transition:transform .28s var(--eg-ease);}
body.home .eg-svc-row:hover::after,
body.home .eg-svc-row:focus-within::after{transform:scaleX(1);}
body.home .eg-svc-name{transition:transform var(--eg-ui) var(--eg-ease);}
body.home .eg-svc-row:hover .eg-svc-name{transform:translateX(2px);}
/* the row's own border no longer darkens: the brass rule above is the response,
and two responses on the same edge read as a flicker */
body.home .eg-svc-row:hover{border-bottom-color:var(--eg-rule);}
body.home .eg-rec-link,body.home .eg-allwork a{position:relative;}
body.home .eg-rec-link::after,body.home .eg-allwork a::after{content:"\2192";margin-left:9px;display:inline-block;color:var(--eg-brass);transition:transform var(--eg-ui) var(--eg-ease);}
body.home .eg-rec-dark .eg-rec-link::after{color:var(--eg-brass-dark);}
body.home .eg-rec-link:hover::after,body.home .eg-allwork a:hover::after{transform:translateX(3px);}
/* hovering anywhere in the record lifts its leaders to full contrast — the
schedule belongs to the project, and says so */
body.home .eg-rec-leader{transition:border-bottom-color var(--eg-ui) ease;}
body.home .eg-rec:hover .eg-rec-leader{border-bottom-color:var(--eg-steel);}
body.home .eg-rec-dark:hover .eg-rec-leader{border-bottom-color:rgba(239,236,228,0.5);}
/* the coverage schedule on On the Ground responds the same way as every other
ruled row on the site */
body.home .eg-cov-row{transition:border-bottom-color var(--eg-ui) ease;}
body.home .eg-cov-row:hover{border-bottom-color:var(--eg-ink);}
/* ---------- CASE STUDIES: the photograph is the moment -----------------
The plate is the only place on the site where a real project photograph
carries a section, so it gets the one entrance nothing else has: the frame
rises while its caption follows a beat later. Opacity and transform only —
the image itself is never scaled or clipped.
------------------------------------------------------------------------ */
body.case .eg-chap.reveal{transition-duration:.38s;}
body.case .eg-chap .eg-chap-name,
body.case .eg-chap .eg-chap-body > p,
body.case .eg-chap .eg-points,
body.case .eg-chap .eg-s,
body.case .eg-chap .eg-plate,
body.case .eg-chap .eg-nophoto{transform:translateY(7px);transition:transform .36s var(--eg-ease);}
body.case .eg-chap.in .eg-chap-name,
body.case .eg-chap.in .eg-chap-body > p,
body.case .eg-chap.in .eg-points,
body.case .eg-chap.in .eg-s,
body.case .eg-chap.in .eg-plate,
body.case .eg-chap.in .eg-nophoto{transform:none;}
body.case .eg-chap.in .eg-chap-body > p{transition-delay:40ms;}
body.case .eg-chap.in .eg-points,
body.case .eg-chap.in .eg-s,
body.case .eg-chap.in .eg-nophoto{transition-delay:80ms;}
body.case .eg-chap.in .eg-plate{transition-delay:60ms;}
body.case .eg-chap.in .eg-plate-cap{animation:egRise .42s var(--eg-ease) .14s both;}
body.case .eg-chap.eg-settled .eg-chap-name,
body.case .eg-chap.eg-settled .eg-chap-body > p,
body.case .eg-chap.eg-settled .eg-points,
body.case .eg-chap.eg-settled .eg-s,
body.case .eg-chap.eg-settled .eg-plate,
body.case .eg-chap.eg-settled .eg-nophoto{transition:none;transform:none;}
/* the index entry: number, rule and link answer the pointer as one row */
body.work .eg-entry{transition:border-bottom-color var(--eg-ui) ease;}
body.work .eg-entry:hover{border-bottom-color:var(--eg-ink);}
body.work .eg-entry-name{transition:transform var(--eg-ui) var(--eg-ease);}
body.work .eg-entry:hover .eg-entry-name{transform:translateX(2px);}
/* the mark grows by transform, not by width: an animated width is a layout
property even on an absolutely positioned rule */
body.work .eg-entry-n::after{transform-origin:left center;transition:transform var(--eg-ui) var(--eg-ease);}
body.work .eg-entry:hover .eg-entry-n::after{transform:scaleX(1.6);}
body.work .eg-s-leader,body.case .eg-s-leader{transition:border-bottom-color var(--eg-ui) ease;}
body.work .eg-entry:hover .eg-s-leader{border-bottom-color:var(--eg-steel);}
/* the evidence plates on the index: the frame lifts its border, nothing scales */
body.work .eg-ba-frame{transition:border-color var(--eg-ui) ease;}
body.work .eg-ba:hover .eg-ba-frame{border-color:rgba(239,236,228,0.42);}
body.work .eg-ba{transition:border-bottom-color var(--eg-ui) ease;}
body.work .eg-ba:hover{border-bottom-color:rgba(239,236,228,0.42);}
/* ---------- CONTACT: the form is the conversion point, so it responds ---
The field the visitor is in is unambiguous: the label goes brass (already),
the border goes brass, and a brass rule draws along the bottom of the
control. The submit is the only place on the site with a press state.
------------------------------------------------------------------------ */
body.contact .eg-reach-row{transition:border-bottom-color var(--eg-ui) ease;}
body.contact .eg-reach-row:hover{border-bottom-color:var(--eg-steel);}
body.contact .eg-wa svg{transition:transform var(--eg-ui) var(--eg-ease);}
body.contact .eg-wa:hover svg{transform:translateX(2px);}
body.contact .eg-submit{transition:background var(--eg-ui) ease,border-color var(--eg-ui) ease,transform .1s var(--eg-ease);}
body.contact .eg-submit:active{transform:translateY(1px);}
/* the reach rows settle in as a short schedule rather than one block */
body.contact .eg-reach.in .eg-reach-row{animation:egRise .34s var(--eg-ease) both;}
body.contact .eg-reach.in .eg-reach-row:nth-child(2){animation-delay:.05s;}
body.contact .eg-reach.in .eg-reach-row:nth-child(3){animation-delay:.10s;}
body.contact .eg-reach.in .eg-wa{animation:egRise .34s var(--eg-ease) .16s both;}
/* ---------- BLOG + ARTICLES: tighten what is already there -------------- */
body.blog .eg-lead-post .eg-post-title a{display:inline-block;transition:color var(--eg-ui) ease,transform var(--eg-ui) var(--eg-ease);}
body.blog .eg-lead-post:hover .eg-post-title a{transform:translateX(2px);}
body.blog .eg-post::after,body.article .eg-next-link::after{transition:transform .26s var(--eg-ease);}
body.article .eg-doc-body a{transition:color var(--eg-ui) ease,border-bottom-color var(--eg-ui) ease;}
/* the standfirst and the first section mark arrive with the column, once */
body.article .eg-doc-body{animation:egRise .44s var(--eg-ease) both;}
/* ---------- global interaction timing normalisation ---------------------
Everything interactive answered somewhere between 150ms and 300ms. One
value now, so the whole site responds at the same speed.
------------------------------------------------------------------------ */
body.home nav.links a,body.services nav.links a,body.products nav.links a,body.blog nav.links a,body.about nav.links a,body.contact nav.links a,body.article nav.links a{transition:color var(--eg-ui) ease;}
body.home nav.links a::after,body.services nav.links a::after,body.products nav.links a::after,body.blog nav.links a::after,body.about nav.links a::after,body.contact nav.links a::after,body.article nav.links a::after{transition:width .22s var(--eg-ease);}
/* transform applies to block boxes, so the base `display:block` that stacks
these links is left exactly as it is — overriding it to inline-block ran the
whole footer column onto one line */
body.home .foot-col a,body.services .foot-col a,body.products .foot-col a,body.blog .foot-col a,body.about .foot-col a,body.contact .foot-col a,body.article .foot-col a{transition:color var(--eg-ui) ease,transform var(--eg-ui) var(--eg-ease);width:fit-content;}
body.home .foot-col a:hover,body.services .foot-col a:hover,body.products .foot-col a:hover,body.blog .foot-col a:hover,body.about .foot-col a:hover,body.contact .foot-col a:hover,body.article .foot-col a:hover{transform:translateX(2px);}
body.home .foot-col a.foot-quote:hover,body.services .foot-col a.foot-quote:hover,body.products .foot-col a.foot-quote:hover,body.blog .foot-col a.foot-quote:hover,body.about .foot-col a.foot-quote:hover,body.contact .foot-col a.foot-quote:hover,body.article .foot-col a.foot-quote:hover{transform:none;}
body.home .eg-btn-primary,body.contact .eg-submit{will-change:auto;}
body.home .eg-btn-primary{transition:background var(--eg-ui) ease,border-color var(--eg-ui) ease,transform .1s var(--eg-ease);}
body.home .eg-btn-primary:active{transform:translateY(1px);}
body.home .eg-btn-invert,body.services .eg-btn-invert,body.products .eg-btn-invert,body.blog .eg-btn-invert,body.about .eg-btn-invert,body.contact .eg-btn-invert,body.article .eg-btn-invert{transition:background var(--eg-ui) ease,border-color var(--eg-ui) ease,transform .1s var(--eg-ease);}
body.home .eg-btn-invert:active,body.services .eg-btn-invert:active,body.products .eg-btn-invert:active,body.blog .eg-btn-invert:active,body.about .eg-btn-invert:active,body.contact .eg-btn-invert:active,body.article .eg-btn-invert:active{transform:translateY(1px);}
/* the mobile menu row: a brass edge marks the row under the finger */
body.home .mnav a,body.services .mnav a,body.products .mnav a,body.blog .mnav a,body.about .mnav a,body.contact .mnav a,body.article .mnav a{border-left:2px solid transparent;transition:border-left-color var(--eg-ui) ease,color var(--eg-ui) ease;}
body.home .mnav a:hover,body.services .mnav a:hover,body.products .mnav a:hover,body.blog .mnav a:hover,body.about .mnav a:hover,body.contact .mnav a:hover,body.article .mnav a:hover,
body.home .mnav a:focus-visible,body.services .mnav a:focus-visible,body.products .mnav a:focus-visible,body.blog .mnav a:focus-visible,body.about .mnav a:focus-visible,body.contact .mnav a:focus-visible,body.article .mnav a:focus-visible{border-left-color:var(--eg-brass);color:var(--eg-brass);}
/* ---------- THANK YOU ---------------------------------------------------
The one page still running the pre-redesign theme. It stays the simplest
page on the site: a confirmation, what happens next, and two routes out.
No marketing, no CTA band — the footer already carries the contact routes.
------------------------------------------------------------------------ */
body.thanks .eg-done{background:var(--eg-paper);color:var(--eg-ink);padding:96px 0 104px;}
body.thanks .eg-done-inner{max-width:640px;}
body.thanks .eg-done-label{display:inline-flex;align-items:center;gap:12px;font-family:var(--eg-font-body);font-weight:500;font-size:0.76rem;letter-spacing:0.2em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:22px;}
body.thanks .eg-done-label::before{content:"";width:18px;height:1px;background:var(--eg-brass);flex:none;animation:egDraw .34s var(--eg-ease) .05s both;transform-origin:left center;}
body.thanks .eg-done-title{font-family:var(--eg-font-head);font-stretch:78%;font-weight:700;font-size:clamp(2.2rem,4.2vw,3.1rem);line-height:1.06;letter-spacing:-0.015em;color:var(--eg-ink);animation:egRise .44s var(--eg-ease) .1s both;}
body.thanks .eg-done-lead{font-family:var(--eg-font-body);font-weight:400;font-size:1.12rem;line-height:1.62;color:var(--eg-steel);margin-top:20px;max-width:52ch;animation:egRise .44s var(--eg-ease) .16s both;}
body.thanks .eg-next-steps{margin-top:40px;padding-top:24px;border-top:2px solid var(--eg-brass);animation:egRise .44s var(--eg-ease) .22s both;}
body.thanks .eg-next-steps dt{font-family:var(--eg-font-body);font-weight:500;font-size:0.68rem;letter-spacing:0.16em;text-transform:uppercase;color:var(--eg-steel);margin-bottom:9px;}
body.thanks .eg-next-steps dd{margin:0 0 20px;font-family:var(--eg-font-body);font-weight:400;font-size:1rem;line-height:1.6;color:var(--eg-ink);}
body.thanks .eg-next-steps dd:last-child{margin-bottom:0;}
body.thanks .eg-next-steps a{color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:1px;transition:color var(--eg-ui) ease,border-bottom-color var(--eg-ui) ease;}
body.thanks .eg-next-steps a:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.thanks .eg-done-back{display:inline-block;margin-top:36px;font-family:var(--eg-font-body);font-weight:500;font-size:0.95rem;color:var(--eg-ink);border-bottom:1px solid var(--eg-rule);padding-bottom:3px;transition:color var(--eg-ui) ease,border-bottom-color var(--eg-ui) ease;animation:egRise .44s var(--eg-ease) .28s both;}
body.thanks .eg-done-back::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform var(--eg-ui) var(--eg-ease);}
body.thanks .eg-done-back:hover{color:var(--eg-brass);border-bottom-color:var(--eg-brass);}
body.thanks .eg-done-back:hover::after{transform:translateX(3px);}
@media (max-width:720px){
body.thanks .eg-done{padding:56px 0 64px;}
body.thanks .eg-done-title{font-size:1.95rem;}
body.thanks .eg-done-lead{font-size:1rem;}
}
/* ---------- rhythm ------------------------------------------------------
No section is resized arbitrarily. Two places genuinely read as dead
paper and are brought in: the Services contents hands to the first
specification, and the case-study index closes tighter under its last
entry. Everything else keeps the established spacing.
------------------------------------------------------------------------ */
body.services .eg-intro{padding-bottom:8px;}
body.services .eg-spec:first-of-type{padding-top:70px;}
body.work .eg-index{padding-bottom:76px;}
/* ---------- reduced motion ---------------------------------------------
Everything this pass introduced settles to its finished state and never
travels: no entrance, no delayed visibility, no pointer movement.
------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce){
body.services .eg-spec .eg-spec-head,
body.services .eg-spec .eg-spec-intro,
body.services .eg-spec .eg-scope,
body.services .eg-spec .eg-spec-link,
body.case .eg-chap .eg-chap-name,
body.case .eg-chap .eg-chap-body > p,
body.case .eg-chap .eg-points,
body.case .eg-chap .eg-s,
body.case .eg-chap .eg-plate,
body.case .eg-chap .eg-nophoto{transform:none;transition:none;}
body.case .eg-chap.in .eg-plate-cap,
body.contact .eg-reach.in .eg-reach-row,
body.contact .eg-reach.in .eg-wa,
body.article .eg-doc-body,
body.thanks .eg-done-title,
body.thanks .eg-done-lead,
body.thanks .eg-next-steps,
body.thanks .eg-done-back,
body.thanks .eg-done-label::before{animation:none;opacity:1;transform:none;}
body.home .eg-svc-row::after,
body.services .eg-spec-link::before,
body.home .eg-svc-name,
body.work .eg-entry-name,
body.work .eg-entry-n::after,
body.blog .eg-lead-post .eg-post-title a,
body.contact .eg-wa svg,
body.services .eg-toc-n{transition:none;}
body.home .eg-svc-row:hover .eg-svc-name,
body.work .eg-entry:hover .eg-entry-name,
body.blog .eg-lead-post:hover .eg-post-title a,
body.contact .eg-wa:hover svg,
body.services .eg-toc a:hover .eg-toc-n,
body.services .eg-toc a:focus-visible .eg-toc-n,
body.services .eg-toc a:focus-visible .eg-toc-name{transform:none;}
body.home .foot-col a:hover,body.services .foot-col a:hover,body.products .foot-col a:hover,body.blog .foot-col a:hover,body.about .foot-col a:hover,body.contact .foot-col a:hover,body.article .foot-col a:hover{transform:none;}
body.home .eg-btn-primary:active,body.contact .eg-submit:active,
body.home .eg-btn-invert:active,body.services .eg-btn-invert:active,body.products .eg-btn-invert:active,body.blog .eg-btn-invert:active,body.about .eg-btn-invert:active,body.contact .eg-btn-invert:active,body.article .eg-btn-invert:active{transform:none;}
body.home .eg-rec-link:hover::after,body.home .eg-allwork a:hover::after,
body.thanks .eg-done-back:hover::after{transform:none;}
body.home .mnav a,body.services .mnav a,body.products .mnav a,body.blog .mnav a,body.about .mnav a,body.contact .mnav a,body.article .mnav a{transition:none;}
/* the drawing rules become a plain on/off mark: the state is still obvious,
but nothing travels across the element */
body.home .eg-svc-row::after,
body.services .eg-spec-link::before,
body.blog .eg-post::after,
body.article .eg-next-link::after{transition:none;transform:scaleX(1);opacity:0;}
body.home .eg-svc-row:hover::after,
body.home .eg-svc-row:focus-within::after,
body.services .eg-spec-link:hover::before,
body.services .eg-spec-link:focus-visible::before,
body.blog .eg-post:hover::after,
body.blog .eg-post:focus-within::after,
body.article .eg-next-link:hover::after,
body.article .eg-next-link:focus-visible::after{opacity:1;}
body.work .eg-entry-n::after{transition:none;}
body.work .eg-entry:hover .eg-entry-n::after{transform:none;}
/* FIX: the header sequence was still animating under reduced motion. The
existing override targets `.eg-seq > *` (0,2,1) but the entrance is
declared on `.eg-seq > *:nth-child(n+2)` (0,3,1), which out-specifies it —
a media query adds no specificity of its own — so DESIGN -> DEPLOY ->
SUPPORT started at opacity 0 and rose into place regardless of the
setting. Matching the specificity settles it immediately instead. */
body.home .eg-seq > *:nth-child(n+2),body.services .eg-seq > *:nth-child(n+2),body.products .eg-seq > *:nth-child(n+2),body.blog .eg-seq > *:nth-child(n+2),body.about .eg-seq > *:nth-child(n+2),body.contact .eg-seq > *:nth-child(n+2),body.article .eg-seq > *:nth-child(n+2){animation:none;opacity:1;transform:none;}
}
/* =========================================================================
PHASE 8 — PRE-SEO MICRO-POLISH
Two text corrections and one spacing pass. No new devices, no new motion,
no structural change.
The spacing here is measured, not guessed. On a case study the closing
statement sat 127px from "Next case study" and the chapters were 113px
apart; on the index the last entry sat 215px from the graphite plates and
the plates 158px from the closing line. Those are pauses that had stopped
reading as editorial and started reading as unfinished page. Each is cut
by roughly a fifth — the pause survives, the emptiness does not.
Scoped to body.case / body.work only. The five blog articles share
.eg-next and .eg-all through body.article and are deliberately untouched.
========================================================================= */
/* ---------- one case study ---------------------------------------------- */
/* chapter to chapter: 113px -> 96px */
body.case .eg-chap{padding:48px 0 48px;}
body.case .eg-chap:first-of-type{padding-top:54px;}
/* closing statement into the next project: 127px -> 100px */
body.case .eg-closing{padding:10px 0 56px;}
body.case .eg-next{padding:44px 0 52px;}
/* the onward row and the index link were already tight; only the room after
them is reclaimed, so the footer no longer floats away from the page */
/* ---------- the index --------------------------------------------------- */
/* last entry into the graphite plates: 215px -> ~174px */
body.work .eg-index{padding-bottom:58px;}
body.work .eg-plates{padding:64px 0 68px;}
/* plates into the closing line: 158px -> ~120px, and closing into footer */
body.work .eg-closing{padding:52px 0 60px;}
/* ---------- "View all case studies" ------------------------------------
The same brass arrow every other onward link in the system carries, so the
index link reads as deliberate rather than as a leftover text link. Kept a
text link: no button, no card. Case studies only — the articles' own
.eg-all keeps its existing treatment.
------------------------------------------------------------------------ */
body.case .eg-all a::after{content:"\2192";color:var(--eg-brass);margin-left:9px;display:inline-block;transition:transform var(--eg-ui) var(--eg-ease);}
body.case .eg-all a:hover::after{transform:translateX(3px);}
@media (max-width:1023px){
body.case .eg-chap{padding:40px 0 42px;}
body.case .eg-chap:first-of-type{padding-top:44px;}
}
@media (max-width:720px){
body.case .eg-chap{padding:32px 0 34px;}
body.case .eg-chap:first-of-type{padding-top:36px;}
body.case .eg-closing{padding:8px 0 42px;}
body.case .eg-next{padding:34px 0 40px;}
body.work .eg-index{padding-bottom:46px;}
body.work .eg-plates{padding:44px 0 48px;}
body.work .eg-closing{padding:38px 0 44px;}
}
@media (prefers-reduced-motion: reduce){
body.case .eg-all a::after{transition:none;}
body.case .eg-all a:hover::after{transform:none;}
}
/* =========================================================================
CONTENT READABILITY — E2
Reviewed and approved 22 Aug 2026. Display type, the wordmark, the header
and the footer branding are untouched; no font family, weight or file
changes. This block is appended last so it wins on cascade order at equal
specificity, and every selector below repeats the prefix its original rule
uses so no specificity is invented.
Three deviations from the approved selector list, each verified against the
existing declarations before writing:
1. Eight selectors named in the list already resolve to --eg-ink (14.31:1).
Routing them to --eg-body-ink (6.64:1) would LIGHTEN them, so they are
excluded: .eg-cov-val, .eg-scope li, .eg-disc-lines li, .eg-reach-row dd,
.eg-doc-body p, .eg-doc-body li, .eg-chap-body p, .eg-points li.
(The audit's "contact address is in the weakest tone" note was wrong:
.eg-reach-row dd is --eg-ink. The 4.76:1 reading belonged to the
unclassed of .eg-term on the About page, which IS included below.)
2. Three further selectors sit on graphite, not paper, and are moved into
the reverse-token group rather than the paper group:
.eg-chron-body p, .eg-flow-step p, .eg-rec-dark .eg-rec-body.
Applying #4E525A to any of them measures 1.94:1.
3. .eg-doc-body li already carries line-height:1.66; it is restated here
only so the rhythm rule reads as one set.
========================================================================= */
/* ---------- running prose on paper: 4.76:1 -> 6.64:1 -------------------- */
body.home .eg-lead,
body.home .eg-sec-head p,
body.home .eg-svc-desc,
body.home .eg-why-item p,
body.home .eg-rec-body,
body.services .eg-page-lead,body.products .eg-page-lead,body.blog .eg-page-lead,
body.about .eg-page-lead,body.contact .eg-page-lead,body.article .eg-page-lead,
body.services .eg-spec-intro,
body.products .eg-group-desc,
body.products .eg-disc-desc,
body.products .eg-source-body,
body.products .eg-note-body,
body.blog .eg-post-dek,
body.about .eg-story-body p,
body.about .eg-origin-body p,
body.about .eg-term dd,
body.contact .eg-form-lead,
body.contact .eg-form-note,
body.article .eg-callout p,
body.work .eg-entry-brief,
body.case .eg-plate-cap p,
body.thanks .eg-done-lead{color:var(--eg-body-ink);}
/* ---------- running prose on graphite: 6.73:1 -> 8.39:1 ----------------- */
body.home .eg-rec-dark .eg-rec-body,
body.products .eg-flow-lead,
body.products .eg-flow-step p,
body.about .eg-chron-body p,
body.work .eg-plates-lead,
body.work .eg-ba-cap{color:var(--eg-body-on-graphite);}
/* ---------- list rhythm: these inherited the legacy body 1.55 while the
paragraphs beside them run 1.62-1.76 ---------------------------------- */
body.services .eg-scope li,
body.products .eg-disc-lines li,
body.case .eg-points li,
body.article .eg-doc-body li{line-height:1.66;}
/* ---------- the six size corrections. Desktop and mobile take the same
values: none of these selectors carries a mobile override, and the
mobile setting was never the problem. --------------------------------- */
/* smallest running prose on the site, sitting under 1.42rem service names */
body.home .eg-svc-desc{font-size:1.02rem;line-height:1.62;}
/* a field a customer has to fill in; tracking eased so the label keeps width */
body.contact .eg-field label{font-size:0.75rem;letter-spacing:0.12em;}
body.home .foot-col h5,body.services .foot-col h5,body.products .foot-col h5,
body.blog .foot-col h5,body.about .foot-col h5,body.contact .foot-col h5,
body.article .foot-col h5{font-size:0.75rem;}
/* the smallest text on the site apart from the frozen brand line */
body.article .eg-doc-facts dt,
body.article .eg-pub-item dt,
body.products .eg-disc-meta dt{font-size:0.72rem;}
body.services .eg-crumb,body.products .eg-crumb,body.blog .eg-crumb,
body.about .eg-crumb,body.contact .eg-crumb,body.article .eg-crumb{font-size:0.75rem;}
body.blog .eg-post-meta{font-size:0.76rem;}