.page-section { --page-gutter:clamp(20px,2.78vw,64px); --section-heading-size:clamp(28px,calc(17.4117647059px + 2.9411764706vw),40px); padding:clamp(72px,9vw,144px) var(--page-gutter); background:transparent; color:#141414; transition:color 250ms ease; }
html.work-active .page-section { color:#F5F4F4; }
@media (prefers-reduced-motion:reduce) { .page-section { transition:none; } }
html[data-view="llm"] .page-section { display:none; }
.page-section h2 { margin:0; font-size:var(--section-heading-size); font-weight:400; line-height:1; }
#work { padding-bottom:clamp(24px,3vw,48px); }
#work > h2 { margin-bottom:clamp(48px,7vw,112px); }
 .work-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(14px,1.4vw,24px); color:inherit; align-items:start; row-gap:0; }
.work-row + .work-row { margin-top:clamp(88px,12vw,190px); }
.work-copy { grid-column:1 / 7; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(20px,2.8vw,40px); align-items:start; }
.work-copy h3, .service-list h3, .contact-list h3 { margin:0; font-size:calc(var(--section-heading-size) * .8); font-weight:400; line-height:1.2; }
.work-copy p, .service-list p, .footer-column a, .footer-clock-time { position:static; margin:0; font-size:min(clamp(18px,1.65vw,30px),calc(var(--section-heading-size) * .75)); line-height:1.2; text-align:left; }
.work-copy .work-services, .footer-column .footer-label, .footer-clock .footer-label { margin-top:6px; font-size:min(clamp(14px,1vw,17px),calc(var(--section-heading-size) * .7)); }
.work-copy .work-stat { font-size:min(clamp(16px,1.25vw,20px),calc(var(--section-heading-size) * .7)); }
.work-row:nth-of-type(even) .work-copy { grid-column:3 / 9; }
.work-gallery { grid-column:1 / -1; width:calc(100% + var(--page-gutter) + var(--page-gutter)); margin-inline:calc(0px - var(--page-gutter)); display:flex; align-items:flex-start; gap:clamp(14px,1.4vw,24px); margin-top:clamp(14px,1.4vw,24px); overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; scrollbar-width:none; }
.work-gallery:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
.work-gallery.is-dragging { -webkit-user-select:none; user-select:none; }
.work-image { flex:0 0 72%; min-width:0; }
.work-image video, .work-image > img { display:block; width:100%; height:auto; }
.work-image.brand-mark, .work-image.logo-art { display:grid; place-items:center; aspect-ratio:4 / 3; }
.work-image.brand-mark img, .work-image.logo-art img { width:min(44%,340px); height:auto; }
html.work-active :is(.work-image.brand-mark, .work-image.logo-art) img { filter:invert(1); }
.page-link { position:relative; display:inline-block; width:max-content; max-width:100%; color:white; text-decoration:none; line-height:1.2; }
.page-link::before { content:""; position:absolute; inset:0; background:white; mix-blend-mode:difference; pointer-events:none; }
.page-link > span { position:relative; display:block; }
.page-link:focus-visible { outline:2px solid currentColor; outline-offset:4px; }
@media (hover:hover) and (pointer:fine) { :is(a, button).page-link:hover::before, :is(a, button).page-link:focus-visible::before { animation:link-blink 140ms steps(1,end) infinite; } }
@media (prefers-reduced-motion:reduce) { .page-link:hover::before { animation:none; } }
.services-section, .testimonial-section, .about-section, .contact-section { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:clamp(14px,1.4vw,24px); }
.services-section { padding-top:clamp(112px,12vw,192px); }
.services-section > h2 { grid-column:1 / 4; }
.service-list { grid-column:4 / 9; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:clamp(56px,7vw,110px) clamp(14px,1.4vw,24px); padding-top:clamp(65px,9vw,145px); }
.service-list article { grid-column:1 / 4; }
.service-list article:nth-child(2) { grid-column:3 / 6; }
.service-list article:nth-child(3) { grid-column:1 / 5; }
.service-list p { margin-top:18px; max-width:32ch; }
.testimonial-section { grid-template-rows:auto 1fr; }
/* The figure lays its quote and caption straight onto the section grid, so the caption can sit under the portrait. */
.testimonial-section figure { display:contents; }
.testimonial-section blockquote { grid-column:2 / 6; grid-row:1 / span 2; }
.testimonial-section blockquote, .about-section > p { margin:0; font-size:calc(var(--section-heading-size) * .9); line-height:1.08; }
.testimonial-section figcaption { grid-column:7 / 9; grid-row:2; align-self:start; margin:0; font-size:min(clamp(16px,1.25vw,20px),calc(var(--section-heading-size) * .7)); }
.testimonial-section .quote-line, .about-section .quote-line { display:block; }
.testimonial-section .quote-line + .quote-line, .about-section .quote-line + .quote-line { margin-top:1.08em; }
.testimonial-section .about-portrait { grid-column:7 / 9; grid-row:1; align-self:start; margin-top:0; }
/* A fixed top rule for the founders section, drawn like the alignment guides (same colour, weight, opacity, 20 px above the heading). */
.about-section::before { content:""; grid-column:2 / 9; grid-row:1; align-self:start; height:0; margin:-20px 0 20px; border-top:var(--grid-weight,1px) solid currentColor; opacity:var(--grid-opacity,.3); pointer-events:none; }
html[data-grid-enabled="false"] .about-section::before { display:none; }
.about-section > h2 { grid-column:2 / 4; width:max-content; max-width:calc(100vw - var(--page-gutter) - var(--page-gutter)); }
.about-section > p { position:static; text-align:left; grid-column:4 / 9; max-width:none; margin:clamp(40px,5vw,80px) 0 0; }
.about-portrait { grid-column:2 / 5; display:block; width:100%; height:auto; margin-top:clamp(35px,5vw,80px); }
.contact-section { padding-top:clamp(110px,15vw,240px); padding-bottom:clamp(150px,15vw,240px); }
/* Footer on every page: the CTA and links on the hero grid. Same 8 x 4 cells, margin and gap as the hero
   (assets/hero-layout.js wide()), full viewport height. Text in row 2 (row 1 stays clear of the fixed logo and pill), the wordmark fills the last two rows.
   No z-index here, so the cells and wordmark difference-blend against the page like the hero does. */
.site-footer { --u:min(calc(100vw / 1440), calc(100svh / 900)); --m:calc(40 * var(--u)); --g:calc(20 * var(--u)); --row:calc((100svh - 2 * var(--m) - 3 * var(--g)) / 4); position:relative; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:var(--g); height:100vh; height:100svh; padding:var(--m); box-sizing:border-box; color:#141414; }
html.work-active .site-footer { color:#F5F4F4; } /* Dark footer: the page turns dark as it scrolls in (hero.js on the homepage, smooth-scroll.js elsewhere). */
.footer-grid { position:absolute; inset:var(--m); display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:var(--g); pointer-events:none; }
.footer-grid i { border:max(.5px, calc(.5 * var(--u))) solid white; mix-blend-mode:difference; }
.footer-grid i.grid-off { visibility:hidden; } /* Snapped on while scrolling in (assets/smooth-scroll.js). */
.footer-grid i.is-hover { visibility:hidden; } /* The cell under the pointer drops its border. */
.footer-heading { grid-column:1 / 3; grid-row:2; align-self:start; margin:0; font-size:calc(28 * var(--u)); font-weight:400; line-height:1.2; }
.footer-cta { grid-column:3 / 5; grid-row:2; display:flex; flex-direction:column; align-items:flex-start; gap:var(--g); }
.footer-avatars { display:flex; gap:var(--g); width:100%; }
.footer-avatars img { display:block; width:calc(min(calc((100% - var(--g)) / 2), calc(var(--row) - var(--g) - 34 * var(--u))) * .72); /* up to a column each; avatars, gap and link fit in one row */ height:auto; border-radius:50%; }
.footer-cta h3 { margin:0; font-size:calc(28 * var(--u)); font-weight:400; line-height:1.2; }
.footer-column { grid-row:2; display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
/* Menu sits alone in the top row, last column (Huseyin, 2026-11-06). */
.footer-menu { grid-column:8; grid-row:1; align-self:start; } .footer-services { grid-column:6; } .footer-social { grid-column:7; } .footer-contact { grid-column:1 / 3; align-self:end; } /* Under Let’s collaborate, bottom of the cell (Huseyin, 2026-11-06). */
.footer-column .footer-label { display:block; margin:0 0 8px; }
.footer-column a.page-link { position:relative; } /* The shared body text rule sets static; the highlight box needs the link to be its frame. */
.footer-wordmark { grid-column:1 / -1; grid-row:3 / 5; align-self:center; justify-self:center; display:block; width:100%; height:auto; max-height:100%; object-fit:contain; mix-blend-mode:difference; }
.footer-wordmark img { display:block; width:100%; height:auto; } /* Animated twist, same timing as the hero; still file under reduced motion. */
/* Footer clocks: Sweden, Germany, Turkey and Azerbaijan filled in the text colour in the first four cells of row 1, local time on top.
   Labels reuse the small label and body text styles; they blend by difference so they read on the map and off it. */
.footer-clocks { grid-column:1 / 5; grid-row:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--g); min-height:0; }
.footer-clock { position:relative; display:grid; place-items:center; min-height:0; }
.footer-clock svg { position:absolute; inset:0; width:100%; height:100%; fill:none; stroke:currentColor; stroke-width:1px; stroke-linejoin:round; } /* Fills the cell, no padding; the viewBox keeps the shape (contain). */
.footer-clock svg path { vector-effect:non-scaling-stroke; } /* 1 px outline at any size. */
.footer-clock:hover svg { fill:currentColor; } /* Outline by default, filled on hover. */
.footer-time { position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; color:#fff; mix-blend-mode:difference; text-align:center; }
.footer-time .footer-label { position:absolute; bottom:100%; left:50%; transform:translateX(-50%); margin:0 0 2px; white-space:nowrap; visibility:hidden; } /* Country code only on hover; the time stays centred. */
.footer-clock:hover .footer-label { visibility:visible; }
.footer-clock-time { font-variant-numeric:tabular-nums; }
.footer-clock-time .colon.is-off { visibility:hidden; } /* Blinks once a second (assets/smooth-scroll.js). */
html[data-view="llm"] .site-footer { display:none; }
@media (width < 768px) { .footer-clocks { grid-column:1 / -1; grid-row:1; } .footer-clock { aspect-ratio:1; } .site-footer { --u:calc(100vw / 390); --m:20px; --g:20px; height:auto; min-height:100svh; grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:auto; } .footer-grid { display:none; } .footer-heading { grid-column:1 / -1; grid-row:2; } .footer-cta { grid-column:1 / 3; grid-row:3; } .footer-menu { grid-column:1 / 3; grid-row:4; } .footer-social { grid-column:3 / 5; grid-row:4; } .footer-contact { grid-column:1 / -1; grid-row:5; align-self:start; } .footer-wordmark { grid-row:6; } }
@media (width >= 1024px) { .page-section { --section-heading-size:min(2.7777777778vw,4.4444444444svh); } }
@media (width < 768px) {
 .work-row, .services-section, .testimonial-section, .about-section, .contact-section { display:block; }
 .work-row + .work-row { margin-top:80px; }
 .work-copy { display:flex; flex-direction:column; gap:16px; }
 .work-copy p { max-width:36ch; }
 .work-gallery { margin-top:24px; }
 .work-image { flex-basis:85%; }
 .service-list { display:block; padding-top:60px; }
 .service-list article + article { margin-top:56px; }
 .service-list article:nth-child(2) { margin-left:16%; }
 .testimonial-section { display:flex; flex-direction:column; }
 .testimonial-section blockquote { margin:0 0 0 12%; }
 .testimonial-section figcaption { order:3; margin:16px 0 0 12%; }
 .testimonial-section .about-portrait { order:2; width:64%; margin:48px 0 0 12%; }
 .about-section > p { margin:55px 0 0 12%; }
 .about-portrait { width:76%; margin:48px 0 0; }
}

.work-gallery::-webkit-scrollbar { display:none; }

/* Token writing retains each block's exact footprint and accessible text. */
html[data-view="human"] [data-page-writing="pending"] .page-writing-word,
html[data-view="human"] [data-page-writing="writing"] .page-writing-word { opacity:0; }
html[data-view="human"] [data-page-writing="pending"] .page-link::before { visibility:hidden; }
@media (prefers-reduced-motion:reduce) { .page-writing-word { opacity:1 !important; } }
/* Link sizes (variables in hero.css). The html body main prefix outranks the page sheets (service-page.css, start.css) that load after this file. */
html body main :is(h1, h2) > .page-link { font-size:var(--link-l); }
html body main h3:has(> .page-link) { font-size:var(--link-m); line-height:1.2; }
html body main h3 > .page-link,
html body main :is(.service-lead, .sprint-step) .page-link,
html body main :is([data-submit], .booking-submit, .booking-done-meet, .booking-done-manage).page-link { font-size:var(--link-m); }
html body main :is(.footer-column, .start-flow) a.page-link:not(.booking-done-meet):not(.booking-done-manage),
html body main :is([data-back], .booking-back).page-link { font-size:var(--link-s); }

/* Phone: Menu and Services side by side, then Social and Contact. */
@media (width < 768px) {
 .site-footer .footer-services { grid-column:3 / 5; grid-row:4; }
 .site-footer .footer-social { grid-column:1 / 3; grid-row:5; }
 .site-footer .footer-contact { grid-column:3 / 5; grid-row:5; }
}
/* page-writing.js: each word eases in quickly as the cascade reaches it. */
html[data-view="human"] [data-page-writing="writing"] .page-writing-word { transition:opacity 120ms cubic-bezier(0.23, 1, 0.32, 1); }