

.editorial-section {
   position:relative;
   padding-block:var(--band);
   border-bottom:1px solid var(--line);
}


.editorial-section > :first-child {
   margin-top:0;
}


.editorial-section > :last-child {
   margin-bottom:0;
}


.editorial-section:last-of-type {
   border-bottom:0;
}


.editorial-section-dense {
   padding-block:var(--band-tight);
}


.editorial-section-spacious {
   padding-block:var(--band-open);
}


/* Statement Block: Heading is a full grammatical sentence explaining business fact */
.statement-block {
   max-width:54rem;
   margin-block-end:var(--space-l);
}


.statement-heading {
   font-family:var(--font-editorial);
   font-size:var(--jawe-e24);
   font-weight:500;
   line-height:1.22;
   letter-spacing:-0.018em;
   color:var(--ink);
   text-wrap:balance;
   margin-block-end:var(--space-s);
}


.statement-lede {
   font-size:var(--jawe-094);
   line-height:1.54;
   color:var(--ink-soft);
   max-width:var(--container-reading);
}


.statement-prose {
   font-size:var(--jawe-195);
   line-height:1.62;
   color:var(--ink);
   max-width:var(--container-reading);

}


.photograph-band {
   width:100%;
   margin-block:0;
   border-block:1px solid var(--line);
   background-color:var(--surface-2);
   position:relative;
   overflow:hidden;
}


.photograph-band img {
   width:100%;
   aspect-ratio:16 / 10;
   max-height:820px;
   object-fit:cover;
   display:block;
}


.photograph-caption {
   padding:var(--space-2xs) var(--space-s);
   background-color:var(--surface);
   border-top:1px solid var(--line);
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   color:var(--ink-soft);
   letter-spacing:0.04em;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:var(--space-xs);
}


@media (min-width: 768px) {
   .photograph-caption {
      padding-inline:var(--space-m);
   }
}


/* Ledger Rule Decorative Strips */
.ledger-banner {
   border-top:1px solid var(--line);
   border-bottom:1px solid var(--line);
   padding:var(--space-2xs) 0;
   margin-block:var(--space-m);
   background-image:repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent calc(var(--ledger-gap) - 1px),
      var(--line-hair) calc(var(--ledger-gap) - 1px),
      var(--line-hair) var(--ledger-gap)
   );
   background-size:100% var(--ledger-gap);
}


.hero-stacked {
   position:relative;
   background-color:var(--ground);
   border-bottom:1px solid var(--line);
}


.hero-stacked-header {
   padding-block-start:var(--space-xl);
   padding-block-end:var(--space-l);
}


.hero-stacked-grid {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-m);
   align-items:end;
}


@media (min-width: 960px) {
   .hero-stacked-grid {
      grid-template-columns:1.5fr 1fr;
      gap:var(--space-xl);
   }
}


.hero-display-title {
   font-family:var(--jawe-9fd);
   font-size:var(--jawe-6f5);
   font-weight:700;
   line-height:1.05;
   letter-spacing:-0.03em;
   color:var(--ink);
   text-wrap:balance;
   margin-block-end:0;
   max-width:13ch;
}


.hero-stacked-lede {
   font-size:var(--jawe-094);
   line-height:1.52;
   color:var(--ink-soft);
   max-width:44ch;
   margin-block-end:0;
   padding-bottom:0.25rem;
}


/* Full-bleed hero photograph: landscape bleeds edge-to-edge to the fold */
.hero-fullbleed {
   width:100%;
   position:relative;

   border-top:1px solid var(--line);
   background-color:var(--surface-2);
}


.hero-fullbleed img {
   width:100%;
   aspect-ratio:3 / 2;
   max-height:720px;
   object-fit:cover;
   object-position:15% 85%;
   display:block;
}


@media (min-width: 768px) {
   .hero-fullbleed img {
      aspect-ratio:16 / 9;
      max-height:780px;
      object-position:12% 88%;
   }
}


.hero-quiet-action {
   position:absolute;
   top:var(--space-m);
   right:var(--space-m);
   z-index:10;
}


@media (min-width: 1024px) {
   .hero-quiet-action {
      top:var(--space-l);
      right:var(--space-l);
   }
}


.hero-quiet-action .btn {
   background-color:var(--accent);
   border:1px solid var(--accent);
   color:var(--accent-ink);
   box-shadow:0 4px 18px rgba(25, 128, 142, 0.35);
}


.hero-quiet-action .btn:hover {
   background-color:#156d79;
   border-color:#125c67;
   color:var(--accent-ink);
   transform:translateY(-1px);
}


.hero-quiet-action .btn:active {
   background-color:#0f4b54;
   border-color:#0b383f;
   color:var(--accent-ink);
   transform:translateY(1px);
}


/* data-opening wrapper for first screen catalogue pieces */
.opening-catalogue {
   padding-block:var(--space-m) var(--space-l);
   background-color:var(--ground);
}


.pinned-sequence {
   position:relative;

   width:100%;
   background-color:var(--surface);
   border-block:1px solid var(--line);
}


.pinned-viewport {
   position:relative;
   min-height:100vh;
   min-height:100svh;
   display:flex;
   flex-direction:column;
}


@media (min-width: 900px) {
   .pinned-viewport {
      position:sticky;
      top:0;
      height:100vh;
      height:100svh;
      overflow:hidden;
   }
}


.pinned-progress-track {
   position:absolute;
   top:0;
   left:0;
   right:0;
   height:3px;
   background-color:var(--line-hair);
   z-index:40;
}


.pinned-progress-bar {
   height:100%;
   width:0%;
   background-color:var(--accent);
   transition:width 100ms linear;
}


.pinned-container {
   flex-grow:1;
   display:flex;
   flex-direction:column;
   justify-content:center;
   padding-block:var(--space-xl);
}


.pinned-scene-stack {
   position:relative;
   width:100%;
}


.pinned-scene {
   opacity:1;
   transition:opacity var(--duration-medium) ease, transform var(--duration-medium) ease;
}


@media (min-width: 900px) {
   .pinned-scene {
      position:absolute;
      inset:0;
      opacity:0;
      pointer-events:none;
      transform:translateY(12px);
   }


   .pinned-scene.is-active {
      opacity:1;
      pointer-events:auto;
      transform:translateY(0);
      position:relative;
   }
}


.portfolio-mosaic {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-m);
   position:relative;
}


@media (min-width: 640px) {
   .portfolio-mosaic {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}


@media (min-width: 1080px) {
   .portfolio-mosaic {
      grid-template-columns:repeat(3, minmax(0, 1fr));
   }
}


.mosaic-card-lead {
   grid-column:1 / -1;
}


@media (min-width: 900px) {
   .mosaic-card-wide {
      grid-column:span 2;
   }
}


.mosaic-card {
   background-color:transparent;
   border:0;
   border-top:1px solid var(--line);
   padding-top:var(--space-s);
   display:flex;
   flex-direction:column;
   position:relative;
   transition:border-color var(--duration-micro) ease;
}


.mosaic-card:hover {
   border-top-color:var(--accent);
}


.mosaic-media {
   width:100%;
   aspect-ratio:16 / 10;
   overflow:hidden;
   background-color:var(--surface-2);
   border-bottom:1px solid var(--line-hair);
}


.mosaic-media img {
   width:100%;
   height:100%;
   object-fit:cover;
   display:block;
}


.mosaic-body {
   padding:var(--space-s) var(--space-m);
   display:flex;
   flex-direction:column;
   flex-grow:1;
}


.mosaic-title {
   font-family:var(--font-editorial);
   font-size:var(--jawe-094);
   margin-block-end:var(--space-3xs);
}


.mosaic-meta {
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   color:var(--ink-soft);
   text-transform:uppercase;
   letter-spacing:0.05em;
   margin-block-end:var(--space-xs);
}


.mosaic-text {
   font-size:var(--step--1);
   line-height:1.5;
   color:var(--ink);
   margin-block-end:var(--space-s);
}


.mosaic-specs {
   margin-block-start:auto;
   padding-block-start:var(--space-2xs);
   border-top:1px solid var(--line-hair);
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   color:var(--ink-soft);
   display:flex;
   justify-content:space-between;
   align-items:center;
}


.legal-layout-margin {
   padding-block:var(--space-xl);
}


.legal-margin-row {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-s);
   padding-block:var(--space-m);
   border-bottom:1px solid var(--line-hair);
}


@media (min-width: 920px) {
   .legal-margin-row {
      grid-template-columns:minmax(0, 1fr) 260px;
      gap:var(--space-xl);
      align-items:start;
   }
}


.legal-main-col {
   min-width:0;
}


.legal-main-col p {
   max-width:var(--container-reading);
   font-size:var(--jawe-195);
   line-height:1.62;
   color:var(--ink);
   margin-block-end:var(--space-xs);
}


.legal-main-col p:last-child {
   margin-block-end:0;
}


.legal-margin-note {
   background-color:var(--surface);
   border-left:2px solid var(--accent);
   padding:var(--space-xs) var(--space-s);
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   line-height:1.5;
   color:var(--ink);
}


@media (min-width: 920px) {
   .legal-margin-note {
      background-color:transparent;
      border-left:1px solid var(--line);
      padding:var(--space-2xs) 0 var(--space-2xs) var(--space-s);
      color:var(--ink-soft);
   }
}


.legal-margin-note .note-title {
   display:block;
   font-weight:600;
   color:var(--ink);
   text-transform:uppercase;
   letter-spacing:0.06em;
   margin-block-end:var(--space-3xs);
}


.legal-margin-note .note-data {
   color:var(--ink-soft);
}


.legal-margin-note .note-data strong {
   color:var(--ink);
}


.chips-sticky-nav {
   position:sticky;
   top:0;
   z-index:60;
   background-color:var(--ground-alpha);
   backdrop-filter:blur(10px);
   -webkit-backdrop-filter:blur(10px);
   border-block:1px solid var(--line);
   padding-block:var(--space-2xs);
}


.chips-scroll-rail {
   display:flex;
   align-items:center;
   gap:var(--space-2xs);
   overflow-x:auto;
   -webkit-overflow-scrolling:touch;
   scrollbar-width:thin;
   padding-inline:var(--space-s);
}


@media (min-width: 768px) {
   .chips-scroll-rail {
      padding-inline:var(--space-m);
   }
}


.jump-chip {
   display:inline-flex;
   align-items:center;
   min-height:40px;
   padding:0.35rem 0.85rem;
   background-color:var(--surface);
   border:1px solid var(--line);
   color:var(--ink);
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   font-weight:500;
   text-decoration:none;
   white-space:nowrap;
   flex-shrink:0;
   transition:background-color var(--duration-micro) ease, border-color var(--duration-micro) ease;
}


.jump-chip:hover {
   background-color:var(--surface-2);
   border-color:var(--ink-soft);
   color:var(--ink);
}


.jump-chip:active {
   background-color:var(--line);
}


.jump-chip:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:2px;
}


.jump-chip.is-active {
   background-color:var(--ink);
   border-color:var(--ink);
   color:var(--ground);
}


/* Cookies Section layout */
.cookie-section-item {
   padding-block:var(--space-xl);
   border-bottom:1px solid var(--line);
}


.cookie-standfirst {
   font-family:var(--font-editorial);
   font-style:italic;
   font-size:var(--jawe-094);
   line-height:1.45;
   color:var(--ink);
   max-width:58ch;
   margin-block-end:var(--space-m);
}


.terms-toolbar {
   display:flex;
   flex-wrap:wrap;
   align-items:center;
   justify-content:space-between;
   gap:var(--space-s);
   padding-block:var(--space-s);
   margin-block-end:var(--space-m);
   border-bottom:1px solid var(--line);
}


.terms-disclosure-stack {
   display:flex;
   flex-direction:column;
   gap:var(--space-s);
   margin-block-end:var(--space-xl);
}


.terms-detail {
   background-color:var(--surface);
   border:1px solid var(--line);
   transition:border-color var(--duration-micro) ease;
}


.terms-detail[open] {
   border-color:var(--ink);
   background-color:var(--ground);
}


.terms-summary {
   padding:var(--space-s) var(--space-m);
   font-family:var(--font-editorial);
   font-size:var(--jawe-094);
   font-weight:500;
   line-height:1.35;
   color:var(--ink);
   cursor:pointer;
   list-style:none;
   display:flex;
   align-items:center;
   justify-content:space-between;
   gap:var(--space-s);
}


.terms-summary::-webkit-details-marker {
   display:none;
}


.terms-summary:hover {
   background-color:var(--surface-2);
}


.terms-summary:focus-visible {
   outline:2px solid var(--accent);
   outline-offset:-2px;
}


.terms-summary-icon {
   width:28px;
   height:28px;
   display:inline-flex;
   align-items:center;
   justify-content:center;
   border:1px solid var(--line);
   flex-shrink:0;
   transition:transform var(--duration-micro) ease, background-color var(--duration-micro) ease;
}


.terms-detail[open] .terms-summary-icon {
   transform:rotate(180deg);
   background-color:var(--ink);
   color:var(--ground);
   border-color:var(--ink);
}


.terms-content {
   padding:var(--space-s) var(--space-m) var(--space-m);
   border-top:1px solid var(--line);
   font-size:var(--jawe-195);
   line-height:1.62;
   color:var(--ink);
}


.terms-content p {
   margin-block-end:var(--space-s);
}


.terms-content p:last-child {
   margin-block-end:0;
}


.pricing-deck {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-m);
   margin-block:var(--space-l);
}


@media (min-width: 800px) {
   .pricing-deck {
      grid-template-columns:repeat(2, minmax(0, 1fr));
   }
}


.pricing-card {
   background-color:var(--surface);
   border:1px solid var(--line);
   padding:var(--space-m);
   display:flex;
   flex-direction:column;
}


@media (min-width: 960px) {
   .pricing-card {
      padding:var(--space-l);
   }
}


.pricing-card.is-featured {
   border-color:var(--ink);
   background-color:#f4f8fa;
   box-shadow:0 4px 20px rgba(39, 41, 43, 0.06);
}


.pricing-header {
   border-bottom:1px solid var(--line);
   padding-block-end:var(--space-s);
   margin-block-end:var(--space-s);
}


.pricing-tier-name {
   font-family:var(--jawe-9fd);
   font-size:var(--jawe-70f);
   margin-block-end:var(--space-3xs);
}


.pricing-amount {
   font-family:var(--jawe-ce2);
   font-size:var(--jawe-e24);
   font-weight:600;
   color:var(--ink);
   font-variant-numeric:tabular-nums;
   margin-block-end:var(--space-3xs);
}


.pricing-timeline {
   font-family:var(--jawe-ce2);
   font-size:var(--step--1);
   color:var(--ink-soft);
   text-transform:uppercase;
   letter-spacing:0.05em;
}


.pricing-features {
   list-style:none;
   padding:0;
   margin:0;
   margin-block-end:var(--space-l);
   display:flex;
   flex-direction:column;
   gap:var(--space-xs);
   flex-grow:1;
}


.pricing-feature-item {
   display:flex;
   align-items:baseline;
   gap:var(--space-2xs);
   font-size:var(--step--1);
   line-height:1.5;
   color:var(--ink);
}


.pricing-feature-item .icon {
   color:var(--accent);
   margin-top:0.2rem;
}


.process-flow {
   display:flex;
   flex-direction:column;
   gap:0;
   border-left:1px solid var(--line);
   margin-block:var(--space-l);
   padding-left:var(--space-s);
}


@media (min-width: 768px) {
   .process-flow {
      padding-left:var(--space-m);
   }
}


.process-step {
   position:relative;
   padding-block:var(--space-m);
   border-bottom:1px solid var(--line-hair);
}


.process-step:last-child {
   border-bottom:0;
}


.process-step::before {
   content:"";
   position:absolute;
   top:calc(var(--space-m) + 0.5rem);
   left:calc(-1 * var(--space-s) - 5px);
   width:9px;
   height:9px;
   background-color:var(--ink);
   border:1px solid var(--ground);
}


@media (min-width: 768px) {
   .process-step::before {
      left:calc(-1 * var(--space-m) - 5px);
   }
}


.process-step-week {
   font-family:var(--jawe-ce2);
   font-size:var(--step--1);
   color:var(--accent);
   text-transform:uppercase;
   letter-spacing:0.06em;
   margin-block-end:var(--space-3xs);
}


.process-step-title {
   font-family:var(--font-editorial);
   font-size:var(--jawe-70f);
   margin-block-end:var(--space-2xs);
}


.process-step-body {
   font-size:var(--jawe-195);
   line-height:1.6;
   color:var(--ink-soft);
   max-width:var(--container-reading);
}


.contact-layout {
   display:grid;
   grid-template-columns:1fr;
   gap:var(--space-l);
   margin-block:var(--space-xl);
}


@media (min-width: 860px) {
   .contact-layout {
      grid-template-columns:1fr 1.25fr;
   }
}


.contact-dossier {
   background-color:var(--surface);
   border:1px solid var(--line);
   padding:var(--space-m);
   display:flex;
   flex-direction:column;
   gap:var(--space-m);
}


@media (min-width: 960px) {
   .contact-dossier {
      padding:var(--space-l);
   }
}


.dossier-entry {
   border-bottom:1px solid var(--line-hair);
   padding-block-end:var(--space-s);
}


.dossier-entry:last-child {
   border-bottom:0;
   padding-block-end:0;
}


.dossier-label {
   font-family:var(--jawe-ce2);
   font-size:var(--step--2);
   text-transform:uppercase;
   letter-spacing:0.08em;
   color:var(--ink-soft);
   margin-block-end:var(--space-3xs);
}


.dossier-val {
   font-size:var(--jawe-195);
   line-height:1.5;
   color:var(--ink);
}


.dossier-val a {
   color:var(--ink);
   text-decoration:underline;
   text-decoration-color:var(--line);
}


.dossier-val a:hover {
   color:var(--accent);
   text-decoration-color:var(--accent);
}


.scene-404 {
   padding-block:var(--space-2xl);
   display:flex;
   flex-direction:column;
   align-items:flex-start;
   max-width:48rem;
   margin-inline:auto;
}


.numeral-404 {
   font-family:var(--jawe-9fd);
   font-size:clamp(4rem, 12vw, 8.5rem);
   line-height:0.95;
   color:var(--ink-soft);
   letter-spacing:-0.04em;
   margin-block-end:var(--space-s);
   border-bottom:1px solid var(--line);
   width:100%;
}


.links-404 {
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-s);
   margin-block-start:var(--space-m);
}
