/* Partner presentation: pearl, midnight blue and warm glass. */
body {
  background: radial-gradient(ellipse at 85% 12%, #e3eaf066, transparent 28%), var(--milk);
}
.header { position:relative; padding-top:32px; padding-bottom:32px; }
.header:after { content:""; position:absolute; bottom:0; inset-inline:0; height:1px; background:linear-gradient(90deg,transparent,#213d4f26,transparent); }
.header nav>a:not(.button) { position:relative; padding-block:12px; }
.header nav>a:not(.button):after { content:""; position:absolute; bottom:5px; height:1px; left:0; right:0; background:currentColor; transform:scaleX(0); transform-origin:left; transition:transform .3s ease; }
.header nav>a:not(.button):hover:after { transform:scaleX(1); }
.hero { padding-top:64px; padding-bottom:40px; grid-template-columns:1.12fr 1fr; gap:4.5%; }
.hero-copy { position:relative; z-index:2; }
.hero h1 { font-size:clamp(53px,5.5vw,80px); line-height:1.02; letter-spacing:-3.5px; }
.hero h1 em { display:inline-block; font-size:.86em; line-height:1.12; background:linear-gradient(105deg,#775d42,#a88357 55%,#775d42); background-clip:text; -webkit-background-clip:text; color:transparent; }
.hero .lead { font-size:16px; max-width:470px; }
.hero .eyebrow { display:flex; align-items:center; gap:12px; }
.hero .eyebrow:before { content:""; width:28px; height:1px; background:#ac8862; }
.hero-visual { position:relative; padding:0 0 35px 16px; }
.hero-photo { height:550px; border-radius:140px 24px 24px 24px; box-shadow:0 30px 65px #233d4d18,inset 0 0 0 1px #fff9; }
.hero-photo img { transition:transform 1.2s cubic-bezier(.2,.7,.3,1); }
.hero-photo:hover img { transform:scale(1.035); }
.hero-photo:after { background:linear-gradient(transparent,#102838cc); }
.hero-photo figcaption { bottom:76px; }
.hero-photo .photo-link { top:24px; bottom:auto; right:23px; background:#18334826; }
.hero-photo figcaption strong { font-size:33px; }
.visual-orbit { position:absolute; inset:16px -14px 17px 0; border:1px solid #bba48455; border-radius:160px 35px 35px 35px; transform:rotate(3deg); pointer-events:none; }
.visual-caption { position:absolute; bottom:2px; right:25px; display:flex; align-items:center; gap:15px; padding:16px 25px; border-radius:19px; color:#203c4d; background:linear-gradient(125deg,#ffffffd9,#e1e9efad); border:1px solid #fff; backdrop-filter:blur(22px) saturate(140%); box-shadow:inset 0 1px 1px #fff,0 14px 38px #152b4826; }
.visual-caption>span { font-size:33px; color:#ad8b60; }
.visual-caption p { font-size:11px; line-height:1.7; margin:0; }
.visual-caption b { font-weight:500; color:#6b7a85; }
.author-strip { display:flex; align-items:center; gap:35px; padding:25px 0 40px; }
.author-strip>div { display:flex; align-items:center; gap:13px; flex:1; }
.author-mark { display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid #d1d9db; background:linear-gradient(130deg,#fff,#dbe2e8); box-shadow:inset 0 1px 1px white; font:25px Georgia,serif; }
.author-strip p { margin:0; }
.author-strip strong { display:block; font:19px Georgia,serif; }
.author-strip p>span { font-size:10px; color:#72818a; }
.author-belief { font-size:13px; line-height:1.6; }
.author-belief em { font-style:normal; color:#77838b; }
.author-strip .text-link { margin-left:auto; font-size:11px; }

/* Specular borders, moving light and a small press response. */
.button,.contact-card,.social-card,.filters button,.photo-link {
  position:relative; isolation:isolate; overflow:hidden;
  transform:translateY(0);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .35s,background .35s;
}
.button {
  border-color:#ffffffc9;
  background:linear-gradient(135deg,#ffffffb3 0%,#dce5ec80 55%,#ffffff80);
  box-shadow:inset 0 1px 1px #fff,inset 0 -2px 3px #1c3b4a13,0 6px 18px #18374e12,0 1px 3px #18374e21;
  backdrop-filter:blur(20px) saturate(150%);
}
.button:before,.contact-card:before,.social-card:before,.filters button:before {
  content:""; pointer-events:none; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at var(--px,50%) var(--py,0%),#ffffff3b,transparent 65%);
  opacity:0; transition:opacity .3s;
}
.button:after,.contact-card:after,.social-card:after {
  content:""; pointer-events:none; position:absolute; inset:-70% -30%; z-index:0;
  background:linear-gradient(110deg,transparent 40%,#ffffff2e 49%,transparent 58%);
  transform:translateX(-85%); transition:transform .85s cubic-bezier(.15,.6,.2,1);
}
.button:hover:after,.contact-card:hover:after,.social-card:hover:after { transform:translateX(85%); }
.button:hover:before,.contact-card:hover:before,.social-card:hover:before,.filters button:hover:before { opacity:1; }
.button:hover,.contact-card:hover,.social-card:hover { transform:translateY(-4px); box-shadow:inset 0 1px 1px #fff5,0 16px 35px #0c263f20; }
.button:active,.social-card:active,.contact-card:active { transform:translateY(0) scale(.98); transition-duration:.12s; }
.button.primary { background:radial-gradient(ellipse at 50% 0,#708eaa80,transparent 70%),linear-gradient(135deg,#314e68,#172f45); border:1px solid #91acc17a; box-shadow:inset 0 1px 1px #daeaffb3,inset 0 -2px 5px #071d4280,0 8px 22px #1a3b5430; }
.button.primary span { display:grid; place-items:center; width:26px; height:26px; margin:-5px -9px -5px 0; border-radius:50%; background:#ffffff13; border:1px solid #ffffff20; transition:transform .3s; }
.button:hover span { transform:translate(2px,-2px); }
.button.glass { background:linear-gradient(135deg,#ffffff1c,#bddeff09); border-color:#bed1e34a; box-shadow:inset 0 1px 1px #e6f7ff55,inset 0 -1px 3px #0b142a4d,0 5px 20px #030d2426; }
.audience { overflow:hidden; background:radial-gradient(ellipse at 80% 10%,#335b7866,transparent 40%),radial-gradient(ellipse at 0 75%,#374f6844,transparent 40%),#102334; }
.audience:before { content:""; position:absolute; pointer-events:none; inset:0; opacity:.22; background-image:radial-gradient(#a8c6dc55 .6px,transparent .6px); background-size:8px 8px; mask-image:linear-gradient(transparent,#000,transparent); }
.audience>.wrap { position:relative; }
.chart { border-radius:25px; background:linear-gradient(140deg,#c9e1f30f,#ffffff03); border-color:#d6e9ff27; box-shadow:inset 0 1px 0 #c6dfff24,0 25px 60px #050e1b26; backdrop-filter:blur(20px); }
.chart-label b { font-size:34px; font-weight:400; font-variant-numeric:tabular-nums; }
.track { height:11px; background:#020d1b66; box-shadow:inset 0 1px 3px #0005; }
.track>span { box-shadow:inset 0 1px 1px #ffffff6b,0 0 16px color-mix(in srgb,var(--bar),transparent 65%); transform-origin:left; }
.chart.in-view .track>span { animation:bar-fill 1.35s cubic-bezier(.2,.7,.2,1) both; }
.chart.in-view .yt .track>span { animation-delay:.15s; }
.chart.in-view .rt .track>span { animation-delay:.3s; }
.editorial-emblem { width:144px; height:144px; position:relative; display:flex; align-items:center; justify-content:center; flex-direction:column; border-radius:50%; border:1px solid #d3b7814a; background:radial-gradient(ellipse at 25% 10%,#c8d9de2b,transparent 70%); box-shadow:inset 0 1px 0 #fff3,0 15px 45px #050e1833; }
.editorial-emblem:before { content:""; position:absolute; inset:-10px; border-radius:50%; border:1px solid #c1d5e215; }
.editorial-emblem>span { font:53px/.9 Georgia,serif; color:#eed5ac; }
.editorial-emblem i { font:18px Georgia,serif; color:#f4e4cb; margin-top:3px; }
.editorial-emblem b { font:6px 'Segoe UI',sans-serif; letter-spacing:2px; margin-top:15px; color:#b5c6d5; }
.audience-aside h3 { font-size:32px; margin-top:27px; }
.social-hub { margin-top:70px; padding-top:40px; border-top:1px solid #cee8ff26; scroll-margin-top:35px; }
.hub-title { display:flex; justify-content:space-between; align-items:flex-end; gap:35px; margin-bottom:25px; }
.hub-title .eyebrow { margin-bottom:13px; }
.hub-title h3 { font:33px/1.2 Georgia,serif; margin:0; }
.hub-title h3 em { color:var(--gold); }
.hub-title>p { font-size:12px; color:#b5c7d3; margin:0; }
.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:13px; }
.social-card { padding:23px 24px 21px; border-radius:19px; border:1px solid #dceeff2e; background:linear-gradient(135deg,#bedfff12,#ffffff03); box-shadow:inset 0 1px 0 #d5eaff21,0 5px 18px #03132313; }
.social-card:hover { border-color:#dceeff70; background:linear-gradient(135deg,#bedfff20,#ffffff08); }
.social-icon { display:grid; place-items:center; width:40px; height:40px; border:1px solid #d8ecff38; box-shadow:inset 0 1px 1px #fff4; background:linear-gradient(135deg,#83baf03b,#83baf00d); border-radius:12px; font-size:17px; font-weight:650; color:#a8d3ff; }
.social-yt .social-icon { color:#ffc9ad; background:linear-gradient(135deg,#efad9240,#efad9205); }
.social-rt .social-icon { color:#c8bfff; background:linear-gradient(135deg,#b0a0f340,#b0a0f305); }
.social-tg .social-icon { color:#a4dce7; }
.social-dz .social-icon { color:#e8d8b9; }
.social-tt .social-icon { color:#e5bbc8; }
.social-arrow { position:absolute; right:23px; top:25px; font-size:22px; color:#92aabb; transition:transform .3s,color .3s; }
.social-card:hover .social-arrow { color:white; transform:translate(3px,-3px); }
.social-card h4 { font-size:19px; font-weight:500; line-height:1.4; margin:18px 0 3px; }
.social-card p { color:#adc1cf; font-size:11px; margin:0 0 20px; }
.social-meta { display:block; font-size:11px; padding-top:12px; border-top:1px solid #d3e8ff1a; color:#d0dee8; }
.hub-footnote { color:#8ba2b4; font-size:10px; margin:16px 0 0; }
.formats .section-head,.work .section-head { margin-bottom:40px; }
.format-grid { border:0; gap:15px; }
.format-grid article,.format-grid article+article { border:1px solid #ced8dc; padding:25px; border-radius:20px; background:linear-gradient(145deg,#ffffff80,#e4e9ea26); box-shadow:inset 0 1px 0 #fff,0 9px 20px #102e4110; transition:transform .35s,box-shadow .35s; }
.format-grid article:hover { transform:translateY(-5px); box-shadow:0 16px 35px #102e4117; }
.format-grid article h3 { font-size:25px; }
.format-grid a { display:inline-block; min-height:30px; padding-top:5px; }
.number { display:grid; place-items:center; width:35px; height:35px; border:1px solid #c8d2d6; border-radius:50%; margin-bottom:25px; }
.work { background:linear-gradient(145deg,#e1e9ed,#f0f3f2); }
.work-photo { border:1px solid #ffffff; box-shadow:0 15px 40px #1b3c4d12; }
.filters button { background:linear-gradient(135deg,#ffffffa6,#d4dfe780); box-shadow:inset 0 1px 0 #fff; border-color:#fff9; }
.filters button.active { background:linear-gradient(135deg,#365369,#192f42); border-color:#557086; box-shadow:inset 0 1px 1px #bfdcff66,0 5px 15px #16314520; }
.case { padding:20px 8px; border-radius:9px; }
.case:hover { background:#ffffff80; padding-left:12px; }
.case b { display:grid; place-items:center; flex-shrink:0; height:31px; width:31px; border-radius:50%; background:#ffffff75; border:1px solid #c7d5dc; transition:transform .3s; }
.case:hover b { transform:rotate(45deg); }
.steps span { color:#8a6944; }
.contact { overflow:hidden; position:relative; background:radial-gradient(ellipse at 15% 120%,#a7824a45,transparent 50%),radial-gradient(ellipse at 100% 0,#42779750,transparent 60%),#112638; }
.contact:before { content:""; position:absolute; right:-140px; top:-200px; width:650px; height:650px; border-radius:50%; border:1px solid #b1d0e420; box-shadow:0 0 0 55px #aac5d409,0 0 0 110px #aac5d406; pointer-events:none; }
.contact-grid { position:relative; gap:55px; }
.contact h2 { font-size:clamp(42px,4.6vw,64px); }
.contact-card { backdrop-filter:blur(22px) saturate(140%); background:linear-gradient(130deg,#e1f2ff17,#8db9d909); border:1px solid #d4e8ff38; box-shadow:inset 0 1px 0 #def2ff59,0 12px 35px #0002; }
.contact-card strong { margin:13px 0 10px; }
.contact-card strong b { display:grid; place-items:center; width:38px; height:38px; border-radius:50%; font:25px Georgia; border:1px solid #e4f4ff40; background:linear-gradient(135deg,#ffffff1c,#ffffff06); transition:transform .3s; }
.contact-card:hover b { transform:translate(3px,-3px); }
.footer .brand { font-size:25px; }
.footer { padding-block:38px; }

/* Reveal only after the observer confirms an element is onscreen.
   Content stays visible when JavaScript is absent or animation is disabled. */
.reveal.in-view { animation:rise-in .8s cubic-bezier(.2,.7,.2,1) both; }
.hero-copy { animation:rise-in .9s cubic-bezier(.2,.7,.2,1) both; }
.hero-visual { animation:rise-in 1s .12s cubic-bezier(.2,.7,.2,1) both; }
@keyframes rise-in { from { opacity:.15; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes bar-fill { from { transform:scaleX(.05); } to { transform:scaleX(1); } }
@media (min-width:1250px) { .hero { padding-top:72px; } .hero h1 { font-size:80px; } }
@media (max-width:1000px) {
  .header nav { gap:15px; }
  .hero h1 { font-size:60px; letter-spacing:-2.5px; }
  .hero-photo { height:520px; }
  .hero-photo figcaption strong { font-size:29px; }
  .hero .lead { font-size:14px; }
  .hero .actions { gap:16px; }
  .hero .button { padding:15px 20px; gap:18px; font-size:12px; }
  .visual-caption { padding:13px 18px; right:12px; }
  .hub-title h3 { font-size:29px; }
  .format-grid article,.format-grid article+article,.format-grid article:nth-child(3),.format-grid article:nth-child(4) { padding:25px; border:1px solid #ced8dc; }
}
@media (max-width:760px) {
  .header .brand { font-size:25px; }
  .header nav { font-size:11px; }
  .header .button.small { padding:10px 13px; font-size:11px; gap:10px; }
  .hero h1 { font-size:52px; }
  .hero-photo { height:485px; }
  .author-strip { gap:20px; flex-wrap:wrap; }
  .author-belief { font-size:12px; }
  .author-strip .text-link { margin:0; }
  .social-grid { gap:10px; }
  .social-card { padding:18px; }
  .social-card h4 { font-size:17px; }
  .hub-title { align-items:flex-start; flex-direction:column; gap:15px; }
}
@media (max-width:650px) {
  .header { padding:22px 0; }
  .header nav { gap:8px; }
  .hero { display:grid; grid-template-columns:1fr; padding:35px 0 25px; gap:35px; }
  .hero h1 { font-size:clamp(48px,13.2vw,68px); letter-spacing:-2px; }
  .hero .lead { font-size:15px; }
  .hero-visual { padding-left:8px; }
  .hero-photo { height:420px; border-top-left-radius:100px; }
  .visual-orbit { right:-5px; border-top-left-radius:115px; }
  .visual-caption { right:18px; }
  .author-strip { padding:10px 0 35px; gap:22px; }
  .author-strip>div { flex-basis:45%; }
  .author-belief { flex-basis:45%; font-size:11px; }
  .author-strip .text-link { margin-left:60px; }
  .audience-aside { display:grid; grid-template-columns:100px 1fr; gap:0 25px; }
  .editorial-emblem { width:90px; height:90px; grid-row:span 2; margin:12px 0 0 8px; }
  .editorial-emblem>span { font-size:35px; }
  .editorial-emblem i { font-size:13px; }
  .editorial-emblem b { font-size:4px; letter-spacing:1px; margin-top:8px; }
  .audience-aside h3 { font-size:26px; margin:8px 0 13px; }
  .audience-aside p { font-size:12px; margin-bottom:20px; }
  .audience-aside .button { grid-column:2; justify-self:start; gap:8px; padding:12px 17px; font-size:11px; }
  .social-hub { margin-top:40px; padding-top:30px; }
  .social-grid { grid-template-columns:1fr 1fr; }
  .social-card { padding:18px 16px; border-radius:15px; }
  .social-arrow { right:16px; top:18px; }
  .social-meta { font-size:10px; }
  .social-card p { font-size:10px; }
  .format-grid { gap:12px; }
  .format-grid article,.format-grid article+article,.format-grid article:nth-child(3),.format-grid article:nth-child(4) { padding:20px 17px; }
  .format-grid article h3 { font-size:23px; }
  .contact h2 { font-size:43px; }
  .contact-grid { gap:25px; }
  .footer>a { min-height:25px; }
}
@media (prefers-reduced-motion:reduce) {
  .reveal.in-view,.hero-copy,.hero-visual,.chart.in-view .track>span { animation:none; }
  .button:hover,.social-card:hover,.contact-card:hover,.format-grid article:hover { transform:none; }
}


/* A playful three-way priority selector: exactly two are always selected. */
.priority-section { background:radial-gradient(ellipse at 70% 40%,#dde7eb99,transparent 65%),#f3f0e8; padding:75px 0; }
.priority-layout { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
.priority-copy>p { color:#6b7b84; font-size:14px; max-width:340px; margin-bottom:25px; }
.priority-copy h2 { font-size:53px; }
.priority-console { background:linear-gradient(135deg,#ffffffa8,#dce5e98c); border:1px solid #fff; border-radius:28px; padding:28px 33px; box-shadow:inset 0 1px 2px white,inset 0 -1px 2px #5271841c,0 25px 55px #17374b13; }
.priority-console-head { display:flex; justify-content:space-between; align-items:center; padding-bottom:20px; border-bottom:1px solid #97adb62b; }
.priority-console-head>span:first-child { color:#71838d; font-size:9px; letter-spacing:1.6px; }
.priority-counter { font-size:18px; font-variant-numeric:tabular-nums; color:#2b4a5d; }
.priority-counter i { font-style:normal; font-size:12px; color:#95a5ad; }
.priority-controls { display:grid; gap:17px; padding:26px 0; }
.priority-switch { --switch:#aebac2; display:flex; align-items:center; gap:24px; width:100%; text-align:left; border:0; background:none; color:#4b6270; padding:3px 0; -webkit-tap-highlight-color:transparent; }
.priority-switch:disabled { cursor:default; }
.priority-quality { --switch:#bda276; }
.priority-cheap { --switch:#6b9c99; }
.priority-fast { --switch:#668da7; }
.priority-track { width:93px; height:46px; flex-shrink:0; display:block; border-radius:40px; position:relative; border:1px solid #bdcbd4; background:#d3dde3; box-shadow:inset 0 2px 6px #1c3a4d24,0 1px 0 white; transition:background .4s,border-color .4s,box-shadow .4s; }
.priority-thumb { position:absolute; width:38px; height:38px; left:3px; top:3px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(140deg,#fff,#dce5ec); border:1px solid #ffffffc9; box-shadow:0 2px 5px #1a334e30,inset 0 1px 1px #fff; transition:transform .48s cubic-bezier(.22,1.35,.35,1),color .35s; color:#99aab5; }
.priority-thumb svg { width:19px; height:19px; stroke:currentColor; stroke-width:1.4; fill:none; stroke-linejoin:round; }
.priority-switch[aria-checked=true] .priority-track { background:var(--switch); border-color:color-mix(in srgb,var(--switch),#244354 25%); box-shadow:inset 0 2px 5px #112b3d33,0 1px 0 #fff; }
.priority-switch[aria-checked=true] .priority-thumb { transform:translateX(47px); color:color-mix(in srgb,var(--switch),#1c3b4e 40%); }
.priority-label { font:27px/1.2 Georgia,serif; transition:color .3s; }
.priority-switch[aria-checked=true] .priority-label { color:#1b394c; }
.priority-switch:hover .priority-thumb { box-shadow:0 3px 12px #19384e40,inset 0 1px 1px #fff; }
.priority-result { border-top:1px solid #97adb633; padding-top:23px; min-height:140px; }
.priority-result-label { display:block; font-size:8px; letter-spacing:1.5px; color:#7e8e96; margin-bottom:10px; }
.priority-result h3 { font:23px/1.25 Georgia,serif; color:#244458; margin:0 0 10px; }
.priority-result p { margin:0; color:#6d808c; font-size:12px; line-height:1.6; }
.priority-hint { font-size:9px; color:#7f909a; margin:20px 0 0; }
.priority-result.is-changing { animation:priority-feedback .4s ease both; }
@keyframes priority-feedback { from { opacity:.35; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:950px) { .priority-layout { gap:35px; } .priority-console { padding:25px; } .priority-copy h2 { font-size:44px; } .priority-label { font-size:25px; } .priority-switch { gap:18px; } }
@media(max-width:650px) { .priority-section { padding:50px 0; } .priority-layout { grid-template-columns:1fr; gap:25px; } .priority-copy h2 { font-size:40px; } .priority-console { padding:25px; } .priority-controls { gap:19px; } }
@media(prefers-reduced-motion:reduce) { .priority-thumb,.priority-track { transition:none; } .priority-result.is-changing { animation:none; } }

