/* ==========================================================================
360 Digital — Creative Digital Studio
Design tokens: ink (bg dark) · paper (bg light) · coral (signal accent)
lime (pop accent) · cobalt (digital accent) · muted (secondary text)
Display: Space Grotesk · Body: Plus Jakarta Sans · Mono: JetBrains Mono
========================================================================== */
:root{
--ink: #12140F;
--ink-soft: #1B1E17;
--ink-line: rgba(243,245,238,0.10);
--paper: #F2F5EC;
--paper-dim: #E7EBDD;
--coral: #FF4B33;
--coral-dim: #D93A24;
--lime: #D4FF5C;
--amber: #FFB627;
--amber-dim: #96650A;
--cobalt: #2A2DFF;
--muted: #767B6E;
--muted-lt: #A7ACA0;
--white: #FCFDF9;
--font-display: 'Space Grotesk', sans-serif;
--font-body: 'Plus Jakarta Sans', sans-serif;
--font-mono: 'JetBrains Mono', monospace;
--container: 1350px;
--radius-lg: 28px;
--radius-md: 18px;
--radius-sm: 10px;
--ease: cubic-bezier(.16,.84,.32,1);
}
/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
/* overflow-x:hidden is set on BOTH html and body (belt-and-suspenders): on some
mobile browsers body's overflow-x does not reliably propagate to the viewport,
which is the most common cause of a page that can be dragged sideways on phones
even though nothing visibly sticks out. max-width:100% stops any stray element
(long unbroken word, wide fixed bar, decorative oversized text) from ever
pushing the document wider than the screen. */
html{
scroll-behavior:smooth;
overflow-x:hidden;
max-width:100%;
}
body{
margin:0;
font-family:var(--font-body);
background:var(--paper);
color:var(--ink);
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
max-width:100%;
overscroll-behavior-x:none;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family:inherit; cursor:pointer; }
h1,h2,h3,h4,h5{ font-family:var(--font-display); margin:0; line-height:1.05; letter-spacing:-0.01em; }
p{ margin:0; }
.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:24px; }
@media (prefers-reduced-motion: reduce){
*{ animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
::selection{ background:var(--coral); color:var(--white); }
/* focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
outline:2px solid var(--cobalt);
outline-offset:3px;
border-radius:6px;
}
/* ---------- Type helpers ---------- */
.eyebrow{
font-family:var(--font-mono);
font-size:12.5px;
letter-spacing:.14em;
text-transform:uppercase;
color:var(--coral);
display:inline-flex;
align-items:center;
gap:10px;
}
.eyebrow::before{
content:"";
width:22px; height:1px;
background:var(--coral);
display:inline-block;
}
.eyebrow.on-dark{ color:var(--lime); }
.eyebrow.on-dark::before{ background:var(--lime); }
.section-tag{ color:#262626; font-size:15px; line-height: 24px; margin-top:14px;}
.section-head{ margin-bottom:56px; }
.section-head.center{ text-align:center; margin-inline:auto; }
.section-head .section-tag.center{ margin-inline:auto; }
.h-xl{ font-size:clamp(2.6rem, 6vw, 5.2rem); font-weight:600; }
.h-lg{ font-size: 32px; font-weight:600; }
.h-md{ font-size:clamp(1.5rem, 2.6vw, 2.1rem); font-weight:600; }
.h-sm{ font-size:1.3rem; font-weight:600; }
.text-coral{ color:var(--coral); }
.text-cobalt{ color:var(--cobalt); }
.text-muted{ color:var(--muted); }
.text-muted-lt{ color:var(--muted-lt); }
.text-lime{ color:var(--lime); }
.text-amber{ color:var(--amber); }
.text-white{ color:var(--white); }
.text-inherit{ color:inherit; }
/* ---------- Utility classes (extracted from page-level inline styles) ---------- */
.w-100{ width:100%; }
.mw-100{ max-width:100%; }
.mw-560{ max-width:560px; }
.fs-13{ font-size:13px; }
.fs-20{ font-size:20px; }
.italic{ font-style:italic; }
.underline{ text-decoration:underline; }
.rel{ position:relative; }
.z-3{ z-index:3; }
.text-center{ text-align:center; }
.items-center{ align-items:center; }
.grid-cols-3{ grid-template-columns:repeat(3,1fr); }
.flex-between-end{ display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; }
.gap-20{ gap:20px; }
.gap-24{ gap:24px; }
.mt-10{ margin-top:10px; }
.mt-16{ margin-top:16px; }
.mt-18{ margin-top:18px; }
.mt-26{ margin-top:26px; }
.mt-30{ margin-top:30px; }
.mt-48{ margin-top:48px; }
.pt-10{ padding-top:10px; }
.pt-20{ padding-top:20px; }
.pt-60{ padding-top:60px; }
.bg-coral{ background:var(--coral); }
.bg-amber{ background:var(--amber); }
.bg-cobalt{ background:var(--cobalt); }
.bg-lime{ background:var(--lime); }
.accent-coral{ --accent:var(--coral); }
.accent-amber{ --accent:var(--amber); }
.accent-cobalt{ --accent:var(--cobalt); }
/* per-page hero/banner background position + zoom (was a unique inline style per page) */
.page-banner.pb-about{ --pos:10% 40%; --zoom:1.7; }
.page-banner.pb-academy{ --pos:94% 74%; --zoom:1.9; }
.page-banner.pb-career{ --pos:50% 60%; --zoom:1.35; }
.page-banner.pb-challenges{ --pos:22% 86%; --zoom:1.6; }
.page-banner.pb-contact{ --pos:60% 30%; --zoom:1.5; }
.page-banner.pb-portfolio{ --pos:52% 66%; --zoom:1.4; }
.page-banner.pb-research{ --pos:38% 52%; --zoom:1.55; }
.page-banner.pb-services{ --pos:88% 24%; --zoom:1.8; }
.page-banner.pb-voice{ --pos:66% 46%; --zoom:1.7; }
/* ---------- Buttons ---------- */
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:10px;
font-family:var(--font-mono); font-size:13px; letter-spacing:.05em; text-transform:uppercase;
padding:16px 30px; border-radius:100px; border:1px solid transparent;
transition:transform .35s var(--ease), background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease);
white-space:nowrap;
}
.btn:hover{ transform:translateY(-3px); }
.btn-solid{ background:var(--ink); color:var(--paper); }
.btn-solid:hover{ background:var(--coral); color:var(--white); }
.btn-coral{ background:var(--coral); color:var(--white); }
.btn-coral:hover{ background:var(--ink); }
.btn-outline{ border-color:var(--ink); color:var(--ink); }
.btn-outline:hover{ background:var(--ink); color:var(--paper); }
.btn-outline.on-dark{ border-color:rgba(243,245,238,0.35); color:var(--paper); }
.btn-outline.on-dark:hover{ background:var(--paper); color:var(--ink); border-color:var(--paper); }
.btn-ghost-lime{ background:transparent; border-color:var(--lime); color:var(--lime); }
.btn-ghost-lime:hover{ background:var(--lime); color:var(--ink); }
.btn svg, .btn i{ transition:transform .35s var(--ease); }
.btn:hover svg, .btn:hover i{ transform:translateX(4px); }
/* ==========================================================================
HEADER
========================================================================== */
.site-header{
position:fixed; inset-inline:0; top:0; z-index:1000;
padding:22px 0;
border-bottom:1px solid rgba(18,20,15,0.10);
transition:padding .4s var(--ease), background .4s var(--ease), border-color .4s var(--ease);
}
.site-header .container{ display:flex; align-items:center; justify-content:space-between; gap:24px; }
.site-header.is-scrolled{
padding:14px 0;
background:#fff;
backdrop-filter:blur(14px);
border-bottom-color:rgba(18,20,15,0.12);
}
.brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:24px; letter-spacing:-0.01em; }
/* two logos stacked in one grid cell: white over the dark hero, black once the header is sticky */
.brand-logos{ display:grid; align-items:center; }
.brand-logos img{ grid-area:1/1; width:200px; height:auto; transition:opacity .35s ease; }
.brand-logos .logo-light{ opacity:0; }
.site-header.header-on-dark:not(.is-scrolled){ border-bottom-color:rgba(243,245,238,0.16); }
.site-header.header-on-dark:not(.is-scrolled) .logo-light{ opacity:1; }
.site-header.header-on-dark:not(.is-scrolled) .logo-dark{ opacity:0; }
.brand .dot{ width:9px; height:9px; border-radius:50%; background:var(--coral); display:inline-block; }
.main-nav{ display:flex; align-items:center; gap:4px; }
.main-nav > ul{ display:flex; align-items:center; gap:2px; }
.nav-link{
position:relative;
font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; text-transform:uppercase;
padding:12px 16px; display:inline-flex; align-items:center; gap:6px;
transition:color .3s ease;
}
.nav-link::after{
content:""; position:absolute; left:18px; right:18px; bottom:6px; height:2px;
background:var(--coral); border-radius:2px;
transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease);
}
.nav-link:hover, .nav-link.active{ color:var(--coral); }
.nav-link:hover::after, .nav-link.active::after{ transform:scaleX(1); }
.nav-item{ position:relative; }
.nav-item.has-sub .nav-link i{ font-size:11px; transition:transform .3s var(--ease); }
.nav-item.has-sub:hover .nav-link i, .nav-item.has-sub.open .nav-link i{ transform:rotate(180deg); }
.header-cta{ display:flex; align-items:center; gap:14px; }
.burger{
width:52px; height:52px; border-radius:50%; border:1px solid var(--ink);
background:transparent; display:flex; align-items:center; justify-content:center;
flex-direction:column; gap:5px; flex-shrink:0;
transition:border-color .3s ease;
}
.burger span{ width:20px; height:2px; background:var(--ink); border-radius:2px; transition:background .3s ease, transform .3s var(--ease), opacity .3s var(--ease); }
/* Header sitting over a dark hero (e.g. the home page) needs light text until
the page scrolls and the header gets its own solid background. Without this
the menu visually disappears into the dark banner behind it. */
.site-header.header-on-dark:not(.is-scrolled) .brand{ color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link{ color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link::after{ background:var(--lime); }
.site-header.header-on-dark:not(.is-scrolled) .nav-link:hover,
.site-header.header-on-dark:not(.is-scrolled) .nav-link.active{ color:var(--lime); }
.site-header.header-on-dark:not(.is-scrolled) .burger{ border-color:rgba(243,245,238,0.4); }
.site-header.header-on-dark:not(.is-scrolled) .burger span{ background:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .btn-outline{ border-color:rgba(243,245,238,0.4); color:var(--paper); }
.site-header.header-on-dark:not(.is-scrolled) .btn-outline:hover{ background:var(--paper); color:var(--ink); }
/* ---------- Creative "Start a project" CTA — pill + circular icon badge ---------- */
.cta-pill{ padding-right:8px !important; gap:14px; }
.cta-pill-icon{
width:30px; height:30px; border-radius:50%; flex-shrink:0;
background:var(--ink); color:var(--paper);
display:inline-flex; align-items:center; justify-content:center; font-size:13px;
transition:transform .4s var(--ease), background .3s ease, color .3s ease;
}
.cta-pill:hover .cta-pill-icon{ transform:rotate(45deg); background:var(--coral); color:var(--white); }
.cta-pill.btn-coral .cta-pill-icon{ background:rgba(243,245,238,0.22); color:var(--white); }
.cta-pill.btn-coral:hover .cta-pill-icon{ background:var(--white); color:var(--coral); }
.btn.cta-pill:hover i{ transform:none; }
.site-header.header-on-dark:not(.is-scrolled) .cta-pill-icon{ background:var(--paper); color:var(--ink); }
.site-header.header-on-dark:not(.is-scrolled) .cta-pill:hover .cta-pill-icon{ background:var(--coral); color:var(--white); }
/* ---------- Creative submenu box (About) — professional vertical dropdown ---------- */
.submenu-box{
position:absolute; top:calc(100% + 16px); left:0; transform:translateY(8px);
width:300px;
background:var(--ink); border-radius:var(--radius-md);
padding:10px; display:flex; flex-direction:column; gap:4px;
opacity:0; visibility:hidden; pointer-events:none;
transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
box-shadow:0 30px 60px -20px rgba(18,20,15,0.5);
}
.submenu-box::before{
content:""; position:absolute; top:-6px; left:28px; width:12px; height:12px;
background:var(--ink); transform:rotate(45deg); border-radius:2px;
}
.nav-item.has-sub:hover .submenu-box,
.nav-item.has-sub:focus-within .submenu-box,
.nav-item.has-sub.open .submenu-box{
opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto;
}
.submenu-eyebrow{
font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
color:var(--muted-lt); padding:10px 12px 6px;
}
.submenu-tile{
background:transparent; border-radius:10px; padding:12px;
display:flex; flex-direction:row; align-items:center; gap:14px;
border-left:3px solid transparent;
transition:background .3s var(--ease), border-color .3s var(--ease), padding-left .3s var(--ease);
}
.submenu-tile:nth-child(2){ --tile-accent:var(--coral); }
.submenu-tile:nth-child(3){ --tile-accent:var(--lime); }
.submenu-tile:nth-child(4){ --tile-accent:var(--cobalt); }
.submenu-tile:hover{ background:var(--ink-soft); border-left-color:var(--tile-accent, var(--coral)); padding-left:16px; }
.submenu-tile .tile-icon-sm{
width:38px; height:38px; border-radius:10px; background:var(--ink-soft); color:var(--paper);
display:flex; align-items:center; justify-content:center; font-size:16px; flex-shrink:0;
}
.submenu-tile:hover .tile-icon-sm{ background:var(--tile-accent, var(--coral)); color:var(--ink); }
.submenu-tile i{ font-size:16px; }
.submenu-tile .t-title{ font-family:var(--font-display); font-size:15px; color:var(--paper); font-weight:600; }
.submenu-tile .t-desc{ font-family:var(--font-body); font-size:12px; color:var(--muted-lt); line-height:1.4; margin-top:2px; }
/* ==========================================================================
OFFCANVAS DRAWER (right side) — creative menu panel
Bootstrap offcanvas, restyled: colour glows + dot grid + outlined "360" word,
numbered links each with their own accent-colour badge (coral/lime/cobalt,
cycling — echoes the palette used across the mega-menu and service cards),
a soft tinted highlight that sweeps in behind the row on hover, icon-tile
submenus, and a contact block in the foot. Sized and spaced for a tighter,
more considered desktop read — smaller type, even rhythm.
========================================================================== */
.offcanvas.drawer{
width:min(420px, 92vw);
color:var(--paper);
border-left:1px solid var(--ink-line);
background: var(--ink);
overflow:hidden;
}
.drawer::before{
content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
background-image:radial-gradient(rgba(243,245,238,.10) 1px, transparent 1px);
background-size:22px 22px;
-webkit-mask-image:linear-gradient(180deg,#000,transparent 72%); mask-image:linear-gradient(180deg,#000,transparent 72%);
}
.drawer-word{
position:absolute; right:-18px; bottom:112px; z-index:0; pointer-events:none; user-select:none;
font-family:var(--font-display); font-weight:700; font-size:220px; line-height:.8; letter-spacing:-.04em;
color:transparent; -webkit-text-stroke:1px rgba(243,245,238,.07);
}
.drawer > .offcanvas-header, .drawer > .offcanvas-body{ position:relative; z-index:1; }
.drawer .offcanvas-header{ padding:22px 26px 0; justify-content:space-between; align-items:center; }
.drawer-head-right{ display:flex; align-items:center; gap:12px; }
.drawer-label{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted-lt); }
.drawer-close{
width:40px; height:40px; border-radius:50%; border:1px solid rgba(243,245,238,.22);
background:transparent; color:var(--paper); display:flex; align-items:center; justify-content:center; font-size:14px;
transition:transform .45s var(--ease), background .3s ease, border-color .3s ease;
}
.drawer-close:hover{ background:var(--coral); border-color:var(--coral); transform:rotate(90deg); }
.drawer .offcanvas-body{ padding:4px 26px 24px; display:flex; flex-direction:column; }
/* ---- primary links ---- */
.drawer-nav{ margin-top:10px; }
/* accent rotates coral → lime → cobalt → repeat, matching the site's palette */
.drawer-nav > li{ --acc:var(--coral); --acc-ink:var(--white); }
.drawer-nav > li:nth-child(3n+2){ --acc:var(--lime); --acc-ink:var(--ink); }
.drawer-nav > li:nth-child(3n+3){ --acc:var(--cobalt); --acc-ink:var(--white); }
.drawer-nav > li{
position:relative; border-bottom:1px solid var(--ink-line);
opacity:0; transform:translateY(18px);
transition:opacity .55s var(--ease), transform .55s var(--ease);
}
.offcanvas.show .drawer-nav > li{ opacity:1; transform:none; }
.offcanvas.show .drawer-nav > li:nth-child(1){ transition-delay:.08s; }
.offcanvas.show .drawer-nav > li:nth-child(2){ transition-delay:.13s; }
.offcanvas.show .drawer-nav > li:nth-child(3){ transition-delay:.18s; }
.offcanvas.show .drawer-nav > li:nth-child(4){ transition-delay:.23s; }
.offcanvas.show .drawer-nav > li:nth-child(5){ transition-delay:.28s; }
.offcanvas.show .drawer-nav > li:nth-child(6){ transition-delay:.33s; }
.drawer-link{
position:relative; z-index:1;
display:grid; grid-template-columns:30px 1fr auto; align-items:center; gap:14px;
padding:10px 6px; font-family:var(--font-display); font-size:16px; font-weight:600; letter-spacing:-.005em; line-height:1.15;
}
/* soft colour-tinted wash that sweeps in behind the row — ties each link to its accent */
.drawer-link::before{
content:""; position:absolute; z-index:-1; inset:2px -10px;
border-radius:12px; background:color-mix(in srgb, var(--acc) 13%, transparent);
opacity:0; transform:scaleX(.94); transform-origin:left center;
transition:opacity .35s var(--ease), transform .4s var(--ease);
}
.drawer-link:hover::before, .drawer-link.active::before{ opacity:1; transform:scaleX(1); }
.dl-num{
display:inline-flex; align-items:center; justify-content:center;
width:26px; height:26px; border-radius:50%; flex-shrink:0;
font-family:var(--font-mono); font-size:10px; font-weight:500; color:var(--muted-lt);
border:1px solid rgba(243,245,238,.18); background:transparent;
transition:background .35s var(--ease), color .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.drawer-link:hover .dl-num, .drawer-link.active .dl-num{ background:var(--acc); border-color:var(--acc); color:var(--acc-ink); transform:scale(1.08); }
.dl-text{ display:inline-block; transition:transform .4s var(--ease), color .3s ease; }
.dl-arrow, .dl-toggle{ font-size:14px; color:var(--muted-lt); transition:transform .4s var(--ease), color .3s ease, opacity .3s ease; }
.dl-arrow{ opacity:0; transform:translateX(-10px); }
.drawer-link:hover .dl-text{ transform:translateX(7px); }
.drawer-link:hover .dl-arrow{ opacity:1; transform:none; color:var(--acc); }
.drawer-link:hover .dl-toggle{ color:var(--acc); }
.drawer-link.active .dl-text{ color:var(--acc); }
.drawer-link.active .dl-toggle{ transform:rotate(45deg); color:var(--acc); }
.drawer-link.active:not([data-accordion]) .dl-arrow{ opacity:1; transform:none; color:var(--acc); }
/* ---- submenus (smooth auto-height accordion) ---- */
.drawer-sub{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .5s var(--ease); }
.drawer-sub.open{ grid-template-rows:1fr; }
.drawer-sub-inner{ overflow:hidden; min-height:0; }
.ds-list{ display:flex; flex-direction:column; gap:3px; padding:2px 0 14px 30px; }
.ds-list a{
--acc:var(--coral);
display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:11px;
border-left:2px solid transparent;
transition:background .3s ease, border-color .3s ease, transform .35s var(--ease);
}
.ds-list a:nth-child(2){ --acc:var(--lime); }
.ds-list a:nth-child(3){ --acc:var(--cobalt); }
.ds-list a:hover{ background:rgba(243,245,238,.06); transform:translateX(4px); border-left-color:var(--acc); }
.ds-list a.current{ background:rgba(212,255,92,.07); border-left-color:var(--lime); }
.ds-icon{
width:34px; height:34px; border-radius:10px; flex-shrink:0; font-size:14.5px;
display:flex; align-items:center; justify-content:center;
background:rgba(243,245,238,.07); color:var(--paper);
transition:background .3s ease, color .3s ease;
}
.ds-list a:hover .ds-icon{ background:var(--acc); color:var(--ink); }
.ds-copy{ display:flex; flex-direction:column; min-width:0; }
.ds-copy b{ font-family:var(--font-display); font-size:13.5px; font-weight:600; color:var(--paper); }
.ds-copy em{ font-style:normal; font-size:11px; line-height:1.4; color:var(--muted-lt); margin-top:1px; }
.ds-badge{
margin-left:auto; flex-shrink:0; font-family:var(--font-mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase;
background:var(--lime); color:var(--ink); padding:3px 8px; border-radius:100px;
}
/* ---- foot: contact + CTA + socials ---- */
.drawer-foot{
margin-top:auto; padding-top:20px;
opacity:0; transform:translateY(14px);
transition:opacity .6s var(--ease) .45s, transform .6s var(--ease) .45s;
}
.offcanvas.show .drawer-foot{ opacity:1; transform:none; }
.drawer-contact{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
.drawer-kicker{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted-lt); }
.drawer-mail{
position:relative; width:fit-content; font-family:var(--font-display); font-size:19px; font-weight:600; letter-spacing:-.01em;
transition:color .3s ease;
}
.drawer-mail::after{ content:""; position:absolute; left:0; right:0; bottom:-3px; height:1px; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .4s var(--ease); }
.drawer-mail:hover{ color:var(--lime); }
.drawer-mail:hover::after{ transform:scaleX(1); }
.drawer-phone{ font-family:var(--font-mono); font-size:12.5px; color:var(--muted-lt); display:inline-flex; align-items:center; gap:8px; width:fit-content; transition:color .3s ease; }
.drawer-phone:hover{ color:var(--paper); }
.drawer-foot .socials{ display:flex; gap:9px; margin-top:16px; }
.drawer-foot .socials a{
width:38px; height:38px; border-radius:50%; border:1px solid rgba(243,245,238,.2);
display:flex; align-items:center; justify-content:center; font-size:14px;
transition:background .3s ease, border-color .3s ease, transform .4s var(--ease);
}
.drawer-foot .socials a:hover{ background:var(--coral); border-color:var(--coral); transform:translateY(-3px); }
.offcanvas-backdrop.show{ opacity:.6; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
@media (max-width:420px){
.drawer-link{ font-size:15px; grid-template-columns:27px 1fr auto; gap:12px; padding:11px 4px; }
.drawer .offcanvas-header, .drawer .offcanvas-body{ padding-left:20px; padding-right:20px; }
.ds-list{ padding-left:27px; }
}
@media (max-height:720px){
.drawer-link{ padding:9px 6px; font-size:14px; }
.drawer-word{ display:none; }
}
/* ==========================================================================
HERO — photo background with a dark overlay, staircase headline
========================================================================== */
.hero{
position:relative; isolation:isolate; overflow:hidden;
min-height:100svh; display:flex; align-items:flex-end;
padding:170px 0 0;
background:var(--ink); color:var(--paper);
}
.hero > .container{ position:relative; }
.hero-bg{
position:absolute; inset:0; z-index:-1;
background:url("../images/hero.jpg") center 42% / cover no-repeat; /* fallback if the video can't play */
}
.hero-video{
position:absolute; inset:0; width:100%; height:100%;
object-fit:cover; object-position:center 42%;
}
/* dark overlay sits on top of the video so the headline stays readable */
.hero-bg::after{
content:""; position:absolute; inset:0;
background:
linear-gradient(180deg, rgba(18,20,15,.85) 0, rgba(18,20,15,0) 230px),
linear-gradient(0deg, rgba(18,20,15,.94) 0, rgba(18,20,15,0) 58%),
linear-gradient(90deg, rgba(18,20,15,.84) 0%, rgba(18,20,15,.5) 52%, rgba(18,20,15,.22) 100%);
}
@media (prefers-reduced-motion:reduce){ .hero-video{ display:none; } }
.hero h1{ margin-top:22px; color:var(--paper); }
.hero h1 .line{ display:block; animation:heroStep .9s var(--ease) both; }
.hero h1 .accent{ color:var(--coral); font-style:italic; }
/* staircase: each line steps right, echoing the table's diagonal in the photo */
.hero h1 .step-2{ padding-left:clamp(0px, 7vw, 120px); animation-delay:.12s; }
.hero h1 .step-3{ padding-left:clamp(0px, 14vw, 240px); animation-delay:.24s; }
@keyframes heroStep{ from{ opacity:0; transform:translateX(-28px); } to{ opacity:1; transform:none; } }
/* supporting copy: tagline pinned bottom-left, brief + CTAs pinned bottom-right */
.hero-foot{ display:grid; grid-template-columns:1fr minmax(0,460px); gap:40px; align-items:end; margin-top:56px; }
.hero-note{ font-size:13.5px; line-height:1.5; max-width:230px; padding-left:16px; border-left:2px solid var(--coral); color:rgba(243,245,238,.78); }
.hero .hero-sub{ font-size:1.05rem; line-height:1.6; color:rgba(243,245,238,.86); }
.hero-cta{ display:flex; gap:16px; margin-top:28px; flex-wrap:wrap; }
.hero-tickers{ margin-top:48px; position:relative; z-index:1; }
.marquee{
border-top:1px solid var(--ink-line); border-bottom:1px solid var(--ink-line);
overflow:hidden; white-space:nowrap; padding:16px 0; background:rgba(18,20,15,.4); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.marquee-track{ display:inline-flex; gap:40px; animation:scrollLeft 26s linear infinite; }
.marquee-track span{ font-family:var(--font-display); font-size:1.4rem; font-weight:600; color:var(--muted-lt); display:inline-flex; align-items:center; gap:40px; }
.marquee-track span i{ color:var(--coral); font-size:10px; }
@keyframes scrollLeft{ from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
/* ==========================================================================
TILES (shared signature component: submenu / services / portfolio / values)
========================================================================== */
.tile{
background:var(--white); border-radius:var(--radius-md); padding:32px;
border-top:4px solid var(--coral);
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
height:100%; display:flex; flex-direction:column; gap:18px; position:relative; overflow:hidden;
}
.tile:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -25px rgba(18,20,15,0.25); }
.tile-row .tile:nth-child(3n+2){ border-top-color:var(--lime); }
.tile-row .tile:nth-child(3n+3){ border-top-color:var(--cobalt); }
.tile-icon{
width:56px; height:56px; border-radius:16px; background:var(--ink); color:var(--lime);
display:flex; align-items:center; justify-content:center; font-size:22px;
}
.tile .tile-index{ position:absolute; top:24px; right:28px; font-family:var(--font-mono); font-size:12px; color:var(--muted-lt); }
.tile h3{ font-size:1.3rem; }
.tile p{ color:var(--muted); font-size:14.5px; line-height:1.65; }
.tile .tile-link{ margin-top:auto; font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; display:inline-flex; align-items:center; gap:8px; color:var(--ink); }
.tile .tile-link i{ transition:transform .3s ease; }
.tile:hover .tile-link i{ transform:translateX(5px); }
/* ==========================================================================
ABOUT PREVIEW (home) — left media panel / right info + CTA
========================================================================== */
.about-preview{ padding:120px 0; }
.about-preview-grid{ display:grid; grid-template-columns:.9fr 1.5fr; gap:60px; align-items:start; }
.trio{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:40px; }
.about-split{ display:grid; grid-template-columns:.85fr 1.15fr; gap:44px; align-items:center; }
.about-media{
position:relative; aspect-ratio:4/4; border-radius:2px; overflow:hidden;
background-image: url('../images/hero.jpg');
}
.about-media::before{
content:""; position:absolute; inset:0;
background-image:radial-gradient(rgba(243,245,238,0.16) 1px, transparent 1px);
background-size:22px 22px;
mask-image:radial-gradient(ellipse 90% 70% at 70% 20%, #000 30%, transparent 85%);
}
.about-media .monogram{
position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; font-size:min(28vw,220px); line-height:1;
color:transparent; -webkit-text-stroke:1.5px rgba(243,245,238,0.5);
}
.about-media .chip{
position:absolute; background:var(--white); border-radius:14px; padding:14px 18px;
box-shadow:0 24px 50px -20px rgba(18,20,15,0.5);
}
.about-media .chip-a{ top:9%; left:8%; }
.about-media .chip-a .num{ font-family:var(--font-display); font-weight:700; font-size:1.4rem; color:var(--coral); }
.about-media .chip-a .lbl{ font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.about-media .chip-b{ bottom:10%; right:8%; display:flex; align-items:center; gap:10px; }
.about-media .chip-b i{ color:var(--lime); background:var(--ink); width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:15px; }
.about-media .chip-b span{ font-family:var(--font-mono); font-size:12px; color:var(--ink); }
.about-info p.section-tag{ margin-top:18px; }
.about-tags{ display:flex; flex-wrap:wrap; gap:10px; margin-top:28px; }
.about-tags a{
font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.05em;
padding:9px 16px; border-radius:100px; border:1px solid var(--ink-line-dark, var(--paper-dim));
border:1px solid #DCE0D2; color:var(--ink); display:inline-flex; align-items:center; gap:8px;
transition:background .3s ease, color .3s ease, border-color .3s ease;
}
.about-tags a i{ width:6px; height:6px; border-radius:50%; background:var(--coral); display:inline-block; }
.about-tags a:hover{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.about-info .btn{ margin-top:32px; }
@media (max-width:1080px){ .about-split{ grid-template-columns:1fr; } .about-media{ max-width:420px; aspect-ratio:1/1; } }
/* ==========================================================================
SECTIONS generic
========================================================================== */
.section{ padding:120px 0; }
.section.on-ink{ background:var(--ink); color:var(--paper); }
.section.on-dim{ background:var(--paper-dim); }
.tile-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
/* ==========================================================================
WHO WE ARE — fact strip + pull-quote (About page, below the about-split)
========================================================================== */
.who-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:80px; }
.who-fact{
background:var(--white); border-radius:var(--radius-md); padding:30px 26px;
border-top:4px solid var(--coral); transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.who-fact:hover{ transform:translateY(-6px); box-shadow:0 24px 46px -26px rgba(18,20,15,0.25); }
.who-facts .who-fact:nth-child(4n+2){ border-top-color:var(--lime); }
.who-facts .who-fact:nth-child(4n+3){ border-top-color:var(--cobalt); }
.who-facts .who-fact:nth-child(4n+4){ border-top-color:var(--amber); }
.who-fact-icon{
width:48px; height:48px; border-radius:14px; background:var(--ink); color:var(--lime);
display:flex; align-items:center; justify-content:center; font-size:20px; margin-bottom:18px;
}
.who-fact h4{ font-size:1.05rem; }
.who-fact p{ color:#262626; font-size:14px; line-height:1.65; margin-top:10px; }
.who-fact p a{ color:#00cdff; text-decoration:underline; text-underline-offset:2px; }
.who-prose{ max-width:760px; margin:70px auto 0; display:flex; flex-direction:column; gap:20px; }
.who-prose p{ color:#262626; }
.who-prose a{ color:#FF4B33; text-decoration:underline; text-underline-offset:2px; }
.who-quote{ margin:90px auto 0; max-width:720px; text-align:center; position:relative; }
.who-quote-mark{
font-family:var(--font-display); font-size:5.5rem; color:var(--coral); line-height:1; opacity:.2;
position:absolute; top:-46px; left:50%; transform:translateX(-50%); pointer-events:none;
}
.who-quote p{ font-family:var(--font-display); font-weight:600; font-size:clamp(1.6rem,3vw,2.4rem); color:var(--ink); position:relative; z-index:1; }
.who-quote cite{ display:block; margin-top:18px; font-style:normal; color:var(--muted); font-size:14.5px; }
/* ==========================================================================
VISION / MISSION — split diptych panel (About page)
========================================================================== */
.vm-split{
position:relative; display:grid; grid-template-columns:1fr 1fr;
border-radius:var(--radius-lg); overflow:hidden;
}
.vm-panel{ padding:64px 56px; display:flex; flex-direction:column; gap:16px; position:relative; }
.vm-panel-vision{ background:var(--ink); color:var(--paper); }
.vm-panel-mission{ background:var(--lime); color:var(--ink); }
.vm-eyebrow{
font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.14em;
}
.vm-panel-vision .vm-eyebrow{ color:var(--lime); }
.vm-panel-mission .vm-eyebrow{ color:var(--coral-dim); }
.vm-icon{
width:60px; height:60px; border-radius:16px; display:flex; align-items:center; justify-content:center;
font-size:24px; margin-top:6px;
}
.vm-panel-vision .vm-icon{ background:rgba(243,245,238,0.1); color:var(--lime); }
.vm-panel-mission .vm-icon{ background:var(--ink); color:var(--lime); }
.vm-panel h3{ font-size:1.6rem; margin-top:6px; }
.vm-panel p{ font-size:15px; line-height:1.7; max-width:420px; }
.vm-panel-vision p{ color:var(--muted-lt); }
.vm-panel-mission p{ color:rgba(18,20,15,0.72); }
.vm-seam{
position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:64px; height:64px;
border-radius:50%; background:var(--coral); color:var(--white); display:flex; align-items:center;
justify-content:center; font-size:20px; box-shadow:0 20px 40px -15px rgba(18,20,15,0.5); z-index:2;
}
/* ==========================================================================
TEAM — real photo, name, role, LinkedIn (About page)
========================================================================== */
.team-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
.team-card{
background:var(--white); border-radius:var(--radius-md); padding:36px 24px 32px; text-align:center;
border-top:4px solid var(--coral); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.team-card:hover{ transform:translateY(-8px); box-shadow:0 30px 50px -25px rgba(18,20,15,0.25); }
.team-grid .team-card:nth-child(4n+2){ border-top-color:var(--lime); }
.team-grid .team-card:nth-child(4n+3){ border-top-color:var(--cobalt); }
.team-grid .team-card:nth-child(4n+4){ border-top-color:var(--amber); }
.team-avatar{
width:131px; height:131px; border-radius:50%; margin:0 auto 22px; overflow:hidden;
box-shadow:0 0 0 6px var(--paper-dim);
}
.team-avatar img{
width:100%; height:100%; object-fit:cover; transition:filter .4s var(--ease), transform .5s var(--ease);
}
.team-card:hover .team-avatar img{ filter:grayscale(0%); transform:scale(1.05); }
.team-name{ font-size:1.05rem; }
.team-role{
font-family:var(--font-mono); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em;
color:#262626; margin-top:8px;
}
.team-linkedin{
width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper);
display:inline-flex; align-items:center; justify-content:center; font-size:16px; margin-top:20px;
transition:background .3s ease, color .3s ease;
}
.team-linkedin:hover{ background:var(--coral); color:var(--white); }
/* ==========================================================================
PORTFOLIO
========================================================================== */
/* Category tabs — segmented control with a sliding ink pill that glides to the
active tab. Icon + label + live count. Without JS the active tab simply
fills itself (fallback), with JS the .filter-ind pill takes over. */
.filter-bar{
position:relative; display:inline-flex; align-items:center; gap:4px; max-width:100%;
padding:6px; margin-bottom:48px; border-radius:100px;
background:var(--white); border:1px solid #E2E6D8;
box-shadow:0 1px 0 rgba(18,20,15,.04), 0 18px 34px -22px rgba(18,20,15,.28);
}
.filter-ind{
position:absolute; top:0; left:0; height:0; width:0; border-radius:100px;
background:var(--ink); pointer-events:none; z-index:0; opacity:0;
box-shadow:0 10px 22px -10px rgba(18,20,15,.55);
transition:transform .5s var(--ease), width .5s var(--ease), opacity .2s ease;
}
.filter-bar.has-ind .filter-ind{ opacity:1; }
.filter-btn{
position:relative; z-index:1; flex:0 0 auto;
font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; white-space:nowrap;
padding:10px 12px 10px 16px; border-radius:100px; border:0; color:var(--ink);
background:transparent; cursor:pointer;
display:inline-flex; align-items:center; gap:9px;
transition:color .35s ease, background .3s ease;
}
.filter-btn > i{ font-size:14px; color:var(--muted); transition:color .35s ease, transform .4s var(--ease); }
.filter-btn b{
font-weight:500; font-size:10.5px; letter-spacing:0; min-width:22px; height:22px; padding:0 7px; border-radius:100px;
display:inline-flex; align-items:center; justify-content:center;
background:var(--paper-dim); color:var(--ink); transition:background .35s ease, color .35s ease;
}
.filter-btn:hover:not(.active){ background:rgba(18,20,15,.05); }
.filter-btn:hover > i{ transform:scale(1.15) rotate(-6deg); }
.filter-btn.active{ color:var(--paper); }
.filter-btn.active > i{ color:var(--lime); }
.filter-btn.active b{ background:var(--lime); color:var(--ink); }
.filter-bar:not(.has-ind) .filter-btn.active{ background:var(--ink); }
.filter-btn:focus-visible{ outline:2px solid var(--coral); outline-offset:2px; }
@media (max-width:767px){
.filter-bar{ display:flex; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; border-radius:100px; }
.filter-bar::-webkit-scrollbar{ display:none; }
.filter-btn{ font-size:11.5px; padding:9px 10px 9px 14px; }
}
@media (prefers-reduced-motion:reduce){
.filter-ind, .filter-btn, .filter-btn > i{ transition:none; }
}
/* ---- One-line category bar (portfolio page, 9 tabs) ----
Spans the full container width so it lines up with the grid, tabs share the space,
and it NEVER wraps: when a screen is too narrow the icons drop first, then the tabs
tighten, and only as a last resort the bar scrolls sideways (same as on phones). */
.filter-bar-full{
display:flex; width:100%; flex-wrap:nowrap; gap:2px;
overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.filter-bar-full::-webkit-scrollbar{ display:none; }
.filter-bar-full .filter-btn{
flex:1 1 auto; justify-content:center; gap:7px;
font-size:11.5px; padding:9px 10px 9px 12px;
}
.filter-bar-full .filter-btn > i{ font-size:13px; }
.filter-bar-full .filter-btn b{ min-width:20px; height:20px; padding:0 6px; }
@media (max-width:1499px){ .filter-bar-full .filter-btn > i{ display:none; } .filter-bar-full .filter-btn{ padding-left:14px; } }
@media (max-width:1199px){ .filter-bar-full .filter-btn{ font-size:11px; gap:6px; padding:8px 8px 8px 11px; } .filter-bar-full .filter-btn b{ min-width:18px; height:18px; padding:0 5px; } }
@media (max-width:1099px){ .filter-bar-full .filter-btn{ font-size:10.5px; gap:5px; padding:8px 6px 8px 9px; } .filter-bar-full .filter-btn b{ min-width:17px; height:17px; padding:0 4px; font-size:10px; } }
@media (max-width:767px){ .filter-bar-full{ display:flex; } .filter-bar-full .filter-btn{ flex:0 0 auto; font-size:11.5px; padding:9px 10px 9px 14px; } .filter-bar-full .filter-btn > i{ display:inline-block; } }
/* Filtered-out items disappear whole (image + caption); returning items fade in */
.folio-item.hide{ display:none; }
.folio-item.folio-show{ animation:folioIn .45s var(--ease) both; }
@keyframes folioIn{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
.folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:17px; }
.folio-card{
border-radius:3px; overflow:hidden; position:relative;
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
display:block; background:var(--ink);
}
.folio-card:hover{ transform:translateY(-8px); box-shadow:0 34px 60px -28px rgba(18,20,15,.35); }
.folio-card.hide{ display:none; }
/* ---------- Portfolio image — real ![]()
tag, swap src for your own project screenshots.
Fixed, generous height + object-fit:cover so every card is the same size no matter
the screenshot's own proportions. object-position keeps the top of the page (logo,
nav, headline) in view. ---------- */
.folio-img{
position:relative; display:block; width:100%; height:240px;
object-fit:cover; object-position:center top;
filter:saturate(1.05);
transition:transform .9s var(--ease);
}
.folio-card:hover .folio-img{ transform:scale(1.05); }
@media (max-width:1080px){ .folio-img{ height:210px; } }
@media (max-width:820px){ .folio-img{ height:230px; } }
@media (max-width:560px){ .folio-img{ height:200px; } }
.folio-overlay{
position:absolute; inset:0; padding:26px; display:flex; flex-direction:column; justify-content:flex-end;
background:linear-gradient(180deg, rgba(18,20,15,0.05) 0%, rgba(18,20,15,0.15) 35%, rgba(18,20,15,0.92) 100%);
transition:background .3s ease;
}
.folio-cat{
font-family:var(--font-mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.08em;
color:var(--lime); background:rgba(18,20,15,0.55); border:1px solid rgba(243,245,238,0.25);
padding:5px 12px; border-radius:100px; width:fit-content; backdrop-filter:blur(4px);
}
.folio-title{ font-family:var(--font-display); font-size:1.5rem; color:var(--white); font-weight:600; margin-top:14px; line-height:1.15; }
.folio-sub{ font-family:var(--font-body); font-size:13px; color:rgba(243,245,238,0.75); margin-top:8px; max-width:88%; line-height:1.5; }
/* Plain overlay — used on real-image cards that show only a "Visit site" button on hover,
with no category tag / title / subtitle text over the image. */
.folio-overlay-plain{
position:absolute; inset:0; padding:22px; display:flex; align-items:flex-end;
background:linear-gradient(180deg, rgba(18,20,15,0) 60%, rgba(18,20,15,0.7) 100%);
opacity:0; transition:opacity .3s ease;
}
.folio-card:hover .folio-overlay-plain{ opacity:1; }
.folio-btn{
font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.05em;
color:var(--ink); background:var(--white); padding:9px 18px; border-radius:100px;
display:inline-flex; align-items:center; gap:8px;
transform:translateY(6px); transition:transform .35s var(--ease), background .3s ease, color .3s ease;
}
.folio-card:hover .folio-btn{ transform:translateY(0); }
.folio-btn:hover{ background:var(--coral); color:var(--white); }
.folio-btn i{ transition:transform .3s ease; }
.folio-btn:hover i{ transform:translate(2px,-2px); }
/* modal */
.folio-modal .modal-content{ background:var(--ink); color:var(--paper); border-radius:var(--radius-md); border:none; }
.folio-modal .modal-header{ border-bottom:1px solid var(--ink-line); padding:24px 28px; }
.folio-modal .modal-body{ padding:28px; }
.folio-modal .btn-close{ filter:invert(1); }
.folio-modal-visual{ height:220px; border-radius:14px; margin-bottom:20px; }
/* ==========================================================================
LOGO PORTFOLIO — client logo wall with creative hover tooltips
========================================================================== */
.logo-grid{
display:grid; grid-template-columns:repeat(6,1fr);
border-top:1px solid #E2E6D8; border-left:1px solid #E2E6D8;
border-radius:var(--radius-md); overflow:visible;
}
.logo-tile{
position:relative; background:var(--white);
border-right:1px solid #E2E6D8; border-bottom:1px solid #E2E6D8;
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
padding:32px 18px; min-height:150px; cursor:default;
transition:background .3s ease, transform .3s ease, box-shadow .3s ease;
}
.logo-tile:hover{ background:var(--paper-dim); transform:translateY(-3px); z-index:3; box-shadow:0 20px 40px -24px rgba(18,20,15,.3); }
.logo-img{
max-width:100%; max-height:52px; width:auto; height:auto;
/* filter:grayscale(1) opacity(0.55); */
transition:filter .4s ease, transform .4s var(--ease);
}
.logo-tile:hover .logo-img{ filter:grayscale(0) opacity(1); transform:scale(1.06); }
.menu-button{padding: 11px 21px !important; border-radius: 2px !important;}
/* creative CSS-only tooltip, no JS needed */
.logo-tile::before{
content:attr(data-tooltip);
position:absolute; bottom:calc(100% + 12px); left:50%; transform:translateX(-50%) translateY(6px);
background:var(--ink); color:var(--paper); font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
white-space:nowrap; padding:9px 16px; border-radius:8px;
opacity:0; visibility:hidden; pointer-events:none; z-index:6;
transition:opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
box-shadow:0 16px 30px -14px rgba(18,20,15,.4);
}
.logo-tile::after{
content:""; position:absolute; bottom:calc(100% + 6px); left:50%; transform:translateX(-50%) translateY(4px);
border:6px solid transparent; border-top-color:var(--ink);
opacity:0; visibility:hidden; transition:opacity .25s ease, transform .25s var(--ease), visibility .25s; z-index:6;
}
.logo-tile:hover::before, .logo-tile:hover::after{ opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
@media (max-width:820px){ .logo-grid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){
.logo-grid{ grid-template-columns:repeat(2,1fr); }
.logo-tile{ padding:24px 14px; min-height:120px; }
.logo-img{ max-height:42px; }
.logo-tile::before{ white-space:normal; max-width:160px; text-align:center; }
}
/* ==========================================================================
PRICING — three website packages
========================================================================== */
.pricing-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
.price-card{
background:var(--white); border-radius:var(--radius-md); padding:38px 32px;
border:1px solid #E2E6D8; display:flex; flex-direction:column; gap:22px;
transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s ease;
}
.price-card:hover{ transform:translateY(-8px); box-shadow:0 30px 55px -28px rgba(18,20,15,0.22); }
.price-card.featured{ background:var(--ink); color:var(--paper); border-color:var(--ink); transform:scale(1.045); position:relative; z-index:2; }
.price-card.featured:hover{ transform:scale(1.045) translateY(-8px); }
.price-badge{
align-self:flex-start; font-family:var(--font-mono); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
background:var(--coral); color:var(--white); padding:6px 14px; border-radius:100px;
}
.price-plan{ font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--coral); }
.price-card.featured .price-plan{ color:var(--lime); }
.price-amount{ font-family:var(--font-display); font-size:2.6rem; font-weight:700; }
.price-amount span{ font-family:var(--font-mono); font-size:13px; font-weight:400; color:var(--muted); }
.price-card.featured .price-amount span{ color:var(--muted-lt); }
.price-desc{ font-size:14px; color:var(--muted); line-height:1.6; }
.price-card.featured .price-desc{ color:var(--muted-lt); }
.price-feats{ display:flex; flex-direction:column; gap:12px; flex:1; }
.price-feats li{ display:flex; align-items:center; gap:10px; font-size:14px; }
.price-feats li i{ color:var(--coral); flex-shrink:0; }
.price-card.featured .price-feats li i{ color:var(--lime); }
.price-card .btn{ width:100%; }
@media (max-width:960px){
.pricing-grid{ grid-template-columns:1fr; }
.price-card.featured{ transform:none; order:-1; }
.price-card.featured:hover{ transform:translateY(-8px); }
}
/* ==========================================================================
TESTIMONIALS — auto-sliding marquee of cards, its own tinted section so it
reads as a distinct block rather than blending into the CTA/footer stack
========================================================================== */
.section.on-tint{ background:linear-gradient(180deg, #FBF6EE 0%, #F7ECE3 100%); }
.testi-marquee{
overflow:hidden; position:relative;
mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
-webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.testi-track{
display:flex; gap:24px; width:max-content;
animation:testiScroll 34s linear infinite;
}
.testi-marquee:hover .testi-track{ animation-play-state:paused; }
@keyframes testiScroll{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.testi-card{
width:380px; flex-shrink:0; background:var(--white); border-radius:var(--radius-md);
padding:34px 32px; box-shadow:0 30px 60px -35px rgba(18,20,15,0.25);
display:flex; flex-direction:column; gap:16px;
}
.testi-mark{ font-family:var(--font-display); font-size:2.4rem; color:var(--coral); line-height:1; opacity:.9; }
.testi-stars{ color:var(--lime); background:var(--ink); display:inline-flex; gap:3px; padding:6px 12px; border-radius:100px; font-size:10px; width:fit-content; }
.testi-quote{ font-family:var(--font-display); font-size:1.15rem; font-weight:500; line-height:1.5; }
.testi-person{ display:flex; align-items:center; gap:14px; margin-top:auto; }
.testi-avatar{
width:46px; height:46px; border-radius:50%; display:flex; align-items:center; justify-content:center;
font-family:var(--font-display); font-weight:700; color:var(--ink); flex-shrink:0; font-size:14px;
}
.testi-name{ font-weight:700; font-size:14.5px; }
.testi-role{ font-family:var(--font-mono); font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:.05em; }
@media (max-width:600px){ .testi-card{ width:300px; padding:28px 24px; } }
/* ==========================================================================
CTA BANNER
========================================================================== */
.cta-banner{ background:var(--ink); color:var(--paper); padding:100px 0; text-align:center; position:relative; overflow:hidden; }
.cta-banner .h-xl{ max-width:820px; margin-inline:auto; }
.cta-banner .btn{ margin-top:38px; }
/* ==========================================================================
FOOTER
========================================================================== */
.site-footer{ background:var(--ink); color:var(--paper); padding-top:90px; position:relative; overflow:hidden; }
.footer-grid{ display:grid; grid-template-columns:1.4fr .8fr .8fr 1fr; gap:40px; padding:70px 0 50px; }
.footer-brand p{ color:var(--muted-lt); font-size:14.5px; margin-top:16px; max-width:280px; line-height:1.6; }
.footer-col h5{ font-family:var(--font-mono); font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted-lt); margin-bottom:20px; }
.footer-col li{ margin-bottom:12px; }
.footer-col a{ font-size:14.5px; transition:color .25s ease, padding .25s ease; }
.footer-col a:hover{ color:var(--lime); padding-left:6px; }
.footer-socials{ display:flex; gap:10px; margin-top:22px; }
.footer-socials a{ width:38px; height:38px; border-radius:50%; border:1px solid var(--ink-line); display:flex; align-items:center; justify-content:center; }
.footer-socials a:hover{ background:var(--lime); color:var(--ink); border-color:var(--lime); }
.footer-bottom{ border-top:1px solid var(--ink-line); padding:26px 0; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px; }
.footer-bottom p{ font-size:13px; color:var(--muted-lt); }
.footer-bottom .made{ font-family:var(--font-mono); font-size:12px; color:var(--muted-lt); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.footer-bottom .made i{ color:var(--coral); }
.footer-bottom .made a{ color:var(--paper); text-decoration:none; border-bottom:1px solid transparent; transition:color .25s ease, border-color .25s ease; }
.footer-bottom .made a:hover{ color:var(--lime); border-color:var(--lime); }
.footer-big-word{
font-family:var(--font-display); font-weight:700; font-size:min(22vw,260px); line-height:.8;
color:transparent; -webkit-text-stroke:1px rgba(243,245,238,0.14); text-align:center; margin-top:20px; user-select:none;
}
/* back to top */
.to-top{
position:fixed; right:26px; bottom:26px; z-index:900;
width:52px; height:52px; border-radius:50%; background:var(--coral); color:var(--white);
display:flex; align-items:center; justify-content:center; font-size:16px;
opacity:0; visibility:hidden; transform:translateY(10px);
transition:opacity .3s ease, transform .3s ease, visibility .3s;
border:none;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0); }
.to-top:hover{ background:var(--ink); }
/* floating talk pill */
.talk-pill{
position:fixed; left:26px; bottom:26px; z-index:900;
display:flex; align-items:center; gap:10px; padding:12px 20px 12px 14px; border-radius:100px;
background:var(--ink); color:var(--paper); box-shadow:0 20px 40px -18px rgba(18,20,15,0.5);
font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
}
.talk-pill .pulse{ width:10px; height:10px; border-radius:50%; background:var(--lime); position:relative; }
.talk-pill .pulse::after{
content:""; position:absolute; inset:-5px; border-radius:50%; border:2px solid var(--lime);
animation:pulse 1.8s ease-out infinite;
}
@keyframes pulse{ 0%{ transform:scale(.6); opacity:1;} 100%{ transform:scale(1.8); opacity:0;} }
.talk-pill:hover{ background:var(--coral); }
/* ---------- reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(28px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in-view{ opacity:1; transform:translateY(0); }
.reveal-stagger > *{ opacity:0; transform:translateY(28px); transition:opacity .6s var(--ease), transform .6s var(--ease); }
.reveal-stagger.in-view > *{ opacity:1; transform:translateY(0); }
.reveal-stagger.in-view > *:nth-child(1){ transition-delay:.05s; }
.reveal-stagger.in-view > *:nth-child(2){ transition-delay:.15s; }
.reveal-stagger.in-view > *:nth-child(3){ transition-delay:.25s; }
.reveal-stagger.in-view > *:nth-child(4){ transition-delay:.35s; }
.reveal-stagger.in-view > *:nth-child(5){ transition-delay:.45s; }
.reveal-stagger.in-view > *:nth-child(6){ transition-delay:.55s; }
/* ==========================================================================
PAGE HERO (inner pages)
========================================================================== */
.page-hero{ padding:170px 0 90px; position:relative; }
.page-hero .h-xl{ margin-top:20px; }
.page-hero-meta{ display:flex; gap:40px; margin-top:44px; flex-wrap:wrap; }
.crumb{ font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:flex; align-items:center; gap:8px; }
.crumb i{ font-size:10px; }
/* ==========================================================================
RESPONSIVE
========================================================================== */
@media (max-width:1080px){
.main-nav{ display:none; }
.footer-grid{ grid-template-columns:1fr 1fr; }
.hero-foot{ grid-template-columns:1fr; gap:28px; }
.about-preview-grid{ grid-template-columns:1fr; }
.about-split{ grid-template-columns:1fr; }
.who-facts{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:820px){
.tile-row{ grid-template-columns:repeat(2,1fr); }
.folio-grid{ grid-template-columns:repeat(2,1fr); }
.trio{ grid-template-columns:1fr; }
.footer-grid{ grid-template-columns:1fr; gap:36px; }
.vm-split{ grid-template-columns:1fr; }
.vm-seam{ display:none; }
.team-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:560px){
.tile-row{ grid-template-columns:1fr; }
.folio-grid{ grid-template-columns:1fr; }
.hero{ padding-top:130px; }
.page-hero{ padding:140px 0 60px; }
.section{ padding:80px 0; }
.about-preview{ padding:80px 0; }
.talk-pill span.label{ display:none; }
.team-grid{ grid-template-columns:1fr; }
.who-facts{ grid-template-columns:1fr; }
.vm-panel{ padding:40px 28px; }
.talk-pill{ padding:14px; }
.footer-big-word{ font-size:20vw; }
}
/* ==========================================================================
SERVICES — "Crafted in Black" (scoped to .design-thirteen)
========================================================================== */
.design-thirteen{ --amber:#00cdff; --flare:#00cdff; position:relative; background:#000; color:var(--white); overflow:hidden; }
.design-thirteen .eyebrow{ color:var(--amber); }
.design-thirteen .eyebrow::before{ background:var(--amber); }
.design-thirteen .container{ position:relative; }
.design-thirteen .head-wrap{ position:relative; z-index:3; max-width:640px; margin:0 auto 64px; text-align:center; }
.design-thirteen .head-wrap h2{ margin-top:18px; }
.design-thirteen .head-wrap p{ margin-top:14px; font-size:1.05rem; line-height:1.6; color:rgba(255,255,255,.55); }
.grad-accent{ background:linear-gradient(90deg,#00cdff,#b8f2ff); -webkit-background-clip:text; background-clip:text; color:transparent; -webkit-text-fill-color:transparent; }
.ob-grain{ position:absolute; inset:0; pointer-events:none; opacity:.05; z-index:2; mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.ob-spotlight{ position:absolute; inset:0; pointer-events:none; z-index:1; background:radial-gradient(560px circle at var(--mx,50%) var(--my,20%), rgba(0,205,255,.10), transparent 45%); }
.ob-grid{ position:relative; z-index:3; }
.ob-card{
position:relative; height:100%; padding:36px 30px 32px; border-radius:20px; overflow:hidden; will-change:transform;
background:linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.01));
border:1px solid rgba(0,205,255,.15);
transition:border-color .4s ease, box-shadow .4s ease, transform .25s ease-out;
}
.ob-card:hover{ border-color:rgba(0,205,255,.5); box-shadow:0 30px 60px -22px rgba(0,0,0,.8), 0 0 40px -12px rgba(0,205,255,.18); }
.ob-card::after{ content:""; position:absolute; top:0; left:-60%; width:40%; height:100%; background:linear-gradient(115deg, transparent, rgba(0,205,255,.14), transparent); transform:skewX(-15deg); transition:left .75s ease; pointer-events:none; }
.ob-card:hover::after{ left:130%; }
.ob-num{ position:absolute; top:14px; right:22px; font-family:var(--font-display); font-weight:700; font-size:3.1rem; line-height:1; color:transparent; -webkit-text-stroke:1px rgba(0,205,255,.28); pointer-events:none; }
.ob-icon{ position:relative; width:56px; height:56px; border-radius:50%; border:1.5px solid var(--amber); display:flex; align-items:center; justify-content:center; font-size:1.25rem; color:var(--amber); margin-bottom:24px; transition:background .4s, color .4s; }
.ob-card:hover .ob-icon{ background:var(--amber); color:#000; }
.ob-card h3{ position:relative; font-size:1.1rem; font-weight:700; line-height:1.25; margin-bottom:12px; letter-spacing:.01em; }
.ob-desc{ position:relative; color:rgba(255,255,255,.62); font-size:.92rem; line-height:1.65; }
.ob-btn{ position:relative; margin-top:26px; display:inline-flex; align-items:center; gap:10px; background:none; border:none; padding:0; color:var(--amber); font-family:var(--font-body); font-weight:600; font-size:.82rem; letter-spacing:.08em; text-transform:uppercase; }
.ob-btn::after{ content:""; position:absolute; left:0; bottom:-6px; width:0; height:1px; background:var(--amber); transition:width .35s ease; }
.ob-btn:hover::after{ width:100%; }
.ob-btn i{ font-size:.78rem; transition:transform .35s; }
.ob-btn:hover i{ transform:translateX(5px); }
.ob-btn:focus-visible{ outline:2px solid var(--amber); outline-offset:6px; }
/* service detail modal */
.svc-modal-backdrop{ position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(10,8,6,.6); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); opacity:0; pointer-events:none; transition:opacity .3s ease; }
.svc-modal-backdrop.open{ opacity:1; pointer-events:auto; }
.svc-modal{ position:relative; width:100%; max-width:480px; padding:40px 36px; border-radius:24px; background:#fff; color:#221c1c; transform:translateY(18px) scale(.97); transition:transform .3s ease; }
.svc-modal-backdrop.open .svc-modal{ transform:none; }
.svc-modal-close{ position:absolute; top:18px; right:18px; width:36px; height:36px; border-radius:50%; border:none; background:rgba(34,28,28,.06); color:#221c1c; display:flex; align-items:center; justify-content:center; transition:background .3s; }
.svc-modal-close:hover{ background:rgba(34,28,28,.12); }
.svc-modal-icon{ width:56px; height:56px; border-radius:16px; margin-bottom:20px; background:linear-gradient(135deg,#00cdff,#7fe6ff); color:#0a0a0f; display:flex; align-items:center; justify-content:center; font-size:1.4rem; }
.svc-modal h3{ font-size:1.35rem; font-weight:700; margin-bottom:14px; }
.svc-modal p{ color:#4f4540; line-height:1.7; margin-bottom:10px; }
.svc-modal p:last-of-type{ margin-bottom:0; }
/* ==========================================================================
CLOSING CTA — standalone lime band directly above the footer
========================================================================== */
.cta-band{ padding:64px 0; background:var(--coral); color:var(--white); }
.cta-band + .site-footer{ padding-top:0; }
.cta-band-grid{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:28px 48px; }
.cta-band .eyebrow{ color:var(--ink); }
.cta-band .eyebrow::before{ background:var(--ink); }
.cta-band h2{ margin-top:12px; max-width:18em; font-size:clamp(1.7rem,3.2vw,2.6rem); font-weight:600; line-height:1.1; letter-spacing:-.02em; text-wrap:balance; }
.cta-band .btn{ background:var(--white); color:var(--ink); }
.cta-band .btn:hover{ background:var(--ink); color:var(--paper); }
.cta-band a:focus-visible{ outline-color:var(--ink); }
@media (max-width:820px){ .cta-band{ padding:52px 0; } }
@media (max-width:767px){
.design-thirteen .ob-card:hover{ transform:none !important; }
.ob-num{ font-size:2.4rem; }
.svc-modal{ padding:32px 24px; }
}
/* ==========================================================================
PAGE BANNER — image breadcrumb header for every inner page
One photo, cropped + tinted differently per page (set --pos / --zoom / data-tone
on the section). Glass breadcrumb pill, staircase title, outlined watermark word.
========================================================================== */
.page-banner{
--tone:var(--coral); --pos:50% 50%; --zoom:1.5;
position:relative; isolation:isolate; overflow:hidden;
padding:172px 0 124px; margin-bottom:clamp(20px,3vw,44px);
color:var(--paper); background:var(--ink);
}
.page-banner[data-tone="cobalt"]{ --tone:var(--cobalt); }
.page-banner[data-tone="lime"]{ --tone:var(--lime); }
.banner-bg{ position:absolute; inset:0; z-index:-5; overflow:hidden; animation:bannerDrift 28s ease-in-out infinite alternate; }
.banner-bg img{
width:100%; height:100%; object-fit:cover; object-position:var(--pos);
transform:scale(var(--zoom)); transform-origin:var(--pos);
}
@keyframes bannerDrift{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
.banner-shade{
position:absolute; inset:0; z-index:-4;
background:
linear-gradient(0deg, rgba(18,20,15,.8) 0, rgba(18,20,15,0) 58%),
linear-gradient(90deg, rgba(18,20,15,.93) 0%, rgba(18,20,15,.68) 48%, rgba(18,20,15,.38) 100%);
}
.banner-glow{
position:absolute; inset:0; z-index:-3; mix-blend-mode:screen; opacity:.42;
background:radial-gradient(46% 92% at 92% 6%, var(--tone) 0%, transparent 72%);
}
.banner-dots{
position:absolute; inset:0; z-index:-2; pointer-events:none;
background-image:radial-gradient(rgba(243,245,238,.20) 1px, transparent 1px); background-size:24px 24px;
-webkit-mask-image:linear-gradient(90deg, transparent 34%, #000 100%); mask-image:linear-gradient(90deg, transparent 34%, #000 100%);
}
.banner-word{
position:absolute; right:-.5vw; bottom:clamp(6px,1.2vw,20px); z-index:-1; pointer-events:none; user-select:none; white-space:nowrap;
font-family:var(--font-display); font-weight:700; font-size:clamp(4.4rem,15vw,14rem); line-height:.8; letter-spacing:-.03em; text-transform:uppercase;
color:transparent; -webkit-text-stroke:1.5px rgba(243,245,238,.2);
}
.banner-inner{ position:relative; }
.banner-inner > *{ animation:bannerIn .9s var(--ease) both; }
.banner-inner > *:nth-child(2){ animation-delay:.08s; }
.banner-inner > *:nth-child(3){ animation-delay:.16s; }
.banner-inner > *:nth-child(4){ animation-delay:.26s; }
.banner-inner > *:nth-child(5){ animation-delay:.34s; }
.banner-inner > *:nth-child(6){ animation-delay:.42s; }
@keyframes bannerIn{ from{ opacity:0; transform:translateY(22px); } to{ opacity:1; transform:none; } }
/* breadcrumb — glass pill */
.crumbs{
list-style:none; margin:0 0 26px; padding:9px 18px 9px 14px; width:fit-content;
display:flex; align-items:center; gap:12px; flex-wrap:wrap;
border-radius:100px; background:rgba(18,20,15,.46); border:1px solid rgba(243,245,238,.22);
-webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
font-family:var(--font-mono); font-size:12px; letter-spacing:.07em; text-transform:uppercase; color:rgba(243,245,238,.78);
}
.crumbs li{ display:inline-flex; align-items:center; gap:12px; }
.crumbs li + li::before{ content:"\F285"; font-family:"bootstrap-icons"; font-size:9px; opacity:.55; }
.crumbs a{ display:inline-flex; align-items:center; gap:7px; transition:color .25s ease; }
.crumbs a:hover{ color:var(--lime); }
.crumbs [aria-current="page"]{ color:var(--lime); }
.banner-title{ margin-top:22px; font-size:clamp(2.5rem,5.6vw,4.9rem); font-weight:600; color:var(--paper); }
.banner-title .line{ display:block; }
.banner-title .step-2{ padding-left:clamp(0px,6vw,104px); }
.banner-title .step-3{ padding-left:clamp(0px,12vw,208px); }
.banner-title .accent{ color:var(--coral); font-style:italic; }
.banner-sub{ margin-top:26px; max-width:540px; font-size:1.05rem; line-height:1.6; color:rgba(243,245,238,.84); }
.banner-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:32px; }
.banner-stats{ display:flex; gap:46px; flex-wrap:wrap; margin-top:40px; }
.banner-stats .stat-num{ font-family:var(--font-display); font-size:2.1rem; font-weight:700; line-height:1; color:var(--lime); }
.banner-stats .stat-item:nth-child(2) .stat-num{ color:var(--coral); }
.banner-stats .stat-lbl{ font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase; line-height:1.4; max-width:150px; margin-top:8px; color:rgba(243,245,238,.7); }
.banner-ticker{ margin-top:54px; }
.banner-ticker .marquee{ background:rgba(18,20,15,.5); border-color:rgba(243,245,238,.16); }
/* work-page banner: tilted project thumbnails */
.banner-stack{ position:absolute; right:7%; top:50%; width:min(34vw,470px); height:300px; transform:translateY(-46%); pointer-events:none; z-index:0; }
.banner-stack img{
position:absolute; width:62%; aspect-ratio:16/10; object-fit:cover; object-position:center top; border-radius:3px;
border:1px solid rgba(243,245,238,.28); box-shadow:0 30px 60px -24px rgba(0,0,0,.7);
}
.banner-stack img:nth-child(1){ left:0; top:0; transform:rotate(-7deg); }
.banner-stack img:nth-child(2){ left:26%; top:26%; transform:rotate(3deg); z-index:1; }
.banner-stack img:nth-child(3){ left:14%; top:56%; transform:rotate(-3deg); z-index:2; }
@media (max-width:1080px){ .banner-stack{ display:none; } }
/* small "hiring" chip */
.hiring-chip{
display:inline-flex; align-items:center; gap:10px; margin-left:14px; padding:6px 14px; border-radius:100px;
background:rgba(212,255,92,.12); border:1px solid rgba(212,255,92,.4); color:var(--lime);
font-family:var(--font-mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}
.hiring-chip .pulse{ width:8px; height:8px; border-radius:50%; background:var(--lime); position:relative; }
.hiring-chip .pulse::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid var(--lime); animation:pulse 1.8s ease-out infinite; }
@media (max-width:820px){
.page-banner{ padding:138px 0 100px; }
.banner-stats{ gap:28px; }
}
@media (max-width:560px){
.page-banner{ padding:122px 0 84px; }
.crumbs{ font-size:11px; padding:8px 14px 8px 12px; }
.banner-sub{ font-size:1rem; }
.hiring-chip{ margin-left:0; margin-top:12px; }
.banner-ticker{ margin-top:40px; }
}
/* ==========================================================================
PORTFOLIO PAGE — captioned cards + closing "your project" tile
========================================================================== */
.folio-grid.is-page{ gap:34px 20px; }
.folio-item{ margin:0; display:flex; flex-direction:column; gap:14px; }
.folio-meta{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; padding:0 2px; }
.folio-name{ font-family:var(--font-display); font-size:1.15rem; font-weight:600; }
.folio-type{ font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.folio-cta{
grid-column:span 2; position:relative; overflow:hidden; border-radius:3px; padding:40px 44px;
display:flex; flex-direction:column; justify-content:space-between; gap:26px;
background:var(--coral); color:var(--white);
}
.folio-cta::before{
content:"YOU"; position:absolute; right:-14px; bottom:-40px; pointer-events:none; user-select:none;
font-family:var(--font-display); font-weight:700; font-size:11rem; line-height:1; letter-spacing:-.04em;
color:transparent; -webkit-text-stroke:1.5px rgba(252,253,249,.3);
}
.folio-cta .eyebrow{ color:var(--ink); }
.folio-cta .eyebrow::before{ background:var(--ink); }
.folio-cta h3{ font-size:clamp(1.8rem,3vw,2.6rem); font-weight:600; line-height:1.08; letter-spacing:-.02em; max-width:12em; position:relative; }
.folio-cta .btn{ position:relative; width:fit-content; background:var(--white); color:var(--ink); }
.folio-cta .btn:hover{ background:var(--ink); color:var(--paper); }
@media (max-width:560px){ .folio-cta{ grid-column:auto; padding:32px 26px; min-height:300px; } .folio-cta::before{ font-size:8rem; } }
/* ==========================================================================
CAREER PAGE
========================================================================== */
/* --- why join: bento grid --- */
.perk-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:minmax(230px,auto); gap:18px; }
.perk{
position:relative; overflow:hidden; border-radius:var(--radius-lg); padding:32px 30px;
display:flex; flex-direction:column; justify-content:flex-end; gap:12px;
background:var(--white); color:var(--ink);
transition:transform .45s var(--ease), box-shadow .45s var(--ease);
}
.perk:hover{ transform:translateY(-6px); box-shadow:0 32px 50px -30px rgba(18,20,15,.35); }
.perk-icon{
position:absolute; top:28px; left:30px; width:52px; height:52px; border-radius:50%;
display:flex; align-items:center; justify-content:center; font-size:21px;
background:var(--ink); color:var(--lime);
}
.perk-num{
position:absolute; top:12px; right:24px; font-family:var(--font-display); font-weight:700; font-size:3.4rem; line-height:1;
color:transparent; -webkit-text-stroke:1px rgba(18,20,15,.22);
}
.perk h3{ font-size:1.45rem; font-weight:600; line-height:1.12; letter-spacing:-.01em; position:relative; }
.perk p{ font-size:14.5px; line-height:1.6; color:var(--muted); position:relative; max-width:34em; }
.perk-own{ grid-column:span 2; grid-row:span 2; background:var(--ink); color:var(--paper); }
.perk-own .perk-icon{ background:var(--coral); color:var(--white); }
.perk-own .perk-num{ -webkit-text-stroke-color:rgba(243,245,238,.2); font-size:5rem; }
.perk-own h3{ font-size:clamp(2rem,3.4vw,2.9rem); line-height:1.02; letter-spacing:-.02em; }
.perk-own p{ color:var(--muted-lt); font-size:16px; }
.perk-name{ background:var(--coral); color:var(--white); }
.perk-name .perk-icon{ background:var(--white); color:var(--coral); }
.perk-name .perk-num{ -webkit-text-stroke-color:rgba(252,253,249,.4); }
.perk-name p{ color:rgba(252,253,249,.86); }
.perk-flat{ background:var(--lime); }
.perk-flat p{ color:rgba(18,20,15,.72); }
.perk-flat .perk-num{ -webkit-text-stroke-color:rgba(18,20,15,.3); }
.perk-learn{ grid-column:span 2; background:var(--cobalt); color:var(--white); }
.perk-learn .perk-icon{ background:var(--lime); color:var(--ink); }
.perk-learn .perk-num{ -webkit-text-stroke-color:rgba(252,253,249,.35); }
.perk-learn p{ color:rgba(252,253,249,.82); }
.perk-learn .perk-link{
position:relative; width:fit-content; margin-top:6px; display:inline-flex; align-items:center; gap:8px;
font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--lime);
}
.perk-learn .perk-link i{ transition:transform .35s var(--ease); }
.perk-learn .perk-link:hover i{ transform:translateX(5px); }
.perk-photo{ grid-column:span 2; padding:0; justify-content:flex-start; background:var(--ink); }
.perk-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:70% 60%; transition:transform 1s var(--ease); }
.perk-photo:hover img{ transform:scale(1.05); }
.perk-photo::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(18,20,15,.75) 0, rgba(18,20,15,0) 60%); }
.perk-chips{ position:absolute; left:22px; bottom:22px; z-index:1; display:flex; gap:10px; flex-wrap:wrap; }
.perk-chips span{
display:inline-flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px;
background:rgba(252,253,249,.92); color:var(--ink); font-family:var(--font-mono); font-size:11.5px; letter-spacing:.04em;
}
.perk-chips i{ color:var(--coral); }
.perk-ship{ grid-column:span 2; }
@media (max-width:1080px){
.perk-grid{ grid-template-columns:repeat(2,1fr); }
.perk-own{ grid-column:span 2; grid-row:auto; min-height:340px; }
.perk-learn, .perk-photo, .perk-ship{ grid-column:span 2; }
}
@media (max-width:560px){
.perk-grid{ grid-template-columns:1fr; }
.perk-own, .perk-learn, .perk-photo, .perk-ship{ grid-column:auto; }
.perk{ padding:28px 24px; }
}
/* --- open roles --- */
.role-filters{ display:flex; flex-wrap:wrap; gap:10px; }
.role-filter{
font-family:var(--font-mono); font-size:12.5px; text-transform:uppercase; letter-spacing:.05em;
padding:11px 18px; border-radius:100px; border:1px solid var(--ink); background:transparent; color:var(--ink);
display:inline-flex; align-items:center; gap:9px; transition:background .3s ease, color .3s ease;
}
.role-filter b{ font-weight:500; font-size:10.5px; min-width:20px; height:20px; padding:0 6px; border-radius:100px; display:inline-flex; align-items:center; justify-content:center; background:rgba(18,20,15,.1); }
.role-filter:hover, .role-filter.active{ background:var(--ink); color:var(--paper); }
.role-filter.active b, .role-filter:hover b{ background:var(--coral); color:var(--white); }
.role-list{ display:flex; flex-direction:column; gap:14px; }
.role{
background:var(--white); border-radius:var(--radius-md); border:1px solid #E2E6D8; overflow:hidden;
transition:border-color .35s ease, box-shadow .35s ease, background .35s ease;
}
.role[hidden]{ display:none; }
.role:hover{ border-color:var(--ink); }
.role.open{ background:var(--ink); color:var(--paper); border-color:var(--ink); box-shadow:0 34px 56px -32px rgba(18,20,15,.5); }
.role-head{
width:100%; border:0; background:none; color:inherit; text-align:left;
display:grid; grid-template-columns:48px 1fr auto 48px; align-items:center; gap:20px; padding:26px 28px;
}
.role-idx{ font-family:var(--font-mono); font-size:12px; color:var(--coral); }
.role-title{ font-family:var(--font-display); font-size:clamp(1.3rem,2.2vw,1.8rem); font-weight:600; letter-spacing:-.01em; line-height:1.15; }
.role-tags{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.role-tag{
display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:100px; white-space:nowrap;
font-family:var(--font-mono); font-size:11px; letter-spacing:.05em; text-transform:uppercase;
border:1px solid #DCE0D2; color:var(--muted); transition:border-color .3s ease, color .3s ease;
}
.role.open .role-tag{ border-color:rgba(243,245,238,.25); color:var(--muted-lt); }
.role-toggle{
width:46px; height:46px; border-radius:50%; border:1px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:16px;
transition:transform .45s var(--ease), background .3s ease, color .3s ease, border-color .3s ease;
}
.role-head:hover .role-toggle{ background:var(--coral); border-color:var(--coral); color:var(--white); }
.role.open .role-toggle{ transform:rotate(45deg); background:var(--lime); border-color:var(--lime); color:var(--ink); }
.role-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .55s var(--ease); }
.role.open .role-panel{ grid-template-rows:1fr; }
.role-panel-inner{ overflow:hidden; min-height:0; }
.role-body{ padding:4px 28px 34px 96px; }
.role-lead{ font-size:1.05rem; line-height:1.65; color:var(--muted-lt); max-width:46em; }
.role-cols{ display:grid; grid-template-columns:1fr 1fr; gap:34px; margin:28px 0 30px; }
.role-cols h4{ font-family:var(--font-mono); font-size:11.5px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--lime); margin-bottom:14px; }
.role-cols ul{ display:flex; flex-direction:column; gap:11px; }
.role-cols li{ display:flex; gap:11px; font-size:14.5px; line-height:1.55; color:rgba(243,245,238,.86); }
.role-cols li::before{ content:""; flex-shrink:0; width:6px; height:6px; border-radius:50%; background:var(--coral); margin-top:.6em; }
.role-empty{ display:none; padding:40px; text-align:center; color:var(--muted); border:1px dashed #C9CEBF; border-radius:var(--radius-md); }
.role-empty.show{ display:block; }
.role-note{ margin-top:34px; text-align:center; font-size:14px; color:var(--muted); }
.role-note a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
@media (max-width:900px){
.role-head{ grid-template-columns:34px 1fr 46px; gap:14px; padding:22px 20px; }
.role-tags{ grid-column:2 / 3; grid-row:2; justify-content:flex-start; }
.role-toggle{ grid-column:3; grid-row:1 / span 2; }
.role-body{ padding:4px 20px 30px; }
.role-cols{ grid-template-columns:1fr; gap:26px; }
}
/* --- hiring process --- */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:20px; position:relative; }
.steps::before{ content:""; position:absolute; left:6%; right:6%; top:27px; height:1px; background:repeating-linear-gradient(90deg, #B9BFAE 0 6px, transparent 6px 12px); }
.step{ position:relative; }
.step-badge{
position:relative; z-index:1; width:54px; height:54px; border-radius:50%; margin-bottom:22px;
display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px;
background:var(--ink); color:var(--lime); border:6px solid var(--paper-dim);
box-sizing:content-box; margin-left:-6px; margin-top:-6px;
transition:background .35s ease, color .35s ease, transform .45s var(--ease);
}
.step:hover .step-badge{ background:var(--coral); color:var(--white); transform:scale(1.08) rotate(-6deg); }
.step h3{ font-size:1.25rem; margin-bottom:8px; }
.step p{ font-size:14.5px; line-height:1.6; color:var(--muted); max-width:22em; }
@media (max-width:900px){
.steps{ grid-template-columns:1fr 1fr; gap:36px 24px; }
.steps::before{ display:none; }
}
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
/* --- apply --- */
.apply-section{ position:relative; overflow:hidden; background:var(--ink); color:var(--paper); }
.apply-section::before{
content:""; position:absolute; top:-140px; right:-100px; width:460px; height:460px; border-radius:50%;
background:var(--coral); opacity:.16; filter:blur(90px); pointer-events:none;
}
.apply-section::after{
content:""; position:absolute; bottom:-160px; left:-120px; width:420px; height:420px; border-radius:50%;
background:var(--cobalt); opacity:.2; filter:blur(100px); pointer-events:none;
}
.apply-grid{ position:relative; z-index:1; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }
.apply-copy h2{ margin-top:18px; }
.apply-copy > p{ margin-top:20px; max-width:30em; font-size:16px; line-height:1.7; color:var(--muted-lt); }
.apply-alt{ margin-top:34px; padding-top:26px; border-top:1px solid var(--ink-line); display:flex; flex-direction:column; gap:14px; }
.apply-alt a{ display:inline-flex; align-items:center; gap:12px; width:fit-content; font-family:var(--font-display); font-size:1.2rem; font-weight:600; transition:color .3s ease; }
.apply-alt a i{ width:40px; height:40px; border-radius:50%; background:rgba(243,245,238,.08); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--lime); transition:background .3s ease, color .3s ease; }
.apply-alt a:hover{ color:var(--lime); }
.apply-alt a:hover i{ background:var(--lime); color:var(--ink); }
.apply-alt small{ font-size:13px; color:var(--muted-lt); }
.apply-panel{ background:var(--ink-soft); border:1px solid var(--ink-line); border-radius:var(--radius-lg); padding:40px; position:relative; }
.apply-panel h3{ font-size:1.5rem; font-weight:600; }
.apply-panel .apply-sub{ font-size:13.5px; color:var(--muted-lt); margin:8px 0 28px; }
.apply-fields{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.apply-field{ display:flex; flex-direction:column; gap:8px; position:relative; }
.apply-field.wide{ grid-column:1 / -1; }
.apply-field label{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-lt); }
.apply-field label em{ font-style:normal; color:var(--coral); }
.apply-field input, .apply-field select, .apply-field textarea{
width:100%; padding:13px 16px; border-radius:12px; border:1px solid var(--ink-line);
background:var(--ink); color:var(--paper); font-family:var(--font-body); font-size:14.5px;
transition:border-color .3s ease, box-shadow .3s ease;
}
.apply-field select{ appearance:none; -webkit-appearance:none; padding-right:42px;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 16 16' fill='%23A7ACA0'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
background-repeat:no-repeat; background-position:right 16px center;
}
.apply-field select option{ background:var(--ink); color:var(--paper); }
.apply-field textarea{ resize:vertical; min-height:110px; }
.apply-field input::placeholder, .apply-field textarea::placeholder{ color:#6F7469; }
.apply-field input:focus, .apply-field select:focus, .apply-field textarea:focus{ outline:none; border-color:var(--coral); box-shadow:0 0 0 3px rgba(255,75,51,.2); }
.apply-msg{ display:none; font-size:12.5px; color:#FF7F6E; }
.apply-field.has-error input, .apply-field.has-error select, .apply-field.has-error textarea{ border-color:var(--coral); }
.apply-field.has-error .apply-msg{ display:block; }
.apply-submit{ grid-column:1 / -1; width:100%; margin-top:6px; }
.apply-note{ grid-column:1 / -1; text-align:center; font-size:12.5px; color:var(--muted-lt); }
.apply-success{ display:none; text-align:center; padding:56px 12px; }
.apply-success.show{ display:block; animation:bannerIn .7s var(--ease) both; }
.apply-success i{ font-size:52px; color:var(--lime); }
.apply-success h3{ margin-top:18px; }
.apply-success p{ margin-top:12px; color:var(--muted-lt); line-height:1.7; }
@media (max-width:960px){
.apply-grid{ grid-template-columns:1fr; gap:44px; }
.apply-panel{ padding:30px 24px; }
}
@media (max-width:560px){ .apply-fields{ grid-template-columns:1fr; } }
/* --- about page: compact careers teaser --- */
.career-teaser{ position:relative; overflow:hidden; }
.career-teaser-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:56px; align-items:center; }
.career-teaser .role-pills{ display:flex; flex-direction:column; gap:12px; }
.career-teaser .role-pill{
display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 22px; border-radius:16px;
background:var(--ink-soft); border:1px solid var(--ink-line);
transition:border-color .3s ease, transform .4s var(--ease), background .3s ease;
}
.career-teaser .role-pill:hover{ border-color:var(--lime); transform:translateX(6px); background:#20241a; }
.career-teaser .role-pill b{ display:block; font-family:var(--font-display); font-size:1.1rem; font-weight:600; }
.career-teaser .role-pill small{ display:block; margin-top:5px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted-lt); }
.career-teaser .role-pill i{ color:var(--lime); font-size:18px; transition:transform .35s var(--ease); }
.career-teaser .role-pill:hover i{ transform:translate(3px,-3px); }
@media (max-width:1080px){ .career-teaser-grid{ grid-template-columns:1fr; gap:38px; } }
/* ==========================================================================
BUG FIX — contact/apply form validation messages never appeared.
Bootstrap's ".was-validated :invalid ~ .invalid-feedback" rule requires the
message to be a direct sibling of the invalid input — but every field here
wraps its input in a .field-wrap (for the icon), so the message ends up a
sibling of .field-wrap instead and Bootstrap's own rule never matches.
========================================================================== */
.needs-validation.was-validated .field-wrap:has(:invalid) ~ .invalid-feedback{ display:block; }
/* ==========================================================================
BUSINESS CHALLENGES — creative professional scroll-progress timeline
(scoped to .challenge-timeline; page: challenges.html)
A left-hand spine with a real fill line that grows on scroll (--progress,
set from JS) runs past five full case-style cards — reads as a journey
rather than a picker.
========================================================================== */
.challenge-timeline .section-tag{ max-width:640px; }
/* accent tokens, set per stage via data-accent */
[data-accent="coral"]{ --accent:var(--coral); }
[data-accent="amber"]{ --accent:var(--amber); }
[data-accent="cobalt"]{ --accent:var(--cobalt); }
[data-accent="lime"]{ --accent:var(--lime); }
[data-accent="teal"]{ --accent:#0e8f80; }
.ch-track{ position:relative; margin-top:64px; --progress:0; }
.ch-track::before{
content:""; position:absolute; left:35px; top:8px; bottom:8px; width:3px;
border-radius:3px; opacity:.18;
background:linear-gradient(180deg, var(--coral), var(--amber), var(--cobalt), var(--lime), var(--coral));
}
.ch-track::after{
content:""; position:absolute; left:35px; top:8px; width:3px;
height:calc(var(--progress) * 1%); max-height:calc(100% - 8px);
border-radius:3px; transition:height .12s linear;
background:linear-gradient(180deg, var(--coral), var(--amber), var(--cobalt), var(--lime), var(--coral));
}
.ch-item{ position:relative; display:grid; grid-template-columns:72px 1fr; column-gap:28px; padding-bottom:44px; }
.ch-item:last-child{ padding-bottom:0; }
.ch-node{
position:relative; z-index:2; width:72px; height:72px; border-radius:50%;
background:var(--ink); color:var(--accent); border:3px solid var(--paper);
box-shadow:0 0 0 2px var(--accent);
display:flex; align-items:center; justify-content:center; font-size:1.5rem;
}
.ch-pulse{
position:absolute; inset:-3px; border-radius:50%; border:2px solid var(--accent);
animation:chPulse 2.6s ease-out infinite;
}
@keyframes chPulse{ 0%{ transform:scale(.85); opacity:.65; } 100%{ transform:scale(1.5); opacity:0; } }
.ch-card{
position:relative; overflow:hidden; background:var(--white); border-radius:var(--radius-lg);
padding:clamp(26px,3vw,40px); border-top:4px solid var(--accent);
box-shadow:0 26px 50px -32px rgba(18,20,15,.3);
transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.ch-card:hover{ transform:translateY(-4px); box-shadow:0 34px 60px -28px rgba(18,20,15,.25); }
.ch-num{
position:absolute; top:-6px; right:14px; z-index:0; font-family:var(--font-display); font-weight:700;
font-size:5.5rem; line-height:1; color:transparent; -webkit-text-stroke:1.3px rgba(18,20,15,.08);
pointer-events:none;
}
.ch-stage{ position:relative; z-index:1; display:inline-block; font-family:var(--font-mono); font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); margin-bottom:12px; }
.ch-card h3{ position:relative; z-index:1; font-size:clamp(1.3rem,2.2vw,1.7rem); margin-bottom:16px; }
.ch-card > p{ position:relative; z-index:1; color:var(--muted); font-size:15px; line-height:1.7; margin-bottom:12px; }
.ch-card a{ color:var(--coral); text-decoration:underline; text-underline-offset:3px; }
.ch-stat{
position:relative; z-index:1; margin:22px 0; padding:18px 22px; border-radius:var(--radius-sm);
background:var(--paper-dim); border-left:4px solid var(--accent);
}
.ch-stat-num{ display:block; font-family:var(--font-display); font-weight:600; font-size:1.25rem; color:var(--ink); }
.ch-stat-desc{ margin-top:6px; color:var(--ink-soft); font-size:14px; line-height:1.55; }
.ch-stat-by{ display:block; margin-top:8px; font-family:var(--font-mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.ch-stat-by::before{ content:"— "; }
.ch-how{ position:relative; z-index:1; margin-top:22px; padding-top:22px; border-top:1px solid var(--paper-dim); }
.ch-how-tag{ font-family:var(--font-mono); font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); display:block; margin-bottom:10px; }
.ch-how p{ color:var(--muted); font-size:14px; line-height:1.7; margin-bottom:9px; }
.ch-how p:last-child{ margin-bottom:0; }
@media (max-width:820px){
.ch-track{ margin-top:48px; }
.ch-track::before, .ch-track::after{ left:22px; }
.ch-item{ grid-template-columns:44px 1fr; column-gap:18px; padding-bottom:36px; }
.ch-node{ width:44px; height:44px; font-size:1.1rem; }
.ch-num{ font-size:4rem; top:-2px; right:10px; }
.ch-card{ padding:22px 20px; }
}
@media (max-width:560px){ .ch-card{ padding:20px 18px; } }
/* ==========================================================================
PAGE-SPECIFIC STYLES
(previously embedded as