/* Robin v2 polish: navigation, accent use, mobile portfolio and full footer */

/* Keep the page canvas visually connected to the dark footer on mobile overscroll.
   Use clip instead of hidden: overflow-x:hidden can make body a second vertical
   scroll container on desktop browsers. */
html,body{background:#131a17;max-width:100%}
html{overflow-x:clip;overscroll-behavior-x:none}
body{overflow-x:clip;overscroll-behavior-x:none}
main{background:var(--paper)}

/* Robin brand mark */
.brand-mark{width:42px;height:42px;display:grid;place-items:center;background:transparent!important;color:transparent!important;clip-path:none!important;overflow:hidden;flex:0 0 auto}
.brand-mark img{width:100%;height:100%;object-fit:contain;display:block}

/* Orange is an accent: used for attention and state, not as the base colour. */
.nav-links a{transition:color .18s ease}
.nav-links a:hover,.inline-link:hover,.footer-col a:hover,.footer-bottom a:hover{color:var(--paint)}
.header-cta{position:relative;overflow:hidden}
.header-cta:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--paint)}
.header-cta:hover{background:var(--work2);color:#fff}

.hero .button.primary{position:relative}
.hero .button.primary:after{content:"";width:7px;height:7px;margin-left:10px;background:var(--paint);transform:rotate(45deg)}
.hero .button.secondary:hover{border-color:var(--paint);color:var(--paint)}
.trustline b{color:var(--paint)}
.inline-link{color:var(--paint);transition:color .18s ease}
.inline-link:hover{color:#aa5d35}

/* Cleaner services accordion: no long rules or vertical open-state line. */
.service-accordion{border-top:0;display:grid;gap:8px}
.service-accordion details{position:relative;border:0;background:#f4f0e8;transition:background .2s ease}
.service-accordion summary{padding:0 14px}
.service-accordion details[open]{background:#f1e7dd}
.service-accordion details[open]:before{display:none;content:none}
.service-accordion details[open] summary strong{color:#29332e}
.service-accordion details[open] summary i{color:var(--paint)}
.service-accordion .detail-copy{padding-left:68px;padding-right:16px}

.project-card{outline:1px solid transparent;outline-offset:-1px}
.project-card:hover{outline-color:rgba(223,140,89,.7)}
.project-card figcaption b:after{content:"";display:block;width:22px;height:2px;margin-top:6px;background:var(--paint2)}

.more-about[open] summary{color:var(--paint)}
.work-points span:hover b{color:var(--paint2)}

.form-head small{background:rgba(200,117,69,.12);color:#9b542f;border:1px solid rgba(200,117,69,.24)}
.quote-form button span{font-size:18px}
.quote-form button:focus-visible,.header-cta:focus-visible,.button:focus-visible,.inline-link:focus-visible,.footer-col a:focus-visible,.footer-bottom a:focus-visible{outline:3px solid rgba(223,140,89,.28);outline-offset:3px}

/* Full footer */
.site-footer{padding:0;background:#131a17;color:#fff;border-top:4px solid var(--paint);padding-bottom:env(safe-area-inset-bottom)}
.footer-main{display:grid;grid-template-columns:minmax(0,1.4fr) .7fr .7fr;gap:70px;padding-top:44px;padding-bottom:36px}
.footer-brand-block{max-width:470px}
.footer-brand{display:inline-flex;align-items:center;gap:12px;color:#fff;text-decoration:none;font-size:19px;font-weight:950;letter-spacing:-.035em}
.footer-logo{width:50px;height:50px;display:grid;place-items:center;flex:0 0 auto}
.footer-logo img{width:100%;height:100%;object-fit:contain;display:block}
.footer-brand-block p{margin:12px 0 0;max-width:48ch;color:#9aa49f;font-size:12px;line-height:1.7}
.footer-col{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.footer-col strong{margin-bottom:4px;color:var(--paint2);font-size:9px;letter-spacing:.14em;text-transform:uppercase}
.footer-col a,.footer-col span{color:#b4bcb8;text-decoration:none;font-size:11px;line-height:1.45}
.footer-col span{color:#707a75;cursor:default}
.footer-bottom{min-height:62px;display:grid;grid-template-columns:1fr auto auto;gap:24px;align-items:center;border-top:1px solid rgba(255,255,255,.09);color:#747f79;font-size:9px}
.footer-bottom a{color:inherit;text-decoration:none;transition:color .18s ease}
.made-by-zp{white-space:nowrap}
.made-by-zp strong{font-weight:950;color:inherit}

/* Motion: restrained entrance effects and slow image depth while scrolling. */
@keyframes robin-reveal-up{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@keyframes robin-reveal-left{from{opacity:0;transform:translateX(-30px)}to{opacity:1;transform:translateX(0)}}
@keyframes robin-reveal-right{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:translateX(0)}}
@keyframes robin-card-in{from{opacity:.15;transform:translateY(22px) scale(.975)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes robin-image-drift{from{transform:scale(1.045) translateY(-10px)}to{transform:scale(1.045) translateY(10px)}}
@keyframes robin-header-depth{from{box-shadow:0 0 0 rgba(18,28,23,0)}to{box-shadow:0 10px 30px rgba(18,28,23,.12)}}

/* Small first-view animation; the rest is tied to scroll position. */
.hero-copy .eyebrow{animation:robin-reveal-up .55s cubic-bezier(.2,.7,.2,1) .05s both}
.hero-copy h1{animation:robin-reveal-up .68s cubic-bezier(.2,.7,.2,1) .12s both}
.hero-intro{animation:robin-reveal-up .68s cubic-bezier(.2,.7,.2,1) .2s both}
.hero-actions{animation:robin-reveal-up .68s cubic-bezier(.2,.7,.2,1) .27s both}
.trustline{animation:robin-reveal-up .68s cubic-bezier(.2,.7,.2,1) .34s both}
.hero-photo{animation:robin-reveal-right .82s cubic-bezier(.2,.7,.2,1) .15s both}

@supports (animation-timeline:view()){
  .services-intro,
  .project-heading>*,
  .robin-copy>.eyebrow,
  .robin-copy>h2,
  .robin-copy>.lead,
  .more-about,
  .quote-copy>* ,
  .quote-form,
  .footer-main>* ,
  .footer-bottom{
    animation:robin-reveal-up .8s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline:view();
    animation-range:entry 10% cover 34%;
  }

  .service-accordion details{
    animation:robin-card-in .7s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline:view();
  }
  .service-accordion details:nth-child(1){animation-range:entry 8% cover 28%}
  .service-accordion details:nth-child(2){animation-range:entry 14% cover 34%}
  .service-accordion details:nth-child(3){animation-range:entry 20% cover 40%}

  .project-card{
    animation:robin-card-in .72s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline:view();
    animation-range:entry 5% cover 28%;
  }

  .robin-photo{
    animation:robin-reveal-left .82s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline:view();
    animation-range:entry 8% cover 36%;
  }

  .work-points span{
    animation:robin-reveal-up .65s cubic-bezier(.2,.7,.2,1) both;
    animation-timeline:view();
  }
  .work-points span:nth-child(1){animation-range:entry 8% cover 28%}
  .work-points span:nth-child(2){animation-range:entry 14% cover 34%}
  .work-points span:nth-child(3){animation-range:entry 20% cover 40%}

  .hero-photo img,.robin-photo img{
    animation:robin-image-drift linear both;
    animation-timeline:view();
    animation-range:entry 0% exit 100%;
    will-change:transform;
  }

  .site-header{
    animation:robin-header-depth linear both;
    animation-timeline:scroll(root block);
    animation-range:0 140px;
  }
}

@media(max-width:900px){
  .footer-main{grid-template-columns:1.3fr .7fr .7fr;gap:32px}
}

@media(max-width:620px){
  /* Push Contact to the true right edge of the mobile header. */
  .header-cta{margin-left:auto;font-size:10px;padding:0 12px}
  .brand-mark{width:36px;height:36px}

  /* Native horizontal portfolio scrolling without trapping normal page scrolling. */
  .project-track{
    display:flex;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:none;
    overscroll-behavior:auto;
    touch-action:pan-x pan-y pinch-zoom;
    -webkit-overflow-scrolling:touch;
  }
  .project-card{scroll-snap-align:none;scroll-snap-stop:normal}

  .hero .button.primary:after{width:6px;height:6px;margin-left:7px}

  .service-accordion{gap:7px}
  .service-accordion summary{padding:0 11px}
  .service-accordion .detail-copy{padding:0 12px 16px 54px}

  .footer-main{grid-template-columns:1fr 1fr;gap:28px 18px;padding-top:34px;padding-bottom:28px}
  .footer-brand-block{grid-column:1/-1}
  .footer-logo{width:44px;height:44px}
  .footer-brand-block p{font-size:11px}
  .footer-col a,.footer-col span{font-size:10px}
  .footer-bottom{min-height:0;grid-template-columns:1fr auto;gap:9px 16px;padding:16px 0 22px}
  .footer-bottom>a:last-child{display:none}

  /* Motion is a little calmer on a phone. */
  @keyframes robin-reveal-up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
  @keyframes robin-reveal-left{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
  @keyframes robin-reveal-right{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:translateX(0)}}
  @keyframes robin-image-drift{from{transform:scale(1.03) translateY(-5px)}to{transform:scale(1.03) translateY(5px)}}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important}
  .hero-photo img,.robin-photo img{transform:none!important}
}