/* ============================================================
   Turtle Labs Studio: components

   Sits on top of tl-system.css, which carries the palette, the glow, the
   type scale, the 1240px measure and the 96px rhythm ported from BrandOS.
   Only what is genuinely the Studio's own belongs here.

   The Studio's accent is orange, its place in the group colour system.
   ============================================================ */

:root {
  --cta: #FF8C00; --cta-ink: #1A0C00;
  --accent-line: #FF8C00; --bullet: #FF8C00;
}
:root[data-theme="light"] { --cta: #B35F00; --cta-ink: #FFFFFF;
  --accent-line: #B35F00; --bullet: #B35F00; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) { --cta: #B35F00; --cta-ink: #FFFFFF;
    --accent-line: #B35F00; --bullet: #B35F00; }
}

.brand em { font-style: normal; color: var(--cta); }

/* ---- hero -------------------------------------------------------------- */

.hero { padding: clamp(56px, 9vw, 116px) 24px clamp(40px, 6vw, 72px); position: relative; z-index: 4; }
.hero h1 { max-width: 15ch; }
.hero .lede { max-width: 54ch; }

/* ---- figures ----------------------------------------------------------- */

.facts { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 44px; }
@media (min-width: 900px) { .facts { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.fact { position: relative; overflow: hidden; padding: 22px 20px; border-radius: 20px;
        background: var(--bg2); border: 1px solid var(--line2); }
/* No bar: the figure itself is the accent. */
.fact b { display: block; font-family: 'Outfit', sans-serif; font-weight: 800;
          font-size: clamp(28px, 3.8vw, 38px); line-height: 1; color: var(--fc);
          letter-spacing: -0.04em; }
.fact b u { text-decoration: none; }
.fact b i { display: block; font-style: normal; font-size: 10.5px; font-weight: 700;
            letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.fact span { display: block; font-size: 12.5px; line-height: 1.45; margin-top: 12px; color: var(--faint); }

/* ---- services ---------------------------------------------------------- */

.svcgrid { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 34px; }
@media (min-width: 700px)  { .svcgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .svcgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.svc { position: relative; overflow: hidden; display: flex; flex-direction: column;
       padding: 28px 24px; border-radius: 22px; background: var(--bg2);
       border: 1px solid var(--line2); text-decoration: none;
       transition: transform .35s ease, border-color .35s ease; }
.svc::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 2px;
               background: linear-gradient(90deg, var(--sc), transparent 78%); opacity: .85; }
@media (hover: hover) { .svc:hover { transform: translateY(-4px); border-color: rgba(var(--ink),.26); } }
.svc > * { position: relative; }
.svc-num { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 12px;
           letter-spacing: .1em; color: var(--sc); }
.svc strong { font-family: 'Outfit', sans-serif; font-size: 19px; line-height: 1.2;
              margin: 16px 0 10px; letter-spacing: -0.02em; }
.svc-lead { color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.svc-go { margin-top: auto; padding-top: 20px; font-size: 13px; font-weight: 700; color: var(--sc); }

.svc-full { display: grid; gap: 22px; grid-template-columns: 1fr; scroll-margin-top: 92px;
            padding-bottom: var(--gap-section); }
@media (min-width: 820px) { .svc-full { grid-template-columns: 130px 1fr; gap: 44px; } }
.svc-num-lg { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 58px; line-height: 1;
              color: var(--sc); opacity: .5; margin: 0; letter-spacing: -0.05em; }
.svc-full .bullets { --bullet: var(--sc); }
.signal { color: var(--faint); font-size: 13.5px; margin: 0; padding-left: 26px;
          border-left: 2px solid var(--sc); }

/* ---- work ------------------------------------------------------------------ */

.workgrid { display: grid; gap: 16px; grid-template-columns: 1fr; margin-top: 30px; }
@media (min-width: 660px)  { .workgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .workgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work a { display: flex; flex-direction: column; height: 100%; text-decoration: none;
          border: 1px solid var(--line2); border-radius: 22px; overflow: hidden;
          background: var(--bg2); transition: transform .35s ease, border-color .35s ease; }
@media (hover: hover) { .work a:hover { transform: translateY(-4px); border-color: var(--wc); } }
.work-art { display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden;
            background: var(--card); }
/* Client marks on the thumbnails get the same treatment as the logo strip, so
   a black-on-white mark does not arrive inside its own white rectangle. */
.work-art img { width: 100%; height: 100%; object-fit: cover; }
.work-art.is-mark { padding: 30px; background: var(--card); }
.work-art.is-mark img { object-fit: contain; filter: var(--logo-filter); opacity: .8; }
.work-art span { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 36px;
                 color: var(--wc); letter-spacing: .04em; }
.work-body { display: flex; flex-direction: column; padding: 22px; flex: 1; }
.work-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
            color: var(--wc); margin-bottom: 12px; }
.work strong { font-family: 'Outfit', sans-serif; font-size: 19px; line-height: 1.22;
               color: var(--text); letter-spacing: -0.02em; }
.work-desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin-top: 10px; }
.work-meta { margin-top: auto; padding-top: 18px; font-size: 12px; color: var(--faint); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.cats span { font-size: 12px; color: var(--muted); border: 1px solid var(--line2);
             border-radius: 999px; padding: 6px 14px; }

/* ---- a case study ------------------------------------------------------------ */

.case-head h1 { max-width: 17ch; }
.case-meta { display: flex; flex-wrap: wrap; gap: 14px 44px; margin: 30px 0 0; }
.case-meta dt { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
                color: var(--faint); margin: 0 0 5px; }
.case-meta dd { margin: 0; font-size: 15px; color: var(--text); }
.case-shot { margin: 0 0 var(--gap-section); border-radius: 26px; overflow: hidden;
             border: 1px solid var(--line2); }
.case-shot img { display: block; width: 100%; height: auto; }
.case-shot.is-mark { padding: 8%; background: var(--card); }
.case-shot.is-mark img { filter: var(--logo-filter); opacity: .85; }
.outcomes { --bullet: var(--wc); }

/* ---- process --------------------------------------------------------------------- */

.process { list-style: none; padding: 0; margin: 34px 0 30px; display: grid; gap: 14px;
           grid-template-columns: 1fr; }
@media (min-width: 700px)  { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .process { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.process li { position: relative; overflow: hidden; display: flex; flex-direction: column;
              padding: 26px 24px; border-radius: 20px; background: var(--bg2);
              border: 1px solid var(--line2); }
.process li::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
                      background: linear-gradient(90deg, var(--pc), transparent); }
.p-step { font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 28px; line-height: 1;
          color: var(--pc); opacity: .6; letter-spacing: -0.04em; }
.p-when { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
          color: var(--faint); margin-top: 16px; }
.process strong { font-family: 'Outfit', sans-serif; font-size: 19px; margin: 8px 0 10px;
                  letter-spacing: -0.02em; }
.process li > span:last-child { color: var(--muted); font-size: 14px; line-height: 1.5; }

/* ---- principles ------------------------------------------------------------------- */

.principles { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 12px; }
@media (min-width: 900px) { .principles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.principles li { padding: 24px; border-radius: 18px; background: var(--bg2);
                 border: 1px solid var(--line2); }
.principles strong { display: block; font-family: 'Outfit', sans-serif; font-size: 17px;
                     margin-bottom: 8px; letter-spacing: -0.02em; }
.principles span { color: var(--muted); font-size: 14.5px; line-height: 1.5; }

/* ---- quote ----------------------------------------------------------------------- */

.quote-band blockquote { margin: 0; max-width: 22ch; }
.quote-band p { font-family: 'Outfit', sans-serif; font-weight: 700;
                font-size: clamp(24px, 3.4vw, 40px); line-height: 1.2; color: var(--text);
                letter-spacing: -0.03em; max-width: none; }
.quote-band cite { display: block; font-style: normal; font-size: 13.5px; color: var(--faint);
                   margin-top: 22px; }

/* ---- two column ------------------------------------------------------------------- */

.two-col { display: grid; gap: 36px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1.05fr 1fr; gap: 56px; } }

/* ---- cta band ---------------------------------------------------------------------- */

.cta-band { position: relative; overflow: hidden; border-radius: 28px; padding: 48px 40px;
            max-width: calc(var(--maxw) - 48px); margin: 0 auto var(--gap-section);
            background: var(--bg2); border: 1px solid var(--line2); }
.cta-band::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg,#C80018,#FF8C00,#FFA500,#00A86B,#0066B2,#00A3E0); }
.cta-band h2 { margin-bottom: 12px; }

/* ---- contact ------------------------------------------------------------------------ */

.contactform { background: var(--bg2); border: 1px solid var(--line2); border-radius: 26px;
               padding: 34px; max-width: 720px; }
.contact-aside { margin-top: 36px; max-width: 720px; }
.contact-aside h2 { font-size: clamp(20px, 2.4vw, 24px); }
.contact-aside .bullets li { color: var(--muted); }

@media (max-width: 430px) {
  .contactform { padding: 22px; border-radius: 20px; }
  .cta-band { padding: 30px 22px; border-radius: 22px; }
  .foot-call { padding: 28px 20px; }
  .foot-call .btn { width: 100%; justify-content: center; }
}

/* ---- client reviews ----------------------------------------------------
   One quote in a 22ch column read as squeezed against the left edge, which
   it was. Six of them in a masonry-ish grid uses the width, and one
   testimonial no longer looks like the only one there was. */

.reviews { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 32px; }
@media (min-width: 720px)  { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review { margin: 0; display: flex; flex-direction: column; padding: 28px 26px;
          border-radius: 22px; background: var(--bg2); border: 1px solid var(--line2);
          transition: transform .35s ease, border-color .35s ease; }
@media (hover: hover) { .review:hover { transform: translateY(-3px); border-color: rgba(var(--ink),.24); } }
.review blockquote { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 600;
                     font-size: 17px; line-height: 1.42; letter-spacing: -0.015em;
                     color: var(--text); max-width: none; }
.review blockquote::before { content: '\201C'; display: block; font-size: 44px; line-height: .6;
                             color: var(--cta); opacity: .5; margin-bottom: 10px; }
.review figcaption { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 22px; }
.review-av { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
             flex-shrink: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: 13px;
             background: var(--av, var(--bg)); color: var(--avf, var(--text));
             border: 1px solid var(--line); }
.review-who { display: flex; flex-direction: column; min-width: 0; }
.review-who strong { font-size: 14.5px; color: var(--text); font-weight: 700; }
.review-who span { font-size: 12.5px; color: var(--faint); }

/* The icon leads each card, with the ordinal beside it rather than above. */
.svc .ico { margin-bottom: 16px; }
.svc-num { display: block; }
.process li .ico { margin-bottom: 16px; }
.p-step { font-size: 22px; opacity: .5; }
.svc-num-lg { display: flex; align-items: center; gap: 14px; font-size: 34px; }
@media (min-width: 820px) { .svc-num-lg { flex-direction: column; align-items: flex-start; gap: 16px; } }