/* gd-growth v1 (v230, 3 Nov 2026) · Graphic Design studio accents. OWN CODE written from scratch.
   Library pieces used as DESIGN REFERENCE ONLY (Framer 'Limited', licence UNCLEAR): effects/brush-reveal, backgrounds/grain,
   text/animated-colour-typo, galleries/before-after-slide + image-comparison, galleries/masonry-grid-appear. No library code or assets copied.
   Scope: body.gdg only (graphic-design.html). Header, menus, glass, colours, fonts and Ted unchanged. */
body.gdg{--gdg-ink:#14204A;--gdg-muted:#4A5578;--gdg-line:#D6DCE8;--gdg-cream:#FBF8F2;--gdg-or:#BF5508;--gdg-orh:#A64508;--gdg-navy:#253679;
 --gdg-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .12 0 0 0 0 .29 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* 1 · Paper grain (ref: backgrounds/grain). Static, behind content, light bands only. */
body.gdg main>section.hero,body.gdg main>section.band.tint,body.gdg main>section.band.mist,body.gdg main>section.band.alt,body.gdg main>section.gdg-taste{position:relative;isolation:isolate}
body.gdg main>section.hero::before,body.gdg main>section.band.tint::before,body.gdg main>section.band.mist::before,body.gdg main>section.band.alt::before,body.gdg main>section.gdg-taste::before{
 content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--gdg-grain);background-size:220px 220px;opacity:.07}

/* 2 · Brush-stroke heading marks (ref: effects/brush-reveal). Replaces the flat bar with a painted stroke that sweeps in once. */
body.gdg main .sec-head h2::after{width:96px;height:12px;border-radius:0;margin-top:12px;
 background:linear-gradient(90deg,#F57E20 0 68%,#FEC623 68%);
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.5C9 3.2 20 2.6 33 3.4s25 1.8 38 .9 18-.6 23 1.1c1.6 1.7.4 3.6-2.6 4-8.5 1-18 .3-29 .9s-23 1.7-35 1.4S3 11 2 9.6z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 96 12' preserveAspectRatio='none'%3E%3Cpath d='M2 7.5C9 3.2 20 2.6 33 3.4s25 1.8 38 .9 18-.6 23 1.1c1.6 1.7.4 3.6-2.6 4-8.5 1-18 .3-29 .9s-23 1.7-35 1.4S3 11 2 9.6z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
body.gdg.gdg-js main .sec-head h2::after{clip-path:inset(0 100% 0 0);transition:clip-path .9s cubic-bezier(.2,.7,.2,1) .15s}
body.gdg.gdg-js main .sec-head.gdg-in h2::after{clip-path:inset(0 0 0 0)}

/* 3 · Headline colour accent (ref: text/animated-colour-typo). All stops >= 5.9:1 on the hero background. */
body.gdg .hero h1 .squiggle{background:linear-gradient(90deg,#253679,#124A92,#6A3FD8,#A64508,#253679);background-size:300% 100%;
 -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:gdg-hue 9s ease-in-out infinite alternate}
body.gdg .hero h1 .squiggle svg{-webkit-text-fill-color:initial}
@keyframes gdg-hue{from{background-position:0 50%}to{background-position:100% 50%}}
@media (forced-colors:active){body.gdg .hero h1 .squiggle{background:none;color:CanvasText;-webkit-text-fill-color:CanvasText}}

/* 4 · Studio frame: crop marks on the showcase frame and the teaser card */
body.gdg .gdg-crop{position:relative}
body.gdg .gdg-crop>.gdg-cm{position:absolute;width:18px;height:18px;pointer-events:none;border-color:#4A5578;border-style:solid;border-width:0;opacity:.7}
body.gdg .gdg-cm.tl{top:-10px;left:-10px;border-top-width:1.5px;border-left-width:1.5px}
body.gdg .gdg-cm.tr{top:-10px;right:-10px;border-top-width:1.5px;border-right-width:1.5px}
body.gdg .gdg-cm.bl{bottom:-10px;left:-10px;border-bottom-width:1.5px;border-left-width:1.5px}
body.gdg .gdg-cm.br{bottom:-10px;right:-10px;border-bottom-width:1.5px;border-right-width:1.5px}

/* 5 · Taste of the course teaser (ref: galleries/before-after-slide, image-comparison). Own compare slider, text only, no lesson content. */
body.gdg .gdg-taste{background:var(--gdg-cream);padding:72px 0}
body.gdg .gdg-card{max-width:980px;margin:0 auto;display:grid;grid-template-columns:1.05fr 1fr;gap:36px;align-items:center;padding:32px;
 background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #D6DCE8;border-radius:22px;box-shadow:0 18px 40px -28px rgba(20,32,74,.35)}
body.gdg .gdg-k{display:inline-block;position:relative;margin:0 0 10px;font:700 13px/1.2 var(--font,system-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--gdg-ink);padding:6px 12px 6px 10px;z-index:0}
body.gdg .gdg-k::before{content:"";position:absolute;inset:0;z-index:-1;background:#FEC623;
 -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 9C14 3 40 2 62 3s31 1 34 4c3 4 2 13-1 17-4 4-26 3-47 3S6 29 3 24C0 20 1 13 3 9z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
 mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 30' preserveAspectRatio='none'%3E%3Cpath d='M3 9C14 3 40 2 62 3s31 1 34 4c3 4 2 13-1 17-4 4-26 3-47 3S6 29 3 24C0 20 1 13 3 9z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
body.gdg.gdg-js .gdg-k::before{clip-path:inset(0 100% 0 0);transition:clip-path .8s cubic-bezier(.2,.7,.2,1) .1s}
body.gdg.gdg-js .gdg-taste.gdg-in .gdg-k::before{clip-path:inset(0 0 0 0)}
body.gdg .gdg-card h2{margin:0 0 12px;color:var(--gdg-ink);font-family:var(--font-d,system-ui)}
body.gdg .gdg-tip{margin:0;color:var(--gdg-ink);font-size:17px;line-height:1.6;max-width:44ch}
/* compare */
body.gdg .gdg-cmp{position:relative;--p:50%;border-radius:16px;overflow:hidden;aspect-ratio:4/3;border:1px solid #D6DCE8;user-select:none;touch-action:pan-y}
body.gdg .gdg-pane{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;padding:24px}
body.gdg .gdg-pane .w{font:800 clamp(28px,4.4vw,46px)/1.05 var(--font-d,system-ui);letter-spacing:-.01em}
body.gdg .gdg-pane .s{font:500 15px/1.4 var(--font,system-ui)}
body.gdg .gdg-low{background:#D6DCE8;color:#B8C0D2}
body.gdg .gdg-high{background:#FBF8F2;color:#14204A;clip-path:inset(0 0 0 var(--p))}
body.gdg .gdg-tag{position:absolute;bottom:12px;z-index:2;font:700 12px/1 var(--font,system-ui);padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.78);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border:1px solid #D6DCE8;color:#14204A}
body.gdg .gdg-tag small{display:block;margin-top:4px;font-weight:500;font-size:12px;color:#4A5578}
body.gdg .gdg-tag{border-radius:12px;line-height:1.15}
body.gdg .gdg-tag.l{left:12px}body.gdg .gdg-tag.r{right:12px}
body.gdg .gdg-bar{position:absolute;top:0;bottom:0;left:var(--p);width:0;z-index:3;pointer-events:none}
body.gdg .gdg-bar::before{content:"";position:absolute;top:0;bottom:0;left:-1.5px;width:3px;background:#BF5508}
body.gdg .gdg-bar::after{content:"";position:absolute;top:50%;left:-20px;width:40px;height:40px;margin-top:-20px;border-radius:50%;background:#BF5508;box-shadow:0 0 0 3px #fff;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M16 14l-6 6 6 6M24 14l6 6-6 6' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body.gdg .gdg-cmp:hover .gdg-bar::after{background-color:#A64508}
body.gdg .gdg-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;z-index:4}
body.gdg .gdg-cmp.gdg-focus{outline:3px solid #253679;outline-offset:3px}
body.gdg .gdg-hint{margin:10px 0 0;font-size:14px;color:#4A5578}
body.gdg.gdg-js .gdg-taste .gdg-cmp{clip-path:inset(0 100% 0 0 round 16px);transition:clip-path 1.1s cubic-bezier(.2,.7,.2,1) .25s}
body.gdg.gdg-js .gdg-taste.gdg-in .gdg-cmp{clip-path:inset(0 0 0 0 round 16px)}

@media (max-width:760px){
 body.gdg .gdg-taste{padding:48px 0}
 body.gdg .gdg-card{grid-template-columns:1fr;gap:22px;padding:22px 18px}
 body.gdg .gdg-tip{font-size:16px}
 body.gdg .gdg-crop>.gdg-cm{display:none}
}
@media (prefers-reduced-motion:reduce){
 body.gdg .hero h1 .squiggle{animation:none;background-position:0 50%}
 body.gdg.gdg-js main .sec-head h2::after,body.gdg.gdg-js .gdg-k::before,body.gdg.gdg-js .gdg-taste .gdg-cmp{clip-path:none!important;transition:none!important}
}