/* ATT Ventures — Working structure. All assets are served locally. */
@font-face {
  font-family:Barlow;
  src:url('/assets/fonts/barlow-condensed-700.ttf') format('truetype');
  font-weight:700;
  font-display:swap}

@font-face {
  font-family:Inter;
  src:url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight:100 900;
  font-display:swap}

:root {
  --ink:#101f2c;
  --paper:#f5f7f8;
  --accent:#d4ed55;
  --muted:#53616b;
  --line:#cbd2d7;
  --gutter:clamp(24px,4.5vw,64px)}

* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth;
  scroll-padding-top:24px}
body {
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:16px/1.65 Inter,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,ol,dd {
  margin:0}
a {
  color:inherit;
  text-underline-offset:5px}
a:hover {
  text-decoration-thickness:2px}
svg {
  display:block;
  max-width:100%}
ul[role=list],ol[role=list] {
  list-style:none;
  padding:0}
h1,h2,h3 {
  line-height:1.08}
h1,.display,.section-intro,.work-copy h3,.contact h2 {
  font-family:Barlow,'Arial Narrow',sans-serif;
  font-weight:700}
em {
  font-style:normal}
::selection {
  background:var(--accent);
  color:var(--ink)}
:focus-visible {
  outline:3px solid currentColor;
  outline-offset:6px}
.wrap {
  max-width:1408px;
  margin:auto;
  padding-inline:var(--gutter)}
.skip-link {
  position:absolute;
  left:24px;
  top:-90px;
  z-index:99;
  background:var(--accent);
  color:var(--ink);
  padding:12px 18px}
.skip-link:focus {
  top:12px}
.site-header {
  background:var(--ink);
  color:var(--paper)}
.site-header .wrap {
  min-height:96px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px}
.brand {
  display:inline-flex;
  align-items:center;
  gap:14px;
  text-decoration:none}
.brand-mark {
  width:44px;
  height:32px;
  flex:none}
.brand-name {
  font-size:18px;
  font-weight:600;
  letter-spacing:-.5px}
.brand-name span {
  font-size:10px;
  letter-spacing:1px;
  margin-left:7px}
.site-nav ul {
  display:flex;
  gap:32px;
  align-items:center}
.site-nav a {
  font-size:14px;
  text-decoration:none;
  padding-block:12px}
.site-nav a:hover {
  text-decoration:underline}
.site-nav .nav-cta {
  border-bottom:1px solid var(--accent);
  color:var(--accent)}

.hero {
  background:var(--ink);
  color:var(--paper)}
.hero-topline,.hero-baseline {
  display:flex;
  justify-content:space-between;
  gap:20px;
  border-top:1px solid #40505d;
  padding-block:21px;
  font-size:12px;
  letter-spacing:.03em;
  color:#b8c3ca}
.hero-grid {
  display:grid;
  grid-template-columns:7fr 5fr;
  gap:6%;
  padding:40px 0 64px;
  align-items:center}
.hero h1 {
  font-size:clamp(70px,7.9vw,114px);
  line-height:.96;
  letter-spacing:-.015em}
.hero .lede {
  max-width:435px;
  color:#b8c3ca;
  margin:32px 0 24px;
  font-size:17px;
  line-height:1.7}
.text-link {
  display:inline-flex;
  gap:36px;
  align-items:center;
  font-size:14px;
  text-decoration:none;
  border-bottom:1px solid currentColor;
  padding-bottom:8px}
.text-link span {
  font-size:24px;
  line-height:1}
.identity {
  background:var(--accent);
  color:var(--ink);
  padding:30px;
  margin-top:35px}
.identity-art {
  aspect-ratio:1.12;
  display:flex;
  align-items:center}
.identity-art .brand-mark {
  width:100%;
  height:auto}
.identity-caption {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--ink);
  padding-top:16px;
  font-size:13px;
  letter-spacing:.12em;
  font-weight:600}
.hero-baseline a {
  text-decoration:none;
  color:var(--paper)}
.hero-baseline a span {
  margin-left:24px}

.section {
  padding-block:112px}
.section-grid {
  display:grid;
  grid-template-columns:3fr 9fr;
  gap:40px}
.section-label {
  display:flex;
  flex-direction:column;
  gap:20px}
.index {
  font-size:12px;
  color:var(--muted)}
.section-label h2 {
  font-size:16px;
  font-weight:500}
.section-intro {
  font-size:clamp(42px,5vw,64px);
  line-height:1.05;
  margin-bottom:48px}
.service-list li {
  border-top:1px solid var(--line);
  padding:28px 0;
  display:grid;
  grid-template-columns:30px 1fr 1fr;
  gap:24px;
  align-items:start}
.service-list li:last-child {
  border-bottom:1px solid var(--line)}
.service-num {
  font-size:11px;
  color:var(--muted);
  padding-top:4px}
.service-list h3 {
  font-size:20px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:-.5px}
.service-list p {
  font-size:15px;
  color:var(--muted);
  max-width:28em}
.work-section {
  padding-block:80px;
  background:var(--ink);
  color:var(--paper)}
.work-section .index {
  color:var(--accent)}
.work-copy {
  max-width:650px}
.work-copy h3 {
  font-size:clamp(44px,5vw,68px);
  margin-bottom:32px}
.work-copy p {
  max-width:520px;
  color:#b8c3ca;
  margin-bottom:16px}
.work-copy .text-link {
  margin-top:20px;
  color:var(--accent)}
.brands {
  padding-block:56px;
  border-bottom:1px solid var(--line)}
.brands p {
  max-width:600px;
  color:var(--muted)}
.brands a {
  color:var(--ink);
  white-space:nowrap}
.contact {
  padding-block:88px 96px}
.contact-heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:2px solid var(--ink);
  padding-bottom:32px;
  margin-bottom:32px}
.contact h2 {
  font-size:clamp(64px,8vw,112px)}
.contact-heading>span {
  font-size:80px;
  line-height:1}
.contact-grid {
  display:grid;
  grid-template-columns:1.3fr 1fr;
  gap:64px}
.contact-grid p {
  font-size:14px;
  color:var(--muted);
  margin-bottom:20px}
.contact-email {
  font-size:clamp(18px,2.4vw,30px);
  letter-spacing:-.5px;
  overflow-wrap:anywhere}
.details {
  margin:0}
.details>div {
  display:grid;
  grid-template-columns:140px 1fr;
  gap:20px;
  margin-bottom:24px}
.details dt {
  font-size:12px;
  color:var(--muted)}
.details dd {
  font-size:14px}
.details a {
  text-decoration:none}

.site-footer {
  background:var(--ink);
  color:#b8c3ca;
  font-size:13px}
.footer-top {
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:40px;
  padding:64px 0 48px}
.site-footer .brand {
  color:var(--paper)}
.footer-about {
  margin-top:20px;
  max-width:280px}
.footer-col h2 {
  font-size:12px;
  font-weight:500;
  color:var(--paper);
  margin-bottom:20px}
.footer-col li {
  margin:8px 0}
.footer-col a {
  text-decoration:none}
.footer-col a:hover {
  text-decoration:underline}
.footer-bottom {
  border-top:1px solid #40505d;
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  gap:24px;
  font-size:11px}
.footer-bottom p:last-child {
  max-width:570px}
.page-head {
  padding:72px 0 56px;
  border-bottom:1px solid var(--line)}
.eyebrow {
  font-size:12px;
  color:var(--muted)}
.page-head h1 {
  font-size:clamp(64px,8vw,108px);
  margin:20px 0}
.page-head p:last-child {
  font-size:13px;
  color:var(--muted)}
.legal {
  display:grid;
  grid-template-columns:240px minmax(0,1fr);
  gap:80px;
  padding-top:64px;
  padding-bottom:100px}
.toc {
  position:sticky;
  top:32px;
  align-self:start}
.toc h2 {
  font-size:13px;
  margin-bottom:20px}
.toc a {
  display:block;
  text-decoration:none;
  font-size:13px;
  color:var(--muted);
  padding:6px 0}
.toc a:hover {
  color:var(--ink);
  text-decoration:underline}
.prose {
  max-width:720px;
  min-width:0}
.prose>.lede {
  font-size:20px;
  line-height:1.6;
  margin-bottom:48px}
.prose section+section {
  margin-top:40px;
  padding-top:40px;
  border-top:1px solid var(--line)}
.prose h2 {
  font-family:Barlow,sans-serif;
  font-size:34px;
  margin-bottom:20px}
.prose .n {
  font:12px Inter,sans-serif;
  color:var(--muted);
  margin-right:16px}
.prose p,.prose ul {
  color:var(--muted)}
.prose p+p,.prose p+ul,.prose ul+p {
  margin-top:16px}
.prose li+li {
  margin-top:6px}
.prose ul {
  padding-left:24px}
.prose strong {
  color:var(--ink);
  font-weight:600}
.prose address {
  font-style:normal;
  margin-top:20px}
.prose a {
  overflow-wrap:anywhere}
.notfound {
  padding:64px 0 88px}
.notfound .big {
  font:700 clamp(140px,23vw,280px)/1 Barlow,sans-serif;
  letter-spacing:-.03em}
.notfound h1 {
  font-size:clamp(48px,6vw,76px);
  margin:24px 0}
.notfound .lede {
  max-width:520px;
  color:var(--muted);
  margin-bottom:32px}
.hero-actions {
  display:flex;
  flex-wrap:wrap;
  gap:16px}
.btn {
  display:inline-flex;
  align-items:center;
  gap:32px;
  padding:14px 20px;
  border:1px solid var(--ink);
  text-decoration:none;
  font-size:14px}
.btn svg {
  width:16px}
.btn-primary {
  background:var(--ink);
  color:var(--paper)}
.btn:hover {
  background:var(--accent);
  color:var(--ink)}

@media(max-width:1050px) {
  .service-list li {
  grid-template-columns:24px 1fr;
  gap:12px 20px}
.service-list p {
  grid-column:2;
  max-width:40em}
.contact-grid {
  gap:32px}
.details>div {
  grid-template-columns:1fr;
  gap:4px}
.legal {
  gap:40px}
.hero-grid {
  gap:4%}
.identity {
  padding:22px}
}

@media(max-width:799px) {
  .site-header .wrap {
  min-height:80px}
.site-nav ul {
  gap:20px}
.site-nav .nav-secondary {
  display:none}
.hero-topline {
  font-size:10px}
.hero-grid {
  grid-template-columns:1fr;
  gap:40px;
  padding-top:32px}
.hero h1 {
  font-size:clamp(68px,12vw,100px)}
.hero .lede {
  max-width:520px}
.identity {
  margin:0;
  max-width:480px;
  width:100%;
  justify-self:end}
.identity-art {
  aspect-ratio:1.5}
.hero-baseline {
  font-size:10px}
.hero-baseline a span {
  margin-left:4px}
.section {
  padding-block:64px}
.section-grid {
  grid-template-columns:1fr;
  gap:32px}
.section-label {
  flex-direction:row;
  gap:20px;
  align-items:center}
.section-intro {
  margin-bottom:32px}
.work-section {
  padding-block:56px}
.brands {
  padding-block:40px}
.contact {
  padding-block:56px}
.contact-grid {
  grid-template-columns:1fr;
  gap:40px}
.details {
  display:grid;
  grid-template-columns:1fr 1.5fr;
  gap:20px}
.contact-heading>span {
  font-size:56px}
.footer-top {
  grid-template-columns:repeat(3,1fr);
  gap:32px 20px;
  padding-block:40px}
.footer-brand {
  grid-column:1/-1}
.footer-bottom {
  flex-direction:column;
  gap:12px}
.legal {
  grid-template-columns:1fr;
  padding-top:32px;
  gap:48px}
.toc {
  position:static}
.toc ol {
  columns:2;
  column-gap:24px}
.toc li {
  break-inside:avoid}
.page-head {
  padding-block:48px 32px}
}

@media(max-width:420px) {
  .brand-name {
  font-size:16px}
.brand-name span {
  display:none}
.brand {
  gap:10px}
.brand-mark {
  width:36px}
.hero-topline {
  gap:16px}
.hero-topline span:last-child {
  max-width:140px;
  text-align:right}
.hero h1 {
  font-size:clamp(50px,15vw,62px)}
.identity {
  padding:24px}
.hero-baseline {
  align-items:center}
.hero-baseline>span {
  max-width:150px}
.service-list h3 {
  font-size:19px}
.footer-top {
  grid-template-columns:1fr 1fr}
.footer-col:last-child {
  grid-column:1/-1}
.toc ol {
  columns:1}
.prose h2 {
  font-size:30px}
.contact h2 {
  font-size:64px}
}

@media(prefers-reduced-motion:no-preference) {
  .identity {
  animation:assemble .6s ease-out both}
a {
  transition:background-color .16s,color .16s}
@keyframes assemble {
  from {
  transform:translateY(12px)}
to {
  transform:translateY(0)}
}
}

@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
}

@media print {
  .site-header,.site-footer,.toc,.skip-link {
  display:none}
body {
  background:white;
  color:black}
.legal {
  display:block;
  padding:0}
.prose {
  max-width:none}
}