/* ============================================================
   Katrin — Portfolio Site Stylesheet
   Generated from the site's design system. Organized by section.
   Font: Gilroy — Regular 400 / Medium 500 / SemiBold 600 / Bold 700
   Expects font files at fonts/Gilroy-Regular.otf, Gilroy-Medium.otf,
   Gilroy-SemiBold.otf, Gilroy-Bold.otf (add once the full family is licensed)
   ============================================================ */

/* ---- Fonts ---- */

  @font-face { font-family:'Gilroy'; font-weight:400; src:url('fonts/Gilroy-Regular.otf') format('opentype'); }
  @font-face { font-family:'Gilroy'; font-weight:500; src:url('fonts/Gilroy-Medium.otf') format('opentype'); }
  @font-face { font-family:'Gilroy'; font-weight:600; src:url('fonts/Gilroy-SemiBold.otf') format('opentype'); }
  @font-face { font-family:'Gilroy'; font-weight:700; src:url('fonts/Gilroy-Bold.otf') format('opentype'); }


/* ---- Base / Shared (nav, footer, section labels, image grids) ---- */

  :root { --lime:#CCFF00; --ink:#06050A; --gray:#87877F; --body:#414141; --line:#0000001A; }
  * { box-sizing:border-box; }
  body { margin:0; background:#fff; color:var(--ink); font-family:'Gilroy',Arial,Helvetica,sans-serif; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
  .wrap { max-width:1600px; margin:0 auto; padding:0 16px; }
  a { text-decoration:none; color:inherit; }

  #cursor-dot {
    position: fixed; top:0; left:0; width:16px; height:16px; border-radius:50%;
    background:#fff; mix-blend-mode:difference; pointer-events:none; z-index:9999;
    transition: width .18s ease, height .18s ease; display:none;
  }
  .has-custom-cursor, .has-custom-cursor * { cursor: none !important; }
  .has-custom-cursor #cursor-dot { display:block; }
  #cursor-dot.hover { width:44px; height:44px; }

  h1, h2, .display { font-family:'Gilroy',Arial,sans-serif; }

  nav { display:flex; align-items:center; justify-content:space-between; padding:30px 0; border-bottom:1px solid #000; }
  nav .brand { font-family:'Gilroy',Arial,sans-serif; font-weight:600; font-size:18px; letter-spacing:-0.01em; line-height:1; }
  nav .links { display:flex; gap:52px; font-size:17px; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; }
  nav .links a { color:var(--ink); position:relative; font-weight:400; }
  nav .links a.active { font-weight:600; }
  nav .links a::after { content:''; position:absolute; left:0; right:0; bottom:-4px; height:1px; background:#000; transform:scaleX(0); transform-origin:right; transition:transform .25s ease; }
  nav .links a:hover::after { transform:scaleX(1); transform-origin:left; }

  .back { font-size:16px; letter-spacing:0.02em; text-transform:uppercase; color:var(--ink); display:inline-block; margin:36px 0 0 0; }
  .back:hover { text-decoration:underline; text-underline-offset:3px; }

  section.block { padding:44px 0; }
  section.block h2 { font-size:14px; font-family:'Gilroy',Arial,sans-serif; font-weight:700; letter-spacing:0.08em; margin:0 0 11px 0; text-transform:uppercase; }
  section.block > p.intro { font-size:19px; line-height:1.5; color:var(--body); margin:0 0 32px 0; }

  .ph-row { display:flex; gap:20px; align-items:stretch; }
  .ph-row .ph { border-radius:0; height:200px; display:flex; align-items:center; justify-content:center; text-align:center; padding:16px; }
  .ph-row .ph:nth-child(1) { width:380px; flex-shrink:0; }
  .ph-row .ph:nth-child(2) { width:380px; flex-shrink:0; }
  .ph-row .ph:nth-child(3) { flex:1; }

  .img-row { display:flex; gap:20px; align-items:stretch; flex-wrap:wrap; }
  .img-row .img-box { border-radius:0; overflow:hidden; }
  .img-row .img-box img { height:100%; width:100%; object-fit:cover; display:block; }
  .ph-label { font-size:11px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; opacity:0.75; }

  footer { background:#000; color:#fff; margin-top:24px; padding:120px 0 44px 0; }
  footer .top-row { display:flex; justify-content:space-between; gap:60px; flex-wrap:wrap; padding-bottom:64px; align-items:flex-start; }
  footer .footer-cta { max-width:640px; }
  footer .footer-cta h2 { font-size:clamp(36px,5vw,72px); font-weight:500; text-transform:uppercase; letter-spacing:-0.01em; line-height:1.06; margin:0 0 20px 0; }
  footer .footer-cta-sub { font-size:18px; color:#9a9a94; line-height:1.5; margin:0 0 28px 0; max-width:440px; }
  footer .footer-cta-email { display:inline-block; max-width:100%; font-family:'Gilroy',Arial,sans-serif; font-size:24px; font-weight:600; color:#fff; text-decoration:underline; text-underline-offset:5px; text-decoration-color:#3a3a3a; margin-bottom:14px; overflow-wrap:anywhere; word-break:break-word; }
  footer .footer-cta-email:hover { text-decoration-color:#fff; }
  footer .footer-loc { display:block; font-size:15px; color:#6f6f6a; }
  footer a.footer-loc { margin-top:4px; text-decoration:none; }
  footer a.footer-loc:hover { color:#fff; }
  footer .linkcols { display:flex; gap:90px; flex-shrink:0; }
  footer .linkcols a { display:block; font-family:'Gilroy',Arial,sans-serif; font-size:40px; font-weight:500; text-transform:uppercase; text-decoration:underline; text-underline-offset:6px; text-decoration-color:#3a3a3a; margin-bottom:24px; color:#fff; }
  footer .linkcols a:hover { text-decoration-color:#fff; }
  footer .socials-row { padding-bottom:56px; }
  footer .socials { display:flex; gap:24px; }
  footer .socials svg { width:26px; height:26px; }
  footer .socials a { color:#fff; opacity:0.85; }
  footer .socials a:hover { opacity:1; }
  footer .bottom-row { display:flex; justify-content:space-between; align-items:center; border-top:1px solid #222; padding-top:32px; flex-wrap:wrap; gap:20px; }
  footer .bottom-row .fine.right { text-transform:uppercase; letter-spacing:0.04em; }
  footer .fine { font-size:14px; color:#8a8a84; }


/* ---- Case Study Pages (MedCard, Katil, Travelix, Bloomy, Aravé Tea, Technologist) ---- */

  .hero-img { border-radius:6px; overflow:hidden; width:100%; aspect-ratio:16/8; margin:56px 0 0 0; }
  .hero-img img { width:100%; height:100%; object-fit:cover; display:block; }
  .hero-img .ph { width:100%; height:100%; display:flex; align-items:center; justify-content:center; }

  .cs-header { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; flex-wrap:wrap; padding:36px 0 28px 0; border-bottom:1px solid #000; }
  .cs-header h1 { font-size:clamp(40px,5.6vw,88px); font-weight:500; letter-spacing:-0.01em; margin:0; line-height:1; text-transform:uppercase; }
  .cs-header .cs-tags-line { font-size:clamp(16px,1.8vw,22px); color:var(--gray); text-transform:uppercase; letter-spacing:0.01em; text-align:right; }

  .cs-info-row { display:grid; grid-template-columns:1fr 1.15fr; gap:80px; padding:48px 0 8px 0; }
  .cs-info-list .item { display:grid; grid-template-columns:140px 1fr; gap:20px; margin-bottom:32px; align-items:baseline; }
  .cs-info-list .item .label { font-size:13px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gray); margin:0; }
  .cs-info-list .item .val { font-size:20px; font-weight:500; color:#000; }

  .cs-info-text { display:flex; flex-direction:column; gap:40px; max-width:900px; }
  .cs-info-text .row { display:grid; grid-template-columns:120px 1fr; gap:24px; }
  .cs-info-text .row .label { font-size:13px; letter-spacing:0.07em; text-transform:uppercase; color:var(--gray); padding-top:2px; }
  .cs-info-text .row p { font-size:18px; line-height:1.6; color:#222; margin:0; }

  @media (max-width:760px) {
    .cs-info-row { grid-template-columns:1fr; gap:32px; }
    .cs-info-list .item { grid-template-columns:110px 1fr; }
    .cs-info-text .row { grid-template-columns:1fr; gap:6px; }
  }

  .cs-caption {
    font-size:clamp(20px,2.6vw,32px); font-weight:600; text-align:center; text-transform:uppercase;
    letter-spacing:-0.005em; line-height:1.35; max-width:880px; margin:64px auto 40px auto; color:#000;
  }
  .cs-full-img { width:100%; border-radius:6px; overflow:hidden; margin-bottom:20px; }
  .cs-full-img img { width:100%; display:block; }
  .cs-full-img .ph { width:100%; aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; }
  .cs-full-img:last-child { margin-bottom:0; }

  /* Two images side by side within a case study */
  .cs-img-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
  .cs-img-pair > div { border-radius:6px; overflow:hidden; }
  .cs-img-pair img { width:100%; display:block; }
  @media (max-width:640px) { .cs-img-pair { grid-template-columns:1fr; } }

  /* Photo-and-illustration pairs, side by side (Kayt Camp) */
  .kayt-pair { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-bottom:20px; }
  .kayt-pair .kayt-pair-img { aspect-ratio:1/1; border-radius:6px; overflow:hidden; }
  .kayt-pair .kayt-pair-img img { width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:640px) { .kayt-pair { grid-template-columns:1fr; } }

  /* Pitch deck presentation viewer — click left/right half to navigate */
  .deck-viewer { position:relative; width:100%; aspect-ratio:16/9; border-radius:6px; overflow:hidden; background:#000; margin-bottom:20px; user-select:none; }
  .deck-viewer .deck-slide { position:absolute; inset:0; display:none; }
  .deck-viewer .deck-slide.active { display:block; }
  .deck-viewer .deck-slide img { width:100%; height:100%; object-fit:contain; display:block; background:#000; }
  .deck-viewer .deck-zone { position:absolute; top:0; bottom:0; width:50%; cursor:pointer; z-index:2; }
  .deck-viewer .deck-zone.left { left:0; }
  .deck-viewer .deck-zone.right { right:0; }
  .deck-viewer .deck-arrow {
    position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%;
    background:rgba(255,255,255,0.92); color:#000; display:flex; align-items:center; justify-content:center;
    font-size:20px; opacity:0; transition:opacity .2s ease; pointer-events:none; z-index:3;
  }
  .deck-viewer:hover .deck-arrow { opacity:1; }
  .deck-viewer .deck-arrow.left { left:18px; }
  .deck-viewer .deck-arrow.right { right:18px; }
  .deck-viewer .deck-counter {
    position:absolute; bottom:18px; right:18px; background:rgba(0,0,0,0.55); color:#fff; font-size:12px;
    font-weight:600; letter-spacing:0.04em; padding:6px 12px; border-radius:20px; z-index:3;
  }

  /* iPhone device frame (Kayt Camp Instagram screenshot) */
  .iphone-frame { max-width:380px; margin:0 auto 20px auto; background:#0a0a0a; border-radius:56px; padding:16px; box-shadow:0 30px 60px rgba(0,0,0,0.28), inset 0 0 0 2px #2c2c2c; position:relative; }
  .iphone-frame .iphone-screen { position:relative; border-radius:40px; overflow:hidden; background:#000; aspect-ratio:9/19.5; }
  .iphone-frame .iphone-screen img { width:100%; height:100%; object-fit:cover; object-position:top; display:block; }
  .iphone-frame .iphone-notch { position:absolute; top:0; left:50%; transform:translateX(-50%); width:38%; height:24px; background:#0a0a0a; border-radius:0 0 18px 18px; z-index:2; }
  .iphone-frame .iphone-btn { position:absolute; background:#1c1c1c; border-radius:2px; }
  .iphone-frame .iphone-btn.mute { left:-3px; top:120px; width:3px; height:32px; }
  .iphone-frame .iphone-btn.vol-up { left:-3px; top:176px; width:3px; height:56px; }
  .iphone-frame .iphone-btn.vol-down { left:-3px; top:246px; width:3px; height:56px; }
  .iphone-frame .iphone-btn.power { right:-3px; top:200px; width:3px; height:80px; }

  .more-works { border-top:1px solid #000; padding:72px 0 8px 0; margin-top:56px; }
  .more-works h2 { font-size:clamp(32px,4.2vw,58px); font-weight:500; text-transform:uppercase; margin:0 0 36px 0; }
  .all-works-row { display:flex; justify-content:center; padding:32px 0 72px 0; }
  .all-works-row a {
    font-family:'Gilroy',Arial,sans-serif; font-size:22px; font-weight:600; text-transform:uppercase;
    letter-spacing:0.01em; text-decoration:underline; text-underline-offset:5px; color:#000;
  }


/* ---- Technologist page (unique: image grids, live browser mockup, deck carousel) ---- */
.two-col-imgs { display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:stretch; }
.two-col-imgs .img-box { border-radius:6px; overflow:hidden; background:#f7f7f5; }
.two-col-imgs .img-box img { display:block; width:100%; height:100%; object-fit:cover; }

.grid-4 { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.grid-4 .img-box { border-radius:6px; overflow:hidden; background:#f7f7f5; aspect-ratio:1/1; }
.grid-4 .img-box img { display:block; width:100%; height:100%; object-fit:cover; }

.full-img { border-radius:6px; overflow:hidden; }
.full-img img { display:block; width:100%; height:auto; }

.marketing-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:20px; }
.marketing-grid .img-box { border-radius:6px; overflow:hidden; background:#f7f7f5; aspect-ratio:4/3; }
.marketing-grid .img-box img { display:block; width:100%; height:100%; object-fit:cover; }

.browser-mock { border-radius:8px; overflow:hidden; background:#d7d7d1; box-shadow:0 30px 60px -20px rgba(10,10,10,0.3); }
.browser-mock .bar { display:flex; align-items:center; gap:14px; padding:11px 14px; background:linear-gradient(#efefe9,#e1e1db); border-bottom:1px solid rgba(0,0,0,0.08); }
.browser-mock .dots { display:flex; gap:7px; }
.browser-mock .dots span { width:10px; height:10px; border-radius:50%; display:block; }
.browser-mock .dots span:nth-child(1){background:#ec6a5e;}
.browser-mock .dots span:nth-child(2){background:#f4bf4f;}
.browser-mock .dots span:nth-child(3){background:#61c454;}
.browser-mock .url-pill { flex:1; background:#fff; border-radius:100px; padding:6px 14px; font-size:12px; color:#6b6b66; display:flex; align-items:center; gap:6px; }
.browser-mock .view { position:relative; height:620px; overflow-y:auto; background:#000; }
.browser-mock .view img { display:block; width:100%; }
.browser-mock .fade { position:absolute; left:0; right:0; bottom:0; height:70px; pointer-events:none; background:linear-gradient(to bottom, transparent, rgba(10,10,10,0.55)); display:flex; align-items:flex-end; justify-content:center; padding-bottom:12px; }
.browser-mock .fade span { font-size:10.5px; letter-spacing:0.14em; text-transform:uppercase; color:#eaeaea; }

.carousel { position:relative; }
.carousel-frame { position:relative; border-radius:6px; overflow:hidden; box-shadow:0 30px 60px -20px rgba(10,10,10,0.35); background:#000; }
.carousel-track { display:flex; transition:transform 0.35s ease; }
.carousel-track img { display:block; width:100%; flex:0 0 100%; }
.carousel-arrow { position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,0.92); border:none; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:16px; box-shadow:0 8px 18px rgba(10,10,10,0.25); }
.carousel-arrow.prev { left:16px; }
.carousel-arrow.next { right:16px; }
.carousel-foot { display:flex; align-items:center; justify-content:space-between; margin-top:16px; }
.carousel-dots { display:flex; gap:7px; }
.carousel-dots span { width:7px; height:7px; border-radius:50%; background:#e7e7e2; cursor:pointer; }
.carousel-dots span.active { background:#000; width:18px; border-radius:4px; }
.carousel-count { font-size:12px; color:var(--gray); font-variant-numeric:tabular-nums; }

/* ---- Homepage ---- */

  .home-hero { display:grid; grid-template-columns:1.15fr 0.85fr; gap:80px; align-items:center; padding:64px 0 72px 0; }
  .home-hero-text .eyebrow {
    display:block; font-size:14px; font-weight:600; letter-spacing:0.1em; text-transform:uppercase;
    color:var(--gray); margin:0 0 22px 0;
  }
  .home-hero-text h1 {
    font-size:clamp(34px,4.2vw,58px); font-weight:500; line-height:1.1; letter-spacing:-0.01em;
    margin:0 0 28px 0; max-width:600px;
  }
  .home-hero-text .bio { font-size:19px; line-height:1.6; color:var(--body); max-width:520px; margin:0 0 36px 0; }
  .home-hero-text .hero-cta {
    display:inline-flex; align-items:center; gap:8px; font-size:16px; font-weight:600;
    text-transform:uppercase; letter-spacing:0.02em; text-decoration:underline; text-underline-offset:5px;
  }
  .home-hero-photo {
    width:100%; aspect-ratio:1/1; border-radius:6px; overflow:hidden; background:#e9e9e5; justify-self:end;
    max-width:460px;
  }
  .home-hero-photo img { width:100%; height:100%; object-fit:cover; display:block; }
  @media (max-width:860px) {
    .home-hero { grid-template-columns:1fr; gap:36px; padding:40px 0 48px 0; }
    .home-hero-photo { justify-self:stretch; max-width:100%; }
  }

  .big-head { font-size:clamp(72px,10.5vw,180px); font-weight:500; letter-spacing:-0.01em; text-transform:uppercase; margin:0 0 8px 0; line-height:0.95; }
  section.block { border-top:1px solid #000; padding:56px 0 64px 0; }
  section.block .section-top { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:40px; flex-wrap:wrap; gap:16px; }
  section.block .section-top .big-head { font-size:clamp(90px,13vw,220px); }
  section.block .viewall { font-size:16px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; text-decoration:underline; text-underline-offset:4px; }

  /* large 2-column work teaser, matching Backbone's own homepage treatment */
  .work-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:48px 40px; padding-top:2px; }
  .work-grid-2 .work-card {
    display:block;
    padding-bottom:44px;
  }
  .work-grid-2 .work-card .thumb { aspect-ratio:848/716.72; height:auto; margin-bottom:0; }
  .work-grid-2 .work-card .cap-row { display:flex; justify-content:space-between; align-items:baseline; padding-top:20px; gap:24px; }
  .work-grid-2 .work-card .cat {
    font-size:17px; font-weight:500; letter-spacing:0.01em; text-transform:uppercase; color:#000;
    text-decoration:underline; text-underline-offset:3px; text-decoration-color:#000; flex-shrink:0;
  }
  .work-grid-2 .work-card .title-row { flex-shrink:0; text-align:right; }
  .work-grid-2 .work-card .title-row .arrow { display:none; }
  .work-grid-2 .work-card .title-row .title {
    font-size:13px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); text-decoration:none;
  }
  .work-grid-2 .work-card .sub { display:none; }

  .load-more-row { display:flex; justify-content:center; padding:24px 0 72px 0; }
  .load-more-row button, .load-more-row a {
    font-family:'Gilroy',Arial,sans-serif; font-size:34px; font-weight:500; text-transform:uppercase;
    letter-spacing:-0.005em; color:#000; background:none; border:none; text-decoration:underline;
    text-underline-offset:6px; text-decoration-color:#000; cursor:pointer; padding:0;
  }
  .load-more-row[data-hidden="true"] { display:none; }
  .work-grid-2 .work-card.extra-card { display:none; }

  .svc-list-row { display:flex; justify-content:space-between; align-items:center; padding:44px 0; border-top:1px solid var(--line); text-decoration:none; color:inherit; }
  .svc-list-row:last-of-type { border-bottom:1px solid var(--line); }
  .svc-list-row .name { font-size:clamp(36px,4.6vw,64px); font-weight:500; text-transform:uppercase; letter-spacing:-0.01em; }
  .svc-list-row .arrow-plain { font-size:38px; font-weight:400; flex-shrink:0; opacity:0; transition:opacity .2s; }
  .svc-list-row:hover .arrow-plain { opacity:1; }

  .about-copy { font-size:clamp(30px,3.6vw,44px); line-height:1.35; color:#000; font-weight:400; margin:0; max-width:1200px; letter-spacing:-0.008em; }

  /* why-rows now match the Services page's big row scale */
  .why-row { display:grid; grid-template-columns:1fr 1fr; gap:60px; padding:56px 0; border-top:1px solid var(--line); }
  .why-row:last-child { border-bottom:1px solid var(--line); }
  .why-row .t { font-size:clamp(34px,4.4vw,58px); font-weight:500; text-transform:uppercase; letter-spacing:-0.01em; align-self:center; }
  .why-row .d { font-size:19px; color:var(--body); line-height:1.55; align-self:center; max-width:440px; }


/* ---- Work Page ---- */

  .work-header { padding:64px 0 40px 0; }
  .work-header h1 { font-size:clamp(48px,6.4vw,116px); font-weight:500; text-transform:uppercase; margin:0; letter-spacing:0; line-height:1.2; color:#06050A; }

  .filters { display:flex; justify-content:flex-end; gap:56px; flex-wrap:wrap; margin-top:85px; }
  .filters button {
    position:relative;
    font-family:'Gilroy',Arial,sans-serif; font-size:18px; font-weight:500; letter-spacing:0.01em;
    padding:0 0 4px 0; border:none; background:none; color:#000;
    text-transform:uppercase; cursor:pointer;
  }
  .filters button::after {
    content:''; position:absolute; left:0; right:0; bottom:-4px; height:1.5px; background:#000;
    transform:scaleX(0); transform-origin:right; transition:transform .25s ease;
  }
  .filters button:hover::after { transform:scaleX(1); transform-origin:left; }
  .filters button.active { font-weight:700; }
  .filters button.active::after { transform:scaleX(1); transform-origin:left; }

  .work-grid-2 { display:grid; grid-template-columns:repeat(2,1fr); gap:48px 40px; padding-top:2px; }
  .work-grid-2 .work-card {
    display:block;
    padding-bottom:44px;
  }
  .work-grid-2 .work-card .thumb { aspect-ratio:848/716.72; height:auto; margin-bottom:0; position:relative; overflow:hidden; background:#f4f4f0; }
  .work-grid-2 .work-card .cap-row { display:flex; justify-content:space-between; align-items:baseline; padding-top:20px; gap:24px; }
  .work-grid-2 .work-card .cat {
    font-size:17px; font-weight:500; letter-spacing:0.01em; text-transform:uppercase; color:#000;
    text-decoration:underline; text-underline-offset:3px; text-decoration-color:#000; flex-shrink:0;
  }
  .work-grid-2 .work-card .title-row { flex-shrink:0; text-align:right; }
  .work-grid-2 .work-card .title-row .arrow { display:none; }
  .work-grid-2 .work-card .title-row .title {
    font-size:13px; font-weight:400; letter-spacing:0.06em; text-transform:uppercase; color:var(--gray); text-decoration:none;
  }
  .work-grid-2 .work-card .sub { display:none; }

  /* Cover hover-swap: reveal an inside project image on hover */
  .work-grid-2 .work-card .thumb .thumb-base,
  .work-grid-2 .work-card .thumb .thumb-hover { transition:opacity .5s ease, transform 6s linear; }
  .work-grid-2 .work-card .thumb .thumb-hover { position:absolute; inset:0; opacity:0; }
  .work-grid-2 .work-card:hover .thumb .thumb-hover { opacity:1; }
  .work-grid-2 .work-card:hover .thumb img { transform:scale(1.03); }

  .load-more-row { display:flex; justify-content:center; padding:24px 0 72px 0; }
  .load-more-row button, .load-more-row a {
    font-family:'Gilroy',Arial,sans-serif; font-size:34px; font-weight:500; text-transform:uppercase;
    letter-spacing:-0.005em; color:#000; background:none; border:none; text-decoration:underline;
    text-underline-offset:6px; text-decoration-color:#000; cursor:pointer; padding:0;
  }
  .load-more-row[data-hidden="true"] { display:none; }
  .work-grid-2 .work-card.extra-card { display:none; }

  .pd-notice {
    display:none; grid-column:1 / -1; text-align:center; padding:140px 20px;
    font-size:clamp(28px,4vw,56px); font-weight:600; text-transform:uppercase;
    letter-spacing:-0.01em; line-height:1.3; color:#000;
  }


/* ---- Services Page ---- */

  .svc-header { padding:64px 0 40px 0; border-bottom:1px solid #000; }
  .svc-header h1 { font-size:clamp(44px,5.6vw,88px); font-weight:500; text-transform:uppercase; margin:0 0 24px 0; letter-spacing:-0.01em; line-height:0.98; }
  .svc-header p { font-size:20px; color:var(--body); max-width:640px; line-height:1.5; margin:0 0 16px 0; }

  .svc-row { display:grid; grid-template-columns:0.9fr 1.1fr; gap:60px; padding:80px 0; border-top:1px solid var(--line); min-height:240px; }
  .svc-row:last-of-type { border-bottom:1px solid var(--line); }
  .svc-row h2 { font-size:clamp(30px,3.6vw,52px); font-weight:500; text-transform:uppercase; letter-spacing:-0.01em; margin:0; align-self:start; padding-top:4px; }
  .svc-row .right { display:flex; flex-direction:column; justify-content:space-between; height:100%; }
  .svc-row p.desc { font-size:23px; color:var(--body); line-height:1.5; max-width:560px; margin:0; }
  .svc-row .view { font-size:17px; font-weight:600; text-transform:uppercase; letter-spacing:0.02em; text-decoration:underline; text-underline-offset:4px; align-self:flex-end; margin-top:40px; }


/* ---- Contact Page ---- */

  .ct-header { padding:24px 0 48px 0; border-bottom:1px solid #000; }
  .ct-header h1 { font-size:clamp(64px,9vw,150px); font-weight:500; text-transform:uppercase; margin:0; letter-spacing:-0.01em; line-height:0.95; }

  form { padding:56px 0 40px 0; }
  .frow { display:grid; grid-template-columns:1fr 1fr; gap:60px; margin-bottom:48px; }
  .field { display:flex; align-items:baseline; gap:14px; border-bottom:1px solid #000; padding-bottom:12px; }
  .field label { font-size:19px; flex-shrink:0; white-space:nowrap; }
  .field .req { color:#87877F; }
  .field .divider { color:#ccc; }
  .field input, .field select, .field textarea {
    border:none; outline:none; font-family:'Gilroy',Arial,sans-serif; font-size:18px; width:100%;
    background:transparent; color:#000;
  }
  .field textarea { resize:none; font-family:'Gilroy',Arial,sans-serif; }
  .field input::placeholder, .field textarea::placeholder { color:#B5B5AF; }

  .how-label { font-size:19px; margin-bottom:20px; }
  .pills { display:flex; gap:14px; flex-wrap:wrap; margin-bottom:60px; }
  .pills button {
    font-family:'Gilroy',Arial,sans-serif; font-size:15px; font-weight:500; letter-spacing:0.01em;
    padding:14px 26px; border-radius:100px; border:1px solid #000; background:#fff; color:#000;
  }
  .pills button.active { background:#000; color:#fff; }

  .submit-row { display:flex; align-items:center; gap:28px; }
  .submit-btn {
    font-family:'Gilroy',Arial,sans-serif; font-size:20px; font-weight:600; text-transform:uppercase;
    background:#000; color:#fff; padding:22px 48px; border:none; letter-spacing:0.01em;
  }
  .submit-note { font-size:14.5px; color:#87877F; max-width:320px; line-height:1.5; }
  .hp-field { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; pointer-events:none; }
  .submit-btn:disabled { opacity:0.6; cursor:default; }


/* ============================================================
   Responsive / Mobile
   ============================================================ */

  /* ---- Tablet (~860px and below) ---- */
  @media (max-width:860px) {
    .svc-row { grid-template-columns:1fr; gap:24px; padding:56px 0; }
    .svc-row .right { height:auto; }
    .svc-row .view { align-self:flex-start; margin-top:24px; }
    .why-row { grid-template-columns:1fr; gap:16px; padding:40px 0; }
    .frow { grid-template-columns:1fr; gap:28px; }
  }

  /* ---- Phone (~680px and below) ---- */
  @media (max-width:680px) {
    nav { flex-wrap:wrap; row-gap:14px; padding:20px 0; }
    nav .links { width:100%; gap:16px; row-gap:10px; font-size:12.5px; flex-wrap:wrap; }
    .back { margin-top:24px; }

    section.block, .more-works { padding-top:40px; padding-bottom:40px; }
    section.block .section-top { margin-bottom:24px; }

    .work-grid-2 { grid-template-columns:1fr; gap:36px; }
    .work-grid-2 .work-card { padding-bottom:0; }

    .work-header { padding:36px 0 24px 0; }
    .filters { justify-content:flex-start; gap:20px; margin-top:24px; }
    .filters button { font-size:15px; }

    .home-hero { padding:32px 0 40px 0; }
    .cs-header { padding:24px 0 20px 0; }
    .cs-caption { margin:40px auto 28px auto; }
    .more-works { margin-top:36px; padding-top:48px; }

    .pd-notice { padding:80px 16px; }

    .deck-viewer .deck-arrow { width:36px; height:36px; font-size:17px; }
    .deck-viewer .deck-counter { font-size:11px; padding:5px 10px; bottom:12px; right:12px; }

    .ct-header { padding:16px 0 32px 0; }
    form { padding:36px 0 24px 0; }
    .field { flex-direction:column; align-items:flex-start; gap:6px; padding-bottom:14px; }
    .field .divider { display:none; }
    .field label { font-size:16px; }
    .submit-row { flex-direction:column; align-items:flex-start; gap:18px; }
    .submit-btn { width:100%; text-align:center; }
    .pills { margin-bottom:40px; }

    footer { padding:56px 0 28px 0; }
    footer .top-row { gap:36px; padding-bottom:40px; }
    footer .footer-cta { max-width:100%; }
    footer .footer-cta-sub { font-size:16px; margin-bottom:22px; }
    footer .footer-cta-email { font-size:18px; }
    footer .linkcols { gap:40px; }
    footer .linkcols a { font-size:24px; margin-bottom:14px; }
    footer .bottom-row { flex-direction:column; align-items:flex-start; gap:10px; padding-top:24px; }
    footer .bottom-row .fine { max-width:100%; overflow-wrap:anywhere; }
  }

  /* ---- Small phone (~480px and below) ---- */
  @media (max-width:480px) {
    nav .links { gap:12px; font-size:11px; }
    nav .brand { font-size:16px; }

    .cs-header h1 { font-size:clamp(30px,10.5vw,88px); }
    .work-header h1 { font-size:clamp(32px,11vw,116px); }
    .svc-header h1 { font-size:clamp(30px,10vw,88px); }
    .ct-header h1 { font-size:clamp(34px,13vw,150px); }
    .big-head { font-size:clamp(44px,13vw,180px); }
    section.block .section-top .big-head { font-size:clamp(44px,13vw,220px); }
    .home-hero-text h1 { font-size:clamp(28px,8vw,58px); }

    .cs-caption { font-size:clamp(18px,5vw,32px); }
    .more-works h2 { font-size:clamp(26px,7vw,58px); }
    .why-row .t { font-size:clamp(28px,7.5vw,58px); }

    footer .footer-cta h2 { font-size:clamp(28px,8vw,72px); }
    footer .footer-cta-email { font-size:15px; }
    footer .linkcols { display:flex; flex-direction:column; gap:20px; }
    footer .socials-row { padding-bottom:40px; }
  }