/* MyTsmall Designs — service pages (page-services.css). Class prefix: sv-
   logo-design-brand-identity / graphic-design / social-media-design.
   After the reference's template page: an 1128px column, a 1128×655 hero
   picture, a three-cell offer card, a label+quote row, a bare 2×2 gallery
   (552×394), two 560×474 service cards under a left-aligned .shead, and the
   shared FAQ layout. Tokens and breakpoints (1180 / 900 / 560) come from
   site.css; --gut is 36px, 20px under 900, so the column is 280 / 335 / 390px
   on 320 / 375 / 430px phones.                                           */

/* ── the 1128px column (the shell's .wrap is 1368) ── */
.sv-col{width:min(1128px,100% - var(--gut) * 2);margin-inline:auto}

/* ── hero: .ph gives the 170px top offset, the 72px h1 and the tag spacing.
      The lead's 440px basis keeps lead + 40px gap + 320px meta on one line
      all the way down to the 900px breakpoint (the column is 829px at 901) ── */
.sv-hero{position:relative;z-index:1}
.sv-hero-row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap}
.sv-hero .ph-lead{flex:1 1 440px}
.sv-hero .ph-sub{flex:0 1 320px;margin-top:0;text-align:right}
.sv-hero-img{position:relative;margin-top:56px;aspect-ratio:1128/655;max-height:655px;border-radius:12px;overflow:hidden;background:var(--card-2)}
.sv-hero-img img{width:100%;height:100%;object-fit:cover}
/* every picture is wrapped in a <picture> (its phone-gated <source> serves the
   620px thumb); display:contents takes the wrapper out of the box tree so the
   img rules above and below keep resolving against the hero / tile / card frame */
.sv-hero-img picture,.sv-g picture,.sv-m-img picture{display:contents}
/* the hairline is drawn over the picture rather than as a border, so the
   image itself keeps the full 1128×655 (hero) and 552×394 (gallery) */
.sv-hero-img::after,.sv-g::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none;transition:border-color .3s}

/* ── offer row: three cells on one hairline card, 42px padding each. Each cell
      is a column, so the actions sit on the cell floor, 20px clear of the text ── */
.sec.sv-offer-sec{padding-top:24px}
.sv-offer{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;border-radius:12px;overflow:hidden;background:var(--card)}
.sv-cell{padding:42px;display:flex;flex-direction:column;align-items:stretch;gap:12px;min-width:0}
.sv-cell+.sv-cell{border-left:1px solid var(--line)}
.sv-care{background:var(--card-2)}
.sv-k{font:500 14px/18px var(--sans);color:var(--fg-2)}
.sv-big{display:flex;align-items:baseline;gap:6px;font:400 34px/41px var(--sans);letter-spacing:-.04em;color:var(--fg)}
.sv-big small{font:500 14px/18px var(--body);color:var(--fg-2);letter-spacing:0}
.sv-sub{font:400 15px/22px var(--body);color:var(--fg-2)}
.sv-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:auto;padding-top:20px}
.sv-main .price{margin:0 0 20px;flex-wrap:wrap}
.sv-main .list{margin-bottom:0}
.sv-main .list li{align-items:flex-start}
.sv-main .list .chk{margin-top:2px}

/* ── why work with us: label left, 800px quote right, founder under it.
      It belongs to the offer above it, so the section keeps only its bottom padding ── */
.sec.sv-why-sec{padding-top:0}
.sv-why{display:grid;grid-template-columns:200px minmax(0,800px);justify-content:space-between;gap:24px;align-items:start}
.sv-why-k{font:500 14px/18px var(--sans);color:var(--fg-2);padding-top:4px}
.sv-why-body{display:grid;gap:28px;justify-items:start}
.sv-why-t{font:500 20px/28px var(--body);color:var(--fg);letter-spacing:-.01em}
.sv-why .person{grid-column:auto}

/* ── gallery: 2×2, 552×394, radius 12, gap 24, no head (the reference's block has none).
      The page sets --gal-ar (1/1 for a square set, else 4/3) and each tile its own
      --ar; the phone breakpoints below pick them up ── */
.sv-gal{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sv-g{position:relative;display:block;aspect-ratio:552/394;border:0;border-radius:12px;overflow:hidden;background:var(--card-2)}
.sv-g img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sv-g-cap{position:absolute;left:16px;bottom:16px;max-width:calc(100% - 32px);font:500 13px/18px var(--sans);color:var(--fg);background:rgba(8,8,8,.7);padding:8px 12px;border-radius:8px;backdrop-filter:blur(8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── "More services": the shared .shead (64px below), laid out left with the
      outlined pill at right; then two 560×474 cards — image 300 tall, name,
      one line, price. The section keeps the shared 120px padding, so every
      break after the hero block is one section apart ── */
.shead.sv-row-head{grid-template-columns:minmax(0,1fr) auto;justify-items:start;align-items:end;text-align:left;gap:16px 24px}
.sv-more{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sv-m{display:grid;grid-template-rows:300px minmax(0,1fr);height:474px;border-radius:12px;overflow:hidden;transition:border-color .3s}
.sv-m-img{overflow:hidden;background:var(--card-2)}
.sv-m-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.sv-m-text{padding:24px 28px 28px;display:grid;align-content:start;gap:8px;min-width:0}
.sv-m-text h3{font:500 22px/26px var(--sans);display:flex;justify-content:space-between;align-items:center;gap:12px}
.sv-m-text h3 .arr{color:var(--fg-2)}
.sv-m-text p{font:400 16px/24px var(--body);color:var(--fg-2)}
.sv-m-text .sv-m-blurb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv-m-text .sv-m-price{font:500 14px/18px var(--sans);color:var(--fg);padding-top:8px}

/* ── FAQ extras: the shared .shead/.qa-cta, plus a 44px-tall email link that can
      break anywhere (the shared one is a 22px inline link) ── */
.sv-faq-head h2{overflow-wrap:anywhere}
.sv-qa-cta a{display:flex;align-items:center;min-height:44px;margin-top:0;overflow-wrap:anywhere}
/* Tap target: the shared .qa puts its 16px padding on <details> and leaves the
   <summary> at 32px, so a tap in the padding does not toggle the item. Move 6px
   of that padding onto the summary: the closed row stays 64px (10+44+10) and
   the whole question line is a 44px target, with 20px between neighbours. The
   answer keeps its 14px gap under the question and 24px to the hairline. */
.sv-faq .qa{padding:10px 16px}
.sv-faq .qa summary{min-height:44px;padding:6px 0}
.sv-faq .qa p{padding:8px 40px 14px 0}

/* ── hover effects only where a pointer can hover — on touch they would stick
      to the last tapped tile and the picture would zoom under the thumb ── */
@media (hover:hover){
  .sv-g:hover::after{border-color:rgba(255,255,255,.2)}
  .sv-g:hover img{transform:scale(1.04)}
  .sv-m:hover{border-color:rgba(255,255,255,.2)}
  .sv-m:hover .sv-m-img img{transform:scale(1.03)}
  .sv-m:hover h3 .arr{transform:translateX(3px)}
}

/* ── responsive ── */
@media (max-width:1180px){
  .sv-offer{grid-template-columns:260px minmax(0,1fr) 280px}
  .sv-cell{padding:32px}
  /* the cards are narrower than 560 here, so the 474 pin and the one-line clamp come off */
  .sv-m{height:auto;grid-template-rows:300px auto}
  .sv-m-text .sv-m-blurb{white-space:normal}
}
@media (max-width:900px){
  /* the shell pins the inner-page h1 at 44px; scale it with the viewport instead
     so "Brand Identity" (≈300px at 44px) fits the 280px column of a 320px phone */
  .sv-hero h1{font-size:clamp(34px,11vw,44px);line-height:1.14;margin-bottom:20px}
  .sv-hero .ph-lead{flex-basis:100%}
  .sv-hero .ph-sub{flex-basis:auto;text-align:left;max-width:520px}
  .sv-hero-img{margin-top:40px}
  .sv-offer{grid-template-columns:1fr}
  .sv-cell+.sv-cell{border-left:0;border-top:1px solid var(--line)}
  .sv-why{grid-template-columns:1fr;gap:16px}
  /* gallery: still 2-up, tiles in the set's own ratio (square logos stay square) */
  .sv-gal{gap:16px}
  .sv-g{aspect-ratio:var(--gal-ar,4/3)}
  .sv-g-cap{white-space:normal}
  /* service cards stack; the picture is shown whole, in its own ratio (--ar from
     the page, 1.31–1.44:1 for the three hero pieces) — a shared 560/300 box cut
     29% off a 4:3 picture on a full-width tablet card */
  .sv-more{grid-template-columns:1fr}
  .sv-m{grid-template-rows:auto auto}
  .sv-m-img{aspect-ratio:var(--ar,4/3)}
}
@media (max-width:560px){
  .sv-hero .ph-lead{font-size:18px;line-height:26px}
  /* the hero pieces are 1.3–1.45:1, so 4:3 shows nearly all of them at 280–390px wide */
  .sv-hero-img{margin-top:32px;aspect-ratio:4/3}
  .sv-cell{padding:24px 20px}
  .sv-big,.sv-main .price{font-size:28px;line-height:34px}
  .sv-why-t{font-size:18px;line-height:26px}
  /* one column: every tile in its own picture's ratio — no crop at all */
  .sv-gal{grid-template-columns:1fr}
  .sv-g{aspect-ratio:var(--ar,var(--gal-ar,4/3))}
  .sv-g-cap{left:12px;bottom:12px;max-width:calc(100% - 24px)}
  .shead.sv-row-head{grid-template-columns:1fr;margin-bottom:40px}
  .sv-row-head h2,.sv-faq-head h2{font-size:clamp(30px,9.5vw,38px);line-height:1.2}
  .sv-m-text{padding:20px}
  /* the answer's 40px right inset (room under the plus) left a 208px text column
     at 320; 8px gives 240px, ~32 characters a line at 15px */
  .sv-faq .qa p{padding-right:8px}
}