/* ============================================================================= PARA Designworks — front-end design system Dark theme, extended from para-designworks-dark-slider.html Load order: bootstrap.min.css -> site.css Bootstrap runs in dark mode (data-bs-theme="dark" on ) and its CSS variables are re-pointed at the PARA palette below, so Bootstrap components (modal, offcanvas, collapse, forms, grid) inherit the design without being restyled one by one. Sections 01 Tokens 02 Reset & base 03 Typography 04 Buttons & links 05 Top bar, header, navigation 06 Off-canvas panel 07 Hero slider (home) 08 Section furniture (kicker, heads, motifs) 09 About band 10 Services 11 Process 12 Project drag-slider 13 Project grid & filters 14 Project detail 15 Journal (blog) list & article 16 Offices 17 Recognition 18 Contact & forms 19 CTA band 20 Footer 21 Pagination 22 Utilities, reveal, motion ========================================================================== */ /* --- 01 Tokens ---------------------------------------------------------- */ :root{ /* Brand */ --accent:#EE1A24; --accent-dark:#C0141C; --accent-soft:rgba(238,26,36,.12); /* Surfaces */ --bg:#0D0D0D; --surface:#161616; --surface-2:#101010; --surface-3:#1C1C1C; /* Lines */ --edge:rgba(255,255,255,.11); --edge-soft:rgba(255,255,255,.06); --edge-strong:rgba(255,255,255,.2); /* Text */ --head:#FFFFFF; --body:rgba(255,255,255,.58); --body-dim:rgba(255,255,255,.4); --body-faint:rgba(255,255,255,.28); /* Type */ --display:'Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; --text:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; /* Metrics */ --maxw:1280px; --gut:clamp(20px,5vw,54px); --edge-pad:max(var(--gut), calc((100vw - var(--maxw)) / 2 + var(--gut))); --head-h:82px; --sec-pad:clamp(64px,9vw,120px); /* Motion */ --ease:cubic-bezier(.4,0,.2,1); --ease-out:cubic-bezier(.2,.7,.3,1); } /* Re-point Bootstrap at the PARA palette. */ [data-bs-theme="dark"]{ --bs-body-bg:var(--bg); --bs-body-color:var(--body); --bs-body-font-family:var(--text); --bs-body-font-size:15px; --bs-body-line-height:1.8; --bs-emphasis-color:var(--head); --bs-heading-color:var(--head); --bs-border-color:var(--edge); --bs-border-radius:0; --bs-border-radius-sm:0; --bs-border-radius-lg:0; --bs-primary:var(--accent); --bs-primary-rgb:238,26,36; --bs-link-color:var(--head); --bs-link-hover-color:var(--accent); --bs-secondary-bg:var(--surface); --bs-tertiary-bg:var(--surface-3); --bs-focus-ring-color:rgba(238,26,36,.35); } /* --- 02 Reset & base ---------------------------------------------------- */ *,*::before,*::after{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:calc(var(--head-h) + 20px)} body{ margin:0; font-family:var(--text); font-size:15px; line-height:1.8; color:var(--body); background:var(--bg); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; overflow-x:hidden; } img,svg,video{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font-family:inherit} hr{border:0;border-top:1px solid var(--edge);opacity:1;margin:0} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:3px} /* Bootstrap's focus ring is round and blue; ours is square and red. */ .btn:focus-visible,.form-control:focus,.form-select:focus{box-shadow:0 0 0 2px rgba(238,26,36,.35)} /* Thin scrollbar that reads as part of the design, not the OS. */ @supports (scrollbar-width:thin){ html{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.18) var(--bg)} } ::-webkit-scrollbar{width:10px;height:10px} ::-webkit-scrollbar-track{background:var(--bg)} ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.16)} ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.28)} /* Body hooks. Each controller sets one via $bodyClass, so a single page can be targeted from here without touching its template. They carry no styling of their own — they exist to be selected against, e.g. .page-contact .foot{border-top:0} */ .page-home,.page-about,.page-projects,.page-projects-grid,.page-project, .page-journal,.page-article,.page-contact,.page-copy{} /* The one container used across the whole site. */ .wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut);width:100%} .wrap--narrow{max-width:860px} .wrap--wide{max-width:1480px} /* Skip link for keyboard users. */ .skip{ position:absolute;left:-9999px;top:0;z-index:200; background:var(--accent);color:#fff;padding:12px 20px; font:600 12px/1 var(--text);letter-spacing:.16em;text-transform:uppercase; } .skip:focus{left:12px;top:12px} /* --- 03 Typography ------------------------------------------------------ */ h1,h2,h3,h4,h5,h6{ font-family:var(--display); color:var(--head); margin:0; font-weight:600; line-height:1.1; letter-spacing:-.025em; } p{margin:0 0 1em} p:last-child{margin-bottom:0} .t-display{font-size:clamp(38px,6.4vw,76px);font-weight:700;line-height:1.02} .t-h1{font-size:clamp(32px,5vw,58px);font-weight:700} .t-h2{font-size:clamp(27px,3.8vw,46px);font-weight:600} .t-h3{font-size:clamp(21px,2.4vw,29px);font-weight:600} .t-h4{font-size:19px;font-weight:600} .t-lede{font-size:clamp(15.5px,1.5vw,17px);line-height:1.75;color:var(--body)} .t-small{font-size:13px;line-height:1.7;color:var(--body-dim)} .t-mono{ font-family:var(--display);font-weight:600;font-size:12px; letter-spacing:.2em;text-transform:uppercase; } /* Numeric index used by process steps, slider counters, list rows. */ .t-index{ font-family:var(--display);font-weight:700;font-variant-numeric:tabular-nums; color:var(--accent);letter-spacing:.02em; } .accent{color:var(--accent)} .ink{color:var(--head)} .dim{color:var(--body-dim)} /* Rich text coming out of the CMS editor. */ .rich{font-size:15.5px;line-height:1.85;color:var(--body)} .rich > :first-child{margin-top:0} .rich > :last-child{margin-bottom:0} .rich p{margin:0 0 1.35em} .rich h2{font-size:clamp(23px,2.6vw,31px);margin:2.1em 0 .7em} .rich h3{font-size:clamp(19px,2vw,23px);margin:1.9em 0 .6em} .rich h4{font-size:17px;margin:1.7em 0 .5em} .rich strong,.rich b{color:rgba(255,255,255,.86);font-weight:600} .rich a{color:var(--head);border-bottom:1px solid var(--accent);transition:color .2s} .rich a:hover{color:var(--accent)} .rich ul,.rich ol{margin:0 0 1.35em;padding-left:1.15em} .rich li{margin-bottom:.55em;padding-left:.25em} .rich ul li::marker{color:var(--accent)} .rich ol li::marker{color:var(--accent);font-family:var(--display);font-weight:600} .rich blockquote{ margin:2em 0;padding:0 0 0 26px;border-left:2px solid var(--accent); font-family:var(--display);font-size:clamp(18px,2vw,22px);line-height:1.5; color:var(--head);font-weight:500;letter-spacing:-.015em; } .rich blockquote p{margin:0} .rich img,.rich figure{margin:2em 0} .rich figure img{width:100%} .rich figcaption{margin-top:12px;font-size:12.5px;color:var(--body-dim)} .rich hr{margin:2.4em 0} .rich code{ background:rgba(255,255,255,.07);padding:2px 7px;font-size:.9em; font-family:ui-monospace,SFMono-Regular,Consolas,monospace;color:var(--head); } .rich pre{background:var(--surface);border:1px solid var(--edge);padding:20px;overflow-x:auto;margin:2em 0} .rich pre code{background:none;padding:0} .rich table{width:100%;border-collapse:collapse;margin:2em 0;font-size:14px} .rich th,.rich td{padding:12px 16px;border-bottom:1px solid var(--edge);text-align:left} .rich th{color:var(--head);font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.14em;text-transform:uppercase} /* --- 04 Buttons & links ------------------------------------------------- */ .btn, .pd-btn{ display:inline-flex;align-items:center;justify-content:center;gap:11px; font-family:var(--text);font-size:11.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; padding:16px 30px;border:1px solid var(--accent);border-radius:0; background:var(--accent);color:#fff;cursor:pointer; transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease); text-align:center; } .btn:hover,.pd-btn:hover{background:transparent;color:var(--accent);border-color:var(--accent)} .btn:active,.pd-btn:active{transform:translateY(1px)} .pd-btn--ghost{background:transparent;border-color:var(--edge);color:var(--head)} .pd-btn--ghost:hover{background:var(--accent);border-color:var(--accent);color:#fff} .pd-btn--light{background:#fff;border-color:#fff;color:#0D0D0D} .pd-btn--light:hover{background:transparent;border-color:#fff;color:#fff} .pd-btn--sm{padding:12px 22px;font-size:10.5px;letter-spacing:.16em} .pd-btn--lg{padding:19px 38px;font-size:12px} .pd-btn--block{width:100%} .pd-btn[disabled],.pd-btn.is-busy{opacity:.55;pointer-events:none} /* Text link with a red rule underneath — used for "See all", "Read more". */ .link-rule{ display:inline-flex;align-items:center;gap:9px; color:var(--head);font-size:12.5px;font-weight:600;letter-spacing:.06em; border-bottom:1px solid var(--accent);padding-bottom:3px; transition:color .22s,gap .22s; } .link-rule:hover{color:var(--accent);gap:14px} .link-rule .arw{font-size:14px;line-height:1;transition:transform .22s} .link-rule:hover .arw{transform:translate(2px,-2px)} /* Square icon button. */ .icon-btn{ width:48px;height:48px;flex:none; display:grid;place-items:center; background:transparent;border:1px solid var(--edge);color:#fff; font-size:19px;line-height:1;cursor:pointer;padding:0; transition:background .22s,border-color .22s,color .22s,opacity .22s; } .icon-btn:hover:not(:disabled){background:var(--accent);border-color:var(--accent);color:#fff} .icon-btn:disabled{opacity:.28;cursor:default} .icon-btn--sm{width:40px;height:40px;font-size:16px} /* --- 05 Top bar, header, navigation ------------------------------------- */ .topbar{ border-bottom:1px solid var(--edge-soft); font-size:12.5px;color:var(--body-dim); background:var(--bg); } .topbar .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;padding-top:11px;padding-bottom:11px} .topbar a{transition:color .2s} .topbar a:hover{color:#fff} .topbar .sep{ margin-left:auto;color:var(--accent);font-weight:600; letter-spacing:.14em;text-transform:uppercase;font-size:11px; } @media(max-width:700px){ .topbar .sep{display:none} .topbar .wrap{gap:6px 18px;font-size:12px} } .site-head{ position:sticky;top:0;z-index:60; background:rgba(13,13,13,.94); border-bottom:1px solid var(--edge-soft); transition:background .3s,border-color .3s; } @supports (backdrop-filter:blur(10px)) or (-webkit-backdrop-filter:blur(10px)){ .site-head{background:rgba(13,13,13,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)} } .site-head.is-stuck{background:rgba(13,13,13,.97);border-bottom-color:var(--edge)} .head-inner{ max-width:var(--maxw);margin:0 auto;padding:0 var(--gut); height:var(--head-h);display:flex;align-items:center;gap:30px; } .logo{display:inline-block;line-height:0} .logo img{height:24px;width:auto;display:block} .logo--word{ font-family:var(--display);font-weight:900;font-size:21px; letter-spacing:-.02em;color:#fff;line-height:1; } .logo--word span{color:var(--accent)} .nav{margin-left:auto;display:flex;align-items:center;gap:32px} .nav a{ font-size:12px;font-weight:500;letter-spacing:.15em;text-transform:uppercase; color:rgba(255,255,255,.72);padding:8px 0; border-bottom:1px solid transparent; transition:color .2s,border-color .2s; } .nav a:hover, .nav a[aria-current="page"], .nav a.is-active{color:#fff;border-bottom-color:var(--accent)} .head-tools{display:flex;align-items:center;gap:12px} .burger{ width:44px;height:44px;flex:none; display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px; background:transparent;border:1px solid var(--edge);cursor:pointer;padding:0; transition:border-color .22s,background .22s; } .burger:hover{border-color:var(--accent);background:var(--accent-soft)} .burger i{display:block;width:17px;height:1.5px;background:#fff;transition:transform .3s var(--ease),opacity .2s} .burger:hover i:nth-child(1){transform:translateX(-2px)} .burger:hover i:nth-child(3){transform:translateX(2px)} .nav-toggle{ display:none;width:44px;height:44px;flex:none; place-items:center;background:transparent;border:1px solid var(--edge); color:#fff;cursor:pointer;padding:0; } .nav-toggle span{position:relative;display:block;width:17px;height:1.5px;background:#fff;transition:background .2s} .nav-toggle span::before, .nav-toggle span::after{ content:"";position:absolute;left:0;width:17px;height:1.5px;background:#fff; transition:transform .3s var(--ease),top .2s; } .nav-toggle span::before{top:-6px} .nav-toggle span::after{top:6px} .nav-toggle[aria-expanded="true"] span{background:transparent} .nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)} .nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)} @media(max-width:1080px){ .nav{ position:absolute;top:var(--head-h);left:0;right:0; background:var(--surface-2);border-bottom:1px solid var(--edge); flex-direction:column;align-items:stretch;gap:0; padding:6px var(--gut) 22px;display:none; max-height:calc(100vh - var(--head-h));overflow-y:auto; } .nav.open{display:flex} .nav a{width:100%;padding:15px 0;border-bottom:1px solid var(--edge-soft);font-size:13px} .nav a:last-child{border-bottom:0} .nav-toggle{display:grid} } @media(max-width:520px){ :root{--head-h:70px} .logo img{height:20px} .burger{display:none} } /* --- 06 Off-canvas panel ------------------------------------------------ */ .oc-veil{ position:fixed;inset:0;background:rgba(0,0,0,.62); opacity:0;visibility:hidden;transition:opacity .35s,visibility .35s;z-index:80; } .oc-veil.on{opacity:1;visibility:visible} .oc{ position:fixed;top:0;right:0;bottom:0;width:min(410px,90vw); background:#111;border-left:1px solid var(--edge);z-index:90; transform:translateX(100%);transition:transform .4s var(--ease); padding:34px 34px 44px;overflow-y:auto;overscroll-behavior:contain; } .oc.on{transform:none} .oc-close{ position:absolute;top:20px;right:24px; width:36px;height:36px;display:grid;place-items:center; background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer; transition:color .2s,transform .2s; } .oc-close:hover{color:var(--accent);transform:rotate(90deg)} .oc .logo{margin-bottom:24px;display:block} .oc p{font-size:14px;line-height:1.8} .oc > img{margin:26px 0;aspect-ratio:16/10;object-fit:cover;width:100%} .oc-meta{ display:grid;gap:15px;margin:26px 0 0;font-size:13.5px; border-top:1px solid var(--edge);padding-top:24px; } .oc-meta strong{ display:block;color:#fff;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;margin-bottom:4px;font-weight:600; } .oc-meta a{transition:color .2s} .oc-meta a:hover{color:var(--accent)} .oc-nav{display:none;margin:0 0 26px;padding:0;list-style:none} .oc-nav a{ display:block;padding:13px 0;border-bottom:1px solid var(--edge-soft); font-family:var(--display);font-size:15px;font-weight:600;color:#fff; letter-spacing:-.01em;transition:color .2s,padding-left .2s; } .oc-nav a:hover{color:var(--accent);padding-left:8px} @media(max-width:520px){.oc-nav{display:block}} body.no-scroll{overflow:hidden} /* --- 07 Hero slider (home) ---------------------------------------------- */ .hero{ position:relative;overflow:hidden;background:#0A0A0A; height:clamp(540px,84vh,860px); } /* Stacking, bottom to top: inactive slide 1 · active slide 2 · frame rule 3 · slide copy 4 (inside the slide, so it cross-fades with its own image) · slider controls 5. Every layer is explicit so the order never depends on document order. */ .hero-slide{ position:absolute;inset:0;opacity:0;z-index:1; transition:opacity 1.1s var(--ease); pointer-events:none; } .hero-slide.on{opacity:1;pointer-events:auto;z-index:2} .hero-slide img{ width:100%;height:100%;object-fit:cover; transform:scale(1.06);transition:transform 8s linear; } .hero-slide.on img{transform:scale(1)} .hero-slide::after{ content:"";position:absolute;inset:0; background: linear-gradient(100deg,rgba(8,8,8,.92) 0%,rgba(8,8,8,.7) 44%,rgba(8,8,8,.22) 82%), linear-gradient(0deg,rgba(8,8,8,.75) 0%,transparent 42%); } .hero-rule{ position:absolute;left:var(--gut);right:var(--gut); top:clamp(60px,9vw,104px);bottom:clamp(56px,7vw,84px); border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14); z-index:3;pointer-events:none; } .hero-frame{position:absolute;inset:0;z-index:4;display:flex;align-items:center;pointer-events:none} .hero-frame .wrap{width:100%} .hero-copy{max-width:660px;pointer-events:auto} .hero-copy .kicker{margin-bottom:20px} /* Slides 2..N use .hero-title instead of

so the page keeps exactly one top-level heading; the two must look identical. */ .hero-copy h1, .hero-copy .hero-title{ font-family:var(--display);color:var(--head); font-size:clamp(34px,5.6vw,68px);font-weight:700;line-height:1.04; margin:0 0 22px;letter-spacing:-.03em; } .hero-copy h1 em, .hero-copy .hero-title em{font-style:normal;color:var(--accent)} .hero-copy h1 strong, .hero-copy .hero-title strong{font-weight:700} .hero-copy p{ font-size:clamp(15px,1.6vw,17px);color:rgba(255,255,255,.72); max-width:520px;margin-bottom:32px;line-height:1.75; } .hero-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px} .hero-ui{ position:absolute;left:0;right:0;bottom:clamp(26px,4vw,44px); z-index:5;pointer-events:none; } .hero-ui .wrap{ display:flex;align-items:center;justify-content:space-between; gap:20px;flex-wrap:wrap; } .hero-dots{display:flex;gap:10px;pointer-events:auto} .hero-dot{ width:34px;height:3px;background:rgba(255,255,255,.22); border:0;padding:0;cursor:pointer;position:relative;overflow:hidden; transition:background .25s; } .hero-dot:hover{background:rgba(255,255,255,.4)} .hero-dot.on{background:rgba(255,255,255,.28)} .hero-dot.on::after{ content:"";position:absolute;inset:0;background:var(--accent); transform-origin:left;transform:scaleX(0); } .hero-dot.on.run::after{animation:heroFill linear forwards;animation-duration:var(--slide-ms,6500ms)} @keyframes heroFill{from{transform:scaleX(0)}to{transform:scaleX(1)}} .hero-nav{display:flex;gap:8px;pointer-events:auto} .hero-count{ font-family:var(--display);font-size:13px;font-weight:600; color:rgba(255,255,255,.5);letter-spacing:.1em;pointer-events:auto; } .hero-count b{color:#fff;font-size:16px} @media(max-width:860px){ .hero{height:clamp(500px,78vh,700px)} .hero-rule{display:none} } @media(max-width:600px){ .hero-ui .wrap{justify-content:center} .hero-nav{display:none} .hero-count{display:none} } /* --- 08 Section furniture ----------------------------------------------- */ .sec{padding:var(--sec-pad) 0;position:relative} .sec--tight{padding:clamp(48px,6vw,80px) 0} .sec--flush-bottom{padding-bottom:0} .sec--flush-top{padding-top:0} .sec--surface{background:var(--surface)} .sec--line{border-top:1px solid var(--edge-soft)} .kicker{ font-family:var(--text);font-size:11px;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--accent); display:inline-flex;align-items:center;gap:11px;margin-bottom:16px; } .kicker::before{content:"";width:8px;height:8px;background:var(--accent);flex:none} .kicker--plain::before{display:none} .kicker--light{color:#fff} .kicker--light::before{background:var(--accent)} .sec-head{max-width:720px;margin-bottom:clamp(34px,4.5vw,56px)} .sec-head h2{font-size:clamp(27px,3.8vw,46px);margin-bottom:16px} .sec-head p{font-size:clamp(15px,1.5vw,16.5px);line-height:1.75;margin:0} .sec-head--center{margin-left:auto;margin-right:auto;text-align:center} .sec-head--center .kicker{justify-content:center} /* Head with an action pinned to the right on wide screens. */ .sec-head-row{ display:flex;align-items:flex-end;justify-content:space-between; gap:clamp(24px,4vw,60px);margin-bottom:clamp(34px,4.5vw,56px);flex-wrap:wrap; } .sec-head-row .sec-head{margin-bottom:0} /* The faint blueprint grid used behind page heads and CTA bands. */ .motif{position:relative;overflow:hidden} .motif::before{ content:"";position:absolute;inset:0;opacity:.55;pointer-events:none;z-index:0; background: repeating-linear-gradient(0deg,transparent 0 87px,rgba(255,255,255,.045) 87px 88px), repeating-linear-gradient(90deg,transparent 0 87px,rgba(255,255,255,.045) 87px 88px); -webkit-mask-image:linear-gradient(180deg,#000,transparent); mask-image:linear-gradient(180deg,#000,transparent); } .motif > *{position:relative;z-index:1} .pagehead{padding:clamp(50px,7vw,96px) 0 clamp(34px,5vw,56px)} .pagehead h1{font-size:clamp(38px,6.4vw,76px);font-weight:700;margin-bottom:18px} .pagehead .lede{font-size:clamp(15.5px,1.6vw,17px);max-width:620px;margin-bottom:24px;line-height:1.75} .pagehead--image{padding-bottom:clamp(44px,6vw,72px)} .pagehead-bg{position:absolute;inset:0;z-index:0} .pagehead-bg img{width:100%;height:100%;object-fit:cover;opacity:.3} .pagehead-bg::after{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,var(--bg) 4%,rgba(13,13,13,.72) 55%,rgba(13,13,13,.82)); } .crumbs{ display:flex;flex-wrap:wrap;gap:10px;align-items:center; font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--body-dim); } .crumbs a{transition:color .2s} .crumbs a:hover{color:#fff} .crumbs em{font-style:normal;color:var(--accent)} .crumbs .div{color:rgba(255,255,255,.25)} /* Hairline stat strip. */ .stats{ display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); border-top:1px solid var(--edge); } .stats .stat{padding:26px 0 4px;border-right:1px solid var(--edge)} .stats .stat:last-child{border-right:0} .stats .stat:not(:first-child){padding-left:clamp(18px,2.5vw,32px)} .stat-value{ font-family:var(--display);font-size:clamp(30px,3.6vw,44px);font-weight:700; color:#fff;line-height:1;letter-spacing:-.03em;display:block; } .stat-label{ display:block;margin-top:10px;font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;color:var(--body-dim); } @media(max-width:560px){ .stats{grid-template-columns:1fr 1fr} .stats .stat:nth-child(2n){border-right:0} } /* --- 09 About band ------------------------------------------------------ */ .about-grid{ display:grid;grid-template-columns:1fr 1.05fr; gap:clamp(34px,6vw,84px);align-items:center; } .about-shots{position:relative;padding-bottom:16%} .about-shots img:first-child{width:70%;aspect-ratio:3/3.6;object-fit:cover} .about-shots img:last-child{ position:absolute;right:0;bottom:0;width:58%;aspect-ratio:3/3.2;object-fit:cover; border:8px solid var(--bg); } .about-shots--single img:first-child{width:100%} .about-shots-badge{ position:absolute;left:0;bottom:0;z-index:2; background:var(--accent);color:#fff;padding:18px 22px;max-width:190px; } .about-shots-badge b{ display:block;font-family:var(--display);font-size:30px;font-weight:700;line-height:1; } .about-shots-badge span{ display:block;margin-top:6px;font-size:10.5px;font-weight:600; letter-spacing:.18em;text-transform:uppercase;opacity:.86;line-height:1.5; } .about-copy h2{font-size:clamp(27px,3.6vw,44px);margin-bottom:22px} .quote-bar{ margin:0 0 24px;padding:0 0 0 22px;border-left:2px solid var(--accent); font-family:var(--display);font-size:clamp(17px,1.9vw,21px);font-weight:500; line-height:1.55;color:var(--head);letter-spacing:-.015em; } .about-foot{display:flex;flex-wrap:wrap;align-items:center;gap:20px 32px;margin-top:30px} .about-sign{ font-family:var(--display);font-size:12.5px;font-weight:600; letter-spacing:.16em;text-transform:uppercase;color:var(--head); } .about-sign small{ display:block;font-family:var(--text);font-size:11px;font-weight:500; letter-spacing:.12em;color:var(--body-dim);margin-top:5px; } @media(max-width:900px){ .about-grid{grid-template-columns:1fr;gap:44px} .about-shots{max-width:520px} } /* --- 10 Services -------------------------------------------------------- */ .svc-layout{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(30px,5vw,64px)} @media(max-width:960px){.svc-layout{grid-template-columns:1fr;gap:40px}} .svc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--edge)} .svc-card{ background:var(--bg);padding:clamp(26px,3vw,36px) clamp(22px,2.6vw,30px); position:relative;transition:background .35s var(--ease); display:flex;flex-direction:column;min-height:230px; } .svc-card::after{ content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--accent);transform:scaleX(0);transform-origin:left; transition:transform .4s var(--ease); } .svc-card:hover{background:var(--surface)} .svc-card:hover::after{transform:scaleX(1)} .svc-num{ font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--body-faint);margin-bottom:20px;transition:color .3s; } .svc-card:hover .svc-num{color:var(--accent)} .svc-ico{width:38px;height:38px;color:var(--accent);margin-bottom:18px;flex:none} .svc-card h3{font-size:19px;margin-bottom:11px;letter-spacing:-.02em} .svc-card p{font-size:13.5px;line-height:1.75;margin:0;color:var(--body)} .svc-card--feature{ grid-column:span 2;min-height:250px;overflow:hidden; justify-content:flex-end;background:#121212; } .svc-card--feature img{ position:absolute;inset:0;width:100%;height:100%;object-fit:cover; opacity:.34;transition:transform .9s var(--ease-out),opacity .4s; } .svc-card--feature:hover img{transform:scale(1.05);opacity:.24} .svc-card--feature::before{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,rgba(10,10,10,.94) 10%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.3)); } .svc-card--feature > *{position:relative;z-index:2} .svc-card--feature h3{font-size:22px} .svc-card--feature p{max-width:520px} @media(max-width:620px){ .svc-grid{grid-template-columns:1fr} .svc-card--feature{grid-column:span 1} .svc-card{min-height:0} } /* --- 11 Process --------------------------------------------------------- */ .process{border-top:1px solid var(--edge)} .process-row{ display:grid;grid-template-columns:88px 1fr 1.35fr; gap:clamp(18px,3vw,44px);align-items:start; padding:clamp(26px,3.4vw,40px) 0; border-bottom:1px solid var(--edge); transition:background .3s,padding-left .35s var(--ease); position:relative; } .process-row::before{ content:"";position:absolute;left:0;top:0;bottom:0;width:2px; background:var(--accent);transform:scaleY(0);transform-origin:top; transition:transform .4s var(--ease); } .process-row:hover{background:rgba(255,255,255,.018)} .process-row:hover::before{transform:scaleY(1)} .process-no{ font-family:var(--display);font-size:clamp(28px,3.4vw,40px);font-weight:700; color:var(--body-faint);line-height:1;letter-spacing:-.03em; transition:color .3s;font-variant-numeric:tabular-nums; } .process-row:hover .process-no{color:var(--accent)} .process-row h3{font-size:clamp(18px,2vw,23px);letter-spacing:-.02em;padding-top:4px} .process-row p{font-size:14px;line-height:1.8;margin:0;padding-top:5px} @media(max-width:860px){ .process-row{grid-template-columns:58px 1fr;gap:16px 20px} .process-row p{grid-column:2} } /* --- 12 Project drag-slider --------------------------------------------- */ .sl-bar{ display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center; justify-content:space-between;padding-bottom:clamp(20px,3vw,30px); } .sl-left{display:flex;align-items:center;gap:16px} .counter{ font-family:var(--display);font-size:14px;font-weight:600; color:#fff;letter-spacing:.06em;font-variant-numeric:tabular-nums; } .counter b{color:var(--accent)} .counter span{color:var(--body-dim);font-weight:400} .drag-hint{ font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--body-dim);border:1px solid var(--edge);padding:7px 14px; } @media(max-width:640px){.drag-hint{display:none}} .sl-nav{display:flex;gap:8px} .slider{ overflow-x:auto;overflow-y:hidden; scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch; scrollbar-width:none;-ms-overflow-style:none; cursor:grab;touch-action:pan-y; } .slider::-webkit-scrollbar{display:none} .slider.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto} .slider.dragging .card img{transition:none} .track{display:flex;gap:18px;padding-inline:var(--edge-pad);padding-bottom:6px} .rail{margin-top:clamp(26px,4vw,40px);height:2px;background:var(--edge);position:relative} .rail i{position:absolute;left:0;top:0;bottom:0;background:var(--accent);width:12%;transition:width .15s linear} .sl-foot{ display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center; justify-content:space-between;padding:22px 0 clamp(56px,8vw,100px); font-size:13px;color:var(--body-dim); } /* --- 13 Project cards, grid & filters ----------------------------------- */ .card{ position:relative;display:block;overflow:hidden;background:#151515; aspect-ratio:3/4;scroll-snap-align:start; -webkit-user-select:none;user-select:none; } .track > .card{flex:0 0 clamp(255px,29vw,410px)} .card img{ width:100%;height:100%;object-fit:cover;opacity:.72; transition:transform .9s var(--ease-out),opacity .4s;pointer-events:none; } .card:hover img,.card:focus-visible img{transform:scale(1.07);opacity:.5} .card-body{ position:absolute;inset:auto 0 0 0;padding:68px 26px 28px;z-index:3; background:linear-gradient(0deg,rgba(8,8,8,.95) 0%,rgba(8,8,8,.88) 38%,rgba(8,8,8,.5) 72%,transparent 100%); } .card .cat{ font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--accent);display:block;margin-bottom:9px; } .card h3{font-size:21px;margin-bottom:6px;letter-spacing:-.02em} .card .meta{font-size:12.5px;color:var(--body-dim);display:block} .card .go{ position:absolute;top:22px;right:22px;z-index:3; width:42px;height:42px;background:var(--accent);color:#fff; display:grid;place-items:center;font-size:18px; opacity:0;transform:translateY(-8px);transition:opacity .3s,transform .3s; } .card:hover .go,.card:focus-visible .go{opacity:1;transform:none} .card .no{ position:absolute;top:22px;left:24px;z-index:3; font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em; color:rgba(255,255,255,.55); } /* Grid view — cards laid out rather than railed. */ .proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .proj-grid .card{aspect-ratio:4/5} @media(max-width:980px){.proj-grid{grid-template-columns:repeat(2,1fr);gap:14px}} @media(max-width:600px){.proj-grid{grid-template-columns:1fr}} /* Masonry-ish variant used on the home page. */ .proj-mosaic{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .proj-mosaic .card{aspect-ratio:3/4} .proj-mosaic .card:nth-child(6n+1){grid-column:span 2;aspect-ratio:3/2} .proj-mosaic .card:nth-child(6n+4){grid-column:span 2;aspect-ratio:3/2} @media(max-width:980px){ .proj-mosaic{grid-template-columns:repeat(2,1fr)} .proj-mosaic .card:nth-child(6n+1), .proj-mosaic .card:nth-child(6n+4){grid-column:span 2} } @media(max-width:600px){ .proj-mosaic{grid-template-columns:1fr} .proj-mosaic .card, .proj-mosaic .card:nth-child(6n+1), .proj-mosaic .card:nth-child(6n+4){grid-column:span 1;aspect-ratio:4/5} } /* Filter chips. */ .filters{ display:flex;flex-wrap:wrap;gap:8px;align-items:center; padding-bottom:clamp(24px,3vw,36px); } .filter{ background:transparent;border:1px solid var(--edge);color:var(--body); font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; padding:11px 20px;cursor:pointer; transition:color .22s,border-color .22s,background .22s; } .filter:hover{color:#fff;border-color:var(--edge-strong)} .filter.on{background:var(--accent);border-color:var(--accent);color:#fff} .filter .n{opacity:.6;margin-left:7px;font-weight:500} .filter-bar{ display:flex;flex-wrap:wrap;gap:16px 24px;align-items:center; justify-content:space-between; border-bottom:1px solid var(--edge);padding-bottom:22px;margin-bottom:clamp(26px,3.5vw,40px); } .result-count{font-size:12.5px;color:var(--body-dim);letter-spacing:.04em} .result-count b{color:#fff;font-weight:600} /* Empty state. */ .empty{ border:1px dashed var(--edge);padding:clamp(44px,7vw,80px) 30px;text-align:center; } .empty h3{font-size:20px;margin-bottom:10px} .empty p{font-size:14px;margin:0 auto;max-width:400px} /* --- 14 Project detail -------------------------------------------------- */ .pd-hero{position:relative;height:clamp(380px,58vw,620px);overflow:hidden;background:#101010} .pd-hero img{width:100%;height:100%;object-fit:cover;opacity:.62} .pd-hero::after{ content:"";position:absolute;inset:0; background:linear-gradient(0deg,var(--bg) 2%,rgba(13,13,13,.55) 48%,rgba(13,13,13,.35)); } .pd-hero-copy{position:absolute;left:0;right:0;bottom:clamp(30px,4vw,52px);z-index:3} .pd-hero-copy h1{font-size:clamp(30px,5vw,60px);font-weight:700;margin-bottom:14px;max-width:900px} .pd-hero-meta{ display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center; font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--body-dim); } .pd-hero-meta .accent{color:var(--accent);font-weight:600} /* Specification table. */ .spec{border-top:1px solid var(--edge)} .spec-row{ display:grid;grid-template-columns:200px 1fr;gap:16px 30px; padding:17px 0;border-bottom:1px solid var(--edge-soft); } .spec-row dt{ font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--body-dim);margin:0; } .spec-row dd{margin:0;font-size:14.5px;color:var(--head)} @media(max-width:640px){.spec-row{grid-template-columns:1fr;gap:4px;padding:14px 0}} .pd-body-grid{display:grid;grid-template-columns:1.5fr .85fr;gap:clamp(34px,6vw,80px);align-items:start} @media(max-width:900px){.pd-body-grid{grid-template-columns:1fr;gap:40px}} .pd-aside{position:sticky;top:calc(var(--head-h) + 28px)} @media(max-width:900px){.pd-aside{position:static}} .pd-note{border:1px solid var(--edge);padding:26px 24px;background:var(--surface)} .pd-note h4{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:12px} .pd-note p{font-size:14px;line-height:1.8;margin:0} .pd-note + .pd-note{margin-top:16px} /* Gallery. */ .gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:14px} .gallery figure{margin:0;position:relative;overflow:hidden;background:#141414} .gallery figure:first-child{grid-column:span 2} .gallery img{width:100%;aspect-ratio:3/2;object-fit:cover;transition:transform .8s var(--ease-out);cursor:zoom-in} .gallery figure:hover img{transform:scale(1.04)} .gallery figcaption{ font-size:12.5px;color:var(--body-dim);padding-top:11px;line-height:1.6; } @media(max-width:700px){ .gallery{grid-template-columns:1fr} .gallery figure:first-child{grid-column:span 1} } /* Lightbox. */ .lightbox{ position:fixed;inset:0;z-index:200;background:rgba(6,6,6,.96); display:none;place-items:center;padding:clamp(16px,4vw,54px); } .lightbox.on{display:grid} .lightbox img{max-width:100%;max-height:84vh;object-fit:contain;margin:0 auto} .lightbox-cap{ text-align:center;margin-top:18px;font-size:13px;color:var(--body-dim); max-width:620px;margin-inline:auto; } .lightbox-close{ position:absolute;top:20px;right:24px;width:46px;height:46px; background:transparent;border:1px solid var(--edge);color:#fff; font-size:24px;cursor:pointer;display:grid;place-items:center; transition:background .2s,border-color .2s; } .lightbox-close:hover{background:var(--accent);border-color:var(--accent)} .lightbox-nav{ position:absolute;top:50%;transform:translateY(-50%); width:52px;height:52px;background:rgba(0,0,0,.4);border:1px solid var(--edge); color:#fff;font-size:22px;cursor:pointer;display:grid;place-items:center; transition:background .2s; } .lightbox-nav:hover{background:var(--accent);border-color:var(--accent)} .lightbox-nav.prev{left:clamp(10px,2vw,26px)} .lightbox-nav.next{right:clamp(10px,2vw,26px)} @media(max-width:600px){.lightbox-nav{display:none}} /* Prev / next project. */ .pd-pager{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--edge)} .pd-pager a{ padding:clamp(26px,3.5vw,44px) clamp(20px,3vw,36px); position:relative;overflow:hidden;transition:background .3s; } .pd-pager a:first-child{border-right:1px solid var(--edge)} .pd-pager a:hover{background:var(--surface)} .pd-pager a.next{text-align:right} .pd-pager .dir{ font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase; color:var(--accent);display:block;margin-bottom:10px; } .pd-pager h4{font-size:clamp(17px,2vw,22px);letter-spacing:-.02em} .pd-pager .disabled{opacity:.3;pointer-events:none} @media(max-width:640px){ .pd-pager{grid-template-columns:1fr} .pd-pager a:first-child{border-right:0;border-bottom:1px solid var(--edge)} .pd-pager a.next{text-align:left} } /* --- 15 Journal --------------------------------------------------------- */ .post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.4vw,30px)} @media(max-width:980px){.post-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:640px){.post-grid{grid-template-columns:1fr}} .post-card{ display:flex;flex-direction:column;background:var(--surface); border:1px solid var(--edge-soft); transition:border-color .3s,transform .35s var(--ease),background .3s; } .post-card:hover{border-color:var(--edge-strong);transform:translateY(-4px)} .post-thumb{position:relative;overflow:hidden;aspect-ratio:16/10;background:#141414} .post-thumb img{width:100%;height:100%;object-fit:cover;opacity:.78;transition:transform .8s var(--ease-out),opacity .4s} .post-card:hover .post-thumb img{transform:scale(1.06);opacity:.62} .post-cat{ position:absolute;left:0;bottom:0;z-index:2; background:var(--accent);color:#fff;padding:8px 14px; font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; } .post-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1} .post-meta{ display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center; font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase; color:var(--body-dim);margin-bottom:14px; } .post-meta .dot{width:3px;height:3px;background:var(--accent);flex:none} .post-card h3{font-size:19px;line-height:1.32;margin-bottom:11px;letter-spacing:-.02em;transition:color .25s} .post-card:hover h3{color:var(--accent)} .post-card p{font-size:13.5px;line-height:1.75;margin:0 0 20px} .post-card .link-rule{margin-top:auto;align-self:flex-start} /* Featured lead article. */ .post-lead{ display:grid;grid-template-columns:1.15fr 1fr;gap:0; border:1px solid var(--edge);background:var(--surface); margin-bottom:clamp(28px,4vw,48px);overflow:hidden; } .post-lead .post-thumb{aspect-ratio:auto;height:100%;min-height:340px} .post-lead-body{padding:clamp(28px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center} .post-lead-body h2{font-size:clamp(23px,2.8vw,34px);line-height:1.22;margin-bottom:16px;letter-spacing:-.025em} .post-lead-body p{font-size:14.5px;line-height:1.8;margin-bottom:26px} @media(max-width:860px){ .post-lead{grid-template-columns:1fr} .post-lead .post-thumb{min-height:0;aspect-ratio:16/9} } /* Article page. */ .article{max-width:800px;margin:0 auto} .article-head{margin-bottom:clamp(30px,4vw,48px)} .article-head h1{font-size:clamp(30px,4.4vw,52px);font-weight:700;line-height:1.1;margin-bottom:20px} .article-meta{ display:flex;flex-wrap:wrap;gap:8px 20px;align-items:center; font-size:11.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase; color:var(--body-dim);padding-top:20px;border-top:1px solid var(--edge); } .article-cover{margin:0 0 clamp(30px,4vw,48px)} .article-cover img{width:100%;aspect-ratio:16/9;object-fit:cover} .article-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(34px,4vw,52px);padding-top:26px;border-top:1px solid var(--edge)} .tag{ border:1px solid var(--edge);padding:8px 15px; font-size:10.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:var(--body-dim);transition:color .2s,border-color .2s; } a.tag:hover{color:#fff;border-color:var(--accent)} .share{display:flex;gap:9px;align-items:center;margin-top:26px} .share span{font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--body-dim);margin-right:6px} /* --- 16 Offices --------------------------------------------------------- */ .office-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--edge)} .office{ background:var(--bg);padding:clamp(28px,3.2vw,40px) clamp(24px,2.8vw,32px); position:relative;transition:background .35s; } .office:hover{background:var(--surface)} .office .code{ font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.24em; color:var(--accent);display:block;margin-bottom:16px; } .office h3{font-size:22px;margin-bottom:16px;letter-spacing:-.02em} .office address{font-style:normal;font-size:14px;line-height:1.85;color:var(--body);margin-bottom:16px} .office-links{display:grid;gap:8px} .office-links a{ font-size:13.5px;color:var(--head);display:inline-flex;align-items:center;gap:9px; transition:color .2s;width:fit-content; } .office-links a:hover{color:var(--accent)} .office-links svg{width:15px;height:15px;color:var(--accent);flex:none} .office .badge-primary-office{ position:absolute;top:0;right:0;background:var(--accent);color:#fff; font-size:9.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase; padding:6px 12px; } @media(max-width:900px){.office-grid{grid-template-columns:1fr}} /* --- 17 Recognition ----------------------------------------------------- */ .rec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:900px;margin-inline:auto} .rec{ border:1px solid var(--edge);background:var(--surface); transition:border-color .3s,transform .35s var(--ease); } .rec:hover{border-color:var(--accent);transform:translateY(-4px)} .rec-badge{ background:rgba(255,255,255,.94);border-bottom:1px solid var(--edge); height:158px;display:grid;place-items:center;padding:24px 30px; } .rec-badge img{width:auto;max-width:100%;max-height:96px;object-fit:contain} .rec-badge img.wide{max-height:52px} .rec-body{padding:26px 26px 28px} .rec-year{ font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em; color:var(--accent);display:block;margin-bottom:10px; } .rec h3{font-size:17px;line-height:1.38;margin-bottom:9px;letter-spacing:-.015em} .rec p{font-size:13.5px;line-height:1.7;margin:0} @media(max-width:760px){.rec-grid{grid-template-columns:1fr}} /* --- 18 Contact & forms ------------------------------------------------- */ .contact-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(36px,6vw,80px);align-items:start} @media(max-width:900px){.contact-grid{grid-template-columns:1fr;gap:44px}} .contact-list{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:1px;background:var(--edge)} .contact-list li{display:flex;gap:18px;align-items:flex-start;font-size:14.5px;background:var(--bg);padding:18px 0} .contact-list .k{ color:var(--accent);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase; font-weight:600;min-width:88px;padding-top:4px;flex:none; } .contact-list a{color:var(--head);border-bottom:1px solid var(--edge);transition:border-color .2s,color .2s} .contact-list a:hover{color:var(--accent);border-bottom-color:var(--accent)} .form-panel{border:1px solid var(--edge);background:var(--surface);padding:clamp(26px,3.4vw,44px)} .form-panel h3{font-size:22px;margin-bottom:8px;letter-spacing:-.02em} .form-panel > p{font-size:14px;margin-bottom:26px} .pd-form{display:grid;gap:18px} .pd-field{display:grid;gap:8px} .pd-field label{ font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase; color:var(--body-dim); } .pd-field label .req{color:var(--accent);margin-left:3px} .pd-form .row2{display:grid;grid-template-columns:1fr 1fr;gap:18px} @media(max-width:560px){.pd-form .row2{grid-template-columns:1fr}} .pd-input, .pd-form input[type=text], .pd-form input[type=email], .pd-form input[type=tel], .pd-form textarea, .pd-form select{ width:100%;font-family:var(--text);font-size:14.5px;line-height:1.6; color:#fff;background:rgba(255,255,255,.04); border:1px solid var(--edge);border-radius:0; padding:14px 16px;transition:border-color .22s,background .22s; -webkit-appearance:none;appearance:none; } .pd-form textarea{min-height:148px;resize:vertical} .pd-form select{ background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23EE1A24' stroke-width='1.6'%3E%3Cpath d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 16px center;background-size:12px; padding-right:44px;cursor:pointer; } .pd-form select option{background:#161616;color:#fff} .pd-form input::placeholder,.pd-form textarea::placeholder{color:rgba(255,255,255,.3)} .pd-form input:focus,.pd-form textarea:focus,.pd-form select:focus{ border-color:var(--accent);background:rgba(255,255,255,.06);outline:none; } .pd-form input.is-invalid,.pd-form textarea.is-invalid,.pd-form select.is-invalid{border-color:var(--accent)} .pd-error{font-size:12px;color:var(--accent);letter-spacing:.02em;text-transform:none} .pd-check{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.6} .pd-check input{ width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--accent); background:transparent;border:1px solid var(--edge);cursor:pointer; } .pd-check a{color:var(--head);border-bottom:1px solid var(--accent)} /* Honeypot — must stay invisible to humans but reachable to bots. */ .pd-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} .form-note{font-size:12.5px;color:var(--body-dim);line-height:1.7;margin:0} /* Inline result banner (AJAX submit). */ .form-result{display:none;padding:16px 18px;border:1px solid var(--edge);font-size:14px;line-height:1.65} .form-result.on{display:block} .form-result.is-ok{border-color:rgba(255,255,255,.2);background:rgba(255,255,255,.04);color:#fff} .form-result.is-err{border-color:var(--accent);background:var(--accent-soft);color:#fff} .form-result strong{display:block;font-family:var(--display);font-size:15px;margin-bottom:4px;color:#fff} /* Button spinner. */ .spin{ width:14px;height:14px;flex:none;display:none; border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%; animation:spin .7s linear infinite; } .is-busy .spin{display:block} @keyframes spin{to{transform:rotate(360deg)}} /* --- 19 CTA band -------------------------------------------------------- */ .cta{position:relative;overflow:hidden;text-align:center;padding:clamp(66px,9vw,124px) 0} .cta-bg{position:absolute;inset:0;z-index:0} .cta-bg img{width:100%;height:100%;object-fit:cover} .cta-bg::after{content:"";position:absolute;inset:0;background:rgba(8,8,8,.84)} .cta > .wrap{position:relative;z-index:3} .cta .kicker{justify-content:center} .cta h2{font-size:clamp(28px,4.4vw,54px);margin-bottom:18px;font-weight:700} .cta p{font-size:clamp(15px,1.6vw,17px);max-width:580px;margin:0 auto 32px;line-height:1.75} .cta-actions{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} /* --- 20 Footer ---------------------------------------------------------- */ .foot{border-top:1px solid var(--edge);padding-top:clamp(50px,7vw,80px);background:var(--bg)} .foot-grid{ display:grid;grid-template-columns:1.5fr 1.1fr .9fr .9fr; gap:clamp(28px,4vw,54px);padding-bottom:clamp(42px,5vw,60px); } .foot h4{font-size:14px;font-weight:600;margin-bottom:20px;color:#fff;letter-spacing:-.01em} .foot p{font-size:13.5px;line-height:1.85} .foot .logo{margin-bottom:18px;display:inline-block} .foot .logo img{height:26px} .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:11px;font-size:13.5px} .foot ul a{transition:color .2s,padding-left .2s} .foot ul a:hover{color:var(--accent);padding-left:5px} .fmeta{display:grid;gap:16px;font-size:13.5px} .fmeta strong{ display:block;color:#fff;font-size:10.5px;letter-spacing:.2em; text-transform:uppercase;margin-bottom:4px;font-weight:600; } .fmeta a{transition:color .2s} .fmeta a:hover{color:var(--accent)} .foot-socials{display:flex;gap:8px;margin-top:22px} .foot-socials a{ width:36px;height:36px;display:grid;place-items:center; border:1px solid var(--edge);color:var(--body-dim); transition:background .22s,border-color .22s,color .22s; } .foot-socials a:hover{background:var(--accent);border-color:var(--accent);color:#fff} .foot-socials svg{width:15px;height:15px} .foot-bar{ border-top:1px solid var(--edge);padding:22px 0; display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between; font-size:12.5px;color:var(--body-dim); } .foot-bar a{transition:color .2s} .foot-bar a:hover{color:#fff} @media(max-width:980px){.foot-grid{grid-template-columns:1fr 1fr}} @media(max-width:600px){.foot-grid{grid-template-columns:1fr;gap:34px}} /* --- 21 Pagination (front end) ------------------------------------------ */ .pager{ display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center; margin-top:clamp(38px,5vw,64px); } .pager a,.pager span{ min-width:44px;height:44px;padding:0 14px; display:inline-flex;align-items:center;justify-content:center; border:1px solid var(--edge);color:var(--body); font-family:var(--display);font-size:13px;font-weight:600; transition:color .2s,border-color .2s,background .2s; } .pager a:hover{color:#fff;border-color:var(--edge-strong)} .pager .on{background:var(--accent);border-color:var(--accent);color:#fff} .pager .gap{border-color:transparent;color:var(--body-faint);min-width:24px;padding:0} .pager .off{opacity:.3;pointer-events:none} /* --- 22 Utilities, reveal, motion --------------------------------------- */ .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.in{opacity:1;transform:none} .reveal-d1{transition-delay:.08s} .reveal-d2{transition-delay:.16s} .reveal-d3{transition-delay:.24s} .reveal-d4{transition-delay:.32s} .u-center{text-align:center} .u-mt0{margin-top:0} .u-mb0{margin-bottom:0} .u-hide{display:none!important} .u-sr{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .u-line-top{border-top:1px solid var(--edge)} .u-line-bottom{border-bottom:1px solid var(--edge)} /* Wide content must scroll inside itself, never the page. */ .scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch} @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important;animation-iteration-count:1!important; transition-duration:.001ms!important;scroll-behavior:auto!important; } .reveal{opacity:1;transform:none} .hero-slide img{transform:none} } @media print{ .site-head,.topbar,.oc,.oc-veil,.cta,.foot,.hero-ui,.sl-nav,.pager{display:none!important} body{background:#fff;color:#000} h1,h2,h3,h4{color:#000} }