/* Service pages (Branding, Website, Design Retainer) and About share this sheet.
   Every section reads like a homepage section (works.css): heading on the left of the 8-column grid,
   content in columns 4 to 8 ("What we do"), or a full-width block below the heading ("Selected work").
   Type: only the homepage styles. Section heading, h3 at .8 inside the black highlight, body at the
   service-list size, labels at the work-services size, statements at the about-section size. */
.service-page { background:#F5F4F4; color:#141414; }
.service-page p { position:static; text-align:left; }
.service-header { display:none; } /* text fallback, never shown: site-brand.js draws the mark (also hidden in site-brand.css, so one late sheet cannot expose it) */
.service-page .collaborate { padding:8px 24px; font-size:16px; }
.service-page .viewing { bottom:20px; font-size:16px; }
/* LLM mode switch: top left beside the logo, level with the Let's collaborate pill, from the first frame. These are the
   numbers view-switch.js measures (logo left + 112px of room for the ASCII logo, pill top and height), so the switch
   never paints at the bottom first and never jumps; the script only refines them. */
.service-page .viewing { top:max(28px,env(safe-area-inset-top,0px)); bottom:auto; inset-inline:auto; margin-inline:0; left:calc(max(clamp(20px,2.78vw,64px),env(safe-area-inset-left,0px)) + 112px); height:36px; }
@media (width < 768px) { .service-page .viewing { left:calc(max(clamp(20px,2.78vw,64px),env(safe-area-inset-left,0px)) + 76px); height:33.5px; } } /* the 14px pill */
.service-page .page-section { --body-size:min(clamp(18px,1.65vw,30px),calc(var(--section-heading-size) * .75)); --label-size:min(clamp(14px,1vw,17px),calc(var(--section-heading-size) * .7)); --grid-gap:clamp(14px,1.4vw,24px); display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:var(--grid-gap); align-content:start; }
.service-page h1, .service-page h2, .service-page h3 { margin:0; font-weight:400; }
.service-page h1 { font-size:var(--section-heading-size); line-height:1; }
.service-page h3 { font-size:calc(var(--section-heading-size) * .8); line-height:1.2; }
/* Highlights that are not links (h3 spans, sprint bars) still need the link box as their frame:
   the hero's p rule and the shared body text rule would otherwise let ::before escape. */
.service-page .page-link { position:relative; }
.service-page [hidden] { display:none !important; }
.service-page .visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

/* Intro: like the homepage about section. Title left, statement in columns 4 to 8. */
.service-intro { padding-top:clamp(120px,15vw,240px); }
.service-intro h1 { grid-column:1 / 4; }
.service-lead { grid-column:4 / 9; margin-top:clamp(40px,5vw,80px); }
.service-lead p { margin:0; max-width:24ch; font-size:calc(var(--section-heading-size) * .9); line-height:1.08; }
.service-lead > a { margin-top:clamp(20px,2.8vw,40px); font-size:var(--body-size); }

/* Lists of h3 + lines: a compact two-column block in columns 4 to 8, starting level with the heading. */
.service-output > h2, .service-process > h2 { grid-column:1 / 4; }
.service-outputs { grid-column:4 / 9; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(32px,3.6vw,56px) var(--grid-gap); }
.service-outputs > article { grid-column:auto; }
.service-page .service-outputs ul, .service-page .service-weeks ul { list-style:none; margin:18px 0 0; padding:0; font-size:var(--body-size); line-height:1.2; }
.service-description { margin:18px 0 0; max-width:32ch; font-size:var(--body-size); line-height:1.2; }
.service-page .service-more { grid-column:1 / -1; margin:0; font-size:var(--body-size); line-height:1.2; }

/* Website process: four steps left to right, each on two columns (the work-copy row logic). */
.service-steps > h2 { grid-column:1 / -1; margin-bottom:clamp(48px,7vw,112px); }
.service-page ol.service-weeks { grid-column:1 / -1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--grid-gap); margin:0; padding:0; list-style:none; }

/* Branding process: the two-week sprint as staggered bars on the column grid. Week 1 owns
   columns 1 to 4, week 2 columns 5 to 8. Both weeks share the row tracks (subgrid), so the bars
   step down across the whole sprint. A text-colour line closes each week at its checkpoint. */
.service-sprint > h2 { grid-column:1 / -1; margin-bottom:clamp(48px,7vw,112px); }
.service-page ol.sprint { grid-column:1 / -1; display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); grid-template-rows:repeat(5,auto); column-gap:var(--grid-gap); row-gap:clamp(20px,2.8vw,40px); margin:0; padding:0; list-style:none; }
.sprint-week { display:grid; grid-template-columns:subgrid; grid-template-rows:subgrid; grid-row:1 / -1; grid-column:1 / 5; }
.sprint-week + .sprint-week { grid-column:5 / 9; }
.sprint-week > h3 { grid-column:1 / -1; grid-row:1; justify-self:start; }
.service-page .sprint-checkpoint { grid-column:1 / -1; grid-row:1; align-self:end; justify-self:end; margin:0; padding-right:var(--grid-gap); font-size:var(--body-size); line-height:1.2; text-align:right; }
.sprint-line { grid-column:1 / -1; grid-row:1 / 4; border-right:var(--grid-weight,1px) solid currentColor; pointer-events:none; }
.sprint-week + .sprint-week .sprint-line { grid-row:1 / 6; }
.service-page .sprint-steps { display:contents; margin:0; padding:0; list-style:none; }
.sprint-step { display:flex; flex-direction:column; align-items:flex-start; min-width:0; }
.sprint-step:first-child { grid-column:1 / 3; grid-row:2; }
.sprint-step:last-child { grid-column:2 / 5; grid-row:3; }
.sprint-week + .sprint-week .sprint-step:first-child { grid-column:1 / 4; grid-row:4; }
.sprint-week + .sprint-week .sprint-step:last-child { grid-column:3 / 5; grid-row:5; }
.service-page .sprint-bar { display:block; width:100%; font-size:var(--body-size); }
.sprint-detail { display:block; margin-top:6px; padding-right:var(--grid-gap); font-size:var(--label-size); line-height:1.2; }

/* Examples: homepage work rows. Client name and services above a full-bleed gallery. */
.service-examples { padding-bottom:clamp(24px,3vw,48px); }
.service-examples > h2 { grid-column:1 / -1; margin-bottom:clamp(48px,7vw,112px); }
.service-examples > .work-row { grid-column:1 / -1; }

/* Closing: the invitation sits on the content column. */
.service-closing h2 { grid-column:4 / 9; }

/* Privacy page: plain reading text in the content columns. */
.service-legal > h2 { grid-column:1 / 4; }
.service-legal-text { grid-column:4 / 9; max-width:38em; font-size:var(--body-size); line-height:1.3; }
.service-legal-intro { margin-top:clamp(40px,5vw,80px); }
.service-legal-text p { margin:0 0 1em; }
.service-legal-text p:last-child { margin-bottom:0; }

@media (width < 768px) {
 .service-page .page-section { display:block; }
 .service-legal-text { margin-top:24px; }
 .service-lead { margin:48px 0 0 12%; }
 .service-outputs { margin-top:40px; row-gap:32px; grid-template-columns:minmax(0,1fr); } /* one column on phones (Huseyin, 2026-11-06) */
 .service-page .service-more { margin-top:0; }
 .service-steps > h2, .service-sprint > h2, .service-examples > h2 { margin-bottom:60px; }
 .service-page ol.service-weeks { grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:56px; }
 /* The sprint: one week under the other, each on its own four columns. */
 .service-page ol.sprint { display:block; }
 .sprint-week { grid-template-columns:repeat(4,minmax(0,1fr)); grid-template-rows:none; column-gap:var(--grid-gap); row-gap:24px; }
 .sprint-week + .sprint-week { margin-top:56px; }
 .sprint-week + .sprint-week .sprint-line { grid-row:1 / 4; }
 .sprint-week + .sprint-week .sprint-step:first-child { grid-column:1 / 4; grid-row:2; }
 .sprint-step:last-child, .sprint-week + .sprint-week .sprint-step:last-child { grid-column:2 / 5; grid-row:3; }
 .service-closing h2 { margin-left:12%; }
 .service-page .collaborate { font-size:14px; }
}

/* End of a service page: the other two services, plain links under a short heading. */
.service-next > h2 { grid-column:1 / 4; }
.service-next-links { grid-column:4 / 9; display:grid; gap:12px; justify-items:start; margin:0; padding:0; list-style:none; }
@media (width < 768px) { .service-next-links { margin-top:32px; } }