/* =========================================================
   QUOREAL INTERNAL PAGES / V4
   2026-09-25
   Photo-led editorial system aligned with TOP.
   ========================================================= */

:root {
  --qp-black:#090909;
  --qp-dark:#141414;
  --qp-white:#fff;
  --qp-off:#f2f2ef;
  --qp-off-2:#e9e9e5;
  --qp-text:#111;
  --qp-muted:#6d6d69;
  --qp-line:rgba(17,17,17,.14);
  --qp-line-dark:rgba(255,255,255,.16);
  --qp-gold:#b98b2f;
  --qp-ease:cubic-bezier(.22,1,.36,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--qp-white)}
body{
  margin:0;
  color:var(--qp-text);
  background:var(--qp-white);
  font-family:"Noto Sans JP","Zen Kaku Gothic New",sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-transitioning{overflow:hidden}
::selection{background:#111;color:#fff}
a{color:inherit}
img{display:block;max-width:100%}
button,a{-webkit-tap-highlight-color:transparent}

.qp-shell,
.works-page-shell{
  width:min(calc(100% - 72px),1440px);
  margin-inline:auto;
}

.qp-skip{
  position:fixed;
  left:16px;
  top:-80px;
  z-index:9999;
  padding:10px 14px;
  background:#fff;
  color:#000;
}
.qp-skip:focus{top:16px}

/* ---------------------------------------------------------
   HEADER / TOP-LIKE
---------------------------------------------------------- */
.qp-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:200;
  height:90px;
  color:#111;
  background:rgba(255,255,255,.94);
  border-bottom:1px solid rgba(17,17,17,.09);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.qp-header__inner{
  width:min(calc(100% - 64px),1480px);
  height:100%;
  margin-inline:auto;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
}
.qp-logo{justify-self:start;text-decoration:none}
.qp-logo--symbol img{width:38px;height:38px;object-fit:contain}
.qp-nav{display:flex;align-items:center;gap:42px}
.qp-nav>a,
.qp-nav-group>a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#111;
  font-size:11px;
  font-weight:700;
  letter-spacing:.18em;
  text-decoration:none;
  white-space:nowrap;
}
.qp-nav-group{position:relative;padding:34px 0}
.qp-nav-group>a span{font-size:15px;font-weight:400;letter-spacing:0}
.qp-nav-popover{
  position:absolute;
  top:78px;
  left:50%;
  z-index:220;
  width:330px;
  padding:12px;
  background:#0d0d0d;
  color:#fff;
  border:1px solid rgba(255,255,255,.16);
  opacity:0;
  visibility:hidden;
  transform:translate3d(-50%,12px,0);
  transition:opacity .28s ease,transform .38s var(--qp-ease),visibility .28s ease;
}
.qp-nav-popover--service{width:430px}
.qp-nav-group:hover .qp-nav-popover,
.qp-nav-group:focus-within .qp-nav-popover{
  opacity:1;
  visibility:visible;
  transform:translate3d(-50%,0,0);
}
.qp-nav-popover a{
  display:grid;
  grid-template-columns:40px 1fr;
  gap:12px;
  align-items:center;
  min-height:52px;
  padding:8px 10px;
  border-bottom:1px solid rgba(255,255,255,.1);
  text-decoration:none;
  transition:background-color .25s ease,transform .3s var(--qp-ease);
}
.qp-nav-popover a:last-child{border-bottom:0}
.qp-nav-popover a:hover{background:#1b1b1b;transform:translateX(3px)}
.qp-nav-popover small{color:#898989;font-size:9px;letter-spacing:.14em}
.qp-nav-popover strong{font-size:12px;line-height:1.4;letter-spacing:.03em}
.qp-contact-link--button{
  justify-self:end;
  display:inline-flex;
  align-items:center;
  gap:14px;
  min-height:50px;
  padding:0 10px 0 22px;
  border:1px solid #111;
  color:#111;
  font-size:13px;
  font-weight:700;
  text-decoration:none;
}
.qp-contact-link--button i{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  border:1px solid #111;
  border-radius:50%;
  font-style:normal;
  transition:transform .3s var(--qp-ease),background-color .25s ease,color .25s ease;
}
.qp-contact-link--button:hover i{transform:translate3d(2px,-2px,0);background:#111;color:#fff}
.qp-menu-button{display:none}

/* ---------------------------------------------------------
   PAGE TRANSITION / REVEAL
---------------------------------------------------------- */
.qp-transition{
  position:fixed;
  inset:0;
  z-index:9998;
  pointer-events:none;
  background:#090909;
  transform:translateY(100%);
}
.qp-transition.is-entering{animation:qpEnter .9s var(--qp-ease) forwards}
.qp-transition.is-leaving{pointer-events:auto;animation:qpLeave .72s var(--qp-ease) forwards}
@keyframes qpEnter{0%{transform:translateY(0)}100%{transform:translateY(-100%)}}
@keyframes qpLeave{0%{transform:translateY(100%)}100%{transform:translateY(0)}}
[data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .8s ease,transform .95s var(--qp-ease)}
[data-reveal].is-visible{opacity:1;transform:none}

/* ---------------------------------------------------------
   HERO / COMPACT, PHOTO-LED
---------------------------------------------------------- */
.qp-hero{
  position:relative;
  min-height:720px;
  padding-top:90px;
  overflow:hidden;
  background:var(--qp-off);
  color:#111;
}
.qp-hero::before{
  content:"";
  position:absolute;
  inset:90px 0 0;
  pointer-events:none;
  background-image:
    linear-gradient(to right,transparent calc(25% - .5px),rgba(17,17,17,.05) 25%,transparent calc(25% + .5px)),
    linear-gradient(to right,transparent calc(50% - .5px),rgba(17,17,17,.05) 50%,transparent calc(50% + .5px)),
    linear-gradient(to right,transparent calc(75% - .5px),rgba(17,17,17,.05) 75%,transparent calc(75% + .5px));
}
.qp-hero__inner{
  position:relative;
  z-index:1;
  width:min(calc(100% - 72px),1440px);
  min-height:630px;
  margin-inline:auto;
  padding:64px 0 60px;
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);
  grid-template-areas:
    "eyebrow visual"
    "title visual"
    "bottom visual";
  grid-template-rows:auto 1fr auto;
  column-gap:clamp(56px,7vw,120px);
  align-items:center;
}
.qp-eyebrow{
  grid-area:eyebrow;
  align-self:start;
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding-top:8px;
  color:#686864;
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.qp-eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  margin-top:7px;
  margin-right:auto;
  background:var(--qp-gold);
}
.qp-title{
  grid-area:title;
  align-self:center;
  margin:34px 0 22px;
  max-width:760px;
  font-size:clamp(72px,8.2vw,132px);
  font-weight:700;
  line-height:.88;
  letter-spacing:-.065em;
  text-transform:uppercase;
}
.qp-title--medium{font-size:clamp(58px,6.7vw,108px)}
.qp-title-line{display:block;overflow:hidden}
.qp-title-line>span{display:block;transform:translateY(108%);animation:qpTitleIn 1s .12s var(--qp-ease) forwards}
.qp-title-line:nth-child(2)>span{animation-delay:.2s}
.qp-title-line:nth-child(3)>span{animation-delay:.28s}
@keyframes qpTitleIn{to{transform:none}}
.qp-hero__bottom{
  grid-area:bottom;
  align-self:end;
  display:block;
  margin:0;
  padding-top:24px;
  border-top:1px solid var(--qp-line);
}
.qp-hero__lead{
  max-width:620px;
  margin:0;
  color:#4f4f4b;
  font-size:clamp(15px,1.2vw,19px);
  line-height:1.95;
}
.qp-scroll{display:inline-block;margin-top:28px;color:#868681;font-size:9px;letter-spacing:.18em}

.qp-hero-visual{
  grid-area:visual;
  position:relative;
  width:100%;
  height:490px;
  margin:0;
  align-self:center;
}
.qp-hero-visual--single{
  clip-path:polygon(8% 0,100% 0,100% 88%,86% 100%,0 100%,0 12%);
  background:#111;
}
.qp-hero-visual--single::before{
  content:"";
  position:absolute;
  z-index:3;
  left:24px;
  top:24px;
  width:42px;
  height:1px;
  background:var(--qp-gold);
}
.qp-hero-visual--single img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.qp-hero-visual figcaption{
  position:absolute;
  z-index:4;
  left:26px;
  bottom:24px;
  max-width:65%;
  padding:8px 10px;
  background:rgba(255,255,255,.86);
  color:#111;
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}
.qp-hero-visual--service-grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  height:500px;
}
.qp-hero-visual--service-grid img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06)}
.qp-hero-visual--service-grid img:nth-child(1){clip-path:polygon(0 0,92% 0,100% 12%,100% 100%,0 100%)}
.qp-hero-visual--service-grid img:nth-child(2){clip-path:polygon(8% 0,100% 0,100% 100%,0 88%)}
.qp-hero-visual--service-grid img:nth-child(3){clip-path:polygon(0 12%,100% 0,92% 100%,0 100%)}
.qp-hero-visual--service-grid img:nth-child(4){clip-path:polygon(0 0,100% 10%,100% 100%,10% 100%)}

/* ---------------------------------------------------------
   GENERAL CONTENT
---------------------------------------------------------- */
.qp-section{position:relative;padding:104px 0;overflow:hidden}
.qp-section--white{background:#fff;color:#111}
.qp-section--dark{background:#141414;color:#fff}
.qp-section:nth-of-type(odd).qp-section--white{background:#f7f7f5}

.qp-section__head{
  display:grid;
  grid-template-columns:minmax(160px,.34fr) minmax(0,1.66fr);
  gap:40px;
  align-items:start;
  padding-top:18px;
  border-top:1px solid currentColor;
  border-color:var(--qp-line);
}
.qp-section--dark .qp-section__head{border-color:var(--qp-line-dark)}
.qp-section__index,
.qp-approved__label{
  color:var(--qp-gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.17em;
  text-transform:uppercase;
}
.qp-section__title,
.qp-approved__body h2{
  margin:0;
  max-width:980px;
  font-size:clamp(38px,4.8vw,72px);
  font-weight:700;
  line-height:1.08;
  letter-spacing:-.045em;
}
.qp-section__head+.qp-copy-grid,
.qp-section__head+.qp-list,
.qp-section__head+.qp-process{margin-top:54px}
.qp-copy-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(34px,5vw,88px);
  max-width:1060px;
  margin-left:auto;
}
.qp-copy-grid p,
.qp-approved__body p,
.works-page-copy p{
  margin:0;
  color:#5f5f5a;
  font-size:15px;
  line-height:2;
}
.qp-section--dark .qp-copy-grid p,
.qp-section--dark .qp-approved__body p{color:rgba(255,255,255,.68)}

.qp-approved{
  display:grid;
  grid-template-columns:minmax(160px,.34fr) minmax(0,1.66fr);
  gap:40px;
  align-items:start;
  padding-top:18px;
  border-top:1px solid var(--qp-line);
}
.qp-section--dark .qp-approved{border-color:var(--qp-line-dark)}
.qp-approved__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);gap:clamp(42px,6vw,96px);align-items:start}

.qp-list{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0 48px;
  border-top:1px solid var(--qp-line);
}
.qp-section--dark .qp-list{border-color:var(--qp-line-dark)}
.qp-list-item{
  display:grid;
  grid-template-columns:42px minmax(80px,.55fr) minmax(0,1fr);
  gap:18px;
  align-items:center;
  min-height:86px;
  padding:16px 0;
  border-bottom:1px solid var(--qp-line);
  transition:transform .35s var(--qp-ease),background-color .25s ease;
}
.qp-section--dark .qp-list-item{border-color:var(--qp-line-dark)}
.qp-list-item:hover{transform:translateX(5px)}
.qp-list-item__no{color:#aaa;font-size:10px;letter-spacing:.12em}
.qp-list-item__en{color:#8b8b87;font-size:9px;font-weight:700;letter-spacing:.16em}
.qp-list-item__jp{font-size:15px;font-weight:700;line-height:1.5}
.qp-list-item__arrow{display:none}

.qp-process{border-top:1px solid var(--qp-line)}
.qp-section--dark .qp-process{border-color:var(--qp-line-dark)}
.qp-process__row{
  display:grid;
  grid-template-columns:70px 1fr;
  gap:24px;
  align-items:center;
  min-height:88px;
  border-bottom:1px solid var(--qp-line);
}
.qp-section--dark .qp-process__row{border-color:var(--qp-line-dark)}
.qp-process__row>*:first-child{color:var(--qp-gold);font-size:11px;font-weight:700;letter-spacing:.12em}

.qp-text-link{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-top:36px;
  padding-bottom:8px;
  border-bottom:1px solid currentColor;
  font-size:11px;
  font-weight:700;
  letter-spacing:.13em;
  text-decoration:none;
}

/* ---------------------------------------------------------
   CONTENT PHOTOGRAPHY
---------------------------------------------------------- */
.qp-section--media-split .qp-shell{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(52px,7vw,110px);
  align-items:center;
}
.qp-section--media-split .qp-approved{display:block;border-top:1px solid var(--qp-line)}
.qp-section--media-split .qp-approved__label{display:block;margin-bottom:30px}
.qp-section--media-split .qp-approved__body{display:block}
.qp-section--media-split .qp-approved__body p{margin-top:34px;max-width:720px}
.qp-editorial-photo{margin:0;overflow:hidden;background:#ddd}
.qp-editorial-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);transition:transform .8s var(--qp-ease)}
.qp-editorial-photo:hover img{transform:scale(1.025)}
.qp-editorial-photo--split{height:440px;clip-path:polygon(0 0,90% 0,100% 10%,100% 100%,8% 100%,0 90%)}

.qp-section--media-side .qp-shell{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.72fr);
  grid-auto-flow:row;
  gap:0 clamp(48px,6vw,94px);
  align-items:start;
}
.qp-section--media-side .qp-section__head,
.qp-section--media-side .qp-copy-grid,
.qp-section--media-side .qp-list,
.qp-section--media-side .qp-process,
.qp-section--media-side .qp-text-link,
.qp-section--media-side .qp-approved{grid-column:1}
.qp-section--media-side .qp-editorial-photo--side{grid-column:2;grid-row:1 / span 6;align-self:center;height:420px;clip-path:polygon(8% 0,100% 0,100% 88%,90% 100%,0 100%,0 10%)}
.qp-section--media-side .qp-copy-grid{grid-template-columns:1fr;max-width:780px;margin-left:0}
.qp-section--media-side .qp-list{grid-template-columns:1fr}

.qp-section--media-wide .qp-editorial-photo--wide{height:380px;margin:46px 0 54px;clip-path:polygon(0 0,96% 0,100% 12%,100% 100%,0 100%)}

.qp-photo-triptych{
  margin:58px 0 0;
  display:grid;
  grid-template-columns:1.05fr .78fr .92fr;
  gap:12px;
  align-items:end;
}
.qp-photo-triptych img{width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.qp-photo-triptych img:nth-child(1){height:360px}
.qp-photo-triptych img:nth-child(2){height:270px}
.qp-photo-triptych img:nth-child(3){height:320px}

.qp-approach-gallery{
  margin:58px 0 0;
  display:grid;
  grid-template-columns:1.12fr .82fr .96fr .78fr;
  gap:10px;
  align-items:end;
}
.qp-approach-gallery img{width:100%;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.qp-approach-gallery img:nth-child(1){height:320px}
.qp-approach-gallery img:nth-child(2){height:250px}
.qp-approach-gallery img:nth-child(3){height:290px}
.qp-approach-gallery img:nth-child(4){height:220px}

/* ---------------------------------------------------------
   PAGE-SPECIFIC RHYTHM
---------------------------------------------------------- */
.qp-page-about .qp-section:nth-of-type(3),
.qp-page-about .qp-section:nth-of-type(6){background:#111;color:#fff}
.qp-page-about .qp-section:nth-of-type(4),
.qp-page-about .qp-section:nth-of-type(7){background:#ecece8}

.qp-page-service .qp-section{background:#fff;color:#111}
.qp-page-service .qp-section:nth-of-type(3),
.qp-page-service .qp-section:nth-of-type(5){background:#f2f2ef}
.qp-page-service .qp-section:nth-of-type(6){background:#111;color:#fff}

.qp-page-inside .qp-section--dark,
.qp-page-field .qp-section--dark,
.qp-page-cs .qp-section--dark,
.qp-page-pm .qp-section--dark,
.qp-page-why .qp-section--dark,
.qp-page-approach .qp-section--dark{
  background:#f0f0ed;
  color:#111;
}
.qp-page-inside .qp-section--dark .qp-copy-grid p,
.qp-page-field .qp-section--dark .qp-copy-grid p,
.qp-page-cs .qp-section--dark .qp-copy-grid p,
.qp-page-pm .qp-section--dark .qp-copy-grid p,
.qp-page-why .qp-section--dark .qp-copy-grid p,
.qp-page-approach .qp-section--dark .qp-copy-grid p,
.qp-page-inside .qp-section--dark .qp-approved__body p,
.qp-page-field .qp-section--dark .qp-approved__body p,
.qp-page-cs .qp-section--dark .qp-approved__body p,
.qp-page-pm .qp-section--dark .qp-approved__body p,
.qp-page-why .qp-section--dark .qp-approved__body p,
.qp-page-approach .qp-section--dark .qp-approved__body p{color:#5f5f5a}
.qp-page-inside .qp-section--dark .qp-section__head,
.qp-page-field .qp-section--dark .qp-section__head,
.qp-page-cs .qp-section--dark .qp-section__head,
.qp-page-pm .qp-section--dark .qp-section__head,
.qp-page-why .qp-section--dark .qp-section__head,
.qp-page-approach .qp-section--dark .qp-section__head,
.qp-page-inside .qp-section--dark .qp-approved,
.qp-page-field .qp-section--dark .qp-approved,
.qp-page-cs .qp-section--dark .qp-approved,
.qp-page-pm .qp-section--dark .qp-approved,
.qp-page-why .qp-section--dark .qp-approved,
.qp-page-approach .qp-section--dark .qp-approved{border-color:var(--qp-line)}
.qp-page-inside .qp-section--dark .qp-list,
.qp-page-field .qp-section--dark .qp-list,
.qp-page-cs .qp-section--dark .qp-list,
.qp-page-pm .qp-section--dark .qp-list,
.qp-page-why .qp-section--dark .qp-list,
.qp-page-approach .qp-section--dark .qp-list,
.qp-page-inside .qp-section--dark .qp-list-item,
.qp-page-field .qp-section--dark .qp-list-item,
.qp-page-cs .qp-section--dark .qp-list-item,
.qp-page-pm .qp-section--dark .qp-list-item,
.qp-page-why .qp-section--dark .qp-list-item,
.qp-page-approach .qp-section--dark .qp-list-item{border-color:var(--qp-line)}

/* Field Sales key line */
.qp-page-field .qp-hero__lead::before{
  content:"営業を、前に進める。";
  display:block;
  margin-bottom:14px;
  color:#111;
  font-size:clamp(22px,2vw,34px);
  font-weight:700;
  line-height:1.3;
  letter-spacing:-.03em;
}

/* CS intentionally quieter */
.qp-page-cs .qp-title{font-size:clamp(54px,6.2vw,96px)}
.qp-page-cs .qp-hero-visual{height:430px}

/* Approach as a continuous editorial sequence */
.qp-page-approach .qp-approach-step{padding:78px 0}
.qp-page-approach .qp-approach-step .qp-shell{position:relative;padding-left:96px}
.qp-page-approach .qp-approach-step .qp-shell::before{
  content:"";
  position:absolute;
  left:46px;
  top:0;
  bottom:-78px;
  width:1px;
  background:rgba(17,17,17,.13);
}
.qp-page-approach .qp-approach-step .qp-section__head,
.qp-page-approach .qp-approach-step .qp-approved{border-top:0}
.qp-page-approach .qp-approach-step .qp-section__index,
.qp-page-approach .qp-approach-step .qp-approved__label{font-size:11px}

/* ---------------------------------------------------------
   NEXT / FOOTER
---------------------------------------------------------- */
.qp-next{
  display:block;
  padding:70px 0;
  background:#0d0d0d;
  color:#fff;
  text-decoration:none;
}
.qp-next .qp-shell{display:grid;grid-template-columns:.5fr 1.5fr;gap:40px;align-items:end}
.qp-next__meta{color:#8b8b86;font-size:10px;letter-spacing:.16em}
.qp-next__title{margin:0;font-size:clamp(40px,5vw,74px);line-height:1;letter-spacing:-.05em}
.qp-footer{padding:54px 0 28px;background:#0d0d0d;color:#fff;border-top:1px solid rgba(255,255,255,.14)}
.qp-footer__grid{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:start}
.qp-footer__brand{font-size:24px;font-weight:700;letter-spacing:-.04em}
.qp-footer__links{display:flex;flex-wrap:wrap;gap:24px}
.qp-footer__links a{color:#bcbcbc;font-size:10px;letter-spacing:.12em;text-decoration:none}
.qp-footer__bottom{display:flex;justify-content:space-between;gap:30px;margin-top:44px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);color:#777;font-size:10px;line-height:1.7}

/* ---------------------------------------------------------
   WORKS PAGE V4
---------------------------------------------------------- */
.works-page-v4{padding-top:90px;background:#fff;color:#111}
.works-page-hero{padding:74px 0 86px;background:#f1f1ee;overflow:hidden}
.works-page-hero__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(480px,1.2fr);gap:clamp(60px,8vw,140px);align-items:center}
.works-page-kicker{display:inline-flex;align-items:center;gap:14px;color:#6b6b67;font-size:10px;font-weight:700;letter-spacing:.17em;text-transform:uppercase}
.works-page-kicker::before{content:"";width:32px;height:1px;background:var(--qp-gold)}
.works-page-hero h1{margin:24px 0 22px;font-size:clamp(58px,7vw,108px);line-height:.95;letter-spacing:-.06em}
.works-page-hero p{margin:0;color:#5f5f5a;font-size:16px;line-height:1.95}
.works-page-link{display:inline-flex;gap:18px;margin-top:34px;padding-bottom:8px;border-bottom:1px solid #111;font-size:10px;font-weight:700;letter-spacing:.13em;text-decoration:none}
.works-page-hero__visual{position:relative;height:500px;margin:0}
.works-page-hero__visual img{position:absolute;right:0;bottom:0;width:84%;height:78%;object-fit:cover;filter:grayscale(1) contrast(1.05);clip-path:polygon(0 0,92% 0,100% 12%,100% 100%,0 100%)}
.works-page-hero__word{position:absolute;z-index:2;left:-6%;top:2%;font-size:clamp(96px,10vw,170px);font-weight:800;line-height:.82;letter-spacing:-.07em;color:transparent;background-image:url('/assets/images/section-works-title.jpg');background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}

.works-page-section{padding:110px 0}
.works-page-method{background:#fff}
.works-page-method__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(60px,8vw,130px);align-items:center}
.works-page-photo{margin:0;overflow:hidden}
.works-page-photo img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.04)}
.works-page-photo--large{height:500px;clip-path:polygon(0 0,90% 0,100% 10%,100% 100%,0 100%)}
.works-page-photo--medium{height:420px;clip-path:polygon(8% 0,100% 0,100% 88%,90% 100%,0 100%,0 10%)}
.works-page-copy h2,.works-page-status h2,.works-page-next h2{margin:22px 0 26px;font-size:clamp(38px,4.6vw,68px);line-height:1.08;letter-spacing:-.045em}
.works-page-copy p{margin-top:18px}
.works-page-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;border-top:1px solid var(--qp-line);border-left:1px solid var(--qp-line)}
.works-page-steps span{min-height:78px;padding:16px;border-right:1px solid var(--qp-line);border-bottom:1px solid var(--qp-line);font-size:12px;font-weight:700;line-height:1.45}
.works-page-steps b{display:block;margin-bottom:8px;color:var(--qp-gold);font-size:9px;letter-spacing:.13em}
.works-page-policy{background:#141414;color:#fff}
.works-page-policy__grid{display:grid;grid-template-columns:1fr .86fr;gap:clamp(70px,8vw,140px);align-items:center}
.works-page-policy .works-page-copy p{color:rgba(255,255,255,.68)}
.works-page-policy .works-page-kicker{color:#aaa}
.works-page-status{background:#efefec}
.works-page-status__head{display:grid;grid-template-columns:.42fr 1fr;gap:34px;align-items:start}
.works-page-status__head .works-page-kicker{grid-column:1}.works-page-status__head h2,.works-page-status__head p{grid-column:2}
.works-page-status__head h2{margin-top:0}.works-page-status__head p{margin-top:-8px;color:#666}
.works-page-status__rows{margin-top:46px;border-top:1px solid var(--qp-line)}
.works-page-status__rows>div{display:grid;grid-template-columns:80px 1fr auto;gap:24px;align-items:center;min-height:102px;border-bottom:1px solid var(--qp-line)}
.works-page-status__rows span{color:var(--qp-gold);font-size:10px;letter-spacing:.12em}
.works-page-status__rows strong{font-size:clamp(20px,2vw,30px)}
.works-page-status__rows small{color:#777;font-size:9px;letter-spacing:.15em}
.works-page-next{padding:70px 0;background:#fff;border-top:1px solid var(--qp-line)}
.works-page-next__grid{display:grid;grid-template-columns:1fr auto;align-items:end;gap:40px}
.works-page-next h2{margin-bottom:0}
.works-page-next a{display:inline-flex;gap:20px;padding:16px 0;border-bottom:1px solid #111;font-size:12px;font-weight:700;letter-spacing:.14em;text-decoration:none}

/* ---------------------------------------------------------
   RESPONSIVE
---------------------------------------------------------- */
@media(max-width:1100px){
  .qp-nav{gap:24px}
  .qp-nav>a,.qp-nav-group>a{font-size:10px}
  .qp-hero__inner{grid-template-columns:minmax(0,1fr) minmax(360px,.85fr);column-gap:50px}
  .qp-hero-visual{height:430px}
  .qp-section--media-side .qp-shell{grid-template-columns:1fr 320px;gap:48px}
  .works-page-hero__grid{grid-template-columns:.86fr 1.14fr;gap:60px}
}

@media(max-width:900px){
  .qp-shell,.works-page-shell{width:min(calc(100% - 40px),760px)}
  .qp-header{height:72px}
  .qp-header__inner{width:calc(100% - 32px);grid-template-columns:1fr auto;gap:16px}
  .qp-logo--symbol img{width:34px;height:34px}
  .qp-contact-link{display:none}
  .qp-menu-button{display:block;justify-self:end;border:0;background:transparent;color:#111;font-size:10px;font-weight:700;letter-spacing:.14em}
  .qp-nav{position:fixed;left:0;right:0;top:72px;display:none;flex-direction:column;align-items:stretch;gap:0;padding:18px 20px 28px;background:#fff;border-top:1px solid var(--qp-line);box-shadow:0 20px 40px rgba(0,0,0,.08)}
  .qp-nav.is-open{display:flex}
  .qp-nav>a,.qp-nav-group>a{display:flex;min-height:54px;align-items:center;border-bottom:1px solid var(--qp-line);font-size:11px}
  .qp-nav-group{padding:0}
  .qp-nav-popover{position:static;width:auto!important;padding:0 0 8px;background:#f4f4f1;color:#111;border:0;opacity:1;visibility:visible;transform:none;display:none}
  .qp-nav-group:focus-within .qp-nav-popover,.qp-nav-group:hover .qp-nav-popover{transform:none}
  .qp-nav.is-open .qp-nav-popover{display:block}
  .qp-nav-popover a{min-height:46px;border-color:var(--qp-line)}
  .qp-nav-popover small{color:#888}

  .qp-hero{min-height:auto;padding-top:72px}
  .qp-hero::before{inset:72px 0 0}
  .qp-hero__inner{min-height:0;padding:46px 0 54px;display:grid;grid-template-columns:1fr;grid-template-areas:"eyebrow" "title" "visual" "bottom";row-gap:34px}
  .qp-title,.qp-title--medium{font-size:clamp(56px,14vw,96px);margin:12px 0 0}
  .qp-hero-visual{height:410px}
  .qp-hero__bottom{margin-top:0}

  .qp-section{padding:78px 0}
  .qp-section__head,.qp-approved{grid-template-columns:1fr;gap:18px}
  .qp-approved__body{grid-template-columns:1fr;gap:28px}
  .qp-section__title,.qp-approved__body h2{font-size:clamp(34px,8vw,54px)}
  .qp-copy-grid{grid-template-columns:1fr;gap:26px;margin-left:0}
  .qp-list{grid-template-columns:1fr}
  .qp-section--media-split .qp-shell{grid-template-columns:1fr;gap:38px}
  .qp-editorial-photo--split{height:380px}
  .qp-section--media-side .qp-shell{display:block}
  .qp-section--media-side .qp-editorial-photo--side{height:380px;margin:42px 0 0}
  .qp-photo-triptych{grid-template-columns:1fr 1fr;gap:10px}
  .qp-photo-triptych img:nth-child(1){grid-column:1 / -1;height:330px}.qp-photo-triptych img:nth-child(2),.qp-photo-triptych img:nth-child(3){height:220px}
  .qp-approach-gallery{grid-template-columns:1fr 1fr}.qp-approach-gallery img{height:220px!important}
  .qp-page-approach .qp-approach-step .qp-shell{padding-left:42px}
  .qp-page-approach .qp-approach-step .qp-shell::before{left:16px}
  .qp-next .qp-shell{grid-template-columns:1fr;gap:24px}
  .qp-footer__grid{grid-template-columns:1fr}.qp-footer__links{gap:16px}.qp-footer__bottom{flex-direction:column}

  .works-page-v4{padding-top:72px}
  .works-page-hero__grid,.works-page-method__grid,.works-page-policy__grid{grid-template-columns:1fr;gap:42px}
  .works-page-hero__visual{height:430px}
  .works-page-hero__word{font-size:clamp(82px,19vw,126px)}
  .works-page-photo--large,.works-page-photo--medium{height:380px}
  .works-page-status__head{grid-template-columns:1fr;gap:18px}.works-page-status__head>*{grid-column:1!important}
}

@media(max-width:560px){
  .qp-shell,.works-page-shell{width:calc(100% - 28px)}
  .qp-hero__inner{width:calc(100% - 28px);padding-top:34px}
  .qp-eyebrow{font-size:9px;gap:12px}.qp-eyebrow::before{width:24px}
  .qp-title,.qp-title--medium{font-size:clamp(48px,16vw,74px)}
  .qp-hero-visual{height:320px}.qp-hero-visual--service-grid{height:360px;gap:6px}
  .qp-hero__lead{font-size:14px;line-height:1.85}
  .qp-section{padding:64px 0}
  .qp-section__title,.qp-approved__body h2{font-size:clamp(30px,10vw,44px)}
  .qp-copy-grid p,.qp-approved__body p,.works-page-copy p{font-size:14px}
  .qp-list-item{grid-template-columns:32px 84px 1fr;gap:12px;min-height:78px}.qp-list-item__jp{font-size:14px}
  .qp-editorial-photo--split,.qp-section--media-side .qp-editorial-photo--side,.qp-section--media-wide .qp-editorial-photo--wide{height:280px}
  .qp-photo-triptych img:nth-child(1){height:260px}.qp-photo-triptych img:nth-child(2),.qp-photo-triptych img:nth-child(3){height:180px}
  .qp-approach-gallery{grid-template-columns:1fr 1fr}.qp-approach-gallery img{height:170px!important}
  .qp-next__title{font-size:38px}

  .works-page-hero{padding:48px 0 64px}
  .works-page-hero h1{font-size:54px}
  .works-page-hero__visual{height:320px}.works-page-hero__visual img{width:94%;height:74%}.works-page-hero__word{left:0;top:0;font-size:72px}
  .works-page-section{padding:72px 0}
  .works-page-photo--large,.works-page-photo--medium{height:300px}
  .works-page-steps{grid-template-columns:1fr 1fr}
  .works-page-status__rows>div{grid-template-columns:44px 1fr;gap:14px;min-height:88px}.works-page-status__rows small{grid-column:2}
  .works-page-next__grid{grid-template-columns:1fr;gap:22px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1!important;transform:none!important}
  .qp-title-line>span{transform:none!important}
}

/* =========================================================
   QUOREAL INTERNAL PAGES / V5 REDESIGN
   2026-09-28
   Goal: shorter visual rhythm, stronger hierarchy, TOP-level motion,
   readable typography, and photo-led editorial composition.
   ========================================================= */

:root{
  --qp-v5-off:#f1f1ee;
  --qp-v5-soft:#e8e8e4;
  --qp-v5-black:#0b0b0b;
  --qp-v5-charcoal:#171717;
  --qp-v5-line:rgba(16,16,16,.12);
  --qp-v5-line-dark:rgba(255,255,255,.15);
}

/* ---------- Global rhythm ---------- */
.qp-page{
  background:#fff;
}
.qp-page main{
  overflow:hidden;
}
.qp-shell,
.works-page-shell{
  width:min(calc(100% - 88px),1420px);
}

/* ---------- HERO / compact, editorial, photo-first ---------- */
.qp-hero{
  min-height:640px !important;
  padding-top:90px !important;
  background:var(--qp-v5-off) !important;
}
.qp-hero::before{
  inset:90px 0 0 !important;
  opacity:.78;
}
.qp-hero__inner{
  min-height:550px !important;
  padding:52px 0 50px !important;
  grid-template-columns:minmax(0,.88fr) minmax(430px,1.12fr) !important;
  column-gap:clamp(44px,6vw,96px) !important;
}
.qp-eyebrow{
  font-size:10px !important;
  letter-spacing:.18em !important;
}
.qp-title,
.qp-title--medium{
  margin:22px 0 18px !important;
  max-width:700px !important;
  font-size:clamp(56px,6.2vw,96px) !important;
  line-height:.9 !important;
  letter-spacing:-.055em !important;
}
.qp-hero__bottom{
  padding-top:20px !important;
}
.qp-hero__lead{
  max-width:560px !important;
  font-size:clamp(15px,1.12vw,18px) !important;
  line-height:1.8 !important;
}
.qp-scroll{
  margin-top:20px !important;
  font-size:10px !important;
}
.qp-hero-visual{
  height:420px !important;
}
.qp-hero-visual--single{
  clip-path:polygon(0 0,calc(100% - 24px) 0,100% 24px,100% 100%,24px 100%,0 calc(100% - 24px)) !important;
  background:#d9d9d5 !important;
}
.qp-hero-visual--single::before{
  left:18px !important;
  top:18px !important;
  width:34px !important;
}
.qp-hero-visual--single img{
  transform:scale(1.025);
  transition:transform 1.25s var(--qp-ease),filter .5s ease !important;
  filter:grayscale(1) contrast(1.06) !important;
}
body.is-page-ready .qp-hero-visual--single img{
  transform:scale(1);
}

/* ---------- Typography / remove forced awkward breaks ---------- */
.qp-section__title br,
.qp-approved__body h2 br,
.qp-approved__body h3 br,
.works-page-copy h2 br,
.works-page-status__head h2 br,
.qp-next__title br{
  display:none !important;
}
.qp-section__title,
.qp-approved__body h2{
  max-width:820px !important;
  font-size:clamp(34px,3.5vw,56px) !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
  text-wrap:balance;
}
.qp-approved__body h3{
  margin:0 !important;
  font-size:clamp(22px,2vw,32px) !important;
  line-height:1.3 !important;
  letter-spacing:-.03em !important;
  text-wrap:balance;
}
.qp-copy-grid p,
.qp-approved__body p,
.works-page-copy p{
  font-size:15px !important;
  line-height:1.86 !important;
  letter-spacing:.005em !important;
}
.qp-section__index,
.qp-approved__label{
  font-size:11px !important;
  letter-spacing:.18em !important;
}

/* ---------- Sections / shorter and more deliberate ---------- */
.qp-section{
  padding:76px 0 !important;
  overflow:clip !important;
  border-top:1px solid rgba(17,17,17,.04);
}
.qp-section--white{
  background:#fff !important;
  color:#111 !important;
}
.qp-section:nth-of-type(odd).qp-section--white{
  background:#fff !important;
}
.qp-section__head,
.qp-approved{
  position:relative;
  grid-template-columns:minmax(130px,.28fr) minmax(0,1.72fr) !important;
  gap:clamp(30px,4vw,64px) !important;
  padding-top:16px !important;
  border-top:1px solid var(--qp-v5-line) !important;
}
.qp-section__head::after,
.qp-approved::after{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:0;
  height:1px;
  background:var(--qp-gold);
  transition:width .9s var(--qp-ease) .08s;
}
.qp-section__head.is-visible::after,
.qp-approved.is-visible::after{
  width:72px;
}
.qp-section__head+.qp-copy-grid,
.qp-section__head+.qp-list,
.qp-section__head+.qp-process{
  margin-top:38px !important;
}
.qp-copy-grid{
  max-width:1040px !important;
  margin-left:auto !important;
  gap:clamp(30px,4vw,64px) !important;
}
.qp-approved__body{
  grid-template-columns:minmax(0,.86fr) minmax(360px,1.14fr) !important;
  gap:clamp(36px,5vw,78px) !important;
}

/* ---------- Real dark chapters: TOP-like contrast ---------- */
.qp-page-inside .qp-section--dark,
.qp-page-field .qp-section--dark,
.qp-page-pm .qp-section--dark,
.qp-page-why .qp-section--dark,
.qp-page-approach .qp-section--dark{
  background:var(--qp-v5-black) !important;
  color:#fff !important;
}
.qp-page-cs .qp-section--dark{
  background:var(--qp-v5-charcoal) !important;
  color:#fff !important;
}
.qp-page-inside .qp-section--dark .qp-copy-grid p,
.qp-page-field .qp-section--dark .qp-copy-grid p,
.qp-page-cs .qp-section--dark .qp-copy-grid p,
.qp-page-pm .qp-section--dark .qp-copy-grid p,
.qp-page-why .qp-section--dark .qp-copy-grid p,
.qp-page-approach .qp-section--dark .qp-copy-grid p,
.qp-page-inside .qp-section--dark .qp-approved__body p,
.qp-page-field .qp-section--dark .qp-approved__body p,
.qp-page-cs .qp-section--dark .qp-approved__body p,
.qp-page-pm .qp-section--dark .qp-approved__body p,
.qp-page-why .qp-section--dark .qp-approved__body p,
.qp-page-approach .qp-section--dark .qp-approved__body p{
  color:rgba(255,255,255,.66) !important;
}
.qp-page-inside .qp-section--dark .qp-section__head,
.qp-page-field .qp-section--dark .qp-section__head,
.qp-page-cs .qp-section--dark .qp-section__head,
.qp-page-pm .qp-section--dark .qp-section__head,
.qp-page-why .qp-section--dark .qp-section__head,
.qp-page-approach .qp-section--dark .qp-section__head,
.qp-page-inside .qp-section--dark .qp-approved,
.qp-page-field .qp-section--dark .qp-approved,
.qp-page-cs .qp-section--dark .qp-approved,
.qp-page-pm .qp-section--dark .qp-approved,
.qp-page-why .qp-section--dark .qp-approved,
.qp-page-approach .qp-section--dark .qp-approved{
  border-color:var(--qp-v5-line-dark) !important;
}

/* ---------- Lists / process / compact and legible ---------- */
.qp-list{
  gap:0 40px !important;
}
.qp-list-item{
  min-height:76px !important;
  grid-template-columns:38px 112px minmax(0,1fr) !important;
  gap:14px !important;
  padding:14px 10px 14px 0 !important;
  border-color:var(--qp-v5-line) !important;
  transition:transform .35s var(--qp-ease),background-color .35s ease,padding .35s var(--qp-ease) !important;
}
.qp-list-item__jp{
  font-size:14.5px !important;
}
.qp-list-item:hover{
  transform:none !important;
  padding-left:12px !important;
  background:rgba(185,139,47,.06);
}
.qp-section--dark .qp-list,
.qp-section--dark .qp-list-item{
  border-color:var(--qp-v5-line-dark) !important;
}
.qp-section--dark .qp-list-item:hover{
  background:rgba(255,255,255,.055);
}

.qp-process{
  border-color:var(--qp-v5-line) !important;
}
.qp-process__row{
  grid-template-columns:54px minmax(150px,.42fr) minmax(0,1.2fr) !important;
  gap:22px !important;
  min-height:78px !important;
  padding:12px 0 !important;
  border-color:var(--qp-v5-line) !important;
  transition:padding .38s var(--qp-ease),background-color .3s ease !important;
}
.qp-process__row h3{
  margin:0 !important;
  font-size:clamp(17px,1.35vw,22px) !important;
  line-height:1.25 !important;
  letter-spacing:-.025em !important;
}
.qp-process__row p{
  margin:0 !important;
  color:#686864 !important;
  font-size:14.5px !important;
  line-height:1.72 !important;
}
.qp-process__row:hover{
  padding-left:12px !important;
  background:rgba(185,139,47,.055);
}
.qp-section--dark .qp-process,
.qp-section--dark .qp-process__row{
  border-color:var(--qp-v5-line-dark) !important;
}
.qp-section--dark .qp-process__row p{
  color:rgba(255,255,255,.62) !important;
}
.qp-section--dark .qp-process__row:hover{
  background:rgba(255,255,255,.05);
}

/* ---------- Photography / one restrained cut-corner language ---------- */
.qp-editorial-photo,
.qp-editorial-photo--split,
.qp-section--media-side .qp-editorial-photo--side,
.qp-section--media-wide .qp-editorial-photo--wide{
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%) !important;
  background:#dcdcd7 !important;
}
.qp-editorial-photo img,
.qp-photo-triptych img,
.qp-approach-gallery img{
  filter:grayscale(1) contrast(1.05) !important;
  object-position:center 65% !important;
}
.qp-section--media-split .qp-shell{
  gap:clamp(44px,6vw,86px) !important;
}
.qp-section--media-side .qp-shell{
  gap:0 clamp(44px,5vw,76px) !important;
}
.qp-section--media-side .qp-editorial-photo--side{
  position:sticky;
  top:132px;
  height:360px !important;
}
.qp-section--media-wide .qp-editorial-photo--wide{
  height:320px !important;
  margin:34px 0 42px !important;
}

/* ---------- Section reveal / motion ---------- */
.qp-page.qp-motion-v5 .qp-section{
  --qp-chapter-y:24px;
}
.qp-page.qp-motion-v5 .qp-section .qp-section__index,
.qp-page.qp-motion-v5 .qp-section .qp-approved__label{
  opacity:.28;
  transform:translateX(-14px);
  transition:opacity .6s ease,transform .8s var(--qp-ease);
}
.qp-page.qp-motion-v5 .qp-section.is-chapter-visible .qp-section__index,
.qp-page.qp-motion-v5 .qp-section.is-chapter-visible .qp-approved__label{
  opacity:1;
  transform:none;
}
.qp-page.qp-motion-v5 .qp-list-item,
.qp-page.qp-motion-v5 .qp-process__row{
  opacity:0;
  transform:translateY(16px);
  transition:opacity .5s ease var(--qp-stagger,0ms),transform .72s var(--qp-ease) var(--qp-stagger,0ms),background-color .3s ease,padding .35s var(--qp-ease);
}
.qp-page.qp-motion-v5 .qp-list-item.is-row-visible,
.qp-page.qp-motion-v5 .qp-process__row.is-row-visible{
  opacity:1;
  transform:none;
}
.qp-page.qp-motion-v5 .qp-editorial-photo,
.qp-page.qp-motion-v5 .qp-photo-triptych img,
.qp-page.qp-motion-v5 .qp-approach-gallery img{
  opacity:0;
  transform:translateY(22px) scale(.985);
  transition:opacity .7s ease,transform 1s var(--qp-ease);
}
.qp-page.qp-motion-v5 .qp-editorial-photo.is-media-visible,
.qp-page.qp-motion-v5 .qp-photo-triptych img.is-media-visible,
.qp-page.qp-motion-v5 .qp-approach-gallery img.is-media-visible{
  opacity:1;
  transform:none;
}

/* ---------- About / Service / WHY / Approach individuality ---------- */
.qp-page-about .qp-section:nth-of-type(3),
.qp-page-about .qp-section:nth-of-type(6){
  background:var(--qp-v5-black) !important;
  color:#fff !important;
}
.qp-page-about .qp-section:nth-of-type(3) p,
.qp-page-about .qp-section:nth-of-type(6) p{
  color:rgba(255,255,255,.66) !important;
}
.qp-page-about .qp-section:nth-of-type(4),
.qp-page-about .qp-section:nth-of-type(7){
  background:var(--qp-v5-off) !important;
}

.qp-page-service .qp-section{
  padding-block:72px !important;
}
.qp-page-service .qp-section:nth-of-type(3),
.qp-page-service .qp-section:nth-of-type(5){
  background:var(--qp-v5-off) !important;
}
.qp-page-service .qp-section:nth-of-type(6){
  background:var(--qp-v5-black) !important;
  color:#fff !important;
}
.qp-page-service .qp-section:nth-of-type(6) p{color:rgba(255,255,255,.66)!important}

.qp-page-why .qp-photo-triptych{
  margin-top:40px !important;
}
.qp-page-why .qp-photo-triptych img{
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
}

.qp-page-approach .qp-approach-step{
  padding:58px 0 !important;
}
.qp-page-approach .qp-approach-step .qp-shell{
  padding-left:82px !important;
}
.qp-page-approach .qp-approach-step .qp-shell::before{
  left:34px !important;
  bottom:-58px !important;
  background:linear-gradient(#b98b2f 0 20%,rgba(17,17,17,.12) 20% 100%) !important;
}
.qp-page-approach .qp-approach-gallery{
  margin-top:40px !important;
}

/* ---------- Works / photo-led, not a separate portfolio site ---------- */
.works-page-v4{
  padding-top:90px !important;
  background:#fff !important;
}
.works-page-hero{
  padding:54px 0 64px !important;
  background:var(--qp-v5-off) !important;
}
.works-page-hero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(420px,1.18fr) !important;
  gap:clamp(48px,6vw,96px) !important;
}
.works-page-hero h1{
  margin:18px 0 16px !important;
  font-size:clamp(48px,5.2vw,82px) !important;
  line-height:.98 !important;
}
.works-page-hero p{
  font-size:15px !important;
  line-height:1.8 !important;
}
.works-page-hero__visual{
  height:390px !important;
}
.works-page-hero__visual img{
  width:100% !important;
  height:100% !important;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%) !important;
}
.works-page-hero__word{
  position:absolute !important;
  z-index:2 !important;
  left:-6% !important;
  bottom:-4px !important;
  color:rgba(255,255,255,.9) !important;
  font-size:clamp(60px,7vw,118px) !important;
  font-weight:800 !important;
  line-height:.8 !important;
  letter-spacing:-.07em !important;
  mix-blend-mode:difference;
  pointer-events:none;
}
.works-page-section{
  padding:72px 0 !important;
}
.works-page-method__grid,
.works-page-policy__grid{
  gap:clamp(46px,6vw,90px) !important;
  align-items:center !important;
}
.works-page-copy h2,
.works-page-status__head h2{
  font-size:clamp(34px,3.5vw,56px) !important;
  line-height:1.12 !important;
  letter-spacing:-.04em !important;
}
.works-page-photo{
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
}
.works-page-status{
  background:var(--qp-v5-black) !important;
  color:#fff !important;
}
.works-page-status p,
.works-page-status small{
  color:rgba(255,255,255,.62) !important;
}
.works-page-status__rows>div{
  border-color:rgba(255,255,255,.14) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .qp-shell,.works-page-shell{width:min(calc(100% - 48px),900px)}
  .qp-hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(340px,.86fr) !important;
    column-gap:36px !important;
  }
  .qp-title,.qp-title--medium{font-size:clamp(50px,7vw,78px)!important}
  .qp-section__title,.qp-approved__body h2{font-size:clamp(32px,4.5vw,48px)!important}
  .qp-section--media-side .qp-editorial-photo--side{position:relative;top:auto;height:320px!important}
}

@media (max-width: 760px){
  .qp-shell,.works-page-shell{width:calc(100% - 34px)!important}
  .qp-hero{min-height:auto!important}
  .qp-hero__inner{
    min-height:0!important;
    padding:38px 0 46px!important;
    grid-template-columns:1fr!important;
    grid-template-areas:"eyebrow" "title" "visual" "bottom"!important;
    row-gap:26px!important;
  }
  .qp-title,.qp-title--medium{font-size:clamp(46px,14vw,72px)!important}
  .qp-hero-visual{height:300px!important}
  .qp-section{padding:58px 0!important}
  .qp-section__head,.qp-approved{grid-template-columns:1fr!important;gap:14px!important}
  .qp-section__title,.qp-approved__body h2{font-size:clamp(30px,9vw,42px)!important}
  .qp-approved__body{grid-template-columns:1fr!important;gap:24px!important}
  .qp-copy-grid{grid-template-columns:1fr!important;gap:20px!important;margin-left:0!important}
  .qp-list{grid-template-columns:1fr!important}
  .qp-process__row{grid-template-columns:42px 1fr!important;gap:12px 16px!important}
  .qp-process__row h3{grid-column:2}
  .qp-process__row p{grid-column:2}
  .qp-section--media-split .qp-shell,.qp-section--media-side .qp-shell{grid-template-columns:1fr!important;display:grid!important;gap:30px!important}
  .qp-section--media-side .qp-editorial-photo--side{grid-column:1!important;grid-row:auto!important;height:260px!important;margin-top:0!important}
  .qp-page-approach .qp-approach-step .qp-shell{padding-left:46px!important}
  .qp-page-approach .qp-approach-step .qp-shell::before{left:18px!important}
  .works-page-hero__grid,.works-page-method__grid,.works-page-policy__grid{grid-template-columns:1fr!important;gap:32px!important}
  .works-page-hero__visual{height:300px!important}
}

@media (prefers-reduced-motion: reduce){
  .qp-page.qp-motion-v5 .qp-list-item,
  .qp-page.qp-motion-v5 .qp-process__row,
  .qp-page.qp-motion-v5 .qp-editorial-photo,
  .qp-page.qp-motion-v5 .qp-photo-triptych img,
  .qp-page.qp-motion-v5 .qp-approach-gallery img{
    opacity:1!important;
    transform:none!important;
    transition:none!important;
  }
}


/* =========================================================
   QUOREAL INTERNAL PAGES / V30 EDITORIAL SYSTEM
   2026-09-28
   Goals:
   - Tighter editorial density without deleting approved content
   - Headings stay readable and visually within two lines
   - Natural Japanese phrase wrapping; no awkward orphan characters
   - Strong black/white contrast and calmer typography
   - Photos, rules, lists and process rows behave as one composition
   ========================================================= */

:root{
  --qp-v30-ink:#0a0a0a;
  --qp-v30-paper:#ffffff;
  --qp-v30-off:#f2f2ef;
  --qp-v30-soft:#e8e8e4;
  --qp-v30-muted:#666662;
  --qp-v30-line:rgba(10,10,10,.14);
  --qp-v30-line-dark:rgba(255,255,255,.17);
}

/* ---------- Page width / Japanese line-breaking ---------- */
.qp-page main{
  background:var(--qp-v30-paper);
}
.qp-shell,
.works-page-shell{
  width:min(calc(100% - 96px),1440px) !important;
}

.qp-section__title,
.qp-approved__body h2,
.qp-approved__body h3,
.qp-hero__lead,
.qp-copy-grid p,
.qp-approved__body p,
.qp-list-item__jp,
.qp-process__row p,
.works-page-copy h2,
.works-page-copy p,
.works-page-status__head h2,
.works-page-status__head p,
.qp-next__title{
  line-break:strict;
  word-break:auto-phrase;
  overflow-wrap:normal;
  hyphens:none;
}

/* Manual <br> tags must never force awkward headline wrapping. */
.qp-section__title br,
.qp-approved__body h2 br,
.qp-approved__body h3 br,
.qp-hero__lead br,
.works-page-copy h2 br,
.works-page-status__head h2 br,
.qp-next__title br{
  display:none !important;
}

/* ---------- Compact hero ---------- */
.qp-hero{
  min-height:570px !important;
  padding-top:90px !important;
  background:var(--qp-v30-off) !important;
}
.qp-hero::before{
  inset:90px 0 0 !important;
  opacity:.6 !important;
}
.qp-hero__inner{
  min-height:480px !important;
  padding:42px 0 44px !important;
  grid-template-columns:minmax(0,.86fr) minmax(420px,1.14fr) !important;
  column-gap:clamp(42px,5.5vw,88px) !important;
}
.qp-title,
.qp-title--medium{
  margin:16px 0 16px !important;
  max-width:660px !important;
  font-size:clamp(52px,5.25vw,84px) !important;
  line-height:.91 !important;
  letter-spacing:-.052em !important;
}
.qp-hero__bottom{
  padding-top:16px !important;
}
.qp-hero__lead{
  max-width:640px !important;
  font-size:clamp(14.5px,1.05vw,17px) !important;
  line-height:1.82 !important;
  color:#51514e !important;
  text-wrap:pretty;
}
.qp-scroll{
  margin-top:16px !important;
}
.qp-hero-visual{
  height:370px !important;
}
.qp-hero-visual--service-grid{
  height:390px !important;
  gap:8px !important;
}
.qp-hero-visual--single,
.qp-hero-visual--service-grid img{
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
}

/* ---------- Section rhythm ---------- */
.qp-section{
  padding:64px 0 !important;
  overflow:clip !important;
  border-top:1px solid rgba(10,10,10,.035) !important;
}
.qp-section--white,
.qp-section:nth-of-type(odd).qp-section--white{
  background:var(--qp-v30-paper) !important;
  color:var(--qp-v30-ink) !important;
}

/* Every actual dark chapter is dark. This fixes the pale-background/white-copy bug. */
.qp-page .qp-section--dark,
.qp-page-service .qp-section--dark,
.qp-page-inside .qp-section--dark,
.qp-page-field .qp-section--dark,
.qp-page-cs .qp-section--dark,
.qp-page-pm .qp-section--dark,
.qp-page-why .qp-section--dark,
.qp-page-approach .qp-section--dark{
  background:var(--qp-v30-ink) !important;
  color:#fff !important;
}

.qp-page .qp-section--dark .qp-copy-grid p,
.qp-page .qp-section--dark .qp-approved__body p,
.qp-page .qp-section--dark .qp-process__row p{
  color:rgba(255,255,255,.69) !important;
}
.qp-page .qp-section--dark .qp-section__title,
.qp-page .qp-section--dark .qp-approved__body h2,
.qp-page .qp-section--dark .qp-approved__body h3,
.qp-page .qp-section--dark .qp-list-item__jp,
.qp-page .qp-section--dark .qp-process__row h3{
  color:#fff !important;
}
.qp-page .qp-section--dark .qp-section__head,
.qp-page .qp-section--dark .qp-approved,
.qp-page .qp-section--dark .qp-list,
.qp-page .qp-section--dark .qp-list-item,
.qp-page .qp-section--dark .qp-process,
.qp-page .qp-section--dark .qp-process__row{
  border-color:var(--qp-v30-line-dark) !important;
}

/* ---------- Editorial title system ---------- */
.qp-section__head,
.qp-approved{
  grid-template-columns:minmax(128px,.24fr) minmax(0,1.76fr) !important;
  gap:clamp(26px,3.5vw,54px) !important;
  padding-top:14px !important;
  border-top:1px solid var(--qp-v30-line) !important;
}
.qp-section__index,
.qp-approved__label{
  padding-top:4px;
  font-size:10px !important;
  line-height:1.45 !important;
  letter-spacing:.18em !important;
  white-space:normal !important;
}
.qp-section__title,
.qp-approved__body h2{
  max-width:760px !important;
  margin:0 !important;
  font-size:clamp(34px,3vw,50px) !important;
  font-weight:700 !important;
  line-height:1.14 !important;
  letter-spacing:-.042em !important;
  text-wrap:balance;
}
.qp-approved__body h3{
  max-width:620px !important;
  font-size:clamp(22px,1.85vw,30px) !important;
  line-height:1.32 !important;
  text-wrap:balance;
}
.qp-approved__body{
  grid-template-columns:minmax(0,.92fr) minmax(340px,1.08fr) !important;
  gap:clamp(34px,4.5vw,70px) !important;
  align-items:start !important;
}
.qp-approved + .qp-approved{
  margin-top:42px !important;
}

/* ---------- Body copy ---------- */
.qp-section__head + .qp-copy-grid,
.qp-section__head + .qp-list,
.qp-section__head + .qp-process{
  margin-top:34px !important;
}
.qp-copy-grid{
  width:calc(100% - 182px) !important;
  max-width:1080px !important;
  margin-left:auto !important;
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:clamp(28px,4vw,62px) !important;
}
.qp-copy-grid p,
.qp-approved__body p,
.works-page-copy p{
  color:var(--qp-v30-muted) !important;
  font-size:14.5px !important;
  line-height:1.88 !important;
  letter-spacing:.004em !important;
  text-wrap:pretty;
}

/* ---------- Lists: information-dense, not card-like ---------- */
.qp-list{
  grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  gap:0 34px !important;
  border-top:1px solid var(--qp-v30-line) !important;
}
.qp-list-item{
  grid-template-columns:34px minmax(94px,.42fr) minmax(0,1fr) !important;
  gap:12px !important;
  min-height:68px !important;
  padding:12px 8px 12px 0 !important;
  border-bottom:1px solid var(--qp-v30-line) !important;
  background:transparent !important;
  transition:padding .32s var(--qp-ease),background-color .28s ease !important;
}
.qp-list-item__no{
  font-size:9px !important;
}
.qp-list-item__en{
  font-size:8.5px !important;
  letter-spacing:.14em !important;
}
.qp-list-item__jp{
  min-width:0;
  font-size:14px !important;
  line-height:1.55 !important;
}
.qp-list-item:hover{
  padding-left:8px !important;
  background:rgba(185,139,47,.055) !important;
}
.qp-section--dark .qp-list-item:hover{
  background:rgba(255,255,255,.05) !important;
}

/* ---------- Process: three-column editorial rail ---------- */
.qp-process{
  border-top:1px solid var(--qp-v30-line) !important;
}
.qp-process__row{
  grid-template-columns:42px minmax(130px,.36fr) minmax(0,1fr) !important;
  gap:18px !important;
  min-height:70px !important;
  padding:11px 0 !important;
  border-bottom:1px solid var(--qp-v30-line) !important;
}
.qp-process__row h3{
  margin:0 !important;
  font-size:clamp(16px,1.15vw,20px) !important;
  line-height:1.25 !important;
}
.qp-process__row p{
  margin:0 !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

/* ---------- Media: one cut-corner language, more integrated ---------- */
.qp-editorial-photo,
.qp-editorial-photo--split,
.qp-section--media-side .qp-editorial-photo--side,
.qp-section--media-wide .qp-editorial-photo--wide{
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
  background:#dadad6 !important;
}
.qp-section--media-split .qp-shell{
  grid-template-columns:minmax(0,1fr) minmax(360px,.82fr) !important;
  gap:clamp(46px,6vw,88px) !important;
}
.qp-editorial-photo--split{
  height:360px !important;
}
.qp-section--media-side .qp-shell{
  grid-template-columns:minmax(0,1fr) minmax(360px,.72fr) !important;
  gap:0 clamp(46px,5.6vw,82px) !important;
}
.qp-section--media-side .qp-editorial-photo--side{
  position:sticky !important;
  top:126px !important;
  align-self:start !important;
  height:360px !important;
}
.qp-section--media-side .qp-copy-grid{
  width:100% !important;
  max-width:760px !important;
  margin-left:0 !important;
  grid-template-columns:1fr !important;
  gap:18px !important;
}
.qp-section--media-side .qp-list,
.qp-section--media-side .qp-process{
  grid-template-columns:1fr !important;
}
.qp-section--media-side .qp-text-link{
  margin-top:24px !important;
}

/* ---------- SERVICE top: distinct editorial chapters ---------- */
.qp-page-service main > .qp-section:nth-of-type(2){
  background:var(--qp-v30-off) !important;
}
.qp-page-service main > .qp-section:nth-of-type(2) .qp-approved__body{
  grid-template-columns:minmax(0,.9fr) minmax(360px,1.1fr) !important;
}
.qp-page-service .qp-section--media-side .qp-section__title{
  max-width:660px !important;
  font-size:clamp(34px,2.85vw,48px) !important;
}
.qp-page-service .qp-section--dark .qp-section__index,
.qp-page-service .qp-section--dark .qp-list-item__no,
.qp-page-service .qp-section--dark .qp-list-item__en{
  color:rgba(255,255,255,.55) !important;
}
.qp-page-service .qp-section--dark .qp-section__index{
  color:var(--qp-gold) !important;
}

/* ---------- Detail pages: reduce visual repetition ---------- */
.qp-page-inside .qp-section:nth-of-type(4n+1).qp-section--white,
.qp-page-field .qp-section:nth-of-type(4n+1).qp-section--white,
.qp-page-cs .qp-section:nth-of-type(4n+1).qp-section--white,
.qp-page-pm .qp-section:nth-of-type(4n+1).qp-section--white,
.qp-page-why .qp-section:nth-of-type(4n+1).qp-section--white,
.qp-page-approach .qp-section:nth-of-type(4n+1).qp-section--white{
  background:#f7f7f4 !important;
}

/* APPROACH / keep the continuous editorial rail, but make it lighter and tighter. */
.qp-page-approach .qp-approach-step{
  padding:62px 0 !important;
}
.qp-page-approach .qp-approach-step .qp-shell{
  padding-left:74px !important;
}
.qp-page-approach .qp-approach-step .qp-shell::before{
  left:30px !important;
  bottom:-62px !important;
  background:linear-gradient(to bottom,var(--qp-gold),rgba(10,10,10,.12)) !important;
}
.qp-page-approach .qp-section--dark .qp-shell::before{
  background:linear-gradient(to bottom,var(--qp-gold),rgba(255,255,255,.18)) !important;
}

/* ---------- Next block ---------- */
.qp-next{
  padding:54px 0 !important;
}
.qp-next .qp-shell{
  grid-template-columns:minmax(150px,.35fr) minmax(0,1fr) !important;
}
.qp-next__title{
  font-size:clamp(34px,4vw,58px) !important;
  text-wrap:balance;
}

/* ---------- V30 reveal language using existing JS states ---------- */
.qp-page.qp-motion-v5 .qp-section__head .qp-section__title,
.qp-page.qp-motion-v5 .qp-approved__body h2,
.qp-page.qp-motion-v5 .qp-approved__body h3{
  opacity:0;
  transform:translate3d(0,14px,0);
  clip-path:inset(0 0 22% 0);
  transition:opacity .62s ease,transform .86s var(--qp-ease),clip-path .86s var(--qp-ease);
}
.qp-page.qp-motion-v5 .qp-section__head.is-visible .qp-section__title,
.qp-page.qp-motion-v5 .qp-approved.is-visible .qp-approved__body h2,
.qp-page.qp-motion-v5 .qp-approved.is-visible .qp-approved__body h3{
  opacity:1;
  transform:none;
  clip-path:inset(0);
}
.qp-page.qp-motion-v5 .qp-editorial-photo img{
  transform:scale(1.035);
  transition:transform 1.15s var(--qp-ease),filter .5s ease !important;
}
.qp-page.qp-motion-v5 .qp-editorial-photo.is-media-visible img{
  transform:scale(1);
}

/* ---------- WORKS / quieter editorial composition ---------- */
.works-page-v4{
  background:#fff !important;
}
.works-page-hero{
  padding:56px 0 62px !important;
  background:var(--qp-v30-off) !important;
}
.works-page-hero__grid{
  grid-template-columns:minmax(0,.82fr) minmax(460px,1.18fr) !important;
  gap:clamp(52px,7vw,108px) !important;
}
.works-page-hero h1{
  margin:18px 0 18px !important;
  font-size:clamp(52px,5.4vw,84px) !important;
  line-height:.96 !important;
}
.works-page-hero p{
  font-size:15px !important;
  line-height:1.86 !important;
}
.works-page-hero__visual{
  height:390px !important;
}
.works-page-hero__visual img{
  width:88% !important;
  height:80% !important;
  clip-path:polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%) !important;
}
.works-page-hero__word{
  left:-2% !important;
  top:4% !important;
  font-size:clamp(78px,8vw,126px) !important;
  line-height:.84 !important;
  letter-spacing:-.065em !important;
}
.works-page-section{
  padding:66px 0 !important;
}
.works-page-method__grid,
.works-page-policy__grid{
  grid-template-columns:1fr 1fr !important;
  gap:clamp(46px,6vw,86px) !important;
}
.works-page-copy h2,
.works-page-status__head h2{
  max-width:680px !important;
  margin:16px 0 20px !important;
  font-size:clamp(32px,3vw,48px) !important;
  line-height:1.14 !important;
  text-wrap:balance;
}
.works-page-photo--large{
  height:390px !important;
}
.works-page-photo--medium{
  height:340px !important;
}
.works-page-steps{
  margin-top:28px !important;
}
.works-page-steps span{
  min-height:66px !important;
  padding:13px !important;
  font-size:11.5px !important;
}
.works-page-policy{
  background:var(--qp-v30-ink) !important;
  color:#fff !important;
}
.works-page-policy .works-page-copy p{
  color:rgba(255,255,255,.69) !important;
}
.works-page-status{
  background:#f4f4f1 !important;
  color:#111 !important;
}
.works-page-status p,
.works-page-status small{
  color:#666 !important;
}
.works-page-status__rows>div{
  min-height:82px !important;
  border-color:var(--qp-v30-line) !important;
}

/* ---------- Tablet ---------- */
@media (max-width: 1040px){
  .qp-shell,.works-page-shell{
    width:min(calc(100% - 56px),960px) !important;
  }
  .qp-hero__inner{
    grid-template-columns:minmax(0,1fr) minmax(340px,.88fr) !important;
    column-gap:34px !important;
  }
  .qp-title,.qp-title--medium{
    font-size:clamp(48px,6.2vw,72px) !important;
  }
  .qp-section__title,.qp-approved__body h2{
    font-size:clamp(32px,4vw,44px) !important;
  }
  .qp-approved__body{
    grid-template-columns:minmax(0,.9fr) minmax(300px,1.1fr) !important;
  }
  .qp-copy-grid{
    width:calc(100% - 150px) !important;
  }
  .qp-section--media-side .qp-shell{
    grid-template-columns:minmax(0,1fr) minmax(300px,.72fr) !important;
    gap:0 42px !important;
  }
  .qp-section--media-side .qp-editorial-photo--side{
    position:relative !important;
    top:auto !important;
    height:300px !important;
  }
}

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .qp-shell,.works-page-shell{
    width:calc(100% - 34px) !important;
  }
  .qp-hero{
    min-height:auto !important;
    padding-top:72px !important;
  }
  .qp-hero::before{
    inset:72px 0 0 !important;
  }
  .qp-hero__inner{
    min-height:0 !important;
    padding:32px 0 40px !important;
    grid-template-columns:1fr !important;
    grid-template-areas:"eyebrow" "title" "visual" "bottom" !important;
    row-gap:22px !important;
  }
  .qp-title,.qp-title--medium{
    max-width:100% !important;
    font-size:clamp(42px,12.5vw,62px) !important;
    line-height:.94 !important;
  }
  .qp-hero-visual,
  .qp-hero-visual--service-grid{
    height:260px !important;
  }
  .qp-hero__lead{
    font-size:14px !important;
    line-height:1.75 !important;
  }
  .qp-section{
    padding:48px 0 !important;
  }
  .qp-section__head,
  .qp-approved{
    grid-template-columns:1fr !important;
    gap:12px !important;
    padding-top:12px !important;
  }
  .qp-section__title,
  .qp-approved__body h2{
    max-width:100% !important;
    font-size:clamp(28px,7.6vw,34px) !important;
    line-height:1.18 !important;
    letter-spacing:-.038em !important;
  }
  .qp-approved__body h3{
    font-size:22px !important;
  }
  .qp-approved__body{
    grid-template-columns:1fr !important;
    gap:18px !important;
  }
  .qp-copy-grid{
    width:100% !important;
    grid-template-columns:1fr !important;
    gap:16px !important;
    margin-left:0 !important;
  }
  .qp-list{
    grid-template-columns:1fr !important;
    gap:0 !important;
  }
  .qp-list-item{
    grid-template-columns:28px minmax(76px,.34fr) minmax(0,1fr) !important;
    gap:10px !important;
    min-height:62px !important;
    padding:10px 0 !important;
  }
  .qp-list-item__jp{
    font-size:13.5px !important;
    line-height:1.5 !important;
  }
  .qp-process__row{
    grid-template-columns:30px minmax(88px,.38fr) minmax(0,1fr) !important;
    gap:10px !important;
    min-height:64px !important;
    padding:10px 0 !important;
  }
  .qp-process__row h3{
    grid-column:auto !important;
    font-size:15px !important;
  }
  .qp-process__row p{
    grid-column:auto !important;
    font-size:13px !important;
    line-height:1.55 !important;
  }
  .qp-section--media-split .qp-shell,
  .qp-section--media-side .qp-shell{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:26px !important;
  }
  .qp-section--media-side .qp-editorial-photo--side,
  .qp-editorial-photo--split{
    grid-column:1 !important;
    grid-row:auto !important;
    position:relative !important;
    top:auto !important;
    height:240px !important;
    margin-top:0 !important;
  }
  .qp-page-approach .qp-approach-step{
    padding:48px 0 !important;
  }
  .qp-page-approach .qp-approach-step .qp-shell{
    padding-left:34px !important;
  }
  .qp-page-approach .qp-approach-step .qp-shell::before{
    left:10px !important;
    bottom:-48px !important;
  }
  .qp-next{
    padding:44px 0 !important;
  }
  .qp-next .qp-shell{
    grid-template-columns:1fr !important;
    gap:16px !important;
  }
  .qp-next__title{
    font-size:clamp(30px,9vw,40px) !important;
  }
  .works-page-hero{
    padding:40px 0 48px !important;
  }
  .works-page-hero__grid,
  .works-page-method__grid,
  .works-page-policy__grid{
    grid-template-columns:1fr !important;
    gap:28px !important;
  }
  .works-page-hero h1{
    font-size:50px !important;
  }
  .works-page-hero__visual{
    height:280px !important;
  }
  .works-page-hero__word{
    left:0 !important;
    top:0 !important;
    font-size:68px !important;
  }
  .works-page-section{
    padding:50px 0 !important;
  }
  .works-page-copy h2,
  .works-page-status__head h2{
    font-size:clamp(28px,7.6vw,34px) !important;
    line-height:1.18 !important;
  }
  .works-page-photo--large,
  .works-page-photo--medium{
    height:260px !important;
  }
  .works-page-steps{
    grid-template-columns:1fr 1fr !important;
  }
}

@media (prefers-reduced-motion: reduce){
  .qp-page.qp-motion-v5 .qp-section__head .qp-section__title,
  .qp-page.qp-motion-v5 .qp-approved__body h2,
  .qp-page.qp-motion-v5 .qp-approved__body h3,
  .qp-page.qp-motion-v5 .qp-editorial-photo img{
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
    transition:none !important;
  }
}


/* V30 line-break guard / section labels stay on one line where space allows. */
@media (min-width:761px){
  .qp-section__head,
  .qp-approved{
    grid-template-columns:minmax(172px,.27fr) minmax(0,1.73fr) !important;
  }
  .qp-section__index,
  .qp-approved__label{
    white-space:nowrap !important;
  }
}

/* V30 desktop alignment / give long service labels enough rail width. */
@media (min-width:1041px){
  .qp-section__head,
  .qp-approved{
    grid-template-columns:220px minmax(0,1fr) !important;
    gap:46px !important;
  }
  .qp-copy-grid{
    width:calc(100% - 266px) !important;
  }
  .qp-section--media-side .qp-copy-grid{
    width:100% !important;
  }
}

/* =========================================================
   QUOREAL INTERNAL PAGES / V31
   2026-09-29
   - Condensed editorial architecture across ALL child pages
   - Fewer, larger chapters / no micro black-white alternation
   - Readable contrast / left-aligned headings / max 2-line intent
   - TANE-inspired motion hooks and diagram language
   ========================================================= */

:root{
  --v31-ink:#0c0c0c;
  --v31-ink-soft:#171717;
  --v31-paper:#ffffff;
  --v31-soft:#f3f3f0;
  --v31-line:rgba(12,12,12,.12);
  --v31-line-dark:rgba(255,255,255,.16);
  --v31-muted:#64645f;
  --v31-muted-dark:rgba(255,255,255,.64);
  --v31-gold:#b98a28;
  --v31-ease:cubic-bezier(.22,1,.36,1);
}

/* ---------- global child-page rhythm ---------- */
.qp-page{
  background:var(--v31-paper)!important;
  color:var(--v31-ink)!important;
}
.qp-v31-shell{
  width:min(calc(100% - 88px),1420px);
  margin-inline:auto;
}
.qp-v31-section{
  position:relative;
  padding:clamp(76px,7vw,112px) 0;
  overflow:clip;
  border-top:1px solid rgba(12,12,12,.045);
}
.qp-v31-section--light{background:#fff;color:var(--v31-ink)}
.qp-v31-section--soft{background:var(--v31-soft);color:var(--v31-ink)}
.qp-v31-section--dark{background:var(--v31-ink);color:#fff;border-color:rgba(255,255,255,.08)}

.qp-v31-heading{
  display:grid;
  grid-template-columns:minmax(170px,220px) minmax(0,1fr);
  gap:34px;
  align-items:start;
  padding-top:18px;
  border-top:1px solid var(--v31-line);
}
.qp-v31-section--dark .qp-v31-heading{border-color:var(--v31-line-dark)}
.qp-v31-heading::before{
  content:"";
  position:absolute;
  left:0;
  top:-1px;
  width:72px;
  height:1px;
  background:var(--v31-gold);
  transform:scaleX(0);
  transform-origin:left center;
  transition:transform .9s var(--v31-ease);
}
.qp-v31-heading{position:relative}
.qp-v31-heading.is-v31-visible::before{transform:scaleX(1)}
.qp-v31-kicker{
  display:block;
  color:var(--v31-gold);
  font-size:10px;
  font-weight:700;
  letter-spacing:.2em;
  line-height:1.5;
  text-transform:uppercase;
  white-space:nowrap;
}
.qp-v31-heading h2{
  margin:0;
  max-width:21em;
  color:inherit;
  font-size:clamp(34px,3.25vw,54px);
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.045em;
  text-align:left;
  text-wrap:balance;
  word-break:auto-phrase;
  line-break:strict;
}
.qp-v31-section--dark .qp-v31-heading h2{color:#fff}

.qp-v31-copy{
  max-width:720px;
  color:var(--v31-muted);
  font-size:15px;
  line-height:1.9;
}
.qp-v31-section--dark .qp-v31-copy{color:var(--v31-muted-dark)}
.qp-v31-copy p{margin:0 0 18px}
.qp-v31-copy p:last-child{margin-bottom:0}

.qp-v31-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(42px,6vw,92px);
  align-items:center;
  margin-top:44px;
}
.qp-v31-split > *{min-width:0}

/* ---------- hero ---------- */
.qp-v31-hero .qp-title,
.qp-v31-hero .qp-title--medium{
  max-width:100%!important;
  font-size:clamp(52px,5.75vw,88px)!important;
  line-height:.93!important;
  letter-spacing:-.05em!important;
  text-align:left!important;
}
.qp-v31-hero .qp-title-line{
  white-space:nowrap;
}
.qp-v31-hero .qp-hero__lead{
  max-width:520px!important;
  font-size:15px!important;
  line-height:1.8!important;
  text-wrap:pretty;
}
.qp-page-why .qp-v31-hero .qp-title-line > span{
  font-family:Arial,"Helvetica Neue",sans-serif!important;
  font-weight:800!important;
  letter-spacing:-.04em!important;
}

/* ---------- media ---------- */
.qp-v31-media,
.qp-v31-works-visual{
  position:relative;
  min-height:340px;
  margin:0;
  overflow:hidden;
  background:#e8e8e5;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
}
.qp-v31-media img,
.qp-v31-works-visual img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(1) contrast(1.06);
  transform:scale(1.05);
  transition:transform 1.25s var(--v31-ease),filter .45s ease;
}
.qp-v31-media.is-v31-visible img,
.qp-v31-works-visual.is-v31-visible img{transform:scale(1)}
.qp-v31-media::after,
.qp-v31-works-visual::after{
  content:"";
  position:absolute;inset:0;
  background:#fff;
  transform:scaleX(1);
  transform-origin:right center;
  transition:transform 1.05s var(--v31-ease);
}
.qp-v31-section--dark .qp-v31-media::after{background:var(--v31-ink)}
.qp-v31-media.is-v31-visible::after,
.qp-v31-works-visual.is-v31-visible::after{transform:scaleX(0)}

/* ---------- chips ---------- */
.qp-v31-chips{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}
.qp-v31-chips span{
  display:flex;
  align-items:center;
  min-height:58px;
  padding:14px 16px;
  border:1px solid var(--v31-line);
  background:rgba(255,255,255,.55);
  color:#20201e;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
}
.qp-v31-section--dark .qp-v31-chips span{
  border-color:var(--v31-line-dark);
  background:rgba(255,255,255,.025);
  color:#fff;
}

/* ---------- tiles ---------- */
.qp-v31-tiles{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;
  margin-top:44px;
  border-top:1px solid var(--v31-line);
  border-left:1px solid var(--v31-line);
}
.qp-v31-section--dark .qp-v31-tiles{border-color:var(--v31-line-dark)}
.qp-v31-tile{
  position:relative;
  min-height:208px;
  padding:26px 24px 28px;
  border-right:1px solid var(--v31-line);
  border-bottom:1px solid var(--v31-line);
  transition:transform .45s var(--v31-ease),background-color .35s ease;
}
.qp-v31-section--dark .qp-v31-tile{border-color:var(--v31-line-dark)}
.qp-v31-tile:hover{transform:translateY(-4px);background:rgba(185,138,40,.055)}
.qp-v31-tile__no{display:block;color:var(--v31-gold);font-size:11px;font-weight:700;letter-spacing:.14em}
.qp-v31-tile small{display:block;margin-top:24px;color:#8b8b85;font-size:9px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.qp-v31-section--dark .qp-v31-tile small{color:rgba(255,255,255,.5)}
.qp-v31-tile h3{
  margin:8px 0 10px;
  color:inherit;
  font-size:clamp(19px,1.55vw,26px);
  line-height:1.3;
  letter-spacing:-.03em;
  text-align:left;
  text-wrap:balance;
  word-break:auto-phrase;
}
.qp-v31-section--dark .qp-v31-tile h3{color:#fff}
.qp-v31-tile p{margin:0;color:var(--v31-muted);font-size:12.5px;line-height:1.72}
.qp-v31-section--dark .qp-v31-tile p{color:var(--v31-muted-dark)}

/* ---------- flow ---------- */
.qp-v31-flow{
  position:relative;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:46px;
  border-top:1px solid var(--v31-line-dark);
  --v31-progress:0;
}
.qp-v31-section--light .qp-v31-flow,
.qp-v31-section--soft .qp-v31-flow{border-color:var(--v31-line)}
.qp-v31-flow::before{
  content:"";
  position:absolute;left:0;top:-1px;
  width:100%;height:2px;
  background:linear-gradient(90deg,var(--v31-gold),#dfc27f);
  transform:scaleX(var(--v31-progress));
  transform-origin:left center;
}
.qp-v31-flow__item{
  position:relative;
  min-height:230px;
  padding:28px 28px 30px 0;
  border-right:1px solid var(--v31-line-dark);
}
.qp-v31-section--light .qp-v31-flow__item,
.qp-v31-section--soft .qp-v31-flow__item{border-color:var(--v31-line)}
.qp-v31-flow__item:last-child{border-right:0;padding-right:0}
.qp-v31-flow__no{display:block;color:var(--v31-gold);font-size:18px;font-weight:700}
.qp-v31-flow__item small{display:block;margin-top:20px;color:rgba(255,255,255,.48);font-size:9px;font-weight:700;letter-spacing:.18em}
.qp-v31-section--light .qp-v31-flow__item small,
.qp-v31-section--soft .qp-v31-flow__item small{color:#8a8a84}
.qp-v31-flow__item h3{
  margin:9px 0 12px;
  color:#fff;
  font-size:clamp(20px,1.8vw,28px);
  line-height:1.25;
  letter-spacing:-.035em;
  text-align:left;
  text-wrap:balance;
  word-break:auto-phrase;
}
.qp-v31-section--light .qp-v31-flow__item h3,
.qp-v31-section--soft .qp-v31-flow__item h3{color:var(--v31-ink)}
.qp-v31-flow__item p{max-width:24em;margin:0;color:var(--v31-muted-dark);font-size:12.5px;line-height:1.72}
.qp-v31-section--light .qp-v31-flow__item p,
.qp-v31-section--soft .qp-v31-flow__item p{color:var(--v31-muted)}
.qp-v31-flow__item i{position:absolute;right:20px;top:31px;color:rgba(255,255,255,.42);font-style:normal;transition:transform .35s ease}
.qp-v31-section--light .qp-v31-flow__item i,
.qp-v31-section--soft .qp-v31-flow__item i{color:#9c9c95}
.qp-v31-flow__item:hover i{transform:translateX(5px)}
.qp-v31-flow__item:last-child i{display:none}

/* ---------- diagrams / simple editorial illustrations ---------- */
.qp-v31-diagram{
  position:relative;
  min-height:300px;
  display:grid;
  place-items:center;
  padding:28px;
  border:1px solid var(--v31-line);
  overflow:hidden;
  background:linear-gradient(145deg,rgba(255,255,255,.72),rgba(243,243,240,.6));
}
.qp-v31-section--dark .qp-v31-diagram{
  border-color:var(--v31-line-dark);
  background:linear-gradient(145deg,rgba(255,255,255,.025),rgba(255,255,255,.01));
}
.qp-v31-diagram__line{
  position:absolute;left:12%;right:12%;top:50%;height:1px;
  background:linear-gradient(90deg,transparent,var(--v31-gold),transparent);
  transform:scaleX(0);transform-origin:left center;
  transition:transform 1.15s var(--v31-ease) .15s;
}
.qp-v31-diagram.is-v31-drawn .qp-v31-diagram__line{transform:scaleX(1)}
.qp-v31-diagram__node{
  position:relative;z-index:1;
  display:grid;place-items:center;
  width:112px;height:112px;
  border:1px solid var(--v31-line);
  border-radius:50%;
  background:#fff;
  text-align:center;
  opacity:0;transform:translateY(16px) scale(.96);
  transition:opacity .55s ease calc(var(--v31-i) * 90ms),transform .7s var(--v31-ease) calc(var(--v31-i) * 90ms);
}
.qp-v31-section--dark .qp-v31-diagram__node{border-color:var(--v31-line-dark);background:#111;color:#fff}
.qp-v31-diagram.is-v31-drawn .qp-v31-diagram__node{opacity:1;transform:none}
.qp-v31-diagram__node span{color:var(--v31-gold);font-size:9px;font-weight:700;letter-spacing:.15em}
.qp-v31-diagram__node strong{margin-top:4px;font-size:13px;letter-spacing:.03em}
.qp-v31-diagram--loop{
  grid-template-columns:repeat(2,112px);
  grid-template-rows:repeat(2,112px);
  gap:28px 56px;
}
.qp-v31-diagram--loop .qp-v31-diagram__line{left:25%;right:25%;top:50%;transform-origin:center}
.qp-v31-diagram--rail,
.qp-v31-diagram--handoff,
.qp-v31-diagram--funnel{
  grid-template-columns:repeat(4,minmax(90px,1fr));
  gap:18px;
}
.qp-v31-diagram--rail .qp-v31-diagram__node,
.qp-v31-diagram--handoff .qp-v31-diagram__node,
.qp-v31-diagram--funnel .qp-v31-diagram__node{width:96px;height:96px}
.qp-v31-diagram--funnel .qp-v31-diagram__node:nth-child(1){transform:scale(1.08)}
.qp-v31-diagram--funnel .qp-v31-diagram__node:nth-child(2){transform:scale(1)}
.qp-v31-diagram--funnel .qp-v31-diagram__node:nth-child(3){transform:scale(.9)}
.qp-v31-diagram--funnel .qp-v31-diagram__node:nth-child(4){transform:scale(.78)}
.qp-v31-diagram--funnel.is-v31-drawn .qp-v31-diagram__node:nth-child(1){transform:scale(1.08)}
.qp-v31-diagram--funnel.is-v31-drawn .qp-v31-diagram__node:nth-child(2){transform:scale(1)}
.qp-v31-diagram--funnel.is-v31-drawn .qp-v31-diagram__node:nth-child(3){transform:scale(.9)}
.qp-v31-diagram--funnel.is-v31-drawn .qp-v31-diagram__node:nth-child(4){transform:scale(.78)}

/* ---------- service top cards ---------- */
.qp-v31-service-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;
  margin-top:46px;
  background:var(--v31-line-dark);
  border:1px solid var(--v31-line-dark);
}
.qp-v31-service-card{
  position:relative;
  min-height:430px;
  display:grid;
  grid-template-rows:210px auto;
  padding:0 28px 30px;
  overflow:hidden;
  background:#101010;
  color:#fff;
  text-decoration:none;
  transition:background-color .35s ease;
}
.qp-v31-service-card:hover{background:#171717}
.qp-v31-service-card figure{height:210px;margin:0 -28px 26px;overflow:hidden}
.qp-v31-service-card img{width:100%;height:100%;object-fit:cover;filter:grayscale(1);transition:transform .8s var(--v31-ease),filter .4s ease}
.qp-v31-service-card:hover img{transform:scale(1.025);filter:grayscale(0)}
.qp-v31-service-card > span{color:var(--v31-gold);font-size:9.5px;font-weight:700;letter-spacing:.18em}
.qp-v31-service-card h3{max-width:20em;margin:12px 48px 10px 0;color:#fff;font-size:clamp(24px,2vw,34px);line-height:1.2;letter-spacing:-.035em;text-align:left;text-wrap:balance;word-break:auto-phrase}
.qp-v31-service-card p{max-width:36em;margin:0;color:rgba(255,255,255,.65);font-size:13px;line-height:1.72}
.qp-v31-service-card > i{position:absolute;right:28px;bottom:31px;font-style:normal;font-size:22px;transition:transform .35s ease}
.qp-v31-service-card:hover > i{transform:translate(4px,-4px)}

/* ---------- fit block ---------- */
.qp-v31-fit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:1px;
  margin-top:44px;
  background:var(--v31-line-dark);
  border:1px solid var(--v31-line-dark);
}
.qp-v31-fit-grid > div{min-height:250px;padding:32px;background:#101010}
.qp-v31-fit-grid span{color:var(--v31-gold);font-size:10px;font-weight:700;letter-spacing:.18em}
.qp-v31-fit-grid h3{max-width:18em;margin:18px 0 15px;color:#fff;font-size:clamp(24px,2vw,34px);line-height:1.25;letter-spacing:-.035em;text-align:left;text-wrap:balance;word-break:auto-phrase}
.qp-v31-fit-grid p{max-width:34em;margin:0;color:var(--v31-muted-dark);font-size:13px;line-height:1.78}

/* ---------- works ---------- */
.qp-v31-works-hero{padding:clamp(70px,7vw,110px) 0;background:var(--v31-soft);overflow:hidden}
.qp-v31-works-hero__grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(520px,1.2fr);gap:clamp(52px,7vw,110px);align-items:center}
.qp-v31-works-hero h1{margin:20px 0 18px;font-size:clamp(52px,5.4vw,82px);line-height:.98;letter-spacing:-.055em;text-align:left}
.qp-v31-works-hero p{max-width:30em;margin:0;color:var(--v31-muted);font-size:15px;line-height:1.86}
.qp-v31-inline-link{display:inline-block;margin-top:34px;padding-bottom:8px;border-bottom:1px solid #111;color:#111;font-size:10px;font-weight:700;letter-spacing:.12em;text-decoration:none}
.qp-v31-works-visual{height:390px}
.qp-v31-works-visual > span{position:absolute;z-index:2;left:-10px;top:-26px;color:transparent;background-image:url('/assets/images/section-works-title.jpg');background-size:cover;background-position:center;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(82px,8.4vw,132px);font-weight:800;line-height:.85;letter-spacing:-.065em;pointer-events:none}
.qp-v31-works-visual img{padding-top:42px}

/* ---------- next + footer ---------- */
.qp-v31-next{
  display:block;
  padding:50px 0!important;
  background:#0d0d0d!important;
  color:#fff!important;
  text-decoration:none;
}
.qp-v31-next .qp-next__title{font-size:clamp(32px,3.8vw,54px)!important}
.qp-v31-next:hover .qp-next__title span:last-child{transform:translate(5px,-5px)}
.qp-v31-next .qp-next__title span:last-child{display:inline-block;transition:transform .35s ease}
.qp-footer__brand--logo{display:block!important;width:142px!important;height:auto!important;text-decoration:none!important}
.qp-footer__brand--logo img{display:block!important;width:142px!important;height:auto!important;filter:brightness(0) invert(1)!important;opacity:.92!important}

/* ---------- TANE-like interaction language ---------- */
[data-v31-reveal]{
  opacity:0;
  transform:translate3d(0,20px,0);
  clip-path:inset(0 0 18% 0);
  transition:opacity .62s ease var(--v31-delay,0ms),transform .82s var(--v31-ease) var(--v31-delay,0ms),clip-path .82s var(--v31-ease) var(--v31-delay,0ms);
}
[data-v31-reveal].is-v31-visible{opacity:1;transform:none;clip-path:inset(0)}
.qp-v31-tile[data-v31-reveal],.qp-v31-flow__item[data-v31-reveal]{transition-delay:var(--v31-delay,0ms)}
.qp-v31-section--sticky .qp-v31-heading{position:sticky;top:106px;z-index:2;background:inherit}
.qp-v31-section--sticky .qp-v31-flow{margin-top:56px}

/* ---------- avoid ugly Japanese wraps ---------- */
.qp-v31-heading h2,
.qp-v31-tile h3,
.qp-v31-flow__item h3,
.qp-v31-service-card h3,
.qp-v31-fit-grid h3,
.qp-v31-works-hero h1,
.qp-next__title,
.qp-v31-hero .qp-title-line > span{
  word-break:auto-phrase;
  overflow-wrap:normal;
  line-break:strict;
  text-wrap:balance;
}

/* ---------- tablet ---------- */
@media (max-width:1100px){
  .qp-v31-shell{width:min(calc(100% - 56px),980px)}
  .qp-v31-heading{grid-template-columns:150px minmax(0,1fr)}
  .qp-v31-split{gap:38px}
  .qp-v31-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qp-v31-flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  .qp-v31-flow__item:nth-child(2){border-right:0}
  .qp-v31-flow__item:nth-child(-n+2){border-bottom:1px solid var(--v31-line-dark)}
  .qp-v31-section--light .qp-v31-flow__item:nth-child(-n+2),.qp-v31-section--soft .qp-v31-flow__item:nth-child(-n+2){border-color:var(--v31-line)}
  .qp-v31-works-hero__grid{grid-template-columns:1fr 1fr;gap:40px}
  .qp-v31-diagram--rail,.qp-v31-diagram--handoff,.qp-v31-diagram--funnel{grid-template-columns:repeat(2,1fr)}
}

/* ---------- mobile ---------- */
@media (max-width:760px){
  .qp-v31-shell{width:calc(100% - 34px)}
  .qp-v31-section{padding:54px 0}
  .qp-v31-heading{grid-template-columns:1fr;gap:12px;padding-top:14px}
  .qp-v31-heading h2{max-width:100%;font-size:clamp(29px,8vw,36px);line-height:1.16;letter-spacing:-.04em}
  .qp-v31-kicker{font-size:9px;white-space:normal}
  .qp-v31-split{grid-template-columns:1fr;gap:28px;margin-top:30px}
  .qp-v31-copy{font-size:14px;line-height:1.82}
  .qp-v31-chips{grid-template-columns:1fr 1fr;gap:8px}
  .qp-v31-chips span{min-height:50px;padding:11px 12px;font-size:12px}
  .qp-v31-tiles{grid-template-columns:1fr;border-left:0;margin-top:30px}
  .qp-v31-tile{min-height:0;padding:22px 0;border-left:0;border-right:0}
  .qp-v31-flow{grid-template-columns:1fr;margin-top:30px}
  .qp-v31-flow__item{min-height:0;padding:22px 36px 22px 0;border-right:0!important;border-bottom:1px solid var(--v31-line-dark)!important}
  .qp-v31-section--light .qp-v31-flow__item,.qp-v31-section--soft .qp-v31-flow__item{border-color:var(--v31-line)!important}
  .qp-v31-flow__item:last-child{border-bottom:0!important}
  .qp-v31-flow__item h3{font-size:22px}
  .qp-v31-media,.qp-v31-works-visual{min-height:0;height:250px}
  .qp-v31-diagram{min-height:250px;padding:20px}
  .qp-v31-diagram--loop{grid-template-columns:repeat(2,90px);grid-template-rows:repeat(2,90px);gap:20px 28px}
  .qp-v31-diagram__node{width:90px;height:90px}
  .qp-v31-diagram--rail,.qp-v31-diagram--handoff,.qp-v31-diagram--funnel{grid-template-columns:repeat(2,1fr);gap:14px}
  .qp-v31-diagram--rail .qp-v31-diagram__node,.qp-v31-diagram--handoff .qp-v31-diagram__node,.qp-v31-diagram--funnel .qp-v31-diagram__node{width:82px;height:82px}
  .qp-v31-service-grid{grid-template-columns:1fr;margin-top:30px}
  .qp-v31-service-card{min-height:0;grid-template-rows:180px auto;padding:0 20px 24px}
  .qp-v31-service-card figure{height:180px;margin:0 -20px 22px}
  .qp-v31-service-card h3{font-size:24px;margin-right:40px}
  .qp-v31-fit-grid{grid-template-columns:1fr;margin-top:30px}
  .qp-v31-fit-grid > div{min-height:0;padding:26px 22px}
  .qp-v31-works-hero{padding:48px 0}
  .qp-v31-works-hero__grid{grid-template-columns:1fr;gap:30px}
  .qp-v31-works-hero h1{font-size:50px}
  .qp-v31-works-visual > span{font-size:64px;top:-12px}
  .qp-v31-section--sticky .qp-v31-heading{position:relative;top:auto}
  .qp-footer__brand--logo,.qp-footer__brand--logo img{width:118px!important}
  .qp-v31-hero .qp-title,.qp-v31-hero .qp-title--medium{font-size:clamp(42px,12vw,58px)!important;line-height:.95!important}
  .qp-v31-hero .qp-title-line{white-space:normal}
}

@media (prefers-reduced-motion:reduce){
  [data-v31-reveal],.qp-v31-media,.qp-v31-works-visual,.qp-v31-diagram__node,.qp-v31-diagram__line{
    opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important;
  }
  .qp-v31-media::after,.qp-v31-works-visual::after{display:none!important}
}


/* =========================================================
   QUOREAL CHILD PAGES / V35 HEADER + WHY SPACING
   2026-09-29
   - Desktop header follows the approved wide top-page composition
   - Remove the unintended desktop header rule
   - WHY QUOREAL / 03 ONE TEAM gets a full-width, breathable flow
   ========================================================= */

@media (min-width: 1101px) {
  .qp-header,
  .qp-header.qp-header--toplike {
    --qp-v35-header-h: clamp(104px, 6.25vw, 128px);
    height: var(--qp-v35-header-h) !important;
    min-height: var(--qp-v35-header-h) !important;
    max-height: var(--qp-v35-header-h) !important;
    background: #fff !important;
    background-image: none !important;
    border: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
  }

  .qp-header::before,
  .qp-header::after,
  .qp-header__inner::before,
  .qp-header__inner::after {
    display: none !important;
    content: none !important;
  }

  .qp-header__inner {
    width: calc(100% - clamp(104px, 6vw, 128px)) !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    margin-inline: auto !important;
    padding: 0 !important;
    grid-template-columns: 1fr auto 1fr !important;
    gap: clamp(28px, 2vw, 42px) !important;
  }

  .qp-logo,
  .qp-logo--symbol {
    display: grid !important;
    place-items: center !important;
    width: clamp(50px, 3vw, 62px) !important;
    min-width: clamp(50px, 3vw, 62px) !important;
    height: clamp(50px, 3vw, 62px) !important;
    min-height: clamp(50px, 3vw, 62px) !important;
    margin: 0 !important;
  }

  .qp-logo--symbol img {
    width: clamp(48px, 2.85vw, 60px) !important;
    height: clamp(48px, 2.85vw, 60px) !important;
    max-width: none !important;
    max-height: none !important;
  }

  .qp-nav {
    height: 100% !important;
    gap: clamp(38px, 3vw, 62px) !important;
  }

  .qp-nav > a,
  .qp-nav-group > a {
    font-size: clamp(11.5px, .72vw, 14.5px) !important;
    letter-spacing: .18em !important;
  }

  .qp-nav-group {
    height: 100% !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
  }

  .qp-nav-group > a span {
    font-size: clamp(16px, .95vw, 19px) !important;
  }

  .qp-nav-popover {
    top: calc(100% - 8px) !important;
  }

  .qp-contact-link--button {
    min-width: clamp(176px, 11vw, 226px) !important;
    height: clamp(56px, 3.5vw, 72px) !important;
    min-height: clamp(56px, 3.5vw, 72px) !important;
    padding: 0 clamp(10px, .7vw, 14px) 0 clamp(22px, 1.55vw, 32px) !important;
    gap: clamp(14px, 1vw, 20px) !important;
    font-size: clamp(13px, .78vw, 16px) !important;
  }

  .qp-contact-link--button i {
    width: clamp(36px, 2.2vw, 45px) !important;
    height: clamp(36px, 2.2vw, 45px) !important;
    min-width: clamp(36px, 2.2vw, 45px) !important;
    min-height: clamp(36px, 2.2vw, 45px) !important;
    font-size: clamp(14px, .9vw, 18px) !important;
  }

  .qp-hero {
    padding-top: var(--qp-v35-header-h) !important;
  }

  .qp-hero::before {
    inset: var(--qp-v35-header-h) 0 0 !important;
  }

  /* WHY QUOREAL / 03 ONE TEAM only */
  .qp-page-why .qp-v35-one-team .qp-v31-heading {
    grid-template-columns: minmax(190px, 235px) minmax(0, 1fr) !important;
    gap: clamp(48px, 5vw, 84px) !important;
    padding-top: 28px !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-heading h2 {
    max-width: 18em !important;
    font-size: clamp(40px, 3.6vw, 58px) !important;
    line-height: 1.15 !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-split {
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: clamp(62px, 6vw, 92px) !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow {
    width: 100% !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    margin-top: 0 !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item {
    min-height: 260px !important;
    padding: 34px clamp(30px, 2.5vw, 44px) 38px 0 !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item:not(:first-child) {
    padding-left: clamp(28px, 2.4vw, 42px) !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item:last-child {
    padding-right: 0 !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item small {
    margin-top: 26px !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item h3 {
    margin: 12px 0 16px !important;
    font-size: clamp(24px, 1.9vw, 31px) !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item p {
    max-width: 20em !important;
    font-size: 13px !important;
    line-height: 1.85 !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-flow__item i {
    right: clamp(18px, 1.8vw, 30px) !important;
    top: 38px !important;
  }

  .qp-page-why .qp-v35-one-team .qp-v31-copy {
    max-width: 760px !important;
    margin-top: 38px !important;
  }
}